docs: 📝 égaye et homogénéise les docs vitepress

laruiss · laruiss · commit ed536cdc3c16 · 2023-12-21T13:16:33.000+01:00
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -85,6 +85,10 @@ export default defineConfig({
         link: '/composants',
         collapsed: false,
         items: [
+          {
+            text: 'DsfrAccordion',
+            link: '/composants/DsfrAccordion.md',
+          },
           {
             text: 'DsfrAlert',
             link: '/composants/DsfrAlert.md',
diff --git a/.vitepress/theme/icons.ts b/.vitepress/theme/icons.ts
@@ -7,4 +7,5 @@ export {
   SiGithub,
   SiNpm,
   SiVisualstudiocode,
+  ViFileTypeStorybook,
 } from 'oh-vue-icons/icons'
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
@@ -160,3 +160,29 @@
 .vp-doc summary {
   cursor: pointer;
 }
+
+.demo-container-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.w-full {
+  width: 100%;
+}
diff --git a/docs/_frame.md b/docs/_frame.md
@@ -2,7 +2,7 @@
 layout: false
 ---
 
-<div ref="el" class="flex h-4 flex-col justify-center px-6 pb-5"></div>
+<div ref="el" class="flex h-4 flex-col px-6 pb-5"></div>
 
 <script setup lang="ts">
 import { useStyleTag } from '@vueuse/core'
diff --git a/src/components/DsfrAccordion/DsfrAccordion.md b/src/components/DsfrAccordion/DsfrAccordion.md
@@ -1,8 +1,14 @@
 # Accordéon - `DsfrAccordion`
 
+## 🌟 Introduction
+
 Les accordéons permettent aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page.
 
-## Structure
+🏅 La documentation sur l’accordéon sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon)
+
+<VIcon name="vi-file-type-storybook" /> La story sur l’accordéon sur le storybook de [VueDsfr](https://vue-dsfr.netlify.app/?path=/docs/composants-dsfraccordion--docs)
+
+## 📐 Structure
 
 Un accordéon est constitué des éléments suivants :
 
@@ -16,16 +22,16 @@ Autres props :
 - **`id`** : identifiant du contenu de l’accordéon, qui est utilisé aussi pour l’attribut `aria-controls` du bouton qui permet de plier et déplier l’accordéon
 - **`expandedId`** : identifiant de l’accordéon actuellement déplié (pour savoir si l’accordéon doit être déplié)
 
-## Les props
+## 🛠️ Les props
 
-|  nom                   |   type      |  défaut         | obligatoire |
-| ----------------------- | ---------   | ---------------- | -------- |
-| `title`                    | *`string`*    | | oui |
+|  nom                    |   type        |  défaut          | obligatoire |
+| ----------------------- | ---------     | ---------------- | --------    |
+| `title`                 | *`string`*    | | ✅ |
 | `titleTag`              | [*`TitleTag`*](/docs/types.md#title-tag "'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'")  |    `'h3'`     | |
 | `id`                    | *`string`*    | *random string*  | |
-| `expandedId`                    | *`string`*    | *`undefined`*  | |
+| `expandedId`            | *`string`*    | *`undefined`*  | |
 
-## Les événements
+## 📡 Les événements
 
 `DsfrAccordion` déclenche l’événement `'expand'` au clic sur le titre de l’accordéon.
 
@@ -35,7 +41,11 @@ Autres props :
 
 Ceci permet de récupérer l’id et de passer la prop **`expandedId`** à tous les accordéons du groupe (voir le code de la démo ci-dessous).
 
-## Les groupes d’accordéons - `DsfrAccordionGroup`
+## 🧩 Les slots
+
+`DsfrAccordion` possède un slot par défaut pour le contenu de l’accordéon.
+
+## 🏗️ Les groupes d’accordéons - `DsfrAccordionGroup`
 
 Un accordéon prend plus de sens lorsqu’il fait partie d’un groupe (comme nous tous, non ?).
 
@@ -94,7 +104,7 @@ et
 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
+## 📝 Un exemple complet
 
 ::: code-group
 
diff --git a/src/components/DsfrAlert/DsfrAlert.md b/src/components/DsfrAlert/DsfrAlert.md
@@ -1,17 +1,19 @@
 # Alertes - `DsfrAlert`
 
+## 🌟 Introduction
+
 Les alertes permettent d’attirer l’attention de l’utilisateur sur une information sans interrompre sa tâche en cours.
 
 L’alerte est disponible en deux tailles :
 
 - taille médium (MD, par défaut, si la prop `small` est absente ou à `false`) et
 - petite taille ‘SM’ si la prop `small` est à `true`.
 
-La documentation sur l’alerte sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte)
+🏅 La documentation sur l’alerte sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte)
 
-La story sur l’alerte sur le storybook de [VueDsfr](https://vue-dsfr.netlify.app/?path=/docs/composants-dsfralert--docs)
+<VIcon name="vi-file-type-storybook" /> La story sur l’alerte sur le storybook de [VueDsfr](https://vue-dsfr.netlify.app/?path=/docs/composants-dsfralert--docs)
 
-## Structure
+## 📐 Structure
 
 L’alerte est composée des éléments suivants :
 
@@ -33,28 +35,28 @@ Autres props :
 - `closed` sert à indiquer si l’alerte doit être présente (`false`) ou non (`true`) dans le DOM.
 - `titleTag` permet d’indiquer la balise à utiliser pour le `title` : il s’agit de `h3` par défaut, cependant, pour passer les tests RGAA, il faut que les niveaux de titres se suivent et soient cohérents (par exemple, si sur la page il n’y a pas de `<h2>`, il faut passer `'h2'` comme valeur à la prop `titleTag` pour que le titre de la modal soit un `<h2>`).
 
-## Les props
+## 🛠️ Les props
 
 |  nom                   |   type      |  défaut         | obligatoire |
 | ----------------------- | ---------   | ---------------- | -------- |
 | `id`                    | *`string`*    | *random string*  | |
 | `type`                  | *`'info' \| 'success' \| 'warning' \| 'error'`*  | `'info'`           |
 | `title`                 | *`string`*  |      `''`        |  |
-| `description`           | *`string`*  |                  | oui |
+| `description`           | *`string`*  |                  | ✅   |
 | `titleTag`              | [*`TitleTag`*](/docs/types.md#title-tag "'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'")  |    `'h3'`     | |
 | `small`                 | *`boolean`* | `false`          | |
 | `closed`                | *`boolean`* | `false`          | |
 | `closeable`             | *`boolean`* | `false`          | |
 
-## Les événements
+## 📡 Les événements
 
 `DsfrAlert` déclenche l’événement `'close'` lors du clic sur le bouton pour fermer l’alerte, sans données (sans *payload*).
 
 |  nom                   |   donnée (*payload*) |
-| ---------------------- |  ---------            |
-| `'close'` |       *aucune*       |
+| ---------------------- |  ---------           |
+| `'close'`              |       *aucune*       |
 
-## Toutes les variantes d’Alertes
+## 📝 Toutes les variantes 🌈 d’Alertes
 
 ::: code-group
 
diff --git a/src/components/DsfrBackToTop/DsfrBackToTop.md b/src/components/DsfrBackToTop/DsfrBackToTop.md
@@ -1,5 +1,7 @@
 # Retour en haut de page - `DsfrBackToTop`
 
+## 🌟 Introduction
+
 Bonjour et bienvenue à cette page de documentation incroyablement utile (et légèrement humoristique) pour notre composant `DsfrBackToTop`. Ce composant est votre meilleur ami pour permettre aux utilisateurs de remonter en haut de la page avec style et élégance. Et oui, même dans le monde du code, la classe, ça compte !
 
 Dans les pages de contenu longues, il est possible de proposer un bouton de retour en haut de page à la fin du contenu.
@@ -13,11 +15,15 @@ Le lien de retour en haut de page se place à la fin du contenu de la page, avan
 
 Si il y a des bloc de poursuite de lecture (liens vers d’autres articles), il est conseillé de placer le retour en haut de page avant ces blocs.
 
+🏅 La documentation sur le retour en haut de page sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/retour-en-haut-de-page/)
+
+<VIcon name="vi-file-type-storybook" /> La story sur le retour en haut de page sur le storybook de [VueDsfr](https://vue-dsfr.netlify.app/?path=/docs/composants-dsfrbacktotop--docs)
+
 ## Aperçu
 
 `DsfrBackToTop` est un composant simple mais chic, permettant d'ajouter un lien de retour en haut de la page dans vos applications Vue. Il intègre un style distinctif et des options de positionnement pour s'adapter parfaitement à votre mise en page.
 
-## Props
+## 🛠️ Les props
 
 Notre composant est assez flexible et comprend les props suivantes :
 
diff --git a/src/components/DsfrBadge/DsfrBadge.md b/src/components/DsfrBadge/DsfrBadge.md
@@ -1 +1,64 @@
 # Badges - `DsfrBadge`
+
+## 🌟 Introduction
+
+Le `DsfrBadge` est le super-héros des petites étiquettes ! Ce composant Vue est idéal pour afficher des informations courtes et importantes, comme des catégories, des étiquettes ou des statuts. C'est comme le fromage sur votre pizza : petit mais essentiel !
+
+🏅 La documentation sur le badge sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/badge)
+
+<VIcon name="vi-file-type-storybook" /> La story sur le badge sur le storybook de [VueDsfr](https://vue-dsfr.netlify.app/?path=/docs/composants-dsfrbadge--docs)
+
+## 📐 Structure
+
+- Le composant est un élément `p` avec la classe `fr-badge`.
+- Les props permettent de modifier l'apparence du badge selon les props : type (), présence d'icône, taille et gestion du texte trop long.
+- Le `label` est affiché à l'intérieur d'un `span`, potentiellement avec la prop `ellipsis` et une taille définie ou maximale pour gérer le texte tronqué.
+
+## 🛠️ Les props
+
+| Nom | Type | Défaut | Obligatoire | Description |
+| --- | --- | --- | --- | --- |
+| `type` | `'success' \| 'warning' \| 'error' \| 'info'` | 'info' |  | Définit le type de badge et change la couleur du badge en fonction du type. |
+| `label` | `string` |  | ✅ | Le texte à afficher dans le badge. |
+| `noIcon` | `boolean` | `false` | | Si `true`, le badge s'affiche sans icône. |
+| `small` | `boolean` | `false` | | Si `true`, affiche un badge de taille réduite. |
+| `ellipsis` | `boolean` | `false` | | Si `true`, le texte est tronqué avec des points de suspension s'il est trop long. |
+
+## 📝 Exemples d'utilisation
+
+```vue
+<template>
+  <DsfrBadge
+    type="success"
+    label="Approuvé"
+  />
+</template>
+```
+
+```vue
+<template>
+  <DsfrBadge
+    type="info"
+    label="Titre peut-être un peu trop long"
+    ellipsis
+    style="max-width=150px;"
+  />
+</template>
+```
+
+::: code-group
+
+<Story data-title="Démo" min-h="400px">
+  <DsfrBadgeExample />
+</Story>
+
+<<< docs-demo/DsfrBadgeExample.vue [Code de la démo]
+
+<<< DsfrBadge.vue
+:::
+
+Voilà, le DsfrBadge est prêt à illuminer vos interfaces comme les lumières de la Tour Eiffel illuminent Paris la nuit. Utilisez-le pour mettre en avant ces petits détails qui font toute la différence. À vos badges, prêts, partez ! 🚀💡
+
+<script setup lang="ts">
+import DsfrBadgeExample from './docs-demo/DsfrBadgeExample.vue'
+</script>
diff --git a/src/components/DsfrBadge/DsfrBadge.vue b/src/components/DsfrBadge/DsfrBadge.vue
@@ -16,6 +16,7 @@ withDefaults(defineProps<DsfrBadgeProps>(), {
       'fr-badge--no-icon': noIcon,
       'fr-badge--sm': small,
     }"
+    :title="ellipsis ? label : undefined"
   >
     <span :class="ellipsis ? 'fr-ellipsis' : ''">
       {{ label }}
diff --git a/src/components/DsfrBadge/docs-demo/DsfrBadgeExample.vue b/src/components/DsfrBadge/docs-demo/DsfrBadgeExample.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import DsfrBadge from '../DsfrBadge.vue'
+</script>
+
+<template>
+  <div class="flex justify-center w-full gap-4">
+    <div class="demo-container-col">
+      <DsfrBadge
+        label="Badge défaut"
+      />
+      <DsfrBadge
+        label="Badge succès"
+        type="success"
+      />
+      <DsfrBadge
+        label="Badge danger"
+        type="warning"
+      />
+      <DsfrBadge
+        label="Badge erreur"
+        type="error"
+      />
+      <DsfrBadge
+        label="Badge info"
+        type="info"
+      />
+      <DsfrBadge
+        label="Badge 'none'"
+        type="none"
+      />
+    </div>
+    <div class="demo-container-col">
+      <DsfrBadge
+        label="Badge petit défaut"
+        small
+      />
+      <DsfrBadge
+        label="Badge petit succès"
+        type="success"
+        small
+      />
+      <DsfrBadge
+        label="Badge petit danger"
+        type="warning"
+        small
+      />
+      <DsfrBadge
+        label="Badge petit erreur"
+        type="error"
+        small
+      />
+      <DsfrBadge
+        label="Badge petit info"
+        type="info"
+        small
+      />
+      <DsfrBadge
+        label="Badge petit 'none'"
+        type="none"
+        small
+      />
+    </div>
+    <div class="demo-container-col">
+      <DsfrBadge
+        label="Badge avec un titre un petit peu trop long"
+        type="info"
+        ellipsis
+        style="max-width: 200px;"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/DsfrNotice/DsfrNotice.md b/src/components/DsfrNotice/DsfrNotice.md
diff --git a/src/components/DsfrNotice/docs-demo/DsfrNoticeExample.vue b/src/components/DsfrNotice/docs-demo/DsfrNoticeExample.vue
diff --git a/src/components/DsfrRange/DsfrRange.md b/src/components/DsfrRange/DsfrRange.md
diff --git a/src/components/DsfrSegmented/DsfrSegmented.md b/src/components/DsfrSegmented/DsfrSegmented.md
diff --git a/src/components/DsfrSegmented/DsfrSegmentedSet.md b/src/components/DsfrSegmented/DsfrSegmentedSet.md

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ withDefaults(defineProps<DsfrBadgeProps>(), {`
`16`	`16`	`'fr-badge--no-icon': noIcon,`
`17`	`17`	`'fr-badge--sm': small,`
`18`	`18`	`}"`
	`19`	`+ :title="ellipsis ? label : undefined"`
`19`	`20`	`>`
`20`	`21`	`<span :class="ellipsis ? 'fr-ellipsis' : ''">`
`21`	`22`	`{{ label }}`