docs: 📝 Améliore la documentation Storybook

Author: laruiss

src/components/DsfrAccordion/DsfrAccordion.stories.js

@@ -9,10 +9,21 @@ export default {
       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.*',
     },
+    id: {
+      control: 'text',
+      description: '(optionnel) Valeur de l’attribut `id` de l’accordéon. Par défaut, un id pseudo-aléatoire sera donné.',
+    },
     title: {
       control: 'text',
       description: 'Intitulé de l’accordéon',
     },
+    expand: {
+      description: 'Événement déclenché au clic sur le titre de l’accordéon et qui renvoie l’`id` de l’accordéon correspondant.',
+    },
+    expandedId: {
+      control: 'text',
+      description: 'Id de l’accordéon déplié',
+    },
   },
 }
 

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -24,7 +24,6 @@ export default defineComponent({
       default: 'Sans intitulé',
     },
   },
-
   emits: ['expand'],
 
   computed: {
@@ -62,6 +61,7 @@ export default defineComponent({
       class="fr-collapse"
       :class="{ 'fr-collapse--expanded': expanded }"
     >
+      <!-- @slot Slot par défaut pour le contenu de l’accordéon: sera dans `<div class="fr-collapse">` -->
       <slot />
     </div>
   </section>

src/components/DsfrAccordion/DsfrAccordionsGroup.stories.js

@@ -9,6 +9,10 @@ export default {
       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.*',
     },
+    id: {
+      control: 'text',
+      description: '(optionnel) Valeur de l’attribut `id` de l’accordéon. Par défaut, un id pseudo-aléatoire sera donné.',
+    },
     expandedId: {
       control: 'radio',
       options: [
@@ -17,15 +21,19 @@ export default {
         'accordion-2',
         'accordion-3',
       ],
+      description: 'Valeur de l’`id` de l’accordéon déplié',
     },
     title1: {
       control: 'text',
+      description: 'Titre du premier accordéon',
     },
     title2: {
       control: 'text',
+      description: 'Titre du deuxième accordéon',
     },
     title3: {
       control: 'text',
+      description: 'Titre du troisième accordéon',
     },
   },
 }
@@ -51,7 +59,7 @@ export const AccordeonGroupe = (args) => ({
         :expanded-id="expandedId"
         @expand="expandedId = $event"
       >
-        Contenu de l’accordéon
+        Contenu de l’accordéon 1
       </DsfrAccordion>
     </li>
     <li>
@@ -61,7 +69,7 @@ export const AccordeonGroupe = (args) => ({
         :expanded-id="expandedId"
         @expand="id => expandedId = id"
       >
-        Contenu de l’accordéon
+        Contenu de l’accordéon 2
       </DsfrAccordion>
     </li>
     <li>
@@ -71,7 +79,7 @@ export const AccordeonGroupe = (args) => ({
         :expanded-id="expandedId"
         @expand="id => expandedId = id"
       >
-        Contenu de l’accordéon
+        Contenu de l’accordéon 3
       </DsfrAccordion>
     </li>
   </DsfrAccordionsGroup>
@@ -83,8 +91,8 @@ export const AccordeonGroupe = (args) => ({
 })
 AccordeonGroupe.args = {
   dark: false,
-  title1: 'Un titre d’accordéon',
-  title2: 'Un titre d’accordéon',
-  title3: 'Un titre d’accordéon',
+  title1: 'Un titre d’accordéon 1',
+  title2: 'Un titre d’accordéon 2',
+  title3: 'Un titre d’accordéon 3',
   expandedId: '',
 }

src/components/DsfrAlert/DsfrAlert.stories.js

@@ -1,5 +1,11 @@
 import DsfrAlert from './DsfrAlert.vue'
 
+import { addIcons } from 'oh-vue-icons'
+
+import { RiCloseLine } from 'oh-vue-icons/icons/ri/index.js'
+
+addIcons(RiCloseLine)
+
 export default {
   component: DsfrAlert,
   title: 'Composants/Alertes - DsfrAlert',
@@ -8,6 +14,10 @@ export default {
       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.*',
     },
+    id: {
+      control: 'text',
+      description: '(optionnel) Valeur de l’attribut `id` de l’alerte. Par défaut, un id pseudo-aléatoire sera donné.',
+    },
     title: {
       control: 'text',
       description: '**Titre** de l\'alerte',

src/components/DsfrBreadcrumb/DsfrBreadcrumb.stories.js

@@ -8,11 +8,14 @@ export default {
       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: {
       control: 'object',
       description: 'Tableau d’objets, chaque objet contiendra 2 propriétés : `to` avec le lien et `text` avec le texte à afficher',
     },
+    breadcrumbId: {
+      control: 'text',
+      description: 'Id de la balise `div` à l’intérieur de la balise `nav` du fil d’Ariane',
+    },
   },
 }
 

src/components/DsfrCallout/DsfrCallout.stories.js

@@ -26,6 +26,10 @@ export default {
       control: 'text',
       description: 'Permet de passer l’icône désirée en chaîne de caractères (cf. remix-icon)',
     },
+    button: {
+      control: 'object',
+      description: '(optionnel) Objet contenant les props à passer à DsfrButton (pour afficher un bouton sous la mise en avant)',
+    },
     onClick: {
       action: 'Clicked',
     },

src/components/DsfrCheckbox/DsfrCheckbox.stories.js

@@ -8,6 +8,10 @@ export default {
       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.*',
     },
+    id: {
+      control: 'text',
+      description: '(optionnel) Valeur de l’attribut `id` de la checkbox. Par défaut, un id pseudo-aléatoire sera donné.',
+    },
     label: {
       control: 'text',
       description: 'Label de la case à cocher',
@@ -28,10 +32,6 @@ export default {
       control: 'boolean',
       description: 'Indique si le champ est obligatoire',
     },
-    checked: {
-      control: 'boolean',
-      description: 'Indique si la case à cocher est cochée',
-    },
     errorMessage: {
       control: 'text',
       description: 'Texte du message à afficher en cas d’erreur',
@@ -40,6 +40,13 @@ export default {
       control: 'text',
       description: 'Texte du message à afficher en cas de succès',
     },
+    modelValue: {
+      control: 'boolean',
+      description: 'Valeur de la case à cocher : `true` si cochée, `false` sinon',
+    },
+    'update:modelValue': {
+      description: 'Événement émis lors du changement de l’état coché (`true`) ou non (`false`)',
+    },
     onChange: { action: 'changed' },
   },
 }
@@ -50,33 +57,28 @@ export const Checkbox = (args) => ({
     return { ...args }
   },
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
       <DsfrCheckbox
         :label="label"
         :disabled="disabled"
         :required="required"
-        :modelValue="checked"
         :hint="hint"
         :name="name || 'name1'"
-        @update:modelValue="updateChecked($event)"
+        v-model="modelValue"
       />
-    </div>
   `,
-  methods: {
-    updateChecked (val) {
-      this.onChange(val)
-      this.checked = val
+  watch: {
+    modelValue (newValue, oldValue) {
+      this.onChange(newValue)
     },
   },
 })
 Checkbox.args = {
   disabled: false,
   dark: false,
-  checked: false,
+  modelValue: false,
   required: false,
   label: 'Checkbox 1',
   name: 'name1',
-  value: false,
   hint: 'Description 1',
 }
 
@@ -86,30 +88,25 @@ export const CheckboxAvecErreur = (args) => ({
     return args
   },
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
       <DsfrCheckbox
         :label="label"
         :disabled="disabled"
-        :modelValue="checked"
         :hint="hint"
-        @update:modelValue="updateChecked($event)"
         :error-message="errorMessage"
+        v-model="modelValue"
       />
-    </div>
   `,
-  methods: {
-    updateChecked (val) {
-      this.onChange(val)
-      this.checked = val
+  watch: {
+    modelValue (newValue, oldValue) {
+      this.onChange(newValue)
     },
   },
 })
 CheckboxAvecErreur.args = {
   disabled: false,
   dark: false,
-  checked: false,
+  modelValue: false,
   label: 'Checkbox 1',
-  value: false,
   hint: 'Description 1',
   errorMessage: 'Erreur formulaire',
 }
@@ -120,31 +117,26 @@ export const CheckboxAvecSucces = (args) => ({
     return args
   },
   template: `
-    <div :data-fr-theme="dark ? 'dark' : ''" style="background-color: var(--grey-1000-50); padding: 1rem;">
       <DsfrCheckbox
         :label="label"
         :disabled="disabled"
-        :modelValue="checked"
         :hint="hint"
-        @update:modelValue="updateChecked($event)"
         :valid-message="validMessage"
+        v-model="modelValue"
       />
-    </div>
   `,
-  methods: {
-    updateChecked (val) {
-      this.onChange(val)
-      this.checked = val
+  watch: {
+    modelValue (newValue, oldValue) {
+      this.onChange(newValue)
     },
   },
 })
 
 CheckboxAvecSucces.args = {
   disabled: false,
   dark: false,
-  checked: false,
+  modelValue: false,
   label: 'Checkbox 1',
-  value: false,
   hint: 'Description 1',
   validMessage: 'Formulaire valide',
 }

src/components/DsfrConsent/DsfrConsent.stories.js

@@ -17,6 +17,15 @@ export default {
       control: 'text',
       description: '',
     },
+    'accept-all': {
+      description: 'Évenement émis lors du clic sur le bouton \'Tout accepter\'',
+    },
+    'refuse-all': {
+      description: 'Évenement émis lors du clic sur le bouton \'Tout refuser\'',
+    },
+    customize: {
+      description: 'Évenement émis lors du clic sur le bouton \'Personnaliser\'',
+    },
   },
 }
 

src/components/DsfrFileUpload/DsfrFileUpload.stories.js

@@ -12,6 +12,10 @@ export default {
       control: 'text',
       description: 'Valeur de l’attribut `id` de l’input (sera aussi utilisé pour l’attribut `for` du `<label>`), chaîne aléatoire par défaut (conseillé)',
     },
+    modelValue: {
+      control: 'text',
+      description: 'Valeur du fichier sélectionné',
+    },
     label: {
       control: 'text',
       description: 'Court texte mettant en avant l’input associé',
@@ -24,6 +28,12 @@ export default {
       control: 'text',
       description: 'Texte de l’erreur à afficher à l’utilisateur',
     },
+    'update:modelValue': {
+      description: 'Événement émis lors du changement de valeur de `modelValue` : le paramètre passé est la valeur de la propriété `value` de l’`input`',
+    },
+    change: {
+      description: 'Événement émis lors du changement de valeur de `modelValue` : le paramètre passé est la valeur de la propriété `files` de l’input',
+    },
   },
 }
 

src/components/DsfrFollow/DsfrFollow.vue

@@ -42,19 +42,21 @@ export default defineComponent({
     <div class="fr-container">
       <div class="fr-grid-row">
         <!-- @slot Slot par défaut pour le contenu. Sera dans `<div class="fr-grid-row">` -->
-        <slot />
-        <div
-          v-if="newsletterData"
-          :class="{ 'fr-col-12' : true, 'fr-col-md-8': hasNetworks }"
-        >
-          <DsfrNewsLetter v-bind="newsletterData" />
-        </div>
-        <div
-          v-if="hasNetworks"
-          :class="{ 'fr-col-12' : true, 'fr-col-md-4': hasNewsletter }"
-        >
-          <DsfrSocialNetworks :networks="networks" />
-        </div>
+        <slot>
+          <div
+            v-if="newsletterData"
+            :class="{ 'fr-col-12' : true, 'fr-col-md-8': hasNetworks }"
+          >
+            <DsfrNewsLetter v-bind="newsletterData" />
+          </div>
+          <div
+            v-if="hasNetworks"
+            :class="{ 'fr-col-12' : true, 'fr-col-md-4': hasNewsletter }"
+          >
+            <DsfrSocialNetworks :networks="networks" />
+          </div>
+          <slot />
+        </slot>
       </div>
     </div>
   </div>