docs: 📝 création de la documentation vitepress pour dsfrconsent

.vitepress/config.ts

@@ -38,6 +38,10 @@ const composants = [
     text: 'DsfrCard',
     link: '/composants/DsfrCard.md',
   },
+  {
+    text: 'DsfrConsent',
+    link: '/composants/DsfrConsent.md',
+  },
   {
     text: 'DsfrRange',
     link: '/composants/DsfrRange.md',

src/components/DsfrConsent/DsfrConsent.md

@@ -0,0 +1,70 @@
+# Gestionnaire de consentement - `DsfrConsent`
+
+## 🌟 Introduction
+
+Le gestionnaire de consentement permet à l'utilisateur de définir ses préférences sur l'utilisation de ses données personnelles, notamment le dépôt de cookies non fonctionnels dans son navigateur.
+
+🏅 La documentation du gestionnaire de consentement sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/gestionnaire-de-consentement)
+
+<VIcon name="vi-file-type-storybook" /> La story du gestionnaire de consentement sur le storybook de [VueDsfr](https://vue-dsfr.netlify.app/?path=/docs/composants-dsfrconsent--docs)
+
+## 📐 Structure
+
+Le gestionnaire de consentement est constitué des éléments suivants :
+
+- une description, le composant en propose une générique et le `slot` par défaut permet d'en personnaliser une et de contenir tout type d'élément,
+- un lien (prop **`url`**, de type `string`), correspondant au chemin menant aux "Données personnelles et cookies" de votre site ou application.
+
+## 🛠️ Les props
+
+|  nom                    |   type        |  défaut          | obligatoire |
+| ----------------------- | ---------     | ---------------- | --------    |
+| `url`                   | *`string`*    | `''`             |             |
+
+## 📡 Les événements
+
+`DsfrConsent` dispose de trois boutons qui déclenchent chacun un évènement spécifique au clic permettant à l'utilisateur de l'attraper afin de déclencher une fonction correspondante.
+
+|  nom                   |  donnée (*payload*)  | détail de la donnée  |
+| ---------------------- | -------------------- | -------------------- |
+| `'accept-all'`         |                      |                      |
+| `'refuse-all'`         |                      |                      |
+| `'customize'`          |                      |                      |
+
+## 🧩 Les slots
+
+`DsfrConsent` possède un slot par défaut pour laisser la possibilité à l'utilisateur d'ajouter une description personnalisée.
+
+```vue{6,15,16,25,26}
+<template>
+  <DsfrConsent>
+    <p>
+      Nous avons recours à plusieurs cookies afin d'améliorer votre
+      expérience sur cette application. Vos données vous appartiennent
+      et ce bandeau vous permet de sélectionner les cookies que vous
+      souhaitez activer. Pour plus d'informations, consultez notre page
+      <a :href="url">Données personnelles et cookies</a>.
+    </p>
+  </DsfrConsent>
+</template>
+```
+
+Cf. la [documentation Vue](https://vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers) pour plus de détails.
+
+## 📝 Un exemple complet
+
+::: code-group
+
+<Story data-title="Démo" min-h="200px">
+  <DsfrConsentDemo />
+</Story>
+
+<<< docs-demo/DsfrConsentDemo.vue [Code de la démo]
+
+<<< DsfrConsent.vue
+
+:::
+
+<script setup lang="ts">
+import DsfrConsentDemo from './docs-demo/DsfrConsentDemo.vue'
+</script>

src/components/DsfrConsent/DsfrConsent.stories.ts

@@ -18,7 +18,7 @@ export default {
     },
     url: {
       control: 'text',
-      description: '',
+      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\'',

src/components/DsfrConsent/docs-demo/DsfrConsentDemo.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import DsfrConsent from '../DsfrConsent.vue'
+
+const AcceptAllCookies = () => {}
+const RefuseAllCookies = () => {}
+const CustomizeCookies = () => {}
+
+</script>
+
+<template>
+  <DsfrConsent
+    @accept-all="AcceptAllCookies()"
+    @refuse-all="RefuseAllCookies()"
+    @customize="CustomizeCookies()"
+  >
+    <p>
+      Nous avons recours à plusieurs cookies afin d'améliorer votre
+      expérience sur cette application. Vos données vous appartiennent
+      et ce bandeau vous permet de sélectionner les cookies que vous
+      souhaitez activer. Pour plus d'informations, consultez notre page
+      <a href="/donnees">Données personnelles et cookies</a>.
+    </p>
+  </DsfrConsent>
+</template>