docs: 📝 ajoute la doc de DsfrButtonGroup

.vitepress/config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
   appearance: { listenToStorageChanges: false }, // handling this in Story.vue itself to avoid flickering
 
   rewrites: {
+    'src/components/DsfrButton/DsfrButtonGroup.md': 'composants/DsfrButtonGroup.md',
     'src/components/DsfrSegmented/DsfrSegmentedSet.md': 'composants/DsfrSegmentedSet.md',
     'src/components/:comp/:comp.md': 'composants/:comp.md',
     'docs/:splat*': ':splat*',

src/components/DsfrButton/DsfrButtonGroup.md

@@ -0,0 +1,58 @@
+# Groupe de boutons - DsfrButtonGroup
+
+## 🌟 Introduction
+
+Les boutons dans le contexte d'un groupe suivent les même règles que le composant bouton :
+
+- Il prend en charge les 2 types de boutons (primaire, secondaire) ;
+- Il gère les 3 tailles (prop `size` valeurs `sm`, `md`, `lg`) et les variantes ( Icônes / texte seul, avec icônes à gauche / droite).
+
+## 📐 Structure
+
+Ce composant est une simple balise `ul` qui peut recevoir un tableau de `DsfrButtonProps & ButtonHTMLAttributes` pour mettre chaque bouton dans un `li`.
+
+Le slot par défaut peut être utilisé pour mettre vos boutons si la prop `buttons` est absente (ou un tableau vide).
+
+## 🛠️ Les props
+
+Aucune prop n’est obligatoire
+
+| Nom              | Type                     | Défaut             | Description |
+|------------------|--------------------------|---------------     |-------------|
+| align            | 'right' / 'center' / String   | undefined                 | Définit l'alignement des boutons dans le groupe. Peut être 'right' ou 'center'. |
+| buttons          | `(DsfrButtonProps & ButtonHTMLAttributes)[]`                    | () => []           | Liste des boutons à afficher. Chaque bouton est un objet qui peut inclure toutes les pros d’un [DsfrButton](/composants/DsfrButton), y compris un gestionnaire `onClick`. |
+| equisized        | `boolean`                       | false                  | Si `true`, tous les boutons du groupe auront la même largeur. |
+| inlineLayoutWhen | `string \| boolean`         | 'never'                  | Détermine quand les boutons doivent être affichés sur une seule linge. Peut être `'always'`, `'never'`, ou correspondre à une taille spécifique (`'sm'`, `'md'`, `'lg'`). |
+| iconRight        | `boolean`                       | false             | Si `true`, place les icônes à droite du texte dans tous les boutons. |
+| size             | `'sm' \| 'md' \| 'lg'`   | 'md'                 | Détermine la taille des boutons. Peut être `'sm'` (petit), `'md`' (moyen, défaut), `'lg'` (grand). |
+
+## 🧩 Les slots
+
+Le slot par défaut peut être utilisé pour mettre des boutons personnalisés.
+
+::: warning Important
+
+Si vous utilisez le slot, il faut bien envelopper chaque bouton dans une balise `<li>` Cf. les exemples
+
+:::
+
+## 📝 Des exemples
+
+::: code-group
+
+<Story data-title="Démo" min-h="620px">
+  <DsfrButtonGroupDemo />
+</Story>
+
+<<< docs-demo/DsfrButtonGroupDemo.vue [Code de la démo]
+
+<<< DsfrButtonGroup.vue
+
+<<< DsfrButton.types.ts
+:::
+
+Et voilà ! Vous êtes prêt à ajouter une touche de sophistication à votre interface avec DsfrButtonGroup. Bonne création ! 🎨✨
+
+<script setup lang="ts">
+import DsfrButtonGroupDemo from './docs-demo/DsfrButtonGroupDemo.vue'
+</script>

src/components/DsfrButton/docs-demo/DsfrButtonDemo.vue

@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import DsfrButton from '../DsfrButton.vue'
+</script>
+
+<template>
+  <div class="fr-container fr-my-2w">
+    <div class="flex  gap-4  flex-end  w-full">
+      <div class="flex  flex-col  gap-4  flex-end  w-full">
+        <DsfrButton
+          label="Bouton primaire"
+          primary
+        />
+        <DsfrButton
+          label="Bouton secondaire"
+          secondary
+        />
+        <DsfrButton
+          label="Bouton tertiaire"
+          tertiary
+        />
+        <DsfrButton
+          label="Bouton tertiaire sans bordure"
+          tertiary
+          no-outline
+        />
+      </div>
+      <div class="flex  flex-col  gap-4  flex-end  w-full">
+        <DsfrButton
+          label="Petit bouton primaire"
+          size="sm"
+          primary
+        />
+        <DsfrButton
+          label="Petit bouton secondaire"
+          size="sm"
+          secondary
+        />
+        <DsfrButton
+          label="Petit bouton tertiaire"
+          size="sm"
+          tertiary
+        />
+        <DsfrButton
+          label="Petit bouton tertiaire sans bordure"
+          size="sm"
+          tertiary
+          no-outline
+        />
+      </div>
+    </div>
+    <div class="flex  flex-col  gap-4  flex-end  w-full">
+      <DsfrButton
+        label="Gros bouton primaire"
+        size="lg"
+        primary
+      />
+      <DsfrButton
+        label="Gros bouton secondaire"
+        size="lg"
+        secondary
+      />
+      <DsfrButton
+        label="Gros bouton tertiaire"
+        size="lg"
+        tertiary
+      />
+      <DsfrButton
+        label="Gros bouton tertiaire sans bordure"
+        size="lg"
+        tertiary
+        no-outline
+      />
+      <div class="flex  flex-col  gap-4  flex-end  w-full">
+        <DsfrButton
+          label="Bouton primaire avec icône DSFR"
+          icon="fr-icon-moon-line"
+          primary
+        />
+        <DsfrButton
+          label="Bouton secondaire avec icône DSFR"
+          icon="fr-icon-moon-line"
+          secondary
+        />
+        <DsfrButton
+          label="Bouton tertiaire avec icône DSFR"
+          icon="fr-icon-moon-line"
+          tertiary
+        />
+        <DsfrButton
+          label="Bouton tertiaire sans bordure avec icône DSFR"
+          icon="fr-icon-moon-line"
+          tertiary
+          no-outline
+        />
+      </div>
+      <div class="flex  flex-col  gap-4  flex-end  w-full">
+        <DsfrButton
+          label="Bouton primaire avec icône oh-vue-icon"
+          icon="ri-moon-line"
+          primary
+        />
+        <DsfrButton
+          label="Bouton secondaire avec icône oh-vue-icon animée (spin)"
+          :icon="{name: 'ri-refresh-line', animation: 'spin'}"
+          secondary
+        />
+        <DsfrButton
+          label="Bouton tertiaire avec icône oh-vue-icon animée (spin-pulse)"
+          :icon="{name: 'ri-moon-line', animation: 'spin-pulse'}"
+          tertiary
+        />
+        <DsfrButton
+          label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
+          title="Bouton tertiaire sans bordure avec icône oh-vue-icon colorée avec une couleur du DSFR"
+          :icon="{name: 'ri-moon-line', fill: 'var(--success-425-625)'}"
+          tertiary
+          no-outline
+        />
+      </div>
+      <div class="flex  gap-4  flex-end  w-full">
+        <div class="flex  flex-col  gap-4  flex-end  w-full">
+          <DsfrButton
+            label="Bouton primaire icône seulement avec icône DSFR"
+            icon="fr-icon-moon-line"
+            icon-only
+            primary
+          />
+          <DsfrButton
+            label="Bouton secondaire avec icône DSFR"
+            icon="fr-icon-moon-line"
+            icon-only
+            secondary
+          />
+          <DsfrButton
+            label="Bouton tertiaire avec icône DSFR animée"
+            icon="fr-icon-moon-line"
+            icon-only
+            tertiary
+          />
+          <DsfrButton
+            label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
+            title="Bouton tertiaire sans bordure avec icône DSFR colorée avec une couleur du DSFR"
+            icon="fr-icon-moon-line"
+            icon-only
+            tertiary
+            no-outline
+          />
+        </div>
+        <div class="flex  flex-col  gap-4  flex-end  w-full">
+          <DsfrButton
+            label="Bouton primaire icône seulement avec icône oh-vue-icon"
+            icon="ri-moon-line"
+            icon-only
+            primary
+          />
+          <DsfrButton
+            label="Bouton secondaire avec icône oh-vue-icon animée (spin)"
+            :icon="{name: 'ri-refresh-line', animation: 'spin'}"
+            icon-only
+            secondary
+          />
+          <DsfrButton
+            label="Bouton tertiaire avec icône oh-vue-icon animée (spin-pulse)"
+            :icon="{name: 'ri-moon-line', animation: 'spin-pulse'}"
+            icon-only
+            tertiary
+          />
+          <DsfrButton
+            label="Bouton 3re ss bordure avec icône OVI colorée avec couleur DSFR"
+            title="Bouton tertiaire sans bordure avec icône oh-vue-icon colorée avec une couleur du DSFR"
+            :icon="{name: 'ri-moon-line', fill: 'var(--success-425-625)'}"
+            icon-only
+            tertiary
+            no-outline
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/components/DsfrButton/docs-demo/DsfrButtonExample1.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import DsfrButton from '../DsfrButton.vue'
+
+const nb = ref(0)
+const handleClick = () => {
+  nb.value++
+}
+</script>
+
+<template>
+  <div class="fr-container fr-my-2w">
+    <DsfrButton
+      size="lg"
+      icon="fr-icon-home-4-fill"
+      label="Accueil"
+      @click="handleClick()"
+    />
+    Cliqué {{ nb }} fois
+  </div>
+</template>

src/components/DsfrButton/docs-demo/DsfrButtonExample2.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import DsfrButton from '../DsfrButton.vue'
+
+const nb = ref(0)
+const handleClick = () => {
+  nb.value++
+}
+</script>
+
+<template>
+  <div class="fr-container fr-my-2w">
+    <DsfrButton
+      size="sm"
+      label="Aller plus loin"
+      icon="fr-icon-arrow-right-line"
+      icon-right
+      @click="handleClick()"
+    >
+      (Contenu <em>supplémentaire</em>)
+    </DsfrButton>
+    Cliqué {{ nb }} fois
+  </div>
+</template>

src/components/DsfrButton/docs-demo/DsfrButtonGroupDemo.vue

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import DsfrButton from '../DsfrButton.vue'
+import DsfrButtonGroup from '../DsfrButtonGroup.vue'
+
+const nb1 = ref(0)
+const nb2 = ref(0)
+
+const buttons = [
+  {
+    label: 'Bouton du premier groupe',
+    onclick: () => {
+      nb1.value++
+    },
+  },
+  {
+    label: 'Bouton secondaire du premier groupe',
+    secondary: true,
+    onclick: () => {
+      nb2.value++
+    },
+  },
+]
+</script>
+
+<template>
+  <div class="fr-container fr-my-2w">
+    <div>
+      <p class="fr-text--lg">
+        Premier groupe, 2 petits boutons avec utilisation de la prop `buttons`
+      </p>
+      <DsfrButtonGroup
+        size="sm"
+        :buttons="buttons"
+      />
+      <p class="fr-text--sm">
+        Bouton primaire cliqué {{ nb1 }} fois
+      </p>
+      <p class="fr-text--sm">
+        Bouton secondaire cliqué {{ nb2 }} fois
+      </p>
+    </div>
+    <div>
+      <p class="fr-text--lg">
+        Deuxième groupe, avec utilisation du slot
+      </p>
+      <DsfrButtonGroup
+        equisized
+        inline-layout-when="always"
+      >
+        <li>
+          <DsfrButton
+            label="1re"
+            primary
+          />
+        </li>
+        <li>
+          <DsfrButton
+            label="2re"
+            secondary
+          />
+        </li>
+        <li>
+          <DsfrButton
+            label="3re"
+            tertiary
+          />
+        </li>
+        <li>
+          <DsfrButton
+            label="3re ss bord"
+            tertiary
+            no-outline
+          />
+        </li>
+      </DsfrButtonGroup>
+    </div>
+  </div>
+</template>