-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #947 from dnum-mi/develop
Develop
- Loading branch information
Showing
24 changed files
with
706 additions
and
116 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -187,6 +187,10 @@ | |
| justify-content: center; | ||
| } | ||
|
|
||
| .gap-2 { | ||
| gap: 0.5rem; | ||
| } | ||
|
|
||
| .gap-4 { | ||
| gap: 1rem; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| # Image - `DsfrPicture` | ||
|
|
||
| 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. | ||
|
|
||
| 🏅 La documentation sur les contenus médias sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenus-medias) | ||
|
|
||
| <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) | ||
|
|
||
| ## 🌟 Introduction | ||
|
|
||
| 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é. | ||
|
|
||
| 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. | ||
|
|
||
| ## 📐 Structure | ||
|
|
||
| - `<DsfrPicture>` : Le composant principal. | ||
| - Affiche une image avec un ratio et une taille personnalisés. | ||
| - Inclut une légende sous l'image. | ||
| - Utilise un slot pour permettre l'insertion d'un contenu personnalisé, comme un SVG. | ||
|
|
||
| ## 🛠️ Props | ||
|
|
||
| | Propriété | Type | Description | Valeur par défaut | | ||
| |-----------|-------------------------------------|-----------------------------------------------------------|-------------------| | ||
| | `alt` | `string` | Texte alternatif pour l'image, utilisé pour l'accessibilité. | `''` | | ||
| | `legend` | `string` | Légende à afficher sous l'image. | `''` | | ||
| | `size` | `'small' \| 'medium' \| 'large'` | Taille de l'image (petite, moyenne, ou grande). | `'medium'` | | ||
| | `src` | `string` | URL de l'image à afficher. | `obligatoire` | | ||
| | `title` | `string` | Titre de l'image, affiché au survol. | `''` | | ||
| | `ratio` | `string` | Ratio de l'image (par exemple, '16x9'). | `'16x9'` | | ||
|
|
||
| ## 📡 Événements | ||
|
|
||
| Ce composant ne déclenche pas d'événements spécifiques. | ||
|
|
||
| ## 🧩 Slots | ||
|
|
||
| - `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. | ||
|
|
||
| ## 📝 Exemples | ||
|
|
||
| ::: code-group | ||
|
|
||
| <Story data-title="Démo" min-h="400px"> | ||
| <DsfrPictureDemo /> | ||
| </Story> | ||
|
|
||
| <<< docs-demo/DsfrPictureDemo.vue [Code de la démo] | ||
|
|
||
| ::: | ||
|
|
||
| ## ⚙️ Code source du composant | ||
|
|
||
| ::: code-group | ||
|
|
||
| <<< DsfrPicture.vue | ||
| <<< DsfrMedia.types.ts | ||
|
|
||
| ::: | ||
|
|
||
| <script setup lang="ts"> | ||
| import DsfrPictureDemo from './docs-demo/DsfrPictureDemo.vue' | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| # Video - `DsfrVideo` | ||
|
|
||
| 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. | ||
|
|
||
| 🏅 La documentation sur les contenus médias sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenus-medias) | ||
|
|
||
| <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) | ||
|
|
||
| ## 🌟 Introduction | ||
|
|
||
| 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. | ||
|
|
||
| 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é. | ||
|
|
||
| ## 📐 Structure | ||
|
|
||
| - `<DsfrVideo>` : Le composant principal. | ||
| - Affiche une vidéo à partir d'une URL. | ||
| - Inclut une légende sous la vidéo. | ||
| - Intègre une transcription optionnelle via le composant `DsfrTranscription`. | ||
|
|
||
| ## 🛠️ Props | ||
|
|
||
| | Propriété | Type | Description | Valeur par défaut | | ||
| |------------------------|----------|--------------------------------------------------------------------------|-------------------| | ||
| | `src` | `string` | URL de la vidéo à afficher. | `obligatoire` | | ||
| | `legend` | `string` | Légende à afficher sous la vidéo. | `''` | | ||
| | `size` | `'small' \| 'medium' \| 'large'` | Taille de la vidéo (petite, moyenne, ou grande). | `'medium'` | | ||
| | `transcriptionTitle` | `string` | Titre de la transcription (si disponible). | `''` | | ||
| | `transcriptionContent` | `string` | Contenu de la transcription (si disponible). | `''` | | ||
| | `ratio` | `string` | Ratio de la vidéo (par exemple, '16x9'). | `'16x9'` | | ||
|
|
||
| ## 📡 Événements | ||
|
|
||
| Ce composant ne déclenche pas d'événements spécifiques. | ||
|
|
||
| ## 🧩 Slots | ||
|
|
||
| Ce composant n'utilise pas de slots. | ||
|
|
||
| ## 📝 Exemples | ||
|
|
||
| ::: code-group | ||
|
|
||
| <Story data-title="Démo" min-h="400px"> | ||
| <DsfrVideoDemo /> | ||
| </Story> | ||
|
|
||
| <<< docs-demo/DsfrVideoDemo.vue [Code de la démo] | ||
|
|
||
| ::: | ||
|
|
||
| ## ⚙️ Code source du composant | ||
|
|
||
| ::: code-group | ||
|
|
||
| <<< DsfrVideo.vue | ||
| <<< DsfrMedia.types.ts | ||
|
|
||
| ::: | ||
|
|
||
| <script setup lang="ts"> | ||
| import DsfrVideoDemo from './docs-demo/DsfrVideoDemo.vue' | ||
| </script> |
Oops, something went wrong.