docs: 📝 ajoute la doc vitepress de composants

- DsfrShare
- DsfrSkipLinks
- DsfrStepper
- DsfrSummary
- DsfrQuote
- DsfrHighlight
- DsfrCallout

Author: laruiss

.vitepress/config.ts

@@ -266,6 +266,10 @@ const composants = [
     text: 'DsfrPicture',
     link: '/composants/DsfrPicture.md',
   },
+  {
+    text: 'DsfrQuote',
+    link: '/composants/DsfrQuote.md',
+  },
   {
     text: 'DsfrRadioButton',
     link: '/composants/DsfrRadioButton.md',
@@ -298,6 +302,22 @@ const composants = [
     text: 'DsfrSelect',
     link: '/composants/DsfrSelect.md',
   },
+  {
+    text: 'DsfrSkipLinks',
+    link: '/composants/DsfrSkipLinks.md',
+  },
+  {
+    text: 'DsfrShare',
+    link: '/composants/DsfrShare.md',
+  },
+  {
+    text: 'DsfrStepper',
+    link: '/composants/DsfrStepper.md',
+  },
+  {
+    text: 'DsfrSummary',
+    link: '/composants/DsfrSummary.md',
+  },
   {
     text: 'DsfrTable',
     link: '/composants/DsfrTable.md',

.vitepress/theme/style.css

@@ -199,6 +199,10 @@
   width: 100%;
 }
 
+.w-90 {
+  width: 90%;
+}
+
 .h-full {
   width: 100%;
 }

docs/composants.md

@@ -18,6 +18,10 @@ Le storybook est toujours disponible [ici](https://storybook.vue-ds.fr)
 - [DsfrBadge](./composants/DsfrBadge)
 - [DsfrTag](./composants/DsfrTag)
 
+## Barre de recherche
+
+- [DsfrSearchBar](./composants/DsfrSearchBar)
+
 ## Boutons et contrôles segmentés
 
 - [DsfrButton](./composants/DsfrButton)
@@ -30,58 +34,107 @@ Le storybook est toujours disponible [ici](https://storybook.vue-ds.fr)
 - [DsfrCard](./composants/DsfrCard)
 - [DsfrTile](./composants/DsfrTile)
 
+## Citation
+
+- [DsfrQuote](./composants/DsfrQuote)
+
 ## Consentement
 
 - [DsfrConsent](./composants/DsfrConsent)
 
-## En-tête de page
+## Étapier (indicateur d’étape)
+
+- [DsfrStepper](./composants/DsfrStepper)
+
+## En-tête, pied de page et logo
 
 - [DsfrHeader](./composants/DsfrHeader)
 - [DsfrHeaderMenuLink](./composants/DsfrHeaderMenuLink)
 - [DsfrLanguageSelector](./composants/DsfrLanguageSelector)
+- [DsfrFooter](./composants/DsfrFooter)
+- [DsfrFooterLink](./composants/DsfrFooterLink)
+- [DsfrLogo](./composants/DsfrLogo)
 
 ## Fil d’ariane
 
 - [DsfrBreadcrumb](./composants/DsfrBreadcrumb)
 
 ## Formulaire (éléments de)
 
+- [DsfrCheckbox](./composants/DsfrCheckbox)
+- [DsfrCheckboxSet](./composants/DsfrCheckboxSet)
+- [DsfrFieldset](./composants/DsfrFieldset)
 - [DsfrFileUpload](./composants/DsfrFileUpload)
 - [DsfrFileDownload](./composants/DsfrFileDownload)
 - [DsfrInput](./composants/DsfrInput)
+- [DsfrInputGroup](./composants/DsfrInputGroup)
 - [DsfrRadioButton](./composants/DsfrRadioButton)
 - [DsfrRadioButtonSet](./composants/DsfrRadioButtonSet)
-- [DsfrCheckbox](./composants/DsfrCheckbox)
-- [DsfrCheckboxSet](./composants/DsfrCheckboxSet)
-- [DsfrInputGroup](./composants/DsfrInputGroup)
 - [DsfrRange](./composants/DsfrRange)
-- [DsfrFieldset](./composants/DsfrFieldset)
+- [DsfrToggleSwitch](./composants/DsfrToggleSwitch)
+
+## Icône
+
+- [VIcon](./composants/VIcon)
+
+## Image et vidéos
+
+- [DsfrPicture](./composants/DsfrPicture)
+- [DsfrVideo](./composants/DsfrVideo)
+- [DsfrTranscription](./composants/DsfrTranscription)
 
 ## Infobulle (Information contextuelle)
 
 - [DsfrTooltip](./composants/DsfrTooltip)
 
+## Liens d’évitement
+
+- [DsfrSkipLinks](./composants/DsfrSkipLinks)
+
+## Mise en avant et mise en exergue
+
+- [DsfrCallout](./composants/DsfrCallout)
+- [DsfrHighlight](./composants/DsfrHighlight)
+
 ## Modale
 
 - [DsfrModal](./composants/DsfrModal)
 
+## Notice
+
+- [DsfrNotice](./composants/DsfrNotice)
+
 ## Onglets
 
 - [DsfrTabs](./composants/DsfrTabs)
 
-## Pages d’erreurs
+## Partage et réseaux sociaux
 
-- [DsfrErrorPage](./composants/DsfrErrorPage)
+- [DsfrFollow](./composants/DsfrFollow)
+- [DsfrNewsLetter](./composants/DsfrNewsLetter)
+- [DsfrSocialNetworks](./composants/DsfrSocialNetworks)
+- [DsfrShare](./composants/DsfrShare)
 
-## Pied de page
+## Pagination
 
-- [DsfrFooter](./composants/DsfrFooter)
-- [DsfrFooterLink](./composants/DsfrFooterLink)
+- [DsfrPagination](./composants/DsfrPagination)
+
+## Pages d’erreurs
+
+- [DsfrErrorPage](./composants/DsfrErrorPage)
 
 ## Retour en haut de page
 
 - [DsfrBackToTop](./composants/DsfrBackToTop)
 
+## Sommaire
+
+- [DsfrSummary](./composants/DsfrSummary)
+
+## Sélecteur de langage
+
+- [DsfrLanguageSelector](./composants/DsfrLanguageSelector)
+
 ## Tableau
 
 Conseillé pour des tableaux complexes :

src/components/DsfrCallout/DsfrCallout.md

@@ -30,20 +30,26 @@ Ce composant ne déclenche pas d'événements personnalisés.
 
 - `default` : Contenu additionnel à afficher à l'intérieur de l'encadré. Ce slot est intégré dans la structure principale du composant et s'affiche sous le texte principal.
 
+## 📝 Exemples
+
 ::: code-group
 
-<Story data-title="Démo" min-h="200px">
+<Story data-title="Démo" min-h="420px">
   <DsfrCalloutDemo />
 </Story>
 
 <<< docs-demo/DsfrCalloutDemo.vue [Code de la démo]
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
 
 <<< DsfrCallout.vue
+<<< DsfrCallout.types.ts
 
 :::
 
 <script setup lang="ts">
 import DsfrCalloutDemo from './docs-demo/DsfrCalloutDemo.vue'
 </script>
-
-## ⚙️ Code source du composant

src/components/DsfrHighlight/DsfrHighlight.md

@@ -1,4 +1,4 @@
-# Highlight - `DsfrHighlight`
+# Mise en exergue - `DsfrHighlight`
 
 ## 🌟 Introduction
 

src/components/DsfrQuote/DsfrQuote.md

@@ -0,0 +1,80 @@
+# Citation - `DsfrQuote`
+
+## 🌟 Introduction
+
+Le composant `DsfrQuote` permet d’afficher une citation stylisée, accompagnée d’un auteur, d’une source, et éventuellement d’une image illustrative. Ce composant respecte les standards du [Design System de l'État Français (DSFR)](https://www.systeme-de-design.gouv.fr/) pour offrir une présentation élégante et accessible.
+
+🏅 La documentation sur les liens d’évitement le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/citation)
+
+<VIcon name="vi-file-type-storybook" /> La story sur les liens d’évitement sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrquote--docs)
+
+## 📐 Structure
+
+Le composant affiche :
+
+- Une citation (`<blockquote>`) avec un lien optionnel vers la source.
+- Une légende (`<figcaption>`) contenant :
+  - Le nom de l’auteur.
+  - La source de la citation, accompagnée d’un lien ou de détails supplémentaires.
+- Une image optionnelle, destinée à illustrer visuellement la citation.
+
+## 🛠️ Props
+
+| Nom          | Type                              | Défaut       | Description                                                                 |
+|--------------|-----------------------------------|--------------|-----------------------------------------------------------------------------|
+| `quote`      | `string`                          | `undefined`  | Texte de la citation.                                                      |
+| `author`     | `string`                          | `undefined`  | Nom de l’auteur de la citation.                                            |
+| `details`    | `{ label: string, url: string }[]`| `[]`         | Détails supplémentaires sous forme de liste (liens ou texte).              |
+| `source`     | `string`                          | `''`         | Nom de la source de la citation.                                           |
+| `sourceUrl`  | `string`                          | `''`         | URL de la source, utilisée pour l’attribut `cite` du bloc de citation.     |
+| `quoteImage` | `string`                          | `''`         | URL de l’image illustrative associée à la citation.                        |
+
+## 📡 Événements
+
+Aucun événement spécifique n'est émis par ce composant.
+
+## 🧩 Slots
+
+Aucun slot disponible pour ce composant.
+
+## 📝 Exemples
+
+### Exemple de base
+
+```vue
+<DsfrQuote
+  quote="L'accessibilité numérique est un droit fondamental."
+  author="Tim Berners-Lee"
+  source="W3C"
+  sourceUrl="https://www.w3.org/"
+  :details="[
+    { label: 'Voir le site officiel', url: 'https://www.w3.org/' }
+  ]"
+  quoteImage="https://www.example.com/image.jpg"
+/>
+```
+
+### Exemple complet
+
+::: code-group
+
+<Story data-title="Démo" min-h="120px">
+  <DsfrQuoteDemo />
+</Story>
+
+<<< docs-demo/DsfrQuoteDemo.vue [Code de la démo]
+
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
+
+<<< DsfrQuote.vue
+<<< DsfrQuote.types.ts
+
+:::
+
+<script setup lang="ts">
+import DsfrQuoteDemo from './docs-demo/DsfrQuoteDemo.vue'
+</script>

src/components/DsfrQuote/docs-demo/DsfrQuoteDemo.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import DsfrQuote from '../DsfrQuote.vue'
+
+const quote = 'LA citation'
+const author = 'Pierre-Louis EGAUD'
+const details = [
+  {
+    url: 'https://www.wikipedia.fr',
+    label: 'wikipedia',
+  },
+]
+const source = 'Duckduckgo'
+const sourceUrl = 'https://www.duckduckgo.com'
+const quoteImage = 'https://loremflickr.com/g/150/150/cat?random=1'
+</script>
+
+<template>
+  <DsfrQuote
+    :quote="quote"
+    :author="author"
+    :details="details"
+    :source="source"
+    :source-url="sourceUrl"
+    :quote-image="quoteImage"
+  />
+</template>