Skip to content

Commit b2c0fc6

Browse files
andrewtavisandrewtavis
committed
#427 WIP add basic histoire setup for later + type fixes
1 parent 90cdbf9 commit b2c0fc6

24 files changed

+121
-40
lines changed

‎CONTRIBUTING.md

+13
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,19 @@ You can then visit http://localhost:8000/ to see the development backend build o
256256
</p>
257257
</details>
258258

259+
<!-- <a id="component-stories"></a>
260+
261+
### Component stories [`⇧`](#contents)
262+
263+
activist uses [histoire](https://histoire.dev/) for stories so that frontend components and their documentation are all written in Vue. To view the stories, enter the following in the command line:
264+
265+
```bash
266+
cd frontend
267+
yarn run story:dev
268+
```
269+
270+
From there you'll be able to visit http://localhost:6006/ to view the documentation. Contributions are very welcome! -->
271+
259272
<a id="style-guide"></a>
260273

261274
## Style guide [`⇧`](#contents)

‎backend/backend/custom_settings.py

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
'''
2-
This file contains granular settings specifically related to the Activists project.
3-
For more general settings strictly related to the functioning of Django and its components,
4-
check the path: backend/backend/settings.py
2+
This file contains granular settings specifically related to the activist project.
3+
For more general settings strictly related to the functioning of Django and its components,
4+
please check the path: backend/backend/settings.py
55
'''
66

77
# Pagination settings
8-
PAGINATION_PAGE_SIZE = 20
9-
PAGINATION_MAX_PAGE_SIZE = 100
8+
PAGINATION_PAGE_SIZE = 20
9+
PAGINATION_MAX_PAGE_SIZE = 100

‎frontend/components/PasswordStrengthIndicator.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
22
<div class="h-4">
3-
<div class="h-1 bg-light-distinct-text dark:bg-dark-distinct-text rounded-md">
3+
<div
4+
class="h-1 bg-light-distinct-text dark:bg-dark-distinct-text rounded-md"
5+
>
46
<div
57
class="h-1 transition-width ease-in duration-500 rounded-md"
68
:class="!!passwordValue.length ? `${color}` : ''"

‎frontend/components/btn/route/BtnRouteInternal.vue

+2
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,7 @@ import { getBtnDynamicClass } from "~/utils/btnUtils";
2020
2121
const props = defineProps<BtnRoute>();
2222
23+
const localePath = useLocalePath();
24+
2325
const btnDynamicClass = getBtnDynamicClass(props.cta, props.fontSize);
2426
</script>

‎frontend/components/card/CardConnect.vue

+15-5
Original file line numberDiff line numberDiff line change
@@ -90,10 +90,20 @@
9090
<PopupNewField
9191
@on-cta-clicked="emit('on-new-account', account)"
9292
@on-close-clicked="onClose(close)"
93-
:title="'Add Account'"
94-
:fieldNamePrompt="'Link to account'"
95-
:ctaBtnLabel="'Add'"
96-
:ctaBtnAriaLabel="'Add a new field'"
93+
:title="$t('components.card-connect.app-account-popup-title')"
94+
:fieldNamePrompt="
95+
$t(
96+
'components.card-connect.app-account-popup-field-name-prompt'
97+
)
98+
"
99+
:ctaBtnLabel="
100+
$t('components.card-connect.app-account-popup-cta-btn-label')
101+
"
102+
:ctaBtnAriaLabel="
103+
$t(
104+
'components.card-connect.app-account-popup-cta-btn-aria-label'
105+
)
106+
"
97107
/>
98108
</PopoverPanel>
99109
</transition>
@@ -107,7 +117,7 @@
107117
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
108118
109119
const props = defineProps<{
110-
socialLinks: string[];
120+
socialLinks?: string[];
111121
userIsAdmin?: boolean;
112122
}>();
113123

‎frontend/components/card/CardDangerZone.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
<script setup lang="ts">
5959
defineProps<{
6060
description: string;
61-
ctaBtnText: { type: string; required: true };
61+
ctaBtnText: string;
6262
ctaBtnAriaLabel: string;
6363
}>();
6464
</script>

‎frontend/components/card/CardDatePicker.vue

-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636
/>
3737
</div>
3838
<DatePicker
39-
v-model="dateArray"
4039
:first-day-of-week="2"
4140
trim-weeks
4241
expanded

‎frontend/components/card/CardGetInvolved.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<p>
5151
{{ $t("components.card-get-involved.legal-disclaimer-subtext") }}
5252
</p>
53-
<CardLegalDisclaimer :disclaimer="disclaimer" />
53+
<CardLegalDisclaimer v-if="disclaimer" :disclaimer="disclaimer" />
5454
<div class="flex pt-2 w-max">
5555
<BtnRouteInternal
5656
class="w-full"

‎frontend/components/card/CardMetric.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div
77
class="pb-1 text-3xl font-bold tracking-tighter sm:text-4xl md:text-3xl xl:text-4xl"
88
>
9-
{{ number }}
9+
{{ number.toString() }}
1010
</div>
1111
<div class="text-lg font-bold xl:text-xl">
1212
{{ text }}
@@ -17,7 +17,7 @@
1717
<script setup lang="ts">
1818
defineProps<{
1919
text: string;
20-
number: string;
20+
number: number;
2121
textColor: string;
2222
borderColor: string;
2323
backgroundColor: string;

‎frontend/components/card/CardMetricsOverview.vue

+9-5
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,28 @@
99
<div class="h-full grid grid-cols-2 gap-3 lg:gap-4 lg:grid-cols-4">
1010
<CardMetric
1111
:text="$t('_global.events')"
12-
number="123"
12+
:number="metrics['total events']"
1313
textColor="text-light-text dark:text-dark-text"
1414
borderColor="border-light-text dark:border-dark-text"
1515
backgroundColor="bg-light-distinct dark:bg-dark-distinct hover:bg-light-highlight dark:hover:bg-dark-highlight active:bg-light-distinct active:dark:bg-dark-distinct"
1616
/>
1717
<CardMetric
1818
:text="$t('components.card-metrics-overview.action')"
19-
number="100"
19+
:number="metrics['action events']"
2020
textColor="text-light-text dark:text-dark-action-red"
2121
borderColor="border-light-text dark:border-dark-action-red"
2222
backgroundColor="bg-light-action-red/60 dark:bg-dark-action-red/20 hover:bg-light-action-red/50 hover:dark:bg-dark-action-red/30 active:bg-light-action-red/60 active:dark:bg-dark-action-red/20"
2323
/>
2424
<CardMetric
2525
:text="$t('components.card-metrics-overview.learn')"
26-
number="23"
26+
:number="metrics['learn events']"
2727
textColor="text-light-text dark:text-dark-learn-blue"
2828
borderColor="border-light-text dark:border-dark-learn-blue"
2929
backgroundColor="bg-light-learn-blue/60 dark:bg-dark-learn-blue/20 hover:bg-light-learn-blue/50 hover:dark:bg-dark-learn-blue/30 active:bg-light-learn-blue/60 active:dark:bg-dark-learn-blue/20"
3030
/>
3131
<CardMetric
3232
:text="$t('components.card-metrics-overview.new-organizations')"
33-
number="10"
33+
:number="metrics['new orgs']"
3434
textColor="text-light-text dark:text-dark-accepted-green"
3535
borderColor="border-light-text dark:border-dark-accepted-green"
3636
backgroundColor="bg-light-accepted-green/60 dark:bg-dark-accepted-green/20 hover:bg-light-accepted-green/50 dark:hover:bg-dark-accepted-green/30 active:bg-light-accepted-green/60 active:dark:bg-dark-accepted-green/20"
@@ -40,7 +40,11 @@
4040
</template>
4141

4242
<script setup lang="ts">
43+
interface Metrics {
44+
[key: string]: number;
45+
}
46+
4347
defineProps<{
44-
metrics: string[];
48+
metrics: Metrics;
4549
}>();
4650
</script>

‎frontend/components/card/change-account-info/CardChangeAccountInfo.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<script setup lang="ts">
2020
defineProps<{
21-
ctaLabel: String;
22-
ctaAriaLabel: String;
21+
ctaLabel: string;
22+
ctaAriaLabel: string;
2323
}>();
2424
</script>

‎frontend/components/card/search-result/CardSearchResult.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@
33
class="flex flex-col justify-center px-3 py-4 card-style md:justify-start md:flex-row md:grow lg:px-5 md:py-3"
44
>
55
<CardSearchResultOrganization
6-
v-if="searchResultType === 'organization'"
6+
v-if="searchResultType === 'organization' && organization"
77
:organization="organization"
88
:reduced="reduced"
99
/>
1010
<CardSearchResultEvent
11-
v-else-if="searchResultType === 'event'"
11+
v-else-if="searchResultType === 'event' && event"
1212
:event="event"
1313
:reduced="reduced"
1414
/>
1515
<CardSearchResultResource
16-
v-else-if="searchResultType === 'resource'"
16+
v-else-if="searchResultType === 'resource' && resource"
1717
:resource="resource"
1818
:isPrivate="isPrivate"
1919
:reduced="reduced"
2020
/>
2121
<CardSearchResultUser
22-
v-else-if="searchResultType === 'user'"
22+
v-else-if="searchResultType === 'user' && user"
2323
:user="user"
2424
:isPrivate="isPrivate"
2525
:reduced="reduced"

‎frontend/components/icon/IconOrganizationStatus.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,6 @@
3939

4040
<script setup lang="ts">
4141
defineProps<{
42-
status: "approved";
42+
status: string;
4343
}>();
4444
</script>

‎frontend/components/landing/LandingContent.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
:label="`${btnText1}`"
4040
:linkTo="`${btnURL1}`"
4141
fontSize="xl"
42-
:ariaLabel="btnAriaLabel1 ? btnAriaLabel1 : null"
42+
:ariaLabel="btnAriaLabel1"
4343
/>
4444
</div>
4545
<!-- Note: image right of content. -->
@@ -109,7 +109,7 @@
109109
:label="`${btnText1}`"
110110
:linkTo="`${btnURL1}`"
111111
fontSize="xl"
112-
:ariaLabel="btnAriaLabel1 ? btnAriaLabel1 : null"
112+
:ariaLabel="btnAriaLabel1 ? btnAriaLabel1 : ''"
113113
/>
114114
</div>
115115
</div>
@@ -142,15 +142,15 @@
142142
:label="`${btnText1}`"
143143
:linkTo="`${btnURL1}`"
144144
fontSize="xl"
145-
:ariaLabel="btnAriaLabel1 ? btnAriaLabel1 : null"
145+
:ariaLabel="btnAriaLabel1 ? btnAriaLabel1 : ''"
146146
/>
147147
<BtnRouteInternal
148148
class="w-full"
149149
:cta="false"
150150
:label="`${btnText2}`"
151151
:linkTo="`${btnURL2}`"
152152
fontSize="xl"
153-
:ariaLabel="btnAriaLabel2 ? btnAriaLabel2 : null"
153+
:ariaLabel="btnAriaLabel2 ? btnAriaLabel2 : ''"
154154
/>
155155
</div>
156156
<div>

‎frontend/histoire.config.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// import { defineConfig } from "histoire";
2+
// import { HstVue } from "@histoire/plugin-vue";
3+
// import { HstNuxt } from "@histoire/plugin-nuxt";
4+
5+
// export default defineConfig({
6+
// plugins: [HstVue(), HstNuxt()],
7+
// setupFile: "/histoire.setup.ts",
8+
// theme: {
9+
// title: "Component Stories • activist",
10+
// logo: {
11+
// square: "/images/content_pages/icons/activist_icon_light.png",
12+
// light: "/images/activist_logo_light.png",
13+
// dark: "/images/activist_logo_dark.png",
14+
// },
15+
// logoHref: "https://activist.org",
16+
// favicon: "/favicons/favicon.svg",
17+
// colors: {
18+
// primary: {
19+
// 50: "#FAE1C6",
20+
// 100: "#F9D7B3",
21+
// 200: "#F8CDA0",
22+
// 300: "#F7C48D",
23+
// 400: "#F6BA79",
24+
// 500: "#F4B067",
25+
// 600: "#F2A654",
26+
// 700: "#F19C41",
27+
// 800: "#EF922E",
28+
// 900: "#EE881B",
29+
// },
30+
// },
31+
// },
32+
// });

‎frontend/histoire.setup.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// import "./assets/css/tailwind.css";

‎frontend/i18n/en-US.json

+7
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,13 @@
164164
"components.card-change-account-info.username.enter-new-username": "Enter desired username",
165165
"components.card-change-account-info.username.header-cta": "Change username",
166166
"components.card-change-account-info.username.new-username": "New username",
167+
"components.card-connect.app-account-popup-title": "Add Account",
168+
"components.card-connect.app-account-popup-cta-btn-aria-label": "Add a new account",
169+
"components.card-connect.app-account-popup-cta-btn-label": "Add",
170+
"components.card-connect.app-account-popup-field-name-prompt": "Link to account",
171+
"components.card-danger-zone.event-cta-btn-aria-label": "Permanently delete this event and its data",
172+
"components.card-danger-zone.event-cta-btn-text": "Permanently delete event",
173+
"components.card-danger-zone.event-description": "Here's where you can delete this event. Please note that this is not a reversible action - all event data, support and resources will be permanently lost. If you have questions about this event, please contact us on our contact page. We'd be happy to help!",
167174
"components.card-danger-zone.header": "Danger Zone",
168175
"components.card-danger-zone.password-label": "Your password",
169176
"components.card-danger-zone.username-label": "Your username",

‎frontend/pages/events/[id]/index.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
</div>
2323
<div class="flex flex-col items-center w-full gap-4">
2424
<MenuLinkWrapper
25-
v-for="button in eventButtons"
26-
:key="button"
25+
v-for="[i, button] of eventButtons.entries()"
26+
:key="i"
2727
:to="localPath(button.routeURL)"
2828
:selected="button.selected"
2929
>

‎frontend/pages/events/[id]/settings.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,11 @@
2121
</div>
2222
</HeaderAppPage>
2323
<CardDangerZone
24-
description="Here's where you can delete this event. Please note that this is not a reversible action - all event data, support and resources will be permanently lost. If you have questions on this event please contact us on our contact page. We'd be happy to help!"
25-
ctaBtnText="Permanently delete event"
24+
:description="$t('components.card-danger-zone.event-description')"
25+
:ctaBtnText="$t('components.card-danger-zone.event-cta-btn-text')"
26+
:ctaBtnAriaLabel="
27+
$t('components.card-danger-zone.event-cta-btn-aria-label')
28+
"
2629
/>
2730
</div>
2831
</template>

‎frontend/pages/home/index.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,15 @@
1515
<div
1616
class="flex flex-col lg:grid space-y-6 lg:grid-cols-7 lg:grid-rows-1 lg:space-y-0 lg:space-x-6 lg:mr-6"
1717
>
18-
<CardMetricsOverview class="lg:col-span-5" />
18+
<CardMetricsOverview
19+
class="lg:col-span-5"
20+
:metrics="{
21+
'total events': 123,
22+
'action events': 100,
23+
'learn events': 23,
24+
'new orgs': 10,
25+
}"
26+
/>
1927
<MediaCalendar class="w-full h-full lg:col-span-2" />
2028
</div>
2129
<CardSearchResult

‎frontend/pages/resources/create.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="w-full text-light-text dark:text-dark-text">
33
<ProgressBar type="default" :progress="1" :start="1" :end="1" />
44
<div class="flex flex-col px-4 xl:px-8">
5-
<PageBreadcrumbs class="mt-2" :breadcrumbs="breadcrumbs" />
5+
<PageBreadcrumbs class="mt-2" />
66
<div class="mt-4">
77
<h1 class="font-bold responsive-h2">
88
{{ $t("pages._global.information") }}
@@ -116,7 +116,7 @@ const formData = ref({
116116
description: "",
117117
link: "",
118118
organization: "",
119-
topics: ["justice", "activism"],
119+
topics: [""],
120120
});
121121
122122
const submit = async () => {

‎frontend/public/images/activist_logo_dark.png

6.59 KB
Loading

‎frontend/public/images/activist_logo_light.png

6.1 KB
Loading

‎frontend/types/event.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export interface Event {
22
name: string;
33
tagline: string;
44
organizations: string[];
5-
type: string;
5+
type: "action" | "learn";
66
topic: string;
77
description: string;
88
getInvolvedDescription: string;

0 commit comments

Comments
 (0)