Skip to content

Commit 2f4b095

Browse files
committed
docs(DsfrCallout): 📝 ajoute de la documentation
et améliore les documentations de DsfrTag et DsfrConsent
1 parent d5537f1 commit 2f4b095

File tree

3 files changed

+66
-1
lines changed

3 files changed

+66
-1
lines changed
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
## 🌟 Introduction
2+
3+
Le composant `DsfrCallout` est un composant Vue.js qui permet de créer des encadrés de mise en avant avec un titre, un contenu, une icône optionnelle, et un bouton configurable. Il est conçu pour s'intégrer harmonieusement dans les projets utilisant le Design System Français (DSFR), tout en offrant une grande flexibilité grâce à la personnalisation des éléments visuels.
4+
5+
🏅 La documentation sur la mise en avant sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant)
6+
7+
<VIcon name="vi-file-type-storybook" /> La story sur la mise en avant sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrcallout--docs)
8+
9+
## 📐 Structure
10+
11+
Le composant `DsfrCallout` s'utilise pour afficher un message ou une information importante dans un encadré visuellement distinct, avec un titre, une icône, du contenu textuel, et éventuellement un bouton d'action. Chaque partie de l'encadré peut être personnalisée via les propriétés du composant.
12+
13+
## 🛠️ Props
14+
15+
Voici les différentes propriétés que vous pouvez utiliser avec ce composant :
16+
17+
| Prop | Type | Défaut | Description |
18+
|-----------|------------------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|
19+
| `button` | `object \| undefined` | `undefined` | Configuration du bouton d'action. Si défini, le bouton s'affichera sous le texte principal. |
20+
| `title` | `string \| undefined` | `undefined` | Titre de l'encadré, affiché dans un élément HTML déterminé par `titleTag`. |
21+
| `titleTag`| `string` | `'h3'` | Balise HTML utilisée pour le titre (`h3` par défaut). |
22+
| `icon` | `string \| object \| undefined` | `undefined` | Icône affichée à gauche du titre. Peut être une chaîne pour une icône DSFR, un objet pour un composant `VIcon`, ou `undefined` si aucune icône n'est nécessaire. |
23+
| `content` | `string` | **Obligatoire** | Texte principal de l'encadré, généralement une description ou un message important. |
24+
25+
## 📡 Événements
26+
27+
Ce composant ne déclenche pas d'événements personnalisés.
28+
29+
## 🧩 Slots
30+
31+
- `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.
32+
33+
34+
::: code-group
35+
36+
<Story data-title="Démo" min-h="200px">
37+
<DsfrConsentDemo />
38+
</Story>
39+
40+
<<< docs-demo/DsfrConsentDemo.vue [Code de la démo]
41+
42+
<<< DsfrConsent.vue
43+
44+
:::
45+
46+
<script setup lang="ts">
47+
import DsfrConsentDemo from './docs-demo/DsfrConsentDemo.vue'
48+
</script>
49+
50+
## ⚙️ Code source du composant

src/components/DsfrConsent/DsfrConsent.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,16 @@ Cf. la [documentation Vue](https://vuejs.org/guide/essentials/event-handling.htm
6161

6262
<<< docs-demo/DsfrConsentDemo.vue [Code de la démo]
6363

64+
:::
65+
66+
## ⚙️ Code source du composant
67+
68+
::: code-group
69+
6470
<<< DsfrConsent.vue
71+
<<< DsfrConsent.types.ts
6572

6673
:::
6774

68-
<script setup lang="ts">
6975
import DsfrConsentDemo from './docs-demo/DsfrConsentDemo.vue'
7076
</script>

src/components/DsfrTag/DsfrTag.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,12 @@ Affiche une simple étiquette avec le texte "Bonjour VueDsfr !".
6161
```html
6262
<DsfrTag label="Vue Power" icon="fr-icon-success-line" />
6363
```
64+
65+
## ⚙️ Code source du composant
66+
67+
::: code-group
68+
69+
<<< DsfrTag.vue
70+
<<< DsfrTags.types.ts
71+
72+
:::

0 commit comments

Comments
 (0)