docs(DsfrTiles): 📝 améliore la doc

- améliore la documentation de `DsfrTile`
- ajoute la documentation de `DsfrTiles`

src/components/DsfrTile/DsfrTile.md

@@ -6,9 +6,9 @@ La tuile est un raccourci ou point d’entrée qui redirige les utilisateurs ver
 
 Le composant `DsfrTile` est une tuile flexible et stylisée, idéale pour afficher des informations sous forme de cartes visuelles dans une interface utilisateur. Ce composant permet d'intégrer des images, des SVG, des descriptions, des détails et des liens, tout en offrant de nombreuses options de personnalisation visuelle.
 
-🏅 La documentation sur la tuile sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/<nom-dsfr>)
+🏅 La documentation sur la tuile sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile)
 
-<VIcon name="vi-file-type-storybook" /> La story sur la tuile sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfr<nom-composant>--docs)
+<VIcon name="vi-file-type-storybook" /> La story sur la tuile sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrtile--docs)
 
 ## 📐 Structure
 
@@ -38,7 +38,7 @@ Le composant `DsfrTile` est une tuile flexible et stylisée, idéale pour affich
 | `small` | `boolean` | Si vrai, affiche une tuile plus petite. | `false` | |
 | `icon` | `boolean` | Si faux, n'affiche pas d'icône dans la tuile. | `true` | |
 | `noBorder` | `boolean` | Si vrai, n'affiche pas de bordure autour de la tuile. | `false` | |
-| `shadow` | `boolean`  | Si vrai, affiche une ombre autour de la tuile. | `false` | |
+| `shadow` | `boolean` | Si vrai, affiche une ombre autour de la tuile. | `false` | |
 | `noBackground` | `boolean` | Si vrai, n'affiche pas de fond dans la tuile. | `false` | |
 | `grey` | `boolean` | Si vrai, affiche un fond gris pour la tuile. | `false` | |
 

src/components/DsfrTile/DsfrTiles.md

@@ -0,0 +1,62 @@
+# Tuile - `DsfrTile`
+
+## 🌟 Introduction
+
+Le composant `DsfrTiles` utilise le composant .
+
+Le composant `DsfrTiles` permet d'afficher une collection de tuiles ([`DsfrTile`](/composants/DsfrTile)) de manière organisée dans une grille. Il offre la possibilité de personnaliser la disposition de chaque tuile, de les afficher en mode horizontal ou vertical, et d'appliquer des classes spécifiques pour un style personnalisé. Ce composant est idéal pour créer des galeries ou des listes d'éléments visuels interactifs.
+
+🏅 La documentation sur la tuile sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile)
+
+<VIcon name="vi-file-type-storybook" /> La story sur la tuile sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrtiles--docs)
+
+## 📐 Structure
+
+- `<DsfrTiles>` : Le composant principal.
+ - Gère une liste de tuiles à afficher en grille.
+ - Utilise le composant `DsfrTile` pour le rendu de chaque élément.
+
+## 🛠️ Props
+
+| Propriété | Type | Description | Valeur par défaut |
+|---------------|-------------------------------------------|-------------------------------------------------------------------------------------|-------------------|
+| `tiles` | `(DsfrTileProps & { containerClass: string })[]` | Tableau d'objets représentant les tuiles à afficher, incluant les props de `DsfrTile` et une classe personnalisée pour chaque conteneur. | `[]` |
+| `horizontal` | `boolean` | Si vrai, affiche les tuiles en mode horizontal. | `false` |
+
+## 📡 Événements
+
+Ce composant ne déclenche pas d'événements spécifiques.
+
+## 🧩 Slots
+
+Ce composant n'utilise pas de slots.
+
+## 📝 Exemples
+
+
+Le composant `DsfrTiles` utilise une boucle pour rendre chaque tuile dans une grille responsive. Il permet d'appliquer des classes spécifiques à chaque tuile et de définir si les tuiles doivent s'afficher horizontalement ou verticalement.
+
+## 📝 Exemples
+
+::: code-group
+
+<Story data-title="Démo" min-h="400px">
+ <DsfrTilesDemo />
+</Story>
+
+<<< docs-demo/DsfrTilesDemo.vue [Code de la démo]
+
+:::
+
+## ⚙️ Code source du composant
+
+::: code-group
+
+<<< DsfrTiles.vue
+<<< DsfrTiles.types.ts
+
+:::
+
+<script setup lang="ts">
+import DsfrTilesDemo from './docs-demo/DsfrTilesDemo.vue'
+</script>

src/components/DsfrTile/DsfrTiles.types.ts

@@ -23,6 +23,6 @@ export type DsfrTileProps = {
 }
 
 export type DsfrTilesProps = {
- tiles?: (DsfrTileProps & { containerClass: string })[]
+ tiles?: (DsfrTileProps & { containerClass?: string })[]
  horizontal?: boolean
 }

src/components/DsfrTile/DsfrTiles.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import DsfrTile from './DsfrTile.vue'
-
 import type { DsfrTilesProps } from './DsfrTiles.types'
 
 export type { DsfrTilesProps }
@@ -16,7 +15,7 @@ withDefaults(defineProps<DsfrTilesProps>(), {
  v-for="(tile, idx) of tiles"
  :key="idx"
  :class="{
- [tile.containerClass]: tile.containerClass,
+ [tile.containerClass ?? 'no-class']: tile.containerClass,
  'fr-col-6 fr-col-md-4 fr-col-lg-3': !tile.containerClass && !horizontal,
  'fr-col-12': horizontal,
  }"

src/components/DsfrTile/docs-demo/DsfrTilesDemo.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { getCurrentInstance, ref } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import DsfrToggleSwitch from '../../DsfrToggleSwitch/DsfrToggleSwitch.vue'
+import DsfrTiles from '../DsfrTiles.vue'
+import type { DsfrTileProps } from '../DsfrTiles.types'
+
+const horizontal = ref(false)
+const tiles: DsfrTileProps[] = [
+ {
+ title: 'Ma formidable tuile 1',
+ imgSrc: 'https://loremflickr.com/80/80/cat?random=1',
+ description: 'Une tuile absolument formidable',
+ },
+ {
+ title: 'Ma formidable tuile 2',
+ imgSrc: 'https://loremflickr.com/80/80/cat?random=2',
+ description: 'Une tuile absolument formidable',
+ },
+ {
+ title: 'Ma formidable tuile 3',
+ imgSrc: 'https://loremflickr.com/80/80/cat?random=3',
+ description: 'Une tuile absolument formidable',
+ },
+ {
+ title: 'Ma formidable tuile 4',
+ imgSrc: 'https://loremflickr.com/80/80/cat?random=4',
+ description: 'Une tuile absolument formidable',
+ },
+]
+const app = getCurrentInstance()
+app?.appContext.app.use(
+ createRouter({
+ history: createWebHistory(),
+ routes: [
+ { path: '', component: { template: '<div>Accueil</div>' } },
+ { path: '/dummy-path', component: { template: '<div>DummyPath</div>' } },
+ ],
+ }),
+)
+</script>
+
+<template>
+ <div class="fr-container fr-my-2v">
+ <div class="fr-my-4v">
+ <DsfrToggleSwitch
+ v-model="horizontal"
+ label="Tuiles à l’horizontal"
+ />
+ </div>
+ <DsfrTiles
+ :tiles
+ :horizontal
+ />
+ </div>
+</template>