docs: 📝 améliore la documentation

Author: laruiss

.vitepress/config.ts

@@ -99,6 +99,10 @@ const composants = [
     text: 'DsfrAccordion',
     link: '/composants/DsfrAccordion.md',
   },
+  {
+    text: 'DsfrAccordionsGroup',
+    link: '/composants/DsfrAccordionsGroup.md',
+  },
   {
     text: 'DsfrAlert',
     link: '/composants/DsfrAlert.md',
@@ -123,6 +127,10 @@ const composants = [
     text: 'DsfrButtonGroup',
     link: '/composants/DsfrButtonGroup.md',
   },
+  {
+    text: 'DsfrCallout',
+    link: '/composants/DsfrCallout.md',
+  },
   {
     text: 'DsfrCard',
     link: '/composants/DsfrCard.md',

docs/guide/migrations.md

@@ -33,6 +33,12 @@ Il faudra peut-être dans certains cas renommer les icônes car la syntaxe atten
 
 Dans les cas ou le nom de la collection ne contient pas de tiret `-`, alors le `-` est accepté en tant que séparateur entre le nom de collection et le nom d’icône.
 
+### Les onglets
+
+Avant la version 6.x de VueDsfr, pour activer un onglet particulier, il fallait passer la prop `selected` au bon titre d’onglet et à la bonne zone de contenu.
+
+Désormais c’est beaucoup plus simple, il suffit d’utiliser `v-model` sur le composant parent `DsfrTabs`.
+
 ## Migration vers 3.x (depuis 1.x ou 2.x)
 
 La migration de la version 1.x ou 2.x vers la version 3.x nécessite un certain nombre de changements

package.json

@@ -51,7 +51,7 @@
     "dev": "storybook dev -p 6006",
     "vitest": "vitest",
     "coverage": "vitest run --coverage",
-    "test-storybook": "test-storybook --url $TEST_STORYBOOK_URL",
+    "test-storybook": "cross-env test-storybook --url ${TEST_STORYBOOK_URL:-http://localhost:6006}",
     "test": "run-s test:unit",
     "test:watch": "vitest",
     "test:unit": "vitest run",

src/components/DsfrAccordion/DsfrAccordion.stories.ts

@@ -49,18 +49,14 @@ export const Accordeon = (args) => ({
   },
 
   template: `
-  <DsfrAccordionsGroup>
+  <DsfrAccordionsGroup v-model="selectedAccordion">
     <DsfrAccordion
       :title="title1"
-      :expanded-id="expandedId"
-      @expand="expandedId = $event"
     >
       Contenu de l’accordéon 1
     </DsfrAccordion>
     <DsfrAccordion
       :title="title2"
-      :expanded-id="expandedId"
-      @expand="expandedId = $event"
     >
       Contenu de l’accordéon 2
     </DsfrAccordion>
@@ -69,6 +65,7 @@ export const Accordeon = (args) => ({
 })
 Accordeon.args = {
   title: 'Un titre d’accordéon',
+  selectedAccordion: undefined,
 }
 Accordeon.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
@@ -84,12 +81,12 @@ Accordeon.play = async ({ canvasElement }) => {
 export const AccordeonSimple = (args) => ({
   components: {
     DsfrAccordion,
+    DsfrAccordionsGroup,
   },
 
   data () {
     return {
       ...args,
-      expandedId: undefined,
       title1: `${args.title} 1`,
     }
   },
@@ -104,6 +101,7 @@ export const AccordeonSimple = (args) => ({
 })
 AccordeonSimple.args = {
   title: 'Un titre d’accordéon',
+  selectedAccordion: undefined,
 }
 AccordeonSimple.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
@@ -132,20 +130,16 @@ export const AccordeonDejaOuvert = (args) => ({
   },
 
   template: `
-  <DsfrAccordionsGroup>
+  <DsfrAccordionsGroup v-model="selectedAccordion">
     <DsfrAccordion
       :title="title1"
       id="accordeon-1"
-      :expanded-id="expandedId"
-      @expand="expandedId = $event"
     >
       Contenu de l’accordéon 1
     </DsfrAccordion>
     <DsfrAccordion
       :title="title2"
       id="accordeon-2"
-      :expanded-id="expandedId"
-      @expand="expandedId = $event"
     >
       Contenu de l’accordéon 2
     </DsfrAccordion>
@@ -154,6 +148,7 @@ export const AccordeonDejaOuvert = (args) => ({
 })
 AccordeonDejaOuvert.args = {
   title: 'Un titre d’accordéon',
+  selectedAccordion: 0,
 }
 AccordeonDejaOuvert.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
@@ -187,24 +182,18 @@ export const AccordeonDansUnAccordeon = (args) => ({
   },
 
   template: `
-    <DsfrAccordionsGroup>
+    <DsfrAccordionsGroup v-model="selectedAccordion">
       <DsfrAccordion
         :title="title1"
-        :expanded-id="expandedId"
-        @expand="expandedId = $event"
       >
-        <DsfrAccordionsGroup>
+        <DsfrAccordionsGroup v-model="selectedSubAccordion">
           <DsfrAccordion
             :title="titleSub1"
-            :expanded-id="subExpandedId"
-            @expand="subExpandedId = $event"
           >
             Contenu de l’accordéon dans l’accordéon 1.1
           </DsfrAccordion>
           <DsfrAccordion
             :title="titleSub2"
-            :expanded-id="subExpandedId"
-            @expand="subExpandedId = $event"
           >
             Contenu de l’accordéon dans l’accordéon 1.2
           </DsfrAccordion>
@@ -216,6 +205,8 @@ export const AccordeonDansUnAccordeon = (args) => ({
 AccordeonDansUnAccordeon.args = {
   title: 'Un titre d’accordéon',
   titleSub: 'Accordéon dans l’accordéon',
+  selectedAccordion: undefined,
+  selectedSubAccordion: undefined,
 }
 AccordeonDansUnAccordeon.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
@@ -248,18 +239,14 @@ export const AccordeonTitreCustom = (args) => ({
   },
 
   template: `
-    <DsfrAccordionsGroup>
+    <DsfrAccordionsGroup v-model="selectedAccordion">
       <DsfrAccordion
-        :expanded-id="expandedId"
-        @expand="expandedId = $event"
       >
         <template #title><h1>{{title1}}</h1></template>
         Contenu de l’accordéon avec titre customisé
       </DsfrAccordion>
       <DsfrAccordion
         :title="title2"
-        :expanded-id="expandedId"
-        @expand="expandedId = $event"
       >
         Test DsfrAccordion
       </DsfrAccordion>
@@ -269,6 +256,7 @@ export const AccordeonTitreCustom = (args) => ({
 AccordeonTitreCustom.args = {
   title1: 'Un titre d’accordéon customisé',
   title2: 'Un autre titre d’accordéon',
+  selectedAccordion: undefined,
 }
 AccordeonTitreCustom.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
@@ -297,7 +285,7 @@ export const AccordeonAvecCheckbox = (args) => ({
   },
 
   template: `
-    <DsfrAccordionsGroup>
+    <DsfrAccordionsGroup v-model="selectedAccordion">
       <template
         v-for="(accordion, name) in accordions"
         :id="\`accordion_${name}\`"
@@ -306,8 +294,6 @@ export const AccordeonAvecCheckbox = (args) => ({
         <DsfrAccordion
           :id="name"
           :title="name"
-          :expanded-id="expandedId"
-          @expand="id => expandedId = id"
         >
           <DsfrCheckboxSet
             :options="accordion.options"
@@ -318,6 +304,7 @@ export const AccordeonAvecCheckbox = (args) => ({
   `,
 })
 AccordeonAvecCheckbox.args = {
+  selectedAccordion: undefined,
   accordions: {
     'Accordéon 1': {
       options: [

src/components/DsfrAccordion/DsfrAccordionsGroup.md

@@ -41,7 +41,7 @@ Le composant `DsfrAccordionsGroup` agit comme un conteneur pour les composants d
 ## ⚙️ Code source des composants
 
 ::: code-group
-<<< DsfrAccordion.vue
+<<< DsfrAccordionsGroup.vue
 <<< DsfrAccordion.types.ts
 :::
 

src/components/DsfrAccordion/DsfrAccordionsGroup.stories.ts

@@ -51,28 +51,22 @@ export const AccordeonGroupe = (args) => ({
   },
 
   template: `
-  <DsfrAccordionsGroup>
+  <DsfrAccordionsGroup v-model="selectedAccordion">
     <DsfrAccordion
       id="accordion-1"
       :title="title1"
-      :expanded-id="expandedId"
-      @expand="expandedId = $event"
     >
       Contenu de l’accordéon 1
     </DsfrAccordion>
     <DsfrAccordion
       id="accordion-2"
       :title="title2"
-      :expanded-id="expandedId"
-      @expand="id => expandedId = id"
     >
       Contenu de l’accordéon 2
     </DsfrAccordion>
     <DsfrAccordion
       id="accordion-3"
       :title="title3"
-      :expanded-id="expandedId"
-      @expand="id => expandedId = id"
     >
       Contenu de l’accordéon 3
     </DsfrAccordion>
@@ -83,7 +77,7 @@ AccordeonGroupe.args = {
   title1: 'Un titre d’accordéon 1',
   title2: 'Un titre d’accordéon 2',
   title3: 'Un titre d’accordéon 3',
-  expandedId: '',
+  selectedAccordion: undefined,
 }
 
 AccordeonGroupe.play = async ({ canvasElement }) => {

src/components/DsfrCallout/DsfrCallout.md

@@ -33,17 +33,17 @@ Ce composant ne déclenche pas d'événements personnalisés.
 ::: code-group
 
 <Story data-title="Démo" min-h="200px">
-  <DsfrConsentDemo />
+  <DsfrCalloutDemo />
 </Story>
 
-<<< docs-demo/DsfrConsentDemo.vue [Code de la démo]
+<<< docs-demo/DsfrCalloutDemo.vue [Code de la démo]
 
-<<< DsfrConsent.vue
+<<< DsfrCallout.vue
 
 :::
 
 <script setup lang="ts">
-import DsfrConsentDemo from './docs-demo/DsfrConsentDemo.vue'
+import DsfrCalloutDemo from './docs-demo/DsfrCalloutDemo.vue'
 </script>
 
 ## ⚙️ Code source du composant

src/components/DsfrCallout/DsfrCallout.types.ts

@@ -1,10 +1,10 @@
-import type VIcon from '../VIcon/VIcon.vue'
 import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types'
+import type { VIconProps } from '../VIcon/VIcon.vue'
 
 export type DsfrCalloutProps = {
   title?: string
   content: string
   titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   button?: DsfrButtonProps
-  icon?: string | InstanceType<typeof VIcon>['$props']
+  icon?: string | VIconProps
 }

src/components/DsfrCallout/DsfrCallout.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+import VIcon from '../VIcon/VIcon.vue'
 import DsfrButton from '../DsfrButton/DsfrButton.vue'
 
 import type { DsfrCalloutProps } from './DsfrCallout.types'

src/components/DsfrCallout/docs-demo/DsfrCalloutDemo.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import type { VIconProps } from '@/components/VIcon/VIcon.types'
+import DsfrCallout from '../DsfrCallout.vue'
+import DsfrButton from '../../DsfrButton/DsfrButton.vue'
+
+const title = 'Titre de la mise en avant'
+const button = undefined
+const icon = 'ri:notification-3-line'
+const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol'
+const titleTag = undefined
+
+const animateTitle = 'Titre de la mise en avant stylée'
+const animatedIcon: VIconProps = { name: 'bi:bell', animation: 'ring' }
+const animatedtitleTag = 'h4'
+const buttonIcon = ref<VIconProps>({ name: 'ri-refresh-line', animation: 'spin' })
+const possibleAnimations = ['spin', 'wrench', 'pulse', 'spin-pulse', 'flash', 'float', 'ring'] as const
+const getRandomNb = (max = 1000, min = 0) => Math.floor(min + Math.random() * (max + 1 - min))
+function getRandomEl<T> (x: readonly T[]): T | undefined {
+  if (x.length === 0) {
+    return undefined
+  }
+  return x.at(getRandomNb(x.length - 1))
+}
+const getRandomAnimation = () => getRandomEl<(typeof possibleAnimations)[number]>(possibleAnimations)
+</script>
+
+<template>
+  <DsfrCallout
+    :title="`${title} (${titleTag ?? 'h3'})`"
+    :content="content"
+    :button="button"
+    :icon="icon"
+    :title-tag="titleTag"
+  />
+  <DsfrCallout
+    :title="`${animateTitle} (${animatedtitleTag ?? 'h3'})`"
+    :button="button"
+    :icon="animatedIcon"
+    :title-tag="animatedtitleTag"
+  >
+    Contenu <em>élaboré</em> avec d’autres composants
+    <DsfrButton
+      type="button"
+      :label="`(${buttonIcon.animation}) Cliquez-moi pour changer l’animation de l’icône !`"
+      :icon="buttonIcon"
+      @click="buttonIcon.animation = getRandomAnimation()"
+    />
+  </DsfrCallout>
+</template>