Skip to content

Commit bb94178

Browse files
laruisslaruiss
committed
fix(DsfrNewsLetter): 🐛 utilise defineModel pour email
1 parent 16d755f commit bb94178

File tree

8 files changed

+127
-220
lines changed

8 files changed

+127
-220
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
"@storybook/addon-themes": "^9.1.13",
105105
"@storybook/test": "9.0.0-alpha.2",
106106
"@storybook/test-runner": "^0.23.0",
107+
"@storybook/vue3": "9.1.13",
107108
"@storybook/vue3-vite": "^9.1.13",
108109
"@testing-library/dom": "^10.4.0",
109110
"@testing-library/jest-dom": "^6.6.3",

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/DsfrAlert/DsfrAlert.stories.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ const meta = {
4747
'Ajoute la possibilité de fermer l\'alerte via un bouton en forme de croix',
4848
},
4949
titleTag: {
50-
control: 'text',
50+
control: { type: 'select' },
51+
options: ['h2', 'h3', 'h4', 'h5', 'h6'],
5152
description:
5253
'Permet de choisir la balise contenant le titre de l\'alerte (h3 par défaut)',
5354
},

‎src/components/DsfrFollow/DsfrFollow.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export type DsfrNewsLetterProps = {
2222
buttonText?: string
2323
buttonTitle?: string
2424
buttonAction?: ($event: MouseEvent) => void
25+
onSubmit?: (email: string | undefined) => void
2526
onlyCallout?: boolean
2627
}
2728

‎src/components/DsfrFollow/DsfrNewsLetter.stories.ts‎

Lines changed: 62 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,205 +1,103 @@
1-
import DsfrFollow from './DsfrFollow.vue'
1+
import type { Meta, StoryObj } from '@storybook/vue3'
2+
23
import DsfrNewsLetter from './DsfrNewsLetter.vue'
34

4-
/**
5-
* [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/lettre-d-information-et-reseaux-sociaux)
6-
*/
7-
export default {
5+
const meta = {
86
component: DsfrNewsLetter,
9-
title: 'Composants/DsfrNewsletter',
10-
tags: ['réseaux sociaux'],
7+
title: 'Composants/DsfrNewsLetter',
118
argTypes: {
129
title: {
1310
control: 'text',
14-
description: 'Titre de la newsletter',
11+
description: 'Titre de la lettre d’information',
1512
},
1613
description: {
1714
control: 'text',
18-
description: 'Description de la newsletter',
15+
description: 'Description de la lettre d’information',
1916
},
2017
email: {
2118
control: 'text',
22-
description: 'V-model de l’adresse électronique',
19+
description: 'Adresse électronique de l’utilisateur',
2320
},
2421
labelEmail: {
2522
control: 'text',
26-
description: 'Label du champ pour renseigner l’adresse électronique',
23+
description: 'Label du champ pour l’adresse électronique',
2724
},
28-
placeHolder: {
25+
placeholder: {
2926
control: 'text',
30-
description:
31-
'Placeholder du champ pour renseigner l’adresse électronique',
27+
description: 'Placeholder du champ pour l’adresse électronique',
3228
},
3329
hintText: {
3430
control: 'text',
35-
description:
36-
'Explication à afficher sous le champ pour renseigner l’adresse électronique',
31+
description: 'Indice à afficher sous le champ de l’adresse électronique',
3732
},
3833
buttonText: {
3934
control: 'text',
40-
description: 'S’abonner',
35+
description: 'Texte du bouton d’abonnement',
4136
},
4237
buttonTitle: {
4338
control: 'text',
44-
description: 'Contenu de l’attribut `title` du bouton d’abonnement',
39+
description: 'Titre du bouton d’abonnement',
4540
},
46-
buttonAction: { action: 'clicked' },
4741
onlyCallout: {
4842
control: 'boolean',
49-
description:
50-
'Newsletter simplifiée avec seulement un bouton, le formulaire sera masqué',
43+
description: 'Afficher uniquement un bouton sans champ de saisie',
44+
},
45+
error: {
46+
control: 'text',
47+
description: 'Message d’erreur à afficher',
48+
},
49+
inputTitle: {
50+
control: 'text',
51+
description: 'Titre de l’input (attribut `title`)',
52+
},
53+
onSubmit: {
54+
action: 'submit',
55+
},
56+
'button-action': {
57+
action: 'button-action',
5158
},
5259
},
53-
}
54-
55-
export const NewsletterSimple = (args) => ({
56-
components: {
57-
DsfrNewsLetter,
58-
DsfrFollow,
59-
},
60-
61-
data () {
62-
return {
63-
...args,
64-
}
65-
},
66-
67-
template: `
68-
<DsfrFollow>
69-
<div class="fr-col-12">
70-
<DsfrNewsLetter
71-
:title="title"
72-
:description="description"
73-
v-model:email="email"
74-
:labelEmail="labelEmail"
75-
:inputTitle="inputTitle"
76-
:placeholder="placeholder"
77-
:hintText="hintText"
78-
:buttonText="buttonText"
79-
:buttonTitle="buttonTitle"
80-
/>
81-
</div>
82-
</DsfrFollow>
83-
`,
84-
})
85-
NewsletterSimple.args = {
86-
title: 'Titre de la lettre d’information',
87-
description: 'Description de la lettre d’information',
88-
email: 'email.super@chouette.fr',
89-
labelEmail: 'Votre adresse électronique',
90-
inputTitle: 'Adresse électronique',
91-
placeholder: 'james.bond@mi6.gov.uk',
92-
hintText:
93-
'En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel. Vous pouvez vous désinscrire à tout moment à l’aide des liens de désinscription ou en nous contactant.',
94-
buttonText: 'S’abonner',
95-
buttonTitle: 'Titre du bouton (attribut `title`) de la balise `button`',
96-
}
97-
98-
export const NewsletterAvecErreur = (args) => ({
99-
components: {
100-
DsfrNewsLetter,
101-
DsfrFollow,
102-
},
60+
} satisfies Meta<typeof DsfrNewsLetter>
10361

104-
data () {
105-
return {
106-
...args,
107-
}
108-
},
62+
export default meta
63+
type Story = StoryObj<typeof meta>
10964

110-
watch: {
111-
email (newValue) {
112-
if (
113-
// eslint-disable-next-line regexp/no-unused-capturing-group
114-
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/i.test(
115-
newValue,
116-
)
117-
) {
118-
this.error = ''
119-
return
120-
}
121-
this.error =
122-
'Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@example.org'
65+
export const LettreDInformationSimple: Story = {
66+
render: (args) => ({
67+
components: { DsfrNewsLetter },
68+
setup () {
69+
return { args }
12370
},
71+
template: `
72+
<DsfrNewsLetter v-bind="args" />
73+
`,
74+
}),
75+
args: {
76+
title: 'Abonnez-vous à notre lettre d’information',
77+
description:
78+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et.',
79+
email: '',
80+
labelEmail: 'Votre adresse électronique (ex. : prenom.nom@example.com)',
81+
placeholder: 'prenom.nom@example.com',
82+
hintText: 'Texte de politique de confidentialité',
83+
buttonText: 'S’abonner',
84+
buttonTitle: 'S’abonner à notre lettre d’information',
85+
onlyCallout: false,
86+
error: '',
87+
inputTitle: 'Titre de l’input',
12488
},
125-
126-
template: `
127-
<DsfrFollow>
128-
<div class="fr-col-12">
129-
<DsfrNewsLetter
130-
:title="title"
131-
:description="description"
132-
:error="error"
133-
v-model:email="email"
134-
:labelEmail="labelEmail"
135-
:inputTitle="inputTitle"
136-
:placeholder="placeholder"
137-
:hintText="hintText"
138-
:buttonText="buttonText"
139-
:buttonTitle="buttonTitle"
140-
/>
141-
</div>
142-
</DsfrFollow>
143-
`,
144-
})
145-
146-
NewsletterAvecErreur.args = {
147-
title: 'Titre de la lettre d’information',
148-
description: 'Description de la lettre d’information',
149-
email: 'email.superchouette.fr',
150-
error:
151-
'Le format de l’adresse electronique saisie n’est pas valide. Le format attendu est : nom@example.org',
152-
labelEmail: 'Votre adresse électronique',
153-
inputTitle: 'Adresse électronique',
154-
placeholder: 'james.bond@mi6.gov.uk',
155-
hintText:
156-
'En renseignant votre adresse électronique, vous acceptez de recevoir nos actualités par courriel. Vous pouvez vous désinscrire à tout moment à l’aide des liens de désinscription ou en nous contactant.',
157-
buttonText: 'S’abonner',
158-
buttonTitle: 'Titre du bouton (attribut `title`) de la balise `button`',
15989
}
16090

161-
export const NewsletterMiseEnAvant = (args) => ({
162-
components: {
163-
DsfrNewsLetter,
164-
DsfrFollow,
91+
export const LettreDInformationSimplifiee: Story = {
92+
args: {
93+
...LettreDInformationSimple.args,
94+
onlyCallout: true,
16595
},
96+
}
16697

167-
data () {
168-
return {
169-
...args,
170-
}
98+
export const LettreDInformationAvecErreur: Story = {
99+
args: {
100+
...LettreDInformationSimple.args,
101+
error: 'Message d’erreur',
171102
},
172-
173-
template: `
174-
<DsfrFollow>
175-
<div class="fr-col-12">
176-
<DsfrNewsLetter
177-
:title="title"
178-
:description="description"
179-
v-model:email="email"
180-
:labelEmail="labelEmail"
181-
:inputTitle="inputTitle"
182-
:placeholder="placeholder"
183-
:hintText="hintText"
184-
:buttonText="buttonText"
185-
:buttonTitle="buttonTitle"
186-
:buttonAction="buttonAction"
187-
:onlyCallout="onlyCallout"
188-
/>
189-
</div>
190-
</DsfrFollow>
191-
`,
192-
})
193-
NewsletterMiseEnAvant.args = {
194-
title: 'Titre de la lettre d’information',
195-
description: 'Description de la lettre d’information',
196-
email: '',
197-
labelEmail: '',
198-
inputTitle: '',
199-
placeholder: '',
200-
hintText: '',
201-
buttonText: 'S’abonner',
202-
buttonTitle: 'Titre du bouton (attribut `title`) de la balise `button`',
203-
buttonAction: () => undefined,
204-
onlyCallout: true,
205103
}

‎src/components/DsfrFollow/DsfrNewsLetter.vue‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,12 @@ withDefaults(defineProps<DsfrNewsLetterProps>(), {
1414
hintText: '',
1515
buttonText: 'S’abonner',
1616
buttonTitle: 'S‘abonner à notre lettre d’information',
17-
buttonAction: () => undefined,
17+
buttonAction: () => {},
18+
onSubmit: () => {},
1819
onlyCallout: false,
1920
})
2021
21-
const emit = defineEmits<{ (e: 'update:email', payload: string): void }>()
22-
23-
// @ts-expect-error this event comes from the input[type=email] so `value` is there
24-
const updateEmail = ($event: InputEvent) => emit('update:email', $event.target.value as string)
22+
const emailValue = defineModel<string>('email')
2523
</script>
2624

2725
<template>
@@ -44,7 +42,7 @@ const updateEmail = ($event: InputEvent) => emit('update:email', $event.target.v
4442
</button>
4543
</div>
4644
<div v-else>
47-
<form action="">
45+
<form @submit.prevent="onSubmit(emailValue)">
4846
<label
4947
class="fr-label"
5048
for="newsletter-email"
@@ -54,15 +52,14 @@ const updateEmail = ($event: InputEvent) => emit('update:email', $event.target.v
5452
<div class="fr-input-wrap fr-input-wrap--addon">
5553
<input
5654
id="newsletter-email"
55+
v-model="emailValue"
5756
class="fr-input"
5857
aria-describedby="fr-newsletter-hint-text"
5958
:title="inputTitle || labelEmail"
6059
:placeholder="placeholder || labelEmail"
6160
type="email"
6261
name="newsletter-email"
63-
:value="email"
6462
autocomplete="email"
65-
@input="updateEmail($event as InputEvent)"
6663
>
6764
<button
6865
id="newsletter-button"

0 commit comments

Comments
 (0)