From 4b12628a6acc0e1502cac7f8a5b2ef5c4d079051 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?= Date: Thu, 18 Nov 2021 12:29:55 +0100 Subject: [PATCH 01/22] =?UTF-8?q?docs:=20:memo:=20R=C3=A9organise=20les=20?= =?UTF-8?q?composants=20dans=20le=20storybook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Affiche clairement le nom de chaque composant à importer - Affiche les fondamentaux (titres, variables et classes utilitaires --- .storybook/preview.js | 58 +- .../DsfrAccordion/DsfrAccordion.stories.js | 2 +- .../DsfrAccordionsGroup.stories.js | 6 +- src/components/DsfrAlert/DsfrAlert.stories.js | 2 +- .../DsfrBreadcrumb/DsfrBreadcrumb.stories.js | 2 +- .../DsfrButton/DsfrButton.stories.js | 2 +- .../DsfrButton/DsfrButtonGroup.stories.js | 2 +- .../DsfrCallout/DsfrCallout.stories.js | 2 +- src/components/DsfrCard/DsfrCard.stories.js | 2 +- .../DsfrCheckbox/DsfrCheckbox.stories.js | 2 +- .../DsfrCheckbox/DsfrCheckboxSet.stories.js | 2 +- .../DsfrFollow/DsfrFollow.stories.js | 2 +- .../DsfrFooter/DsfrFooter.stories.js | 2 +- .../DsfrHeader/DsfrHeader.stories.js | 2 +- .../DsfrHighlight/DsfrHighlight.stories.js | 2 +- src/components/DsfrInput/DsfrInput.stories.js | 2 +- src/components/DsfrLogo/DsfrLogo.stories.js | 2 +- .../DsfrMedia/DsfrPicture.stories.js | 2 +- src/components/DsfrMedia/DsfrVideo.stories.js | 2 +- src/components/DsfrModal/DsfrModal.stories.js | 2 +- .../DsfrNavigation/DsfrNavigation.stories.js | 23 +- .../DsfrNavigationMegaMenu.stories.js | 164 + .../DsfrNavigation/DsfrNavigationMegaMenu.vue | 4 +- .../DsfrNavigationMegaMenuCategory.stories.js | 95 + .../DsfrNavigationMegaMenuCategory.vue | 1 - .../DsfrNavigationMenu.stories.js | 42 +- .../DsfrNavigationMenuLink.stories.js | 6 +- src/components/DsfrQuote/DsfrQuote.stories.js | 2 +- .../DsfrRadioButton.stories.js | 2 +- .../DsfrRadioButtonSet.stories.js | 2 +- .../DsfrSearchBar/DsfrSearchBar.stories.js | 2 +- .../DsfrSelect/DsfrSelect.stories.js | 2 +- src/components/DsfrTable/DsfrTable.stories.js | 2 +- .../DsfrTabs/DsfrTabContent.stories.js | 2 +- .../DsfrTabs/DsfrTabItem.stories.js | 2 +- src/components/DsfrTabs/DsfrTabs.stories.js | 2 +- src/components/DsfrTag/DsfrTags.stories.js | 2 +- src/components/DsfrTile/DsfrTile.stories.js | 2 +- src/components/DsfrTile/DsfrTiles.stories.js | 2 +- .../DsfrToggleSwitch.stories.js | 2 +- ...intro.stories.mdx => 01-intro.stories.mdx} | 2 +- ...guide.stories.mdx => 02-guide.stories.mdx} | 2 +- .../{dev.stories.mdx => 03-dev.stories.mdx} | 2 +- .../class-utilitaires.stories.mdx | 3007 +++++++++++++++++ .../{ => fondamentaux}/titles.stories.js | 3 +- .../fondamentaux/variables.stories.mdx | 218 ++ 46 files changed, 3600 insertions(+), 95 deletions(-) rename src/stories/docs/{intro.stories.mdx => 01-intro.stories.mdx} (98%) rename src/stories/docs/{guide.stories.mdx => 02-guide.stories.mdx} (98%) rename src/stories/docs/{dev.stories.mdx => 03-dev.stories.mdx} (96%) create mode 100644 src/stories/fondamentaux/class-utilitaires.stories.mdx rename src/stories/{ => fondamentaux}/titles.stories.js (97%) create mode 100644 src/stories/fondamentaux/variables.stories.mdx diff --git a/.storybook/preview.js b/.storybook/preview.js index 45d19649..ab6b0741 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -24,36 +24,38 @@ export const parameters = { }, options: { storySort: { + method: 'alphabetical', order: [ 'Docs', - ['Introduction', 'Guide d’utilisation', 'Guide du développeur'], - 'Basic', - [ - 'Titres', - 'Titres Alternatifs', - 'Alertes', - 'Fil d’Ariane - Breadcrumb', - 'Logo Officiel - Official logo', - 'Boutons - Button', - 'Groupe de Boutons - ButtonGroup', - 'Champs de saisie - Input', - 'Case à cocher - Checkbox', - 'Boutons radio - Radio button', - 'Liste déroulante - Select', - 'Interrupteur - Toggle switch', - 'Étiquettes - Tags', - ], - 'Éléments', - [ - 'Carte - Card', - 'Barre de recherche - Search bar', - 'En-tête - Header', - 'Lettres d’information et réseaux - Follow', - 'Pied de page - Footer', - 'Modale - Modal', - 'Onglets - Tabs', ['Onglets', 'Titre', 'Onglets'], - 'Table' - ], + // ['1. Introduction', '2. Guide d’utilisation', '3. Guide du développeur'], + 'Fondamentaux', + 'Composants', + // [ + // 'Titres', + // 'Titres Alternatifs', + // 'Alertes', + // 'Fil d’Ariane - Breadcrumb', + // 'Logo Officiel - Official logo', + // 'Boutons - Button', + // 'Groupe de Boutons - ButtonGroup', + // 'Champs de saisie - Input', + // 'Case à cocher - Checkbox', + // 'Boutons radio - Radio button', + // 'Liste déroulante - Select', + // 'Interrupteur - Toggle switch', + // 'Étiquettes - Tags', + // ], + // 'Éléments', + // [ + // 'Carte - Card', + // 'Barre de recherche - Search bar', + // 'En-tête - Header', + // 'Lettres d’information et réseaux - Follow', + // 'Pied de page - Footer', + // 'Modale - Modal', + // 'Onglets - Tabs', ['Onglets', 'Titre', 'Onglets'], + // 'Table' + // ], ], }, } diff --git a/src/components/DsfrAccordion/DsfrAccordion.stories.js b/src/components/DsfrAccordion/DsfrAccordion.stories.js index d281a96a..8b6b2f75 100644 --- a/src/components/DsfrAccordion/DsfrAccordion.stories.js +++ b/src/components/DsfrAccordion/DsfrAccordion.stories.js @@ -2,7 +2,7 @@ import DsfrAccordion from './DsfrAccordion.vue' export default { component: DsfrAccordion, - title: 'Éléments/Accordéon - Accordion/Simple', + title: 'Composants/Accordéon - DsfrAccordion', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrAccordion/DsfrAccordionsGroup.stories.js b/src/components/DsfrAccordion/DsfrAccordionsGroup.stories.js index 2f650954..7e7c050e 100644 --- a/src/components/DsfrAccordion/DsfrAccordionsGroup.stories.js +++ b/src/components/DsfrAccordion/DsfrAccordionsGroup.stories.js @@ -3,7 +3,7 @@ import DsfrAccordion from './DsfrAccordion.vue' export default { component: DsfrAccordionsGroup, - title: 'Éléments/Accordéon - Accordion/Groupe', + title: 'Composants/Accordéon - DsfrAccordionsGroup', argTypes: { dark: { control: 'boolean', @@ -31,7 +31,7 @@ export default { }, } -export const AccordeonSimple = (args) => ({ +export const AccordeonGroupe = (args) => ({ components: { DsfrAccordionsGroup, DsfrAccordion, @@ -74,7 +74,7 @@ export const AccordeonSimple = (args) => ({ `, }) -AccordeonSimple.args = { +AccordeonGroupe.args = { dark: false, title1: 'Un titre d’accordéon', expanded1: false, diff --git a/src/components/DsfrAlert/DsfrAlert.stories.js b/src/components/DsfrAlert/DsfrAlert.stories.js index 4713853c..1c0b5c3d 100644 --- a/src/components/DsfrAlert/DsfrAlert.stories.js +++ b/src/components/DsfrAlert/DsfrAlert.stories.js @@ -8,7 +8,7 @@ OhVueIcon.add(RiErrorWarningLine) export default { component: DsfrAlert, - title: 'Basic/Alertes', + title: 'Composants/Alertes - DsfrAlert', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.stories.js b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.stories.js index d30767bf..1e492c6c 100644 --- a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.stories.js +++ b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.stories.js @@ -2,7 +2,7 @@ import DsfrBreadcrumb from './DsfrBreadcrumb.vue' export default { component: DsfrBreadcrumb, - title: 'Basic/Fil d’Ariane - Breadcrumb', + title: 'Composants/Fil d’Ariane - DsfrBreadcrumb', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrButton/DsfrButton.stories.js b/src/components/DsfrButton/DsfrButton.stories.js index 04522ac2..b332a8b3 100644 --- a/src/components/DsfrButton/DsfrButton.stories.js +++ b/src/components/DsfrButton/DsfrButton.stories.js @@ -8,7 +8,7 @@ OhVueIcon.add(RiCheckboxCircleLine) export default { component: DsfrButton, - title: 'Basic/Boutons - Button', + title: 'Composants/Boutons/Boutons - DsfrButton', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrButton/DsfrButtonGroup.stories.js b/src/components/DsfrButton/DsfrButtonGroup.stories.js index c34f357f..f4ec3f23 100644 --- a/src/components/DsfrButton/DsfrButtonGroup.stories.js +++ b/src/components/DsfrButton/DsfrButtonGroup.stories.js @@ -8,7 +8,7 @@ OhVueIcon.add(RiCheckboxCircleLine) export default { component: DsfrButtonGroup, - title: 'Basic/Groupe de Boutons - ButtonGroup', + title: 'Composants/Boutons/Groupe de Boutons - DsfrButtonGroup', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrCallout/DsfrCallout.stories.js b/src/components/DsfrCallout/DsfrCallout.stories.js index 2478a4f3..3f0d6711 100644 --- a/src/components/DsfrCallout/DsfrCallout.stories.js +++ b/src/components/DsfrCallout/DsfrCallout.stories.js @@ -10,7 +10,7 @@ export default { components: { DsfrCallout, }, - title: 'Éléments/Mise en Avant - Callout', + title: 'Composants/Mise en Avant - DsfrCallout', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrCard/DsfrCard.stories.js b/src/components/DsfrCard/DsfrCard.stories.js index 864e091a..b570f9e6 100644 --- a/src/components/DsfrCard/DsfrCard.stories.js +++ b/src/components/DsfrCard/DsfrCard.stories.js @@ -2,7 +2,7 @@ import DsfrCard from './DsfrCard.vue' export default { component: DsfrCard, - title: 'Éléments/Carte - Card', + title: 'Composants/Carte - DsfrCard', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrCheckbox/DsfrCheckbox.stories.js b/src/components/DsfrCheckbox/DsfrCheckbox.stories.js index 1f8fd562..1454d6ac 100644 --- a/src/components/DsfrCheckbox/DsfrCheckbox.stories.js +++ b/src/components/DsfrCheckbox/DsfrCheckbox.stories.js @@ -2,7 +2,7 @@ import DsfrCheckbox from './DsfrCheckbox.vue' export default { component: DsfrCheckbox, - title: 'Basic/Case à cocher - Checkbox/Cases', + title: 'Composants/Case à cocher/Case à cocher - DsfrCheckbox', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.js b/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.js index c4a6375f..23d4adbd 100644 --- a/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.js +++ b/src/components/DsfrCheckbox/DsfrCheckboxSet.stories.js @@ -2,7 +2,7 @@ import DsfrCheckboxSet from './DsfrCheckboxSet.vue' export default { component: DsfrCheckboxSet, - title: 'Basic/Case à cocher - Checkbox/Groupe de cases', + title: 'Composants/Case à cocher/Groupe de cases à cocher - DsfrCheckboxSet', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrFollow/DsfrFollow.stories.js b/src/components/DsfrFollow/DsfrFollow.stories.js index 4ed206d8..6c168a6f 100644 --- a/src/components/DsfrFollow/DsfrFollow.stories.js +++ b/src/components/DsfrFollow/DsfrFollow.stories.js @@ -1,7 +1,7 @@ import DsfrFollow from './DsfrFollow.vue' export default { - title: 'Éléments/Lettres d’information et réseaux - Follow', + title: 'Composants/Lettres d’information et réseaux - DsfrFollow', name: '', component: DsfrFollow, diff --git a/src/components/DsfrFooter/DsfrFooter.stories.js b/src/components/DsfrFooter/DsfrFooter.stories.js index f5655324..967f7884 100644 --- a/src/components/DsfrFooter/DsfrFooter.stories.js +++ b/src/components/DsfrFooter/DsfrFooter.stories.js @@ -9,7 +9,7 @@ VIcon.add(RiExternalLinkLine) export default { component: DsfrFooter, - title: 'Éléments/Pied de page - Footer', + title: 'Composants/Pied de page - DsfrFooter', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrHeader/DsfrHeader.stories.js b/src/components/DsfrHeader/DsfrHeader.stories.js index 448b8c75..4476a230 100644 --- a/src/components/DsfrHeader/DsfrHeader.stories.js +++ b/src/components/DsfrHeader/DsfrHeader.stories.js @@ -13,7 +13,7 @@ VIcon.add( export default { component: DsfrHeader, - title: 'Éléments/En-tête - Header', + title: 'Composants/En-tête - DsfrHeader', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrHighlight/DsfrHighlight.stories.js b/src/components/DsfrHighlight/DsfrHighlight.stories.js index 3af2b7fb..2c8d0273 100644 --- a/src/components/DsfrHighlight/DsfrHighlight.stories.js +++ b/src/components/DsfrHighlight/DsfrHighlight.stories.js @@ -2,7 +2,7 @@ import DsfrHighlight from './DsfrHighlight.vue' export default { component: DsfrHighlight, - title: 'Éléments/Mise en Exergue - Highlight', + title: 'Composants/Mise en Exergue - DsfrHighlight', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrInput/DsfrInput.stories.js b/src/components/DsfrInput/DsfrInput.stories.js index f16c67b4..2d7ed013 100644 --- a/src/components/DsfrInput/DsfrInput.stories.js +++ b/src/components/DsfrInput/DsfrInput.stories.js @@ -2,7 +2,7 @@ import DsfrInput from './DsfrInput.vue' export default { component: DsfrInput, - title: 'Basic/Champs de saisie - Input', + title: 'Composants/Champs de saisie - DsfrInput', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrLogo/DsfrLogo.stories.js b/src/components/DsfrLogo/DsfrLogo.stories.js index a728bcae..c0fa357c 100644 --- a/src/components/DsfrLogo/DsfrLogo.stories.js +++ b/src/components/DsfrLogo/DsfrLogo.stories.js @@ -2,7 +2,7 @@ import DsfrLogo from './DsfrLogo.vue' export default { component: DsfrLogo, - title: 'Basic/Logo Officiel - Official logo', + title: 'Composants/Logo Officiel - DsfrLogo', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrMedia/DsfrPicture.stories.js b/src/components/DsfrMedia/DsfrPicture.stories.js index ba2e0bd6..21183b80 100644 --- a/src/components/DsfrMedia/DsfrPicture.stories.js +++ b/src/components/DsfrMedia/DsfrPicture.stories.js @@ -2,7 +2,7 @@ import DsfrPicture from './DsfrPicture.vue' export default { component: DsfrPicture, - title: 'Basic/Image - Picture', + title: 'Composants/Image - DsfrPicture', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrMedia/DsfrVideo.stories.js b/src/components/DsfrMedia/DsfrVideo.stories.js index 044cad95..80b8b13c 100644 --- a/src/components/DsfrMedia/DsfrVideo.stories.js +++ b/src/components/DsfrMedia/DsfrVideo.stories.js @@ -2,7 +2,7 @@ import DsfrVideo from './DsfrVideo.vue' export default { component: DsfrVideo, - title: 'Basic/Vidéo - Video', + title: 'Composants/Vidéo - DsfrVideo', argTypes: { dark: { control: 'boolean', diff --git a/src/components/DsfrModal/DsfrModal.stories.js b/src/components/DsfrModal/DsfrModal.stories.js index 434efe3a..1e1943b3 100644 --- a/src/components/DsfrModal/DsfrModal.stories.js +++ b/src/components/DsfrModal/DsfrModal.stories.js @@ -3,7 +3,7 @@ import DsfrButton from '../DsfrButton/DsfrButton.vue' export default { component: DsfrModal, - title: 'Éléments/Modale - Modal', + title: 'Composants/Modale - DsfrModal', argTypes: { actions: { control: 'object', diff --git a/src/components/DsfrNavigation/DsfrNavigation.stories.js b/src/components/DsfrNavigation/DsfrNavigation.stories.js index 0fb3f819..2f03e880 100644 --- a/src/components/DsfrNavigation/DsfrNavigation.stories.js +++ b/src/components/DsfrNavigation/DsfrNavigation.stories.js @@ -1,31 +1,28 @@ import DsfrNavigation from './DsfrNavigation.vue' -import DsfrNavigationItem from './DsfrNavigationItem.vue' -import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue' -import DsfrNavigationMenu from './DsfrNavigationMenu.vue' -import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue' export default { component: DsfrNavigation, - title: 'Éléments/Navigation Principale - Main Navigation', + title: 'Composants/Navigation Principale/1. Navigation Principale - DsfrNavigation', argTypes: { dark: { control: 'boolean', description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*', }, - links: { + navItems: { control: 'array', - description: 'Tableau contenant les liens du menu de navigation', + description: `Tableau d'objets. Chacun de ces objets contiendra : + + - soit les props d’un lien direct DsfrNavigationMenuLink de navigation (\`to\` et \`text\`) + - soit les props d’un sous-menu DsfrNavigationMenu de navigation (\`title\` et \`links\`) + - soit les props d’un mega-menu DsfrNavigationMegaMenu de navigation (\`title\`, \`link\` et \`menus\`) + `, }, }, } -export const NavigationBasique = (args) => ({ +export const NavigationPrincipale = (args) => ({ components: { DsfrNavigation, - DsfrNavigationItem, - DsfrNavigationMegaMenu, - DsfrNavigationMenu, - DsfrNavigationMenuLink, }, data () { @@ -43,7 +40,7 @@ export const NavigationBasique = (args) => ({ `, }) -NavigationBasique.args = { +NavigationPrincipale.args = { dark: false, navItems: [ { diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.stories.js b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.stories.js index e69de29b..2823a87c 100644 --- a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.stories.js +++ b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.stories.js @@ -0,0 +1,164 @@ +import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue' +import DsfrNavigationItem from './DsfrNavigationItem.vue' +import DsfrNavigation from './DsfrNavigation.vue' + +export default { + component: DsfrNavigationMegaMenu, + title: 'Composants/Navigation Principale/4. Mega-menu DsfrNavigationMegaMenu', + argTypes: { + dark: { + control: 'boolean', + description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*', + }, + title: { + control: 'text', + description: 'Intitulé du menu', + }, + description: { + control: 'text', + description: 'Description au méga menu', + }, + link: { + control: 'array', + description: 'Permet de définir un lien vers une page associée. C’est un objet qui contiendra les props attendues par DsfrNavigationMenuLink', + }, + menus: { + control: 'array', + description: 'Liste des catégories au sein du méga menu via un tableau. Chaque objet de ce tableau contiendra les props attendues par DsfrNavigationMegaMenuCategory', + }, + expandedId: { + control: 'text', + description: '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 NavigationMegaMenu = (args) => ({ + components: { + DsfrNavigationMegaMenu, + DsfrNavigation, + DsfrNavigationItem, + }, + + data () { + return { + ...args, + } + }, + + methods: { + toggle (id) { + if (id === this.expandedId) { + this.expandedId = undefined + return + } + this.expandedId = id + }, + }, + + template: ` +
+ + + + + +
+ `, +}) + +NavigationMegaMenu.args = { + dark: false, + title: 'Titre de MEGA MENU', + expandedId: undefined, + description: 'Un charmant MEGA MENU', + link: { + to: '#', + text: 'Aller à la rubrique du MEGA MENU', + }, + menus: [ + { + title: 'Nom de catégorie 1', + links: [ + { + text: 'Lien 1', + to: '#', + }, + { + text: 'Lien 2', + to: '#', + }, + { + text: 'Lien 3', + to: '#', + }, + { + text: 'Lien 4', + to: '#', + }, + { + text: 'Lien 5', + to: '#', + }, + ], + }, + { + title: 'Nom de catégorie 2', + links: [ + { + text: 'Lien 1', + to: '#', + }, + { + text: 'Lien 2', + to: '#', + }, + { + text: 'Lien 3', + to: '#', + }, + { + text: 'Lien 4', + to: '#', + }, + { + text: 'Lien 5', + to: '#', + }, + ], + }, + { + title: 'Nom de catégorie 3', + links: [ + { + text: 'Lien 1', + to: '#', + }, + { + text: 'Lien 2', + to: '#', + }, + { + text: 'Lien 3', + to: '#', + }, + { + text: 'Lien 4', + to: '#', + }, + { + text: 'Lien 5', + to: '#', + }, + ], + }, + ], +} diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue index 1013361b..1c98c6c1 100644 --- a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue +++ b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue @@ -29,7 +29,7 @@ export default { }, menus: { type: Array, - required: true, + default: () => [], }, expandedId: { type: String, @@ -93,6 +93,7 @@ export default { + diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue index 1c98c6c1..10b2591a 100644 --- a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue +++ b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue @@ -37,7 +37,7 @@ export default { }, }, - emits: ['click'], + emits: ['toggle-id'], computed: { expanded () { @@ -52,7 +52,7 @@ export default { class="fr-nav__btn" :aria-expanded="expanded" :aria-controls="id" - @click="$emit('click', id)" + @click="$emit('toggle-id', id)" > {{ title }} @@ -66,7 +66,7 @@ export default {