Merge pull request #299 from klee-contrib/dsfr-accordion-icone

feat([DsfrAccordion]): ✨ Customisation du titre

Author: laruiss

src/components/DsfrAccordion/DsfrAccordion.stories.js

@@ -122,3 +122,50 @@ AccordeonDansUnAccordeon.args = {
   title: 'Un titre d’accordéon',
   titleSub: 'Accordéon dans l’accordéon',
 }
+
+export const AccordeonTitreCustom = (args) => ({
+  components: {
+    DsfrAccordion,
+    DsfrAccordionsGroup
+  },
+
+  data () {
+    return {
+      ...args,
+      title1: args.title1,
+      title2: args.title2,
+      expandedId: undefined,
+    }
+  },
+
+  template: `
+    <DsfrAccordionsGroup>
+      <li>
+        <DsfrAccordion
+          :expanded-id="expandedId"
+          @expand="expandedId = $event"
+        >
+        <template #title><h1>{{title1}}</h1></template>
+        </DsfrAccordion>
+      </li>
+      <li>
+        <DsfrAccordion
+          :title="title2"
+          :expanded-id="expandedId"
+          @expand="expandedId = $event"
+        >
+        </DsfrAccordion>
+      </li>
+    </DsfrAccordionsGroup>
+  `,
+
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+
+})
+AccordeonTitreCustom.args = {
+  dark: false,
+  title1: 'Un titre d’accordéon customisé',
+  title2: 'Un autre titre d’accordéon'
+}

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -51,7 +51,10 @@ export default defineComponent({
         :aria-controls="id"
         @click="toggleExpanded()"
       >
-        <span>{{ title }}</span>
+      <!-- @slot Slot pour le contenu personnalisé du titre de l’accordéon. Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
+        <slot name="title">
+          <span>{{ title }}</span>
+        </slot>
       </button>
     </h3>
     <div