Skip to content

Commit 5c3c371

Browse files
laruisslaruiss
committed
docs: 📝 ajoute de la doc pour suivre
Suivre comprend : - la lettre d’informations - la liste des réseaux sociaux
1 parent 2965746 commit 5c3c371

File tree

8 files changed

+431
-1
lines changed

8 files changed

+431
-1
lines changed

‎.vitepress/config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,20 @@ const composants = [
174174
text: 'DsfrFileUpload',
175175
link: '/composants/DsfrFileUpload.md',
176176
},
177+
{
178+
text: 'DsfrFollow',
179+
link: '/composants/DsfrFollow.md',
180+
items: [
181+
{
182+
text: 'DsfrNewsLetter',
183+
link: '/composants/DsfrNewsLetter.md',
184+
},
185+
{
186+
text: 'DsfrSocialNetworks',
187+
link: '/composants/DsfrSocialNetworks.md',
188+
},
189+
],
190+
},
177191
{
178192
text: 'DsfrFooter',
179193
link: '/composants/DsfrFooter.md',

‎docs/guide/icones.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ import { VIcon } from '@gouvminint/vue-dsfr'
9797
Si vous développez des applications destinées à des agents internes avec potentiellement des accès internet réduits, il
9898
est possible que les appels vers l’API iconify soient bloqués. Vous voudrez donc éviter ces appels réseaux.
9999

100-
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`
100+
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`
101101
n’est plus incluse dans la bibliothèque, et doit être installée dans votre application.
102102

103103
Avec cette modification, il est possible d’ajouter des collections d’icônes qui ne feront pas d’appels réseaux.

‎src/components/DsfrFollow/DsfrFollow.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# Suivre (lettre d’information et réseaux sociaux) - `DsfrFollow`
2+
3+
## 🌟 Introduction
4+
5+
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/).
6+
7+
🏅 La documentation sur « Suivre » sur le [DSFR](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/lettre-d-information-et-reseaux-sociaux)
8+
9+
<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)
10+
11+
## 📐 Structure
12+
13+
Le composant affiche une grille responsive contenant :
14+
15+
- Une **section newsletter**, propulsée par le composant enfant `DsfrNewsLetter`.
16+
- Une **section réseaux sociaux**, utilisant le composant `DsfrSocialNetworks`.
17+
- Un **slot par défaut**, permettant d'insérer un contenu personnalisé.
18+
19+
## 🛠️ Props
20+
21+
| Nom | Type | Défaut | Description |
22+
|-------------------|-----------------------------------------------------------|--------------|-----------------------------------------------------------------------------|
23+
| `newsletterData` | `DsfrNewsLetterProps` | `undefined` | Données pour configurer la section newsletter. |
24+
| `networks` | `DsfrSocialNetwork[]` | `[]` | Liste des réseaux sociaux à afficher avec leurs détails (`type`, `name`, `href`). |
25+
| `onlyCallout` | `boolean` (hérité de `DsfrNewsLetterProps`) | `false` | Indique si seule une version "callout" de la newsletter doit être utilisée. |
26+
27+
### Props de `DsfrNewsLetter`
28+
29+
Voici les principales options de configuration pour `newsletterData` :
30+
31+
| Nom | Type | Défaut | Description |
32+
|------------------|--------------------------|--------------|-----------------------------------------------------------------------------|
33+
| `title` | `string` | `undefined` | Titre de la section newsletter. |
34+
| `description` | `string` | `undefined` | Texte descriptif au-dessus du champ email. |
35+
| `email` | `string` | `undefined` | Adresse email pré-remplie (si applicable). |
36+
| `error` | `string` | `undefined` | Message d'erreur à afficher en cas de problème. |
37+
| `placeholder` | `string` | `undefined` | Placeholder du champ email. |
38+
| `buttonText` | `string` | `undefined` | Texte du bouton d'action. |
39+
| `buttonAction` | `($event: MouseEvent) => void` | `undefined` | Fonction déclenchée au clic du bouton. |
40+
41+
### Props de `DsfrSocialNetworks`
42+
43+
Les réseaux sociaux (`networks`) sont des objets de type :
44+
45+
| Nom | Type | Description |
46+
|-------|------------------------|---------------------------------------------------------------------------|
47+
| `type` | `'facebook' | 'twitter-x' | 'instagram' | 'linkedin' | 'youtube'` | Type de réseau social (icône associée). |
48+
| `name` | `string` | Nom à afficher pour le réseau social. |
49+
| `href` | `string` | URL vers le profil ou la page sociale. |
50+
51+
## 📡 Événements
52+
53+
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`.
54+
55+
## 🧩 Slots
56+
57+
| Nom | Contenu |
58+
|---------|----------------------------------------------------------------------------------------------|
59+
| `default` | Permet d'insérer du contenu personnalisé dans le conteneur global du composant. |
60+
61+
## 📝 Exemples
62+
63+
### Exemple de base
64+
65+
```vue
66+
<DsfrFollow
67+
:newsletterData="{
68+
title: 'Abonnez-vous à notre newsletter !',
69+
description: 'Restez informé(e) de nos actualités et nouveautés.',
70+
buttonText: 'S\'inscrire',
71+
placeholder: 'Votre email'
72+
}"
73+
:networks="[
74+
{ type: 'facebook', name: 'Facebook', href: 'https://facebook.com' },
75+
{ type: 'twitter-x', name: 'Twitter', href: 'https://twitter.com' },
76+
{ type: 'linkedin', name: 'LinkedIn', href: 'https://linkedin.com' }
77+
]"
78+
/>
79+
```
80+
81+
### Exemple complet
82+
83+
::: code-group
84+
85+
<Story data-title="Démo" min-h="400px">
86+
<DsfrFollowDemo />
87+
</Story>
88+
89+
<<< docs-demo/DsfrFollowDemo.vue [Code de la démo]
90+
91+
:::
92+
93+
## ⚙️ Code source du composant
94+
95+
::: code-group
96+
97+
<<< DsfrFollow.vue
98+
<<< DsfrFollow.types.ts
99+
100+
:::
101+
102+
<script setup lang="ts">
103+
import DsfrFollowDemo from './docs-demo/DsfrFollowDemo.vue'
104+
</script>

‎src/components/DsfrFollow/DsfrNewsLetter.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# Composant `DsfrNewsLetter`
2+
3+
## 🌟 Introduction
4+
5+
Le composant `DsfrNewsLetter` est conçu pour afficher un formulaire d'inscription à une lettre d'information (newsletter) respectant les standards du [Design System de l'État Français (DSFR)](https://www.systeme-de-design.gouv.fr/). Flexible et accessible, il s'adapte à différents cas d'usage grâce à ses props personnalisables.
6+
7+
🏅 La documentation sur la lettre d’information sur le [DSFR](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/lettre-d-information-et-reseaux-sociaux)
8+
9+
<VIcon name="vi-file-type-storybook" /> La story sur la lettre d’information sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrnewsletter--docs)
10+
11+
## 📐 Structure
12+
13+
Le composant offre deux modes :
14+
15+
- **Mode callout** : un simple bouton pour l'inscription à la newsletter.
16+
- **Mode formulaire** : un formulaire complet avec champ email, bouton de soumission, et gestion des erreurs.
17+
18+
---
19+
20+
## 🛠️ Props
21+
22+
| Nom | Type | Défaut | Description |
23+
|-----------------|-----------------------------------|--------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|
24+
| `title` | `string` | `'Abonnez-vous à notre lettre d’information'` | Titre affiché en haut de la section newsletter. |
25+
| `description` | `string` | `''` | Texte descriptif affiché sous le titre. |
26+
| `email` | `string` | `''` | Valeur initiale du champ email. |
27+
| `error` | `string` | `''` | Message d'erreur à afficher si la saisie est invalide. |
28+
| `labelEmail` | `string` | `'Votre adresse électronique (ex. : prenom.nom@example.com)'` | Label du champ email. |
29+
| `placeholder` | `string` | `'prenom.nom@example.com'` | Texte de placeholder pour le champ email. |
30+
| `hintText` | `string` | `''` | Texte d'aide affiché sous le champ email. |
31+
| `inputTitle` | `string` | `'Adresse courriel'` | Titre de l'input email (pour l'attribut `title` de l'élément HTML). |
32+
| `buttonText` | `string` | `'S’abonner'` | Texte du bouton de soumission. |
33+
| `buttonTitle` | `string` | `'S’abonner à notre lettre d’information'` | Titre du bouton (pour l'attribut `title` de l'élément HTML). |
34+
| `buttonAction` | `($event: MouseEvent) => void` | `() => undefined` | Action personnalisée exécutée au clic du bouton en mode callout. |
35+
| `onlyCallout` | `boolean` | `false` | Active le mode "callout" avec un simple bouton au lieu du formulaire complet. |
36+
37+
## 📡 Événements
38+
39+
| Nom | Payload | Description |
40+
|--------------------|------------|---------------------------------------------------------------------------------|
41+
| `update:email` | `string` | Émis lorsque l'utilisateur modifie le champ email. |
42+
43+
## 🧩 Slots
44+
45+
Aucun slot disponible pour ce composant.
46+
47+
## 📝 Exemples
48+
49+
### Exemple de base (formulaire)
50+
51+
```vue
52+
<DsfrNewsLetter
53+
:title="'Recevez nos actualités !'"
54+
:description="'Inscrivez-vous pour recevoir notre newsletter.'"
55+
:buttonText="'Envoyer'"
56+
:placeholder="'nom@exemple.com'"
57+
@update:email="(email) => console.log('Email mis à jour :', email)"
58+
/>
59+
```
60+
61+
## 📝 Exemples
62+
63+
### Exemple de base
64+
65+
```vue
66+
<DsfrFollow>
67+
<DsfrNewsLetter
68+
:onlyCallout="true"
69+
:buttonText="'S’inscrire maintenant'"
70+
:buttonAction="() => console.log('Bouton cliqué !')"
71+
/>
72+
</DsfrFollow>
73+
```
74+
75+
### Exemple complet
76+
77+
::: code-group
78+
79+
<Story data-title="Démo" min-h="400px">
80+
<DsfrFollowDemo />
81+
</Story>
82+
83+
<<< docs-demo/DsfrFollowDemo.vue [Code de la démo]
84+
85+
:::
86+
87+
## ⚙️ Code source du composant
88+
89+
::: code-group
90+
91+
<<< DsfrFollow.vue
92+
<<< DsfrFollow.types.ts
93+
94+
:::
95+
96+
<script setup lang="ts">
97+
import DsfrFollowDemo from './docs-demo/DsfrFollowDemo.vue'
98+
</script>

‎src/components/DsfrFollow/DsfrSocialNetworks.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# Réseaux Sociaux - `DsfrSocialNetworks`
2+
3+
## 🌟 Introduction
4+
5+
Le composant `DsfrSocialNetworks` est conçu pour afficher une liste de boutons vers des réseaux sociaux, avec un style conforme au [Design System de l'État Français (DSFR)](https://www.systeme-de-design.gouv.fr/). Il permet d'encourager les utilisateurs à suivre votre organisation sur les plateformes sociales.
6+
7+
🏅 La documentation sur Réseaux Sociaux sur le [DSFR](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/lettre-d-information-et-reseaux-sociaux)
8+
9+
<VIcon name="vi-file-type-storybook" /> La story sur Réseaux Sociaux sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrsocialnetworks--docs)
10+
11+
## 📐 Structure
12+
13+
Le composant affiche :
14+
15+
- un titre (dont la balise peut être configurée avec la prop `titleTag`) ;
16+
- une liste de boutons pour chaque réseau social fourni dans les props.
17+
18+
Chaque bouton :
19+
20+
- utilise une classe CSS correspondant au type de réseau (par exemple, `fr-btn--facebook`) ;
21+
- affiche le nom du réseau ;
22+
- redirige vers l'URL spécifiée en ouvrant un nouvel onglet.
23+
24+
## 🛠️ Props
25+
26+
| Nom | Type | Défaut | Description |
27+
|-------------|----------------------------------------|------------|-----------------------------------------------------------------------------|
28+
| `networks` | `DsfrSocialNetwork[]` | `[]` | Liste des réseaux sociaux à afficher, avec leurs détails (`type`, `name`, `href`). |
29+
| `titleTag` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'h3'` | Tag HTML utilisé pour le titre du composant. |
30+
31+
### Format de `DsfrSocialNetwork`
32+
33+
Chaque réseau est un objet de type :
34+
35+
| Nom | Type | Description |
36+
|-------|------------------------|-----------------------------------------------------------------------------|
37+
| `type` | `'facebook' | 'twitter-x' | 'instagram' | 'linkedin' | 'youtube'` | Type de réseau social (icône et style associés). |
38+
| `name` | `string` | Nom affiché pour le réseau social. |
39+
| `href` | `string` | URL vers le profil ou la page sociale. |
40+
41+
## 📡 Événements
42+
43+
Aucun événement spécifique n'est émis par ce composant.
44+
45+
## 🧩 Slots
46+
47+
Aucun slot disponible pour ce composant.
48+
49+
## 📝 Exemples
50+
51+
### Exemple de base
52+
53+
```vue
54+
<DsfrSocialNetworks
55+
:networks="[
56+
{ type: 'facebook', name: 'Facebook', href: 'https://facebook.com' },
57+
{ type: 'twitter-x', name: 'Twitter', href: 'https://twitter.com' },
58+
{ type: 'linkedin', name: 'LinkedIn', href: 'https://linkedin.com' }
59+
]"
60+
/>
61+
```
62+
63+
### Exemple complet
64+
65+
::: code-group
66+
67+
<Story data-title="Démo" min-h="400px">
68+
<DsfrSocialNetworksDemo />
69+
</Story>
70+
71+
<<< docs-demo/DsfrSocialNetworksDemo.vue [Code de la démo]
72+
73+
:::
74+
75+
## ⚙️ Code source du composant
76+
77+
::: code-group
78+
79+
<<< DsfrSocialNetworks.vue
80+
<<< DsfrFollow.types.ts
81+
82+
:::
83+
84+
<script setup lang="ts">
85+
import DsfrSocialNetworksDemo from './docs-demo/DsfrSocialNetworksDemo.vue'
86+
</script>

‎src/components/DsfrFollow/docs-demo/DsfrFollowDemo.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script lang="ts" setup>
2+
import type { DsfrSocialNetwork } from '../DsfrFollow.types'
3+
import DsfrFollow from '../DsfrFollow.vue'
4+
5+
const networks: DsfrSocialNetwork[] = [
6+
{
7+
name: 'Facebook',
8+
type: 'facebook',
9+
href: 'https://www.facebook.com',
10+
},
11+
{
12+
name: 'X (anciennement Twitter)',
13+
type: 'twitter-x',
14+
href: 'https://www.x.com',
15+
},
16+
{
17+
name: 'Youtube',
18+
type: 'youtube',
19+
href: 'https://www.youtube.com',
20+
},
21+
{
22+
name: 'Linkedin',
23+
type: 'linkedin',
24+
href: 'https://www.linkedin.com',
25+
},
26+
{
27+
name: 'Instagram',
28+
type: 'instagram',
29+
href: 'https://www.instagram.com',
30+
},
31+
]
32+
const newsletterData = {
33+
title: 'Titre de la lettre d’informations',
34+
description: 'Description de la lettre d’informations',
35+
email: '',
36+
labelEmail: 'Label du champ adresse électronique',
37+
placeholder: 'james.bond@mi6.gov.uk',
38+
hintText: 'Mise en garde concernant l’abonnement à la lettre d’information',
39+
buttonText: 'S’abonner',
40+
buttonTitle:
41+
'Titre du bouton (valeur de l’attribut `title` de la balise `button`)',
42+
buttonAction: () => undefined,
43+
onlyCallout: false,
44+
}
45+
</script>
46+
47+
<template>
48+
<DsfrFollow
49+
:networks="networks"
50+
:newsletter-data="newsletterData"
51+
/>
52+
</template>

0 commit comments

Comments
 (0)