refactor(DsfrNavigationMenu): ♻️ remanie les stories et ajoute la JSDoc

## Pourquoi les changements ont été faits :
- Migration des stories de `DsfrNavigationMenu` vers le format CSF3.
- Ajout de la documentation JSDoc pour le slot par défaut de `DsfrNavigationMenu.vue`.

## Quelles modifications ont été apportées :
- **`DsfrNavigationMenu.stories.ts`**:
  - Remplacement de l'export par défaut par un objet `meta` typé.
  - Déplacement de la logique de rendu dans la fonction `render` de `meta`, avec gestion de l'état `expandedMenuId` via `ref`.
  - Transformation de la story en un objet `StoryObj`.
  - L'événement `toggle-id` est maintenant tracé via `onToggleId`.
- **`DsfrNavigationMenu.vue`**:
  - Ajout de `defineSlots` avec un commentaire JSDoc pour le slot `default`.
  - Suppression du commentaire `@slot` redondant dans le template.

Author: laruiss

src/components/DsfrNavigation/DsfrNavigationMenu.stories.ts

@@ -1,8 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { fn } from '@storybook/test'
+import { ref } from 'vue'
+
 import DsfrNavigation from './DsfrNavigation.vue'
 import DsfrNavigationItem from './DsfrNavigationItem.vue'
 import DsfrNavigationMenu from './DsfrNavigationMenu.vue'
 
-export default {
+const meta = {
   component: DsfrNavigationMenu,
   title: 'Composants/DsfrNavigationMenu',
   argTypes: {
@@ -11,10 +16,7 @@ export default {
       description:
         '(Optionnel) Valeur de l’attribut `id` de ce sous-menu. *N.B. : Il est recommandé de ne pas le donner, la bibliothèque lui en donnera un pseudo-aléatoire*.',
     },
-    'toggle-id': {
-      description:
-        'Événement émis lors du click sur le lien, avec en argument l’id de l’élément cliqué',
-    },
+    onToggleId: fn(),
     links: {
       control: 'object',
       description:
@@ -35,59 +37,66 @@ export default {
         'Indique l’id de l’élément "ouvert" ou "déplié" dans le menu. Permet au composant de savoir s’il doit être déplié (si `expandedId` est identique à son `id`) ou non (si `expandedId` est différent de son `id`)',
     },
   },
-}
-
-export const NavigationSousMenu = (args) => ({
-  components: {
-    DsfrNavigation,
-    DsfrNavigationItem,
-    DsfrNavigationMenu,
-  },
+  render: (args) => ({
+    components: {
+      DsfrNavigation,
+      DsfrNavigationItem,
+      DsfrNavigationMenu,
+    },
+    setup () {
+      const expandedMenuId = ref(args.expandedId)
 
-  data () {
-    return {
-      ...args,
-      expandedMenuId: undefined,
-    }
-  },
+      function toggle (id: string) {
+        if (id === expandedMenuId.value) {
+          expandedMenuId.value = undefined
+        } else {
+          expandedMenuId.value = id
+        }
+        args.onToggleId(id)
+      }
 
-  methods: {
-    toggle (id) {
-      if (id === this.expandedMenuId) {
-        this.expandedMenuId = undefined
-        return
+      return {
+        args,
+        expandedMenuId,
+        toggle,
       }
-      this.expandedMenuId = id
     },
-  },
-
-  template: `
+    template: `
     <DsfrNavigation>
       <DsfrNavigationItem>
         <DsfrNavigationMenu
-          :title="title"
-          :links="links"
+          :title="args.title"
+          :links="args.links"
           :expanded-id="expandedMenuId"
-          @toggle-id="toggle($event)"
+          @toggle-id="toggle"
         />
       </DsfrNavigationItem>
     </DsfrNavigation>
   `,
-})
-NavigationSousMenu.args = {
-  title: 'Nom de menu original',
-  links: [
-    {
-      text: 'Valeur 1',
-      to: '#val1',
-    },
-    {
-      text: 'Valeur 2',
-      to: '#val2',
-    },
-    {
-      text: 'Valeur 3',
-      to: '#val3',
-    },
-  ],
+  }),
+} satisfies Meta<typeof DsfrNavigationMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SousMenu: Story = {
+  name: 'Sous-menu',
+  args: {
+    title: 'Nom de menu original',
+    links: [
+      {
+        text: 'Valeur 1',
+        to: '#val1',
+      },
+      {
+        text: 'Valeur 2',
+        to: '#val2',
+      },
+      {
+        text: 'Valeur 3',
+        to: '#val3',
+      },
+    ],
+    onToggleId: fn(),
+  },
 }

src/components/DsfrNavigation/DsfrNavigationMenu.vue

@@ -19,6 +19,14 @@ const props = withDefaults(defineProps<DsfrNavigationMenuProps>(), {
 
 defineEmits<{ (event: 'toggleId', id: string): void }>()
 
+defineSlots<{
+  /**
+   * Slot par défaut pour le contenu de l’item de liste.
+   * Sera dans `<ul class="fr-menu__list">`
+   */
+  default: () => any
+}>()
+
 const {
   collapse,
   collapsing,
@@ -66,7 +74,6 @@ onMounted(() => {
     <ul
       class="fr-menu__list"
     >
-      <!-- @slot Slot par défaut pour le contenu de l’item de liste. Sera dans `<ul class="fr-menu__list">` -->
       <slot />
       <DsfrNavigationMenuItem
         v-for="(link, idx) of links"

src/components/DsfrNotice/DsfrNotice.vue

@@ -10,6 +10,17 @@ withDefaults(defineProps<DsfrNoticeProps>(), {
 })
 
 defineEmits<{ (event: 'close'): void }>()
+
+defineSlots<{
+  /**
+   * Slot pour le contenu du titre du bandeau.
+   */
+  default: () => any
+  /**
+   * Slot pour le contenu de la description du bandeau.
+   */
+  desc: () => any
+}>()
 </script>
 
 <template>