Skip to content

Commit 811fd29

Browse files
committed
refactor(DsfrSummary): ♻️ convertit les stories en CSF3
## Pourquoi les changements ont été faits : - Migration des stories Storybook vers le format CSF3 moderne - Amélioration de la cohérence avec les autres composants du projet - Modernisation selon les standards Storybook actuels ## Quelles modifications ont été apportées : - Conversion de la story au format CSF3 avec Meta/StoryObj et satisfies - Migration de l'options API vers la Composition API avec setup() - Ajout des imports TypeScript pour Meta et StoryObj depuis @storybook/vue3 - Structure moderne sans erreurs ESLint et TypeScript - Préservation des apostrophes déjà échappées dans les descriptions françaises
1 parent 1d78b86 commit 811fd29

File tree

1 file changed

+26
-18
lines changed

1 file changed

+26
-18
lines changed
Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import type { Meta, StoryObj } from '@storybook/vue3'
2+
13
import DsfrSummary from './DsfrSummary.vue'
24

35
/**
46
* [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/sommaire)
57
*/
6-
export default {
8+
const meta = {
79
component: DsfrSummary,
810
title: 'Composants/DsfrSummary',
911
argTypes: {
@@ -17,25 +19,31 @@ export default {
1719
'Tableau d\'objets contenant le nom des ancres et le lien correspondant',
1820
},
1921
},
20-
}
22+
} satisfies Meta<typeof DsfrSummary>
2123

22-
export const Sommaire = (args) => ({
23-
components: { DsfrSummary },
24-
data () {
25-
return args
26-
},
27-
template: `
24+
export default meta
25+
26+
type Story = StoryObj<typeof meta>
27+
28+
export const Sommaire: Story = {
29+
render: (args) => ({
30+
components: { DsfrSummary },
31+
setup () {
32+
return { args }
33+
},
34+
template: `
2835
<DsfrSummary
29-
:title="title"
30-
:anchors="anchors"
36+
:title="args.title"
37+
:anchors="args.anchors"
3138
/>
3239
`,
33-
})
34-
Sommaire.args = {
35-
title: 'Exemple de sommaire',
36-
anchors: [
37-
{ link: '#', name: 'Première étape' },
38-
{ link: '#', name: 'Deuxième étape' },
39-
{ link: '#', name: 'Troisième étape' },
40-
],
40+
}),
41+
args: {
42+
title: 'Exemple de sommaire',
43+
anchors: [
44+
{ link: '#', name: 'Première étape' },
45+
{ link: '#', name: 'Deuxième étape' },
46+
{ link: '#', name: 'Troisième étape' },
47+
],
48+
},
4149
}

0 commit comments

Comments
 (0)