refactor(DsfrConsent): ♻️ utilise defineSlots et met à jour imports Storybook

- Modernise le composant DsfrConsent pour utiliser defineSlots avec JSDoc
- Met à jour les imports Storybook depuis 'storybook/test' vers '@storybook/test'
- Améliore la documentation des slots avec JSDoc pour une meilleure DX
- Corrige l'orthographe de "Évenement" en "Événement"

- Ajoute defineSlots<{ default?: () => any }> avec JSDoc dans DsfrConsent.vue
- Met à jour les imports avec Meta et StoryObj depuis @storybook/vue3-vite
- Transforme export default en const meta avec satisfies Meta<typeof DsfrConsent>
- Ajoute le type Story = StoryObj<typeof meta>

Author: laruiss

src/components/DsfrConsent/DsfrConsent.stories.ts

@@ -1,11 +1,13 @@
-import { fn } from 'storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { fn } from '@storybook/test'
 
 import DsfrConsent from './DsfrConsent.vue'
 
 /**
  * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/gestionnaire-de-consentement)
  */
-export default {
+const meta = {
   component: DsfrConsent,
   title: 'Composants/DsfrConsent',
   argTypes: {
@@ -23,45 +25,40 @@ export default {
       description:
         'Url de la page concernant les "Données personnelles et cookies" sur votre site ou application.',
     },
-    'accept-all': {
-      description: 'Évenement émis lors du clic sur le bouton \'Tout accepter\'',
-    },
-    'refuse-all': {
-      description: 'Évenement émis lors du clic sur le bouton \'Tout refuser\'',
-    },
-    customize: {
-      description: 'Évenement émis lors du clic sur le bouton \'Personnaliser\'',
-    },
   },
-}
+} satisfies Meta<typeof DsfrConsent>
 
-export const GestionnaireDeConsentementSimple = (args) => ({
-  components: { DsfrConsent },
-  data () {
-    return { ...args }
-  },
-  template: `
-    <DsfrConsent
-      @accept-all="onAcceptAll()"
-      @refuse-all="onRefuseAll()"
-      @customize="onCustomize()"
-      :url="url"
-    />
-  `,
-})
+export default meta
+
+type Story = StoryObj<typeof meta>
 
-GestionnaireDeConsentementSimple.args = {
-  url: '/',
+export const GestionnaireDeConsentementSimple: Story = {
+  args: {
+    url: '/',
+  } as any,
+  render: (args) => ({
+    components: { DsfrConsent },
+    setup () {
+      return { args }
+    },
+    template: `
+      <DsfrConsent
+        @accept-all="(args as any).onAcceptAll()"
+        @refuse-all="(args as any).onRefuseAll()"
+        @customize="(args as any).onCustomize()"
+        :url="args.url"
+      />
+    `,
+  }),
 }
 
-export const GestionnaireDeConsentementPersonnalisé = (args) => ({
-  components: { DsfrConsent },
-  data () {
-    return { ...args }
-  },
-  template: `
-  <DsfrConsent>
-    Description personnalisée
-  </DsfrConsent>
-  `,
-})
+export const GestionnaireDeConsentementPersonnalisé: Story = {
+  render: () => ({
+    components: { DsfrConsent },
+    template: `
+      <DsfrConsent>
+        Description personnalisée
+      </DsfrConsent>
+    `,
+  }),
+}

src/components/DsfrConsent/DsfrConsent.vue

@@ -5,6 +5,16 @@ import { computed } from 'vue'
 
 export type { DsfrConsentProps }
 
+/**
+ * Slots disponibles pour DsfrConsent
+ */
+defineSlots<{
+  /**
+   * Slot par défaut pour personnaliser la description du consentement
+   */
+  default?: () => any
+}>()
+
 const props = withDefaults(defineProps<DsfrConsentProps>(), {
   url: '',
 })