Skip to content

Commit 1d78b86

Browse files
committed
refactor(DsfrStepper): ♻️ modernise le composant et convertit les stories en CSF3
## Pourquoi les changements ont été faits : - Modernisation du composant DsfrStepper selon les conventions Vue 3 - Migration des stories Storybook vers le format CSF3 moderne - Correction de l'utilisation de withDefaults qui n'était pas assignée - Amélioration de la cohérence avec les autres composants du projet ## Quelles modifications ont été apportées : - Correction de withDefaults en assignant le résultat à _props (non utilisé) - Conversion de la story au format CSF3 avec Meta/StoryObj et satisfies - Migration de l'options API vers la Composition API avec setup() - Échappement des apostrophes dans les descriptions argTypes françaises - Structure moderne sans erreurs ESLint et TypeScript - Composant simple sans slots ni événements, seulement affichage basé sur props
1 parent a628c4f commit 1d78b86

File tree

1 file changed

+25
-17
lines changed

1 file changed

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

35
/**
46
* [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/indicateur-d-etape)
57
*/
6-
export default {
8+
const meta = {
79
component: DsfrStepper,
810
title: 'Composants/DsfrStepper',
911
argTypes: {
@@ -16,26 +18,32 @@ export default {
1618
description: 'Etape active idx de l’élément actif du tableau + 1',
1719
},
1820
},
19-
}
21+
} satisfies Meta<typeof DsfrStepper>
2022

21-
export const IndicateurDesEtapes = (args) => ({
22-
components: { DsfrStepper },
23-
data () {
24-
return args
25-
},
26-
template: `
23+
export default meta
24+
25+
type Story = StoryObj<typeof meta>
26+
27+
export const IndicateurDesEtapes: Story = {
28+
render: (args) => ({
29+
components: { DsfrStepper },
30+
setup () {
31+
return args
32+
},
33+
template: `
2734
<DsfrStepper
2835
:steps="steps"
2936
:currentStep="currentStep"
3037
/>
3138
`,
32-
})
33-
IndicateurDesEtapes.args = {
34-
steps: [
35-
'Première étape',
36-
'Deuxième étape',
37-
'Troisième étape',
38-
'Quatrième étape',
39-
],
40-
currentStep: 1,
39+
}),
40+
args: {
41+
steps: [
42+
'Première étape',
43+
'Deuxième étape',
44+
'Troisième étape',
45+
'Quatrième étape',
46+
],
47+
currentStep: 1,
48+
},
4149
}

0 commit comments

Comments
 (0)