refactor(DsfrFieldset,DsfrFileDownload): ♻️ améliore defineSlots et met à jour imports Storybook

- Améliore DsfrFieldset avec JSDoc pour defineSlots et supprime les commentaires HTML obsolètes
- Met à jour DsfrFileDownload stories avec les imports Storybook 9
- Améliore la documentation des slots avec JSDoc pour une meilleure DX
- Corrige les échappements d'apostrophes dans les descriptions

- DsfrFieldset.vue : Ajoute JSDoc à defineSlots existant et supprime commentaires HTML
- DsfrFieldset.stories.ts : Met à jour avec Meta/StoryObj depuis @storybook/vue3-vite
- DsfrFileDownload.stories.ts : Met à jour avec Meta/StoryObj et satisfies Meta<typeof>
- Ajoute type Story = StoryObj<typeof meta> dans les deux fichiers stories

Author: laruiss

src/components/DsfrFieldset/DsfrFieldset.stories.ts

@@ -1,6 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import DsfrFieldset from './DsfrFieldset.vue'
 
-export default {
+const meta = {
   component: DsfrFieldset,
   title: 'Composants/DsfrFieldset',
   tags: ['formulaire'],
@@ -30,76 +32,70 @@ export default {
         'Classe(s) à ajouter à l’élément <span class="fr-hint-text">',
     },
   },
-}
+} satisfies Meta<typeof DsfrFieldset>
 
-export const EnsembleDeChamps = (args) => ({
-  components: {
-    DsfrFieldset,
-  },
+export default meta
 
-  data () {
-    return {
-      ...args,
-      expandedId: undefined,
-      title1: `${args.title} 1`,
-      title2: `${args.title} 2`,
-    }
-  },
+type Story = StoryObj<typeof meta>
 
-  template: `
+export const EnsembleDeChamps: Story = {
+  args: {
+    legend: 'Titre de l\'ensemble des champs',
+    legendId: 'legend-id',
+    legendClass: '',
+    hintClass: '',
+    hint: 'Texte d\'indice',
+  },
+  render: (args) => ({
+    components: {
+      DsfrFieldset,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
     <DsfrFieldset
-      :legend="legend"
-      :hint="hint"
-      :legend-class="legendClass"
-      :hint-class="hintClass"
-      :legend-id="legendId"
+      :legend="args.legend"
+      :hint="args.hint"
+      :legend-class="args.legendClass"
+      :hint-class="args.hintClass"
+      :legend-id="args.legendId"
     >
       Contenu du fieldset
     </DsfrFieldset>
   `,
-})
-EnsembleDeChamps.args = {
-  legend: 'Titre de l’ensemble des champs',
-  legendId: 'legend-id',
-  legendClass: '',
-  hintClass: '',
-  hint: 'Texte d’indice',
+  }),
 }
 
-export const EnsemblePersonnaliseDeChamps = (args) => ({
-  components: {
-    DsfrFieldset,
-  },
-
-  data () {
-    return {
-      ...args,
-      expandedId: undefined,
-      title1: `${args.title} 1`,
-      title2: `${args.title} 2`,
-    }
+export const EnsemblePersonnaliseDeChamps: Story = {
+  args: {
+    legend: 'Contenu personnalisé du titre de l\'ensemble des champs',
+    legendId: 'legend-id',
+    legendClass: '',
+    hintClass: '',
+    hint: 'Contenu personnalisé de l\'indice',
   },
-
-  template: `
+  render: (args) => ({
+    components: {
+      DsfrFieldset,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
     <DsfrFieldset
-      :legend-id="legendId"
-      :legend-class="legendClass"
-      :hint-class="hintClass"
+      :legend-id="args.legendId"
+      :legend-class="args.legendClass"
+      :hint-class="args.hintClass"
     >
       <template #legend>
-        <h6>{{ legend }} avec <em>de l’italique</em> dans un titre</h6>
+        <h6>{{ args.legend }} avec <em>de l'italique</em> dans un titre</h6>
       </template>
       <template #hint>
-        {{ hint }} avec <strong>du gras</strong>
+        {{ args.hint }} avec <strong>du gras</strong>
       </template>
       Contenu du fieldset
     </DsfrFieldset>
   `,
-})
-EnsemblePersonnaliseDeChamps.args = {
-  legend: 'Contenu personnalisé du titre de l’ensemble des champs',
-  legendId: 'legend-id',
-  legendClass: '',
-  hintClass: '',
-  hint: 'Contenu personnalisé de l’indice',
+  }),
 }

src/components/DsfrFieldset/DsfrFieldset.vue

@@ -3,19 +3,24 @@ import type { DsfrFieldsetProps } from './DsfrFieldset.types'
 
 export type { DsfrFieldsetProps }
 
+/**
+ * @slot default - Slot par défaut pour le contenu du fieldset (sera dans `<div class="fr-fieldset__element">`)
+ * @slot legend - Slot pour le contenu du titre du `fieldset` (sera dans `<legend class="fr-fieldset__legend">`). Une props du même nom est utilisable pour du texte simple sans mise en forme.
+ * @slot hint - Slot pour le contenu de l'indice (sera dans `<span class="fr-hint-text">` qui sera dans `</legend>`). Une **props du même nom est utilisable pour du texte simple** sans mise en forme.
+ */
+defineSlots<{
+  default?: () => any
+  legend?: () => any
+  hint?: () => any
+}>()
+
 withDefaults(defineProps<DsfrFieldsetProps>(), {
   legend: '',
   legendId: '',
   legendClass: '',
   hint: '',
   hintClass: '',
 })
-
-defineSlots<{
-  default?: () => any
-  legend?: () => any
-  hint?: () => any
-}>()
 </script>
 
 <template>
@@ -27,7 +32,6 @@ defineSlots<{
       :class="legendClass"
     >
       {{ legend }}
-      <!-- @slot Slot pour le contenu du titre du `fieldset` (sera dans `<legend class="fr-fieldset__legend">`). Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
       <slot name="legend" />
     </legend>
     <div
@@ -39,12 +43,10 @@ defineSlots<{
         :class="hintClass"
       >
         {{ hint }}
-        <!-- @slot Slot pour le contenu de l’indice (sera dans `<span class="fr-hint-text">` qui sera dans `</legend>`). Une **props du même nom est utilisable pour du texte simple** sans mise en forme. -->
         <slot name="hint" />
       </span>
     </div>
     <div class="fr-fieldset__element">
-      <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<div class="fr-fieldset__element">`) -->
       <slot />
     </div>
   </fieldset>

src/components/DsfrFileDownload/DsfrFileDownload.stories.ts

@@ -1,9 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import DsfrFileDownload from './DsfrFileDownload.vue'
 
 /**
- * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/telechargement-de-fichier)
+ * [Voir quand l\'utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/telechargement-de-fichier)
  */
-export default {
+const meta = {
   component: DsfrFileDownload,
   title: 'Composants/DsfrFileDownload',
   argTypes: {
@@ -29,31 +31,35 @@ export default {
       description: 'Nom de la ressource à télécharger',
     },
   },
-}
+} satisfies Meta<typeof DsfrFileDownload>
 
-export const LienDeTelechargement = (args) => ({
-  components: {
-    DsfrFileDownload,
-  },
-  data () {
-    return {
-      ...args,
-    }
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const LienDeTelechargement: Story = {
+  args: {
+    format: 'PDF',
+    size: '250 Go',
+    href: 'src/assets/icone-marianne-seule.png',
+    download: 'marianne.png',
+    title: 'Titre du téléchargement',
   },
-  template: `
-    <DsfrFileDownload
-      :format="format"
-      :size="size"
-      :href="href"
-      :download="download"
-      :title="title"
-    />
-  `,
-})
-LienDeTelechargement.args = {
-  format: 'PDF',
-  size: '250 Go',
-  href: 'src/assets/icone-marianne-seule.png',
-  download: 'marianne.png',
-  title: 'Titre du téléchargement',
+  render: (args) => ({
+    components: {
+      DsfrFileDownload,
+    },
+    setup () {
+      return { args }
+    },
+    template: `
+      <DsfrFileDownload
+        :format="args.format"
+        :size="args.size"
+        :href="args.href"
+        :download="args.download"
+        :title="args.title"
+      />
+    `,
+  }),
 }