Skip to content

Commit b2c0fc6

Browse files
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

Lines changed: 13 additions & 0 deletions
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

Lines changed: 5 additions & 5 deletions
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

Lines changed: 3 additions & 1 deletion
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

Lines changed: 2 additions & 0 deletions
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

Lines changed: 15 additions & 5 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 0 additions & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 9 additions & 5 deletions
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>

0 commit comments

Comments
 (0)