docs: 📝 Améliore la documentation des accordéons

Author: laruiss

src/components/DsfrAccordion/DsfrAccordion.stories.js

@@ -1,4 +1,5 @@
 import DsfrAccordion from './DsfrAccordion.vue'
+import DsfrAccordionsGroup from './DsfrAccordionsGroup.vue'
 
 export default {
   component: DsfrAccordion,
@@ -12,31 +13,43 @@ export default {
       control: 'text',
       description: 'Intitulé de l’accordéon',
     },
-    expanded: {
-      control: 'boolean',
-      description: 'Spécifie si l’accordéon est déplié (`true`) ou non (`false`, défaut)',
-    },
   },
 }
 
 export const Accordeon = (args) => ({
   components: {
     DsfrAccordion,
+    DsfrAccordionsGroup,
   },
 
   data () {
     return {
       ...args,
+      expandedId: undefined,
     }
   },
 
   template: `
-    <DsfrAccordion
-      :title="title"
-      :expanded="expanded"
-    >
-      Contenu de l’accordéon
-    </DsfrAccordion>
+  <DsfrAccordionsGroup>
+    <li>
+      <DsfrAccordion
+        :title="title + ' 1'"
+        :expanded-id="expandedId"
+        @expand="expandedId = $event"
+      >
+        Contenu de l’accordéon 1
+      </DsfrAccordion>
+    </li>
+    <li>
+      <DsfrAccordion
+        :title="title + ' 2'"
+        :expanded-id="expandedId"
+        @expand="expandedId = $event"
+      >
+        Contenu de l’accordéon 2
+      </DsfrAccordion>
+    </li>
+  </DsfrAccordionGroup>
   `,
 
   mounted () {
@@ -46,33 +59,75 @@ export const Accordeon = (args) => ({
 Accordeon.args = {
   dark: false,
   title: 'Un titre d’accordéon',
-  expanded: false,
 }
 
 export const AccordeonDansUnAccordeon = (args) => ({
   components: {
     DsfrAccordion,
+    DsfrAccordionsGroup,
   },
 
   data () {
     return {
       ...args,
       titleSub: 'Intitulé du sous-accordéon',
+      expandedId: undefined,
+      subExpandedId1: undefined,
+      subExpandedId2: undefined,
     }
   },
 
   template: `
-    <DsfrAccordion
-      :title="title"
-      :expanded="expanded"
-    >
+    <DsfrAccordionsGroup>
+      <DsfrAccordion
+        :title="title + ' 1'"
+        :expanded-id="expandedId"
+        @expand="expandedId = $event"
+      >
+        <li>
+          <DsfrAccordion
+            :title="titleSub + ' 1'"
+            :expanded-id="subExpandedId1"
+            @expand="subExpandedId1 = $event"
+          >
+            Contenu de l’accordéon dans l’accordéon
+          </DsfrAccordion>
+        </li>
+        <li>
+          <DsfrAccordion
+            :title="titleSub + ' 2'"
+            :expanded-id="subExpandedId1"
+            @expand="subExpandedId1 = $event"
+          >
+            Contenu de l’accordéon dans l’accordéon
+          </DsfrAccordion>
+        </li>
+      </DsfrAccordion>
       <DsfrAccordion
-        :title="titleSub"
-        :expanded="false"
+        :title="title + ' 2'"
+        :expanded-id="expandedId"
+        @expand="expandedId = $event"
       >
-        Contenu de l’accordéon
+        <li>
+          <DsfrAccordion
+            :title="titleSub + ' 1'"
+            :expanded-id="subExpandedId2"
+            @expand="subExpandedId2 = $event"
+          >
+            Contenu de l’accordéon dans l’accordéon
+          </DsfrAccordion>
+        </li>
+        <li>
+          <DsfrAccordion
+            :title="titleSub + ' 2'"
+            :expanded-id="subExpandedId2"
+            @expand="subExpandedId2 = $event"
+          >
+            Contenu de l’accordéon dans l’accordéon
+          </DsfrAccordion>
+        </li>
       </DsfrAccordion>
-    </DsfrAccordion>
+    </DsfrAccordionsGroup>
   `,
 
   mounted () {
@@ -83,5 +138,5 @@ export const AccordeonDansUnAccordeon = (args) => ({
 AccordeonDansUnAccordeon.args = {
   dark: false,
   title: 'Un titre d’accordéon',
-  expanded: false,
+  titleSub: 'Accordéon dans l’accordéon',
 }

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -1,5 +1,6 @@
 <script>
 // import '@gouvfr/dsfr/dist/component/accordion/accordion.module.js'
+
 import { defineComponent } from 'vue'
 
 import { getRandomId } from '../../utils/random-utils.js'

src/components/DsfrHeader/DsfrHeader.vue

@@ -1,9 +1,8 @@
 <script>
 import { defineComponent } from 'vue'
 
-// TODO: Demander au DSFR pourquoi cette erreur au clic sur le menu burger : TypeError: can't access property "insertBefore", parent is null
-// TODO: Demander au DSFR pourquoi cette erreur au clic sur la recherche : TypeError: can't access property "nextSibling", node is null
-// import '@gouvfr/dsfr/dist/component/header/header.module.js'
+// Pose problème dans les tests, et risque fort de poser problème dans Nuxt
+import '@gouvfr/dsfr/dist/component/header/header.module.js'
 
 import DsfrLogo from '../DsfrLogo/DsfrLogo.vue'
 import DsfrSearchBar from '../DsfrSearchBar/DsfrSearchBar.vue'

src/demo-app/App.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import DsfrNavigation from '../components/DsfrNavigation/DsfrNavigation.vue'
 import DsfrButton from '../components/DsfrButton/DsfrButton.vue'
 import DsfrAccordion from '../components/DsfrAccordion/DsfrAccordion.vue'
+import DsfrAccordionsGroup from '../components/DsfrAccordion/DsfrAccordionsGroup.vue'
 
 const isModalOpen = ref(false)
 const displayAlert = ref(false)
@@ -35,6 +36,9 @@ const actions = [
 
 const showNotifications = ref(false)
 
+const accordionTitle = 'Titre de l’accordéon'
+const expandedId = ref(undefined)
+
 const displayNotifications = () => {
   showNotifications.value = true
 }
@@ -129,8 +133,17 @@ const navItems = [
       />
       équivaut à
       <span class="fr-fi-search-line" />
-
-      <DsfrAccordion />
+      <DsfrAccordionsGroup>
+        <li>
+          <DsfrAccordion
+            :title="accordionTitle"
+            :expanded-id="expandedId"
+            @expand="expandedId = $event === expandedId ? undefined : $event"
+          >
+            Contenu de l’accordéon dans l’accordéon
+          </DsfrAccordion>
+        </li>
+      </DsfrAccordionsGroup>
     </div>
 
     <DsfrModal