Merge pull request #1015 from dnum-mi/docs/add-doc-to-some-components

docs/add doc to some components

Author: laruiss

.vitepress/config.ts

@@ -174,6 +174,20 @@ const composants = [
     text: 'DsfrFileUpload',
     link: '/composants/DsfrFileUpload.md',
   },
+  {
+    text: 'DsfrFollow',
+    link: '/composants/DsfrFollow.md',
+    items: [
+      {
+        text: 'DsfrNewsLetter',
+        link: '/composants/DsfrNewsLetter.md',
+      },
+      {
+        text: 'DsfrSocialNetworks',
+        link: '/composants/DsfrSocialNetworks.md',
+      },
+    ],
+  },
   {
     text: 'DsfrFooter',
     link: '/composants/DsfrFooter.md',
@@ -228,6 +242,10 @@ const composants = [
     text: 'DsfrLanguageSelector',
     link: '/composants/DsfrLanguageSelector.md',
   },
+  {
+    text: 'DsfrLogo',
+    link: '/composants/DsfrLogo.md',
+  },
   {
     text: 'DsfrModal',
     link: '/composants/DsfrModal.md',
@@ -248,6 +266,10 @@ const composants = [
     text: 'DsfrPicture',
     link: '/composants/DsfrPicture.md',
   },
+  {
+    text: 'DsfrQuote',
+    link: '/composants/DsfrQuote.md',
+  },
   {
     text: 'DsfrRadioButton',
     link: '/composants/DsfrRadioButton.md',
@@ -280,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 :

docs/guide/icones.md

@@ -97,7 +97,7 @@ import { VIcon } from '@gouvminint/vue-dsfr'
 Si vous développez des applications destinées à des agents internes avec potentiellement des accès internet réduits, il
 est possible que les appels vers l’API iconify soient bloqués. Vous voudrez donc éviter ces appels réseaux.
 
-Dans ce but, depuis la version [7.3.0](https://github.com/dnum-mi/vue-dsfr/releases/tag/v7.3.0), la dépendance `@iconify/vue`
+Dans ce but, depuis la version [8.0.0](https://github.com/dnum-mi/vue-dsfr/releases/tag/v8.0.0), la dépendance `@iconify/vue`
 n’est plus incluse dans la bibliothèque, et doit être installée dans votre application.
 
 Avec cette modification, il est possible d’ajouter des collections d’icônes qui ne feront pas d’appels réseaux.

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/DsfrFollow/DsfrFollow.md

@@ -0,0 +1,104 @@
+# Suivre (lettre d’information et réseaux sociaux) - `DsfrFollow`
+
+## 🌟 Introduction
+
+Le composant `DsfrFollow` est un conteneur pratique permettant d'afficher une section combinée pour une inscription à une newsletter et une liste de réseaux sociaux. Idéal pour renforcer l'engagement des utilisateurs sur votre site, ce composant combine flexibilité et respect des standards de la [Design System de l'État Français (DSFR)](https://www.systeme-de-design.gouv.fr/).
+
+🏅 La documentation sur « Suivre » sur le [DSFR](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/lettre-d-information-et-reseaux-sociaux)
+
+<VIcon name="vi-file-type-storybook" /> La story sur « Suivre » sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrfollow--docs)
+
+## 📐 Structure
+
+Le composant affiche une grille responsive contenant :
+
+- Une **section newsletter**, propulsée par le composant enfant `DsfrNewsLetter`.
+- Une **section réseaux sociaux**, utilisant le composant `DsfrSocialNetworks`.
+- Un **slot par défaut**, permettant d'insérer un contenu personnalisé.
+
+## 🛠️ Props
+
+| Nom              | Type                                                      | Défaut       | Description                                                                 |
+|-------------------|-----------------------------------------------------------|--------------|-----------------------------------------------------------------------------|
+| `newsletterData` | `DsfrNewsLetterProps`                                      | `undefined`  | Données pour configurer la section newsletter.                             |
+| `networks`       | `DsfrSocialNetwork[]`                                      | `[]`         | Liste des réseaux sociaux à afficher avec leurs détails (`type`, `name`, `href`). |
+| `onlyCallout`    | `boolean` (hérité de `DsfrNewsLetterProps`)                | `false`      | Indique si seule une version "callout" de la newsletter doit être utilisée. |
+
+### Props de `DsfrNewsLetter`
+
+Voici les principales options de configuration pour `newsletterData` :
+
+| Nom             | Type                     | Défaut       | Description                                                                 |
+|------------------|--------------------------|--------------|-----------------------------------------------------------------------------|
+| `title`         | `string`                 | `undefined`  | Titre de la section newsletter.                                            |
+| `description`   | `string`                 | `undefined`  | Texte descriptif au-dessus du champ email.                                 |
+| `email`         | `string`                 | `undefined`  | Adresse email pré-remplie (si applicable).                                 |
+| `error`         | `string`                 | `undefined`  | Message d'erreur à afficher en cas de problème.                            |
+| `placeholder`   | `string`                 | `undefined`  | Placeholder du champ email.                                                |
+| `buttonText`    | `string`                 | `undefined`  | Texte du bouton d'action.                                                  |
+| `buttonAction`  | `($event: MouseEvent) => void` | `undefined`  | Fonction déclenchée au clic du bouton.                                     |
+
+### Props de `DsfrSocialNetworks`
+
+Les réseaux sociaux (`networks`) sont des objets de type :
+
+| Nom   | Type                   | Description                                                               |
+|-------|------------------------|---------------------------------------------------------------------------|
+| `type` | `'facebook' | 'twitter-x' | 'instagram' | 'linkedin' | 'youtube'` | Type de réseau social (icône associée). |
+| `name` | `string`              | Nom à afficher pour le réseau social.                                     |
+| `href` | `string`              | URL vers le profil ou la page sociale.                                    |
+
+## 📡 Événements
+
+Aucun événement spécifique n'est émis par ce composant. Les événements doivent être gérés via les props des sous-composants `DsfrNewsLetter` et `DsfrSocialNetworks`.
+
+## 🧩 Slots
+
+| Nom     | Contenu                                                                                      |
+|---------|----------------------------------------------------------------------------------------------|
+| `default` | Permet d'insérer du contenu personnalisé dans le conteneur global du composant.             |
+
+## 📝 Exemples
+
+### Exemple de base
+
+```vue
+<DsfrFollow
+  :newsletterData="{
+    title: 'Abonnez-vous à notre newsletter !',
+    description: 'Restez informé(e) de nos actualités et nouveautés.',
+    buttonText: 'S\'inscrire',
+    placeholder: 'Votre email'
+  }"
+  :networks="[
+    { type: 'facebook', name: 'Facebook', href: 'https://facebook.com' },
+    { type: 'twitter-x', name: 'Twitter', href: 'https://twitter.com' },
+    { type: 'linkedin', name: 'LinkedIn', href: 'https://linkedin.com' }
+  ]"
+/>
+```
+
+### Exemple complet
+
+::: code-group
+
+<Story data-title="Démo" min-h="400px">
+  <DsfrFollowDemo />
+</Story>
+
+<<< docs-demo/DsfrFollowDemo.vue [Code de la démo]
+
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
+
+<<< DsfrFollow.vue
+<<< DsfrFollow.types.ts
+
+:::
+
+<script setup lang="ts">
+import DsfrFollowDemo from './docs-demo/DsfrFollowDemo.vue'
+</script>