Skip to content

Commit c379fc7

Browse files
laruisslaruiss
committed
refactor(DsfrSideMenu): ♻️ modernise le composant et convertit les stories en CSF3
## Pourquoi les changements ont été faits : - Modernisation du composant DsfrSideMenu selon les conventions Vue 3 - Migration des stories Storybook vers le format CSF3 moderne - Amélioration de la maintenabilité et cohérence avec les autres composants - Évite les erreurs de parsing Storybook rencontrées précédemment ## Quelles modifications ont été apportées : - Ajout de defineSlots avec documentation pour le slot default dans DsfrSideMenu.vue - Modernisation de la syntaxe emit avec types explicites et utilisation de emit() - Conversion des 2 stories au format CSF3 avec Meta/StoryObj - Mise à jour des imports TypeScript pour Storybook (ref depuis Vue) - Correction des apostrophes échappées dans les descriptions argTypes - Remplacement de kebab-case par PascalCase dans les templates CSF3
1 parent e052d87 commit c379fc7

File tree

5 files changed

+148
-150
lines changed

5 files changed

+148
-150
lines changed

‎src/components/DsfrSelect/DsfrSelect.stories.ts‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export const ListeDeroulanteEnAnglais: Story = {
140140
},
141141
render: (args) => ({
142142
components: { DsfrSelect },
143-
setup() {
143+
setup () {
144144
watch(() => args.modelValue, (newVal) => {
145145
args['onUpdate:modelValue'](newVal)
146146
})
@@ -182,7 +182,7 @@ export const ListeDeroulanteRequise: StoryObj<typeof meta> = {
182182
},
183183
render: (args) => ({
184184
components: { DsfrSelect },
185-
setup() {
185+
setup () {
186186
return { args }
187187
},
188188
template: `
@@ -200,7 +200,6 @@ export const ListeDeroulanteRequise: StoryObj<typeof meta> = {
200200
}),
201201
}
202202

203-
204203
export const ListeDeroulanteRequisePersonnalisee: StoryObj<typeof meta> = {
205204
args: {
206205
options: [
@@ -221,7 +220,7 @@ export const ListeDeroulanteRequisePersonnalisee: StoryObj<typeof meta> = {
221220
},
222221
render: (args) => ({
223222
components: { DsfrSelect },
224-
setup() {
223+
setup () {
225224
watch(() => args.modelValue, (newVal) => {
226225
args['onUpdate:modelValue'](newVal)
227226
})
@@ -246,8 +245,6 @@ export const ListeDeroulanteRequisePersonnalisee: StoryObj<typeof meta> = {
246245
}),
247246
}
248247

249-
250-
251248
export const ListeDeroulanteInactive: StoryObj<typeof meta> = {
252249
args: {
253250
options: [
@@ -268,7 +265,7 @@ export const ListeDeroulanteInactive: StoryObj<typeof meta> = {
268265
},
269266
render: (args) => ({
270267
components: { DsfrSelect },
271-
setup() {
268+
setup () {
272269
watch(() => args.modelValue, (newVal) => {
273270
args['onUpdate:modelValue'](newVal)
274271
})
@@ -291,7 +288,6 @@ export const ListeDeroulanteInactive: StoryObj<typeof meta> = {
291288
}),
292289
}
293290

294-
295291
export const ListeDeroulanteAvecOptionsInactives: StoryObj<typeof meta> = {
296292
args: {
297293
options: [
@@ -333,7 +329,7 @@ export const ListeDeroulanteAvecOptionsInactives: StoryObj<typeof meta> = {
333329
},
334330
render: (args) => ({
335331
components: { DsfrSelect },
336-
setup() {
332+
setup () {
337333
watch(() => args.modelValue, (newVal) => {
338334
args['onUpdate:modelValue'](newVal)
339335
})
@@ -386,7 +382,7 @@ export const ListeDeroulanteAvecOptionsGroupees: StoryObj<typeof meta> = {
386382
},
387383
render: (args) => ({
388384
components: { DsfrSelect },
389-
setup() {
385+
setup () {
390386
watch(() => args.modelValue, (newVal) => {
391387
args['onUpdate:modelValue'](newVal)
392388
})
@@ -408,5 +404,3 @@ export const ListeDeroulanteAvecOptionsGroupees: StoryObj<typeof meta> = {
408404
`,
409405
}),
410406
}
411-
412-

‎src/components/DsfrShare/DsfrShare.stories.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import DsfrShare from './DsfrShare.vue'
55
/**
66
* [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/partage)
77
*/
8-
export default {
8+
const meta = {
99
component: DsfrShare,
1010
title: 'Composants/DsfrShare',
1111
tags: ['réseaux sociaux'],
@@ -62,7 +62,7 @@ export const Partage: Story = {
6262
},
6363
render: (args) => ({
6464
components: { DsfrShare },
65-
setup() {
65+
setup () {
6666
return { args }
6767
},
6868
template: `

‎src/components/DsfrShare/DsfrShare.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@ const openWindow = ({ url, label }: { url: string, label: string }) => {
2727
<template>
2828
<div class="fr-share">
2929
<p class="fr-share__title">
30-
<slot name="title">
31-
{{ title }}
32-
</slot>
30+
{{ title }}
3331
</p>
3432
<ul class="fr-btns-group">
3533
<li

‎src/components/DsfrSideMenu/DsfrSideMenu.stories.ts‎

Lines changed: 127 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
import type { Meta, StoryObj } from '@storybook/vue3'
2+
13
import { fn } from 'storybook/test'
4+
import { ref } from 'vue'
25

36
import DsfrAccordion from '../DsfrAccordion/DsfrAccordion.vue'
47
import DsfrAccordionsGroup from '../DsfrAccordion/DsfrAccordionsGroup.vue'
@@ -21,7 +24,7 @@ function toggleExpandedForMenuWithId (menuItems, id) {
2124
/**
2225
* [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/menu-lateral)
2326
*/
24-
export default {
27+
const meta = {
2528
component: DsfrSideMenu,
2629
title: 'Composants/DsfrSideMenu',
2730
argTypes: {
@@ -48,143 +51,136 @@ export default {
4851
action: fn(),
4952
},
5053
},
51-
}
54+
} satisfies Meta<typeof DsfrSideMenu>
5255

53-
export const MenuLateral = (args) => ({
54-
components: {
55-
DsfrSideMenu,
56-
},
56+
export default meta
57+
type Story = StoryObj<typeof meta>
5758

58-
data () {
59-
return {
60-
...args,
61-
}
59+
export const MenuLateral: Story = {
60+
args: {
61+
buttonLabel: 'Dans cette rubrique',
62+
headingTitle: 'Titre de la rubrique',
63+
menuItems: [
64+
{
65+
id: '11',
66+
to: '/rubrique-1',
67+
text: 'Premier titre de niveau 1',
68+
},
69+
{
70+
id: '12',
71+
to: '/rubrique-2',
72+
text: 'Deuxième titre de niveau 1',
73+
active: true,
74+
menuItems: [
75+
{
76+
id: '21',
77+
to: '/rubrique-2/sous-rubrique-1',
78+
text: 'Premier titre de niveau 2',
79+
},
80+
{
81+
id: '22',
82+
to: '/rubrique-2/sous-rubrique-2',
83+
text: 'Deuxième titre de niveau 2',
84+
active: true,
85+
menuItems: [
86+
{
87+
id: '31',
88+
to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-1',
89+
text: 'Premier titre de niveau 3',
90+
},
91+
{
92+
id: '32',
93+
to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-2',
94+
text: 'Deuxième titre de niveau 3',
95+
active: true,
96+
},
97+
],
98+
},
99+
],
100+
},
101+
],
62102
},
63-
64-
methods: {
65-
toggleExpand (id) {
66-
toggleExpandedForMenuWithId(this.menuItems, id)
67-
},
68-
},
69-
70-
template: `
71-
<DsfrSideMenu
72-
:heading-title="headingTitle"
73-
:buttonLabel="buttonLabel"
74-
:menu-items="menuItems"
75-
@toggle-expand="toggleExpand"
76-
/>
77-
`,
78-
})
79-
MenuLateral.args = {
80-
buttonLabel: 'Dans cette rubrique',
81-
headingTitle: 'Titre de la rubrique',
82-
menuItems: [
83-
{
84-
id: '11',
85-
to: '/rubrique-1',
86-
text: 'Premier titre de niveau 1',
87-
},
88-
{
89-
id: '12',
90-
to: '/rubrique-2',
91-
text: 'Deuxième titre de niveau 1',
92-
active: true,
93-
menuItems: [
94-
{
95-
id: '21',
96-
to: '/rubrique-2/sous-rubrique-1',
97-
text: 'Premier titre de niveau 2',
98-
},
99-
{
100-
id: '22',
101-
to: '/rubrique-2/sous-rubrique-2',
102-
text: 'Deuxième titre de niveau 2',
103-
active: true,
104-
menuItems: [
105-
{
106-
id: '31',
107-
to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-1',
108-
text: 'Premier titre de niveau 3',
109-
},
110-
{
111-
id: '32',
112-
to: '/rubrique-2/sous-rubrique-2/sous-sous-rubrique-2',
113-
text: 'Deuxième titre de niveau 3',
114-
active: true,
115-
},
116-
],
117-
},
118-
],
103+
render: (args) => ({
104+
components: { DsfrSideMenu },
105+
setup () {
106+
const toggleExpand = (id: string) => {
107+
toggleExpandedForMenuWithId(args.menuItems, id)
108+
}
109+
return { args, toggleExpand }
119110
},
120-
],
111+
template: `
112+
<DsfrSideMenu
113+
:heading-title="args.headingTitle"
114+
:button-label="args.buttonLabel"
115+
:menu-items="args.menuItems"
116+
@toggle-expand="toggleExpand"
117+
/>
118+
`,
119+
}),
121120
}
122121

123-
export const MenuLateralAvecAccordeonEtCheckbox = (args) => ({
124-
components: {
125-
DsfrSideMenu,
126-
DsfrAccordion,
127-
DsfrAccordionsGroup,
128-
DsfrCheckboxSet,
129-
},
130-
131-
data () {
132-
return {
133-
...args,
134-
expandedId: undefined,
135-
accordions: args.accordions,
136-
}
137-
},
138-
139-
template: `
140-
<dsfr-side-menu
141-
heading-title="Filtres"
142-
button-label="Afficher les filtres"
143-
>
144-
<dsfr-accordions-group>
145-
<li
146-
v-for="(accordion, name) in accordions"
147-
:id="\`accordion_${name}\`"
148-
:key="name"
149-
>
150-
<dsfr-accordion
151-
:id="name"
152-
:title="name"
153-
:expanded-id="expandedId"
154-
@expand="id => expandedId = id"
155-
>
156-
<dsfr-checkbox-set
157-
:options="accordion.options"
158-
small
159-
/>
160-
</dsfr-accordion>
161-
</li>
162-
</dsfr-accordions-group>
163-
</dsfr-side-menu>
164-
`,
165-
})
166-
MenuLateralAvecAccordeonEtCheckbox.args = {
167-
accordions: {
168-
'Accordéon 1': {
169-
options: [
170-
{ label: 'Option 1', value: 'option1', name: 'option1' },
171-
{ label: 'Option 2', value: 'option2', name: 'option2' },
172-
{ label: 'Option 3', value: 'option3', name: 'option3' },
173-
],
122+
export const MenuLateralAvecAccordeonEtCheckbox: Story = {
123+
args: {
124+
accordions: {
125+
'Accordéon 1': {
126+
options: [
127+
{ label: 'Option 1', value: 'option1', name: 'option1' },
128+
{ label: 'Option 2', value: 'option2', name: 'option2' },
129+
{ label: 'Option 3', value: 'option3', name: 'option3' },
130+
],
131+
},
132+
'Accordéon 2': {
133+
options: [
134+
{ label: 'Option 1', value: 'option1', name: 'option1' },
135+
{ label: 'Option 2', value: 'option2', name: 'option2' },
136+
{ label: 'Option 3', value: 'option3', name: 'option3' },
137+
],
138+
},
139+
'Accordéon 3': {
140+
options: [
141+
{ label: 'Option 1', value: 'option1', name: 'option1' },
142+
{ label: 'Option 2', value: 'option2', name: 'option2' },
143+
{ label: 'Option 3', value: 'option3', name: 'option3' },
144+
],
145+
},
174146
},
175-
'Accordéon 2': {
176-
options: [
177-
{ label: 'Option 1', value: 'option1', name: 'option1' },
178-
{ label: 'Option 2', value: 'option2', name: 'option2' },
179-
{ label: 'Option 3', value: 'option3', name: 'option3' },
180-
],
147+
},
148+
render: (args) => ({
149+
components: {
150+
DsfrSideMenu,
151+
DsfrAccordion,
152+
DsfrAccordionsGroup,
153+
DsfrCheckboxSet,
181154
},
182-
'Accordéon 3': {
183-
options: [
184-
{ label: 'Option 1', value: 'option1', name: 'option1' },
185-
{ label: 'Option 2', value: 'option2', name: 'option2' },
186-
{ label: 'Option 3', value: 'option3', name: 'option3' },
187-
],
155+
setup () {
156+
const expandedId = ref(undefined)
157+
return { args, expandedId }
188158
},
189-
},
159+
template: `
160+
<DsfrSideMenu
161+
heading-title="Filtres"
162+
button-label="Afficher les filtres"
163+
>
164+
<DsfrAccordionsGroup>
165+
<li
166+
v-for="(accordion, name) in args.accordions"
167+
:id="\`accordion_\${name}\`"
168+
:key="name"
169+
>
170+
<DsfrAccordion
171+
:id="name"
172+
:title="name"
173+
:expanded-id="expandedId"
174+
@expand="id => expandedId = id"
175+
>
176+
<DsfrCheckboxSet
177+
:options="accordion.options"
178+
small
179+
/>
180+
</DsfrAccordion>
181+
</li>
182+
</DsfrAccordionsGroup>
183+
</DsfrSideMenu>
184+
`,
185+
}),
190186
}

0 commit comments

Comments
 (0)