Skip to content

Commit c987386

Browse files
laruisslaruiss
committed
docs: 📝 ajoute la doc pour contenus médias
DsfrPicture et DsfrVideo
1 parent 01ac366 commit c987386

File tree

9 files changed

+242
-11
lines changed

9 files changed

+242
-11
lines changed

‎.vitepress/config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,10 @@ const composants = [
235235
text: 'DsfrNotice',
236236
link: '/composants/DsfrNotice.md',
237237
},
238+
{
239+
text: 'DsfrPicture',
240+
link: '/composants/DsfrPicture.md',
241+
},
238242
{
239243
text: 'DsfrRadioButton',
240244
link: '/composants/DsfrRadioButton.md',
@@ -325,6 +329,10 @@ const composants = [
325329
text: 'DsfrTooltip',
326330
link: '/composants/DsfrTooltip.md',
327331
},
332+
{
333+
text: 'DsfrVideo',
334+
link: '/composants/DsfrVideo.md',
335+
},
328336
{
329337
text: 'VIcon',
330338
link: '/composants/VIcon.md',

‎.vitepress/theme/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,10 @@
187187
justify-content: center;
188188
}
189189

190+
.gap-2 {
191+
gap: 0.5rem;
192+
}
193+
190194
.gap-4 {
191195
gap: 1rem;
192196
}

‎src/components/DsfrMedia/DsfrPicture.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Image - `DsfrPicture`
2+
3+
Les contenus médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégrés à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.
4+
5+
🏅 La documentation sur les contenus médias sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenus-medias)
6+
7+
<VIcon name="vi-file-type-storybook" /> La story sur le contenu média image (picture) sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrpicture--docs)
8+
9+
## 🌟 Introduction
10+
11+
Le composant `DsfrPicture` permet d'afficher une image de manière responsive, avec une légende optionnelle. Il est conçu pour être flexible, offrant des options pour personnaliser la taille, le ratio, et le contenu de l'image. Ce composant est idéal pour intégrer des images dans une interface utilisateur tout en garantissant leur adaptabilité et accessibilité.
12+
13+
Le `DsfrPicture` utilise une structure HTML sémantique avec `<figure>` et `<figcaption>` pour améliorer l'accessibilité. Il applique des classes CSS conditionnelles pour ajuster la taille et le ratio de l'image en fonction des props fournies. Le slot par défaut permet une personnalisation avancée du contenu de l'image.
14+
15+
## 📐 Structure
16+
17+
- `<DsfrPicture>` : Le composant principal.
18+
- Affiche une image avec un ratio et une taille personnalisés.
19+
- Inclut une légende sous l'image.
20+
- Utilise un slot pour permettre l'insertion d'un contenu personnalisé, comme un SVG.
21+
22+
## 🛠️ Props
23+
24+
| Propriété | Type | Description | Valeur par défaut |
25+
|-----------|-------------------------------------|-----------------------------------------------------------|-------------------|
26+
| `alt` | `string` | Texte alternatif pour l'image, utilisé pour l'accessibilité. | `''` |
27+
| `legend` | `string` | Légende à afficher sous l'image. | `''` |
28+
| `size` | `'small' \| 'medium' \| 'large'` | Taille de l'image (petite, moyenne, ou grande). | `'medium'` |
29+
| `src` | `string` | URL de l'image à afficher. | `obligatoire` |
30+
| `title` | `string` | Titre de l'image, affiché au survol. | `''` |
31+
| `ratio` | `string` | Ratio de l'image (par exemple, '16x9'). | `'16x9'` |
32+
33+
## 📡 Événements
34+
35+
Ce composant ne déclenche pas d'événements spécifiques.
36+
37+
## 🧩 Slots
38+
39+
- `default` : Slot pour insérer un contenu personnalisé (comme une image SVG). Si aucun contenu n'est fourni, l'image spécifiée par `src` est utilisée.
40+
41+
## 📝 Exemples
42+
43+
::: code-group
44+
45+
<Story data-title="Démo" min-h="400px">
46+
<DsfrPictureDemo />
47+
</Story>
48+
49+
<<< docs-demo/DsfrPictureDemo.vue [Code de la démo]
50+
51+
:::
52+
53+
## ⚙️ Code source du composant
54+
55+
::: code-group
56+
57+
<<< DsfrPicture.vue
58+
<<< DsfrMedia.types.ts
59+
60+
:::
61+
62+
<script setup lang="ts">
63+
import DsfrPictureDemo from './docs-demo/DsfrPictureDemo.vue'
64+
</script>

‎src/components/DsfrMedia/DsfrVideo.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Video - `DsfrVideo`
2+
3+
Les contenus médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégrés à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.
4+
5+
🏅 La documentation sur les contenus médias sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenus-medias)
6+
7+
<VIcon name="vi-file-type-storybook" /> La story sur le contenus média video sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrvideo--docs)
8+
9+
## 🌟 Introduction
10+
11+
Le composant `DsfrVideo` permet d'intégrer une vidéo responsive avec une légende et une transcription. Il s'agit d'une solution complète pour afficher des vidéos dans une interface utilisateur, tout en fournissant des fonctionnalités d'accessibilité telles que la transcription du contenu vidéo.
12+
13+
Le `DsfrVideo` utilise un élément `<iframe>` pour intégrer la vidéo de manière responsive. Il ajuste automatiquement la taille et le ratio de la vidéo en fonction des props fournies. Le composant inclut également un sous-composant `DsfrTranscription` pour afficher la transcription du contenu vidéo, améliorant ainsi l'accessibilité.
14+
15+
## 📐 Structure
16+
17+
- `<DsfrVideo>` : Le composant principal.
18+
- Affiche une vidéo à partir d'une URL.
19+
- Inclut une légende sous la vidéo.
20+
- Intègre une transcription optionnelle via le composant `DsfrTranscription`.
21+
22+
## 🛠️ Props
23+
24+
| Propriété | Type | Description | Valeur par défaut |
25+
|------------------------|----------|--------------------------------------------------------------------------|-------------------|
26+
| `src` | `string` | URL de la vidéo à afficher. | `obligatoire` |
27+
| `legend` | `string` | Légende à afficher sous la vidéo. | `''` |
28+
| `size` | `'small' \| 'medium' \| 'large'` | Taille de la vidéo (petite, moyenne, ou grande). | `'medium'` |
29+
| `transcriptionTitle` | `string` | Titre de la transcription (si disponible). | `''` |
30+
| `transcriptionContent` | `string` | Contenu de la transcription (si disponible). | `''` |
31+
| `ratio` | `string` | Ratio de la vidéo (par exemple, '16x9'). | `'16x9'` |
32+
33+
## 📡 Événements
34+
35+
Ce composant ne déclenche pas d'événements spécifiques.
36+
37+
## 🧩 Slots
38+
39+
Ce composant n'utilise pas de slots.
40+
41+
## 📝 Exemples
42+
43+
::: code-group
44+
45+
<Story data-title="Démo" min-h="400px">
46+
<DsfrVideoDemo />
47+
</Story>
48+
49+
<<< docs-demo/DsfrVideoDemo.vue [Code de la démo]
50+
51+
:::
52+
53+
## ⚙️ Code source du composant
54+
55+
::: code-group
56+
57+
<<< DsfrVideo.vue
58+
<<< DsfrMedia.types.ts
59+
60+
:::
61+
62+
<script setup lang="ts">
63+
import DsfrVideoDemo from './docs-demo/DsfrVideoDemo.vue'
64+
</script>

‎src/components/DsfrMedia/docs-demo/DsfrPictureDemo.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts" setup>
2+
import DsfrPicture from '../DsfrPicture.vue'
3+
4+
const size = 'medium'
5+
const src = 'https://loremflickr.com/300/200/cat'
6+
const alt = ''
7+
const title = 'Photographie d’un chaton'
8+
const legend = 'Photographie d’un chaton'
9+
const ratio = '16x9'
10+
</script>
11+
12+
<template>
13+
<DsfrPicture
14+
:src="src"
15+
:alt="alt"
16+
:title="title"
17+
:legend="legend"
18+
:size="size"
19+
:ratio="ratio"
20+
style="max-width: 500px"
21+
/>
22+
</template>

‎src/components/DsfrMedia/docs-demo/DsfrVideoDemo.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts" setup>
2+
import DsfrVideo from '../DsfrVideo.vue'
3+
4+
const size = 'medium'
5+
const src = 'https://www.youtube.com/embed/HyirpmPL43I'
6+
const legend = 'Vidéo traitant du Service National Universel'
7+
const transcriptionTitle = 'Titre de la transcription'
8+
const transcriptionContent = 'Contenu de la transcription'
9+
const ratio = '16x9'
10+
</script>
11+
12+
<template>
13+
<DsfrVideo
14+
:src="src"
15+
:legend="legend"
16+
:size="size"
17+
:transcription-title="transcriptionTitle"
18+
:transcription-content="transcriptionContent"
19+
:ratio="ratio"
20+
/>
21+
</template>

‎src/components/DsfrTag/DsfrTag.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -48,19 +48,15 @@ Pas d'événements personnalisés pour ce composant. Il se repose sur les évén
4848

4949
## 📝 Exemples
5050

51-
1. **Étiquette Basique :**
52-
53-
```html
54-
<DsfrTag label="Bonjour VueDsfr !" />
55-
```
51+
::: code-group
5652

57-
Affiche une simple étiquette avec le texte "Bonjour VueDsfr !".
53+
<Story data-title="Démo" min-h="400px">
54+
<DsfrTagDemo />
55+
</Story>
5856

59-
1. **Étiquette avec icône :**
57+
<<< docs-demo/DsfrTagDemo.vue [Code de la démo]
6058

61-
```html
62-
<DsfrTag label="Vue Power" icon="fr-icon-success-line" />
63-
```
59+
:::
6460

6561
## ⚙️ Code source du composant
6662

@@ -70,3 +66,7 @@ Affiche une simple étiquette avec le texte "Bonjour VueDsfr !".
7066
<<< DsfrTags.types.ts
7167

7268
:::
69+
70+
<script setup lang="ts">
71+
import DsfrTagDemo from './docs-demo/DsfrTagDemo.vue'
72+
</script>

‎src/components/DsfrTag/DsfrTag.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const linkProps = computed(() => {
2424
})
2525
2626
const dsfrIcon = computed(() => typeof props.icon === 'string' && props.icon.startsWith('fr-icon-'))
27-
const defaultScale = 0.9
27+
const defaultScale = props.small ? 0.65 : 0.9
2828
const iconProps = computed(() => dsfrIcon.value ? undefined : typeof props.icon === 'string' ? { name: props.icon, scale: defaultScale } : { scale: defaultScale, ...(props.icon ?? {}) })
2929
</script>
3030

‎src/components/DsfrTag/docs-demo/DsfrTagDemo.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script lang="ts" setup>
2+
import DsfrTag from '@/components/DsfrTag/DsfrTag.vue'
3+
</script>
4+
5+
<template>
6+
<div class="flex gap-2 fr-m-2v flex-wrap">
7+
<DsfrTag
8+
label="Vue Power"
9+
/>
10+
<DsfrTag
11+
label="DSFR"
12+
icon="fr-icon-success-line"
13+
/>
14+
<DsfrTag
15+
label="Iconify Power"
16+
icon="ri-bell-line"
17+
/>
18+
<DsfrTag
19+
label="Tag inactif (disabled)"
20+
icon="ri-stop-line"
21+
title="désactivé"
22+
disabled
23+
/>
24+
<DsfrTag
25+
label="Icône seule"
26+
title="Icône seule"
27+
icon="ri-play-line"
28+
icon-only
29+
/>
30+
<DsfrTag
31+
label="Petit tag"
32+
title="Petite"
33+
small
34+
/>
35+
<DsfrTag
36+
label="Petit tag avec icone DSFR"
37+
title="Petite"
38+
small
39+
icon="fr-icon-success-line"
40+
/>
41+
<DsfrTag
42+
label="Petit tag avec icone Iconify"
43+
title="Petite"
44+
small
45+
icon="ri-checkbox-circle-line"
46+
/>
47+
</div>
48+
</template>

0 commit comments

Comments
 (0)