Merge pull request #916 from dnum-mi/feat/899

feat(DsfrRadioButtonSet): ✨ permet d’ajouter un hint via une props ou…

Author: laruiss

src/components/DsfrRadioButton/DsfrRadioButton.types.ts

@@ -25,6 +25,7 @@ export type DsfrRadioButtonSetProps = {
   errorMessage?: string
   validMessage?: string
   legend?: string
+  hint?: string
   modelValue?: string | number | boolean | undefined
   options?: Omit<DsfrRadioButtonProps, 'modelValue'>[]
   ariaInvalid?: boolean | 'grammar' | 'spelling'

src/components/DsfrRadioButton/DsfrRadioButtonSet.md

@@ -15,6 +15,7 @@ Le composant `DsfrRadioButtonSet` est composé des éléments suivants :
 - Un élément `<div>` englobant l'ensemble du groupe de radio.
 - Un élément `<fieldset>` contenant les boutons radio et les messages associés.
 - Une légende (`legend`) définie par la prop `legend` et personnalisable avec le slot `legend`.
+- Un hint (`hint`) définie par la prop `hint` et personnalisable avec le slot `hint`.
 - Un groupe de boutons radio individuels rendus par le composant `DsfrRadioButton`.
 - Un message d'information, d'erreur ou de validation, affiché en dessous du groupe de boutons radio (facultatif).
 
@@ -31,6 +32,7 @@ Le composant `DsfrRadioButtonSet` est composé des éléments suivants :
 | `errorMessage` | *`string`*                                     | Message d'erreur global à afficher                                                                                     | Non         |
 | `validMessage` | *`string`*                                     | Message de validation global à afficher                                                                                | Non         |
 | `legend`       | *`string`*                                     | Texte de la légende                                                                                                    | Non         |
+| `hint`         | *`string`*                                     | Texte du hint                                                                                                          | Non         |
 | `modelValue`   | *`string`* ou *`number`* ou *`boolean`*        | Valeur courante du composant (sélection courante)                                                                      | Non         |
 | `options`      | *`Omit<DsfrRadioButtonProps, 'modelValue'>[]`* | Tableau d'options définissant les boutons radio individuels                                                            | Oui         |
 
@@ -204,6 +206,7 @@ const options = [
 `DsfrRadioButtonSet` fournit les slots suivants pour la personnalisation :
 
 - `legend` : Permet de personnaliser le contenu de la légende.
+- `hint` : Permet de personnaliser le contenu d'un hint.
 - `required-tip` : Permet d'ajouter un astérisque indiquant que le champ est obligatoire (fonctionne uniquement si l'attribut `required` est défini sur le composant).
 
 ## 🪆 Relation avec `DsfrRadioButton`

src/components/DsfrRadioButton/DsfrRadioButtonSet.vue

@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<DsfrRadioButtonSetProps>(), {
   errorMessage: '',
   validMessage: '',
   legend: '',
+  hint: '',
   options: () => [],
 })
 
@@ -45,13 +46,21 @@ const ariaLabelledby = computed(() => message.value ? `${props.titleId} messages
       :role="(errorMessage || validMessage) ? 'group' : undefined"
     >
       <legend
-        v-if="legend || $slots.legend"
+        v-if="legend || $slots.legend || hint || $slots.hint"
         :id="titleId"
         class="fr-fieldset__legend fr-fieldset__legend--regular"
       >
         <!-- @slot Slot pour personnaliser tout le contenu de la balise <legend> cf. [DsfrInput](/?path=/story/composants-champ-de-saisie-champ-simple-dsfrinput--champ-avec-label-personnalise). Une **props porte le même nom pour une légende simple** (texte sans mise en forme) -->
         <slot name="legend">
           {{ legend }}
+          <span
+            class="fr-hint-text"
+            v-if="hint || $slots.hint"
+          >
+            <slot name="hint">
+              {{ hint }}
+            </slot>
+          </span>
           <!-- @slot Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`) -->
           <slot name="required-tip">
             <span

src/components/DsfrRadioButton/docs-demo/DsfrRadioButtonSetDemo.vue

@@ -58,6 +58,7 @@ const options6 = structuredClone(options1).map(option => Object.fromEntries(
       <DsfrRadioButtonSet
         v-model="modelValue1"
         legend="Groupe de boutons radio simple"
+        hint="Texte de description additionnel"
         :options="options1"
         name="name-1"
       />