refactor(DsfrRadioButton): ♻️ remanie les stories et ajoute defineSlots

laruiss · laruiss · commit 901a04f0eb65 · 2025-11-03T13:17:26.000+01:00
diff --git a/src/components/DsfrRadioButton/DsfrRadioButton.stories.ts b/src/components/DsfrRadioButton/DsfrRadioButton.stories.ts
@@ -1,4 +1,6 @@
-import { expect, fn, within } from 'storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { expect, fn, within } from '@storybook/test'
+import { ref } from 'vue'
 
 import DsfrRadioButton from './DsfrRadioButton.vue'
 import DsfrRadioButtonSet from './DsfrRadioButtonSet.vue'
@@ -8,7 +10,7 @@ import DsfrRadioButtonSet from './DsfrRadioButtonSet.vue'
  *
  * Nous vous invitons à regarder plutôt la [nouvelle documentation](https://vue-ds.fr/composants/DsfrRadioButton) pour ce composant
  */
-export default {
+const meta = {
   component: DsfrRadioButton,
   title: 'Composants/DsfrRadioButton',
   tags: ['formulaire'],
@@ -27,15 +29,15 @@ export default {
       control: 'boolean',
       description: 'Utilise la version réduite du bouton radio',
     },
-    // label: {
-    //   control: 'text',
-    //   description: 'Label du bouton radio',
-    // },
     modelValue: {
       control: 'text',
       description: 'Valeur de la case cochée',
     },
-    onChange: { action: fn() },
+    'onUpdate:modelValue': {
+      action: fn(),
+      description:
+        'Événement émis à chaque changement de valeur du groupe de même bouton radio',
+    },
     img: {
       control: 'text',
       description: 'Permet d\'ajouter une image au composant',
@@ -53,161 +55,159 @@ export default {
       control: 'object',
       description: 'Permet de définir des attributs pour le SVG.',
     },
-    'update:modelValue': {
-      description:
-        'Événement émis à chaque changement de valeur du groupe de même bouton radio',
-    },
   },
-}
+} satisfies Meta<typeof DsfrRadioButton>
 
-export const BoutonRadio = (args) => ({
-  components: { DsfrRadioButton },
-  data () {
-    return args
-  },
-  template: `
-  <div class="fr-form-group">
-    <fieldset
-      class="fr-fieldset"
-    >
-      <div
-        class="fr-fieldset__content"
-        role="radiogroup"
-      >
-        <DsfrRadioButton
-          v-for="option of options"
-          :modelValue="modelValue"
-          v-bind="option"
-          :small="small"
-          @update:modelValue="updateCheckedValue($event)"
-        />
-      </div>
-    </fieldset>
-  </div>
-  `,
-  methods: {
-    updateCheckedValue (val) {
-      if (val === this.modelValue) {
-        return
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BoutonRadio: Story = {
+  render: (args) => ({
+    components: { DsfrRadioButton },
+    setup () {
+      const modelValue = ref(args.modelValue)
+      return {
+        ...args,
+        modelValue,
       }
-      this.onChange(val)
-      this.modelValue = val
     },
+    template: `
+    <div class="fr-form-group">
+      <fieldset
+        class="fr-fieldset"
+      >
+        <div
+          class="fr-fieldset__content"
+          role="radiogroup"
+        >
+          <DsfrRadioButton
+            v-for="(option, i) of options"
+            :key="i"
+            v-model="modelValue"
+            v-bind="option"
+            :small="small"
+            @update:model-value="args['onUpdate:modelValue']"
+          />
+        </div>
+      </fieldset>
+    </div>
+    `,
+  }),
+  args: {
+    modelValue: '3',
+    small: false,
+    options: [
+      {
+        label: 'Valeur 1',
+        value: '1',
+        hint: 'Description 1',
+        name: 'Choix',
+      },
+      {
+        label: 'Valeur 2',
+        value: '2',
+        disabled: true,
+        hint: 'Description 2',
+        name: 'Choix',
+      },
+      {
+        label: 'Valeur 3',
+        value: '3',
+        name: 'Choix',
+      },
+    ],
   },
-})
-BoutonRadio.args = {
-  modelValue: '3',
-  small: false,
-  options: [
-    {
-      label: 'Valeur 1',
-      value: '1',
-      hint: 'Description 1',
-      name: 'Choix',
-    },
-    {
-      label: 'Valeur 2',
-      value: '2',
-      disabled: true,
-      hint: 'Description 2',
-      name: 'Choix',
-    },
-    {
-      label: 'Valeur 3',
-      value: '3',
-      name: 'Choix',
-    },
-  ],
 }
-BoutonRadio.play = async ({ canvasElement }) => {
+
+BoutonRadio.play = async ({ canvasElement, args }) => {
   const canvas = within(canvasElement)
-  const firstInputLabel = canvas.getByText(BoutonRadio.args.options.at(0)!.label)
-  const initialCheckedInputLabel = canvas.getByText(BoutonRadio.args.options.at(2)!.label)
+  const firstInputLabel = canvas.getByText(args.options.at(0).label)
+  const initialCheckedInputLabel = canvas.getByText(args.options.at(2).label)
   expect(initialCheckedInputLabel).toHaveClass('fr-label')
   expect(firstInputLabel).toHaveClass('fr-label')
   const firstInput = canvas.getAllByRole('radio').at(0) as HTMLInputElement
   const initialCheckedInput = canvas.getAllByRole('radio').at(2) as HTMLInputElement
   expect(initialCheckedInput.parentElement).toHaveClass('fr-radio-group')
   expect(firstInput).not.toBeChecked()
   expect(initialCheckedInput).toBeChecked()
-  firstInputLabel.click()
+  await firstInputLabel.click()
   expect(firstInput).toBeChecked()
   expect(initialCheckedInput).not.toBeChecked()
+  expect(args['onUpdate:modelValue']).toHaveBeenCalledWith('1')
 }
 
-export const BoutonRadioRiche = (args) => ({
-  components: { DsfrRadioButton, DsfrRadioButtonSet },
-  data () {
-    return args
-  },
-  template: `
-    <DsfrRadioButtonSet>
-      <DsfrRadioButton
-        v-for="option of options"
-        :modelValue="modelValue"
-        v-bind="option"
-        :small="small"
-        @update:modelValue="updateCheckedValue($event)"
-      />
-    </DsfrRadioButtonSet>
-  `,
-  methods: {
-    updateCheckedValue (val) {
-      if (val === this.modelValue) {
-        return
+export const BoutonRadioRiche: Story = {
+  render: (args) => ({
+    components: { DsfrRadioButton, DsfrRadioButtonSet },
+    setup () {
+      const modelValue = ref(args.modelValue)
+      return {
+        ...args,
+        modelValue,
       }
-      this.onChange(val)
-      this.modelValue = val
     },
+    template: `
+      <DsfrRadioButtonSet>
+        <DsfrRadioButton
+          v-for="(option, i) of options"
+          :key="i"
+          v-model="modelValue"
+          v-bind="option"
+          :small="small"
+          @update:model-value="args['onUpdate:modelValue']"
+        />
+      </DsfrRadioButtonSet>
+    `,
+  }),
+  args: {
+    modelValue: '3',
+    small: false,
+    options: [
+      {
+        label: 'Valeur 1',
+        value: '1',
+        hint: 'Description 1',
+        name: 'Choix',
+        img: 'https://loremflickr.com/150/250/cat',
+        imgTitle: 'Un 1er chaton',
+      },
+      {
+        label: 'Valeur 2',
+        value: '2',
+        disabled: true,
+        hint: 'Description 2',
+        name: 'Choix',
+        img: 'https://loremflickr.com/200/250/cat',
+        imgTitle: 'Un 2è chaton',
+      },
+      {
+        label: 'Valeur 3',
+        value: '3',
+        name: 'Choix',
+        img: 'https://loremflickr.com/250/350/cat',
+        imgTitle: 'Un 3è chaton',
+      },
+    ],
   },
-})
-BoutonRadioRiche.args = {
-  modelValue: '3',
-  small: false,
-  options: [
-    {
-      label: 'Valeur 1',
-      value: '1',
-      hint: 'Description 1',
-      name: 'Choix',
-      img: 'https://loremflickr.com/150/200/cat',
-      imgTitle: 'Un 1er chaton',
-    },
-    {
-      label: 'Valeur 2',
-      value: '2',
-      disabled: true,
-      hint: 'Description 2',
-      name: 'Choix',
-      img: 'https://loremflickr.com/200/250/cat',
-      imgTitle: 'Un 2è chaton',
-    },
-    {
-      label: 'Valeur 3',
-      value: '3',
-      name: 'Choix',
-      img: 'https://loremflickr.com/250/350/cat',
-      imgTitle: 'Un 3è chaton',
-    },
-  ],
 }
-BoutonRadioRiche.play = async ({ canvasElement }) => {
+BoutonRadioRiche.play = async ({ canvasElement, args }) => {
   const canvas = within(canvasElement)
-  const firstInputLabel = canvas.getByText(BoutonRadio.args.options.at(0)!.label)
-  const initialCheckedInputLabel = canvas.getByText(BoutonRadio.args.options.at(2)!.label)
+  const firstInputLabel = canvas.getByText(args.options.at(0)!.label)
+  const initialCheckedInputLabel = canvas.getByText(args.options.at(2)!.label)
   const firstInput = canvas.getAllByRole('radio').at(0) as HTMLInputElement
   const initialCheckedInput = canvas.getAllByRole('radio').at(2) as HTMLInputElement
-  const firstInputImg = canvas.getByTitle(BoutonRadioRiche.args.options.at(0)!.imgTitle)
-  const initialCheckedInputImg = canvas.getByTitle(BoutonRadioRiche.args.options.at(2)!.imgTitle)
+  const firstInputImg = canvas.getByTitle(args.options.at(0)!.imgTitle)
+  const initialCheckedInputImg = canvas.getByTitle(args.options.at(2)!.imgTitle)
 
-  expect(firstInputImg).toHaveAttribute('src', BoutonRadioRiche.args.options.at(0)!.img)
-  expect(initialCheckedInputImg).toHaveAttribute('src', BoutonRadioRiche.args.options.at(2)!.img)
+  expect(firstInputImg).toHaveAttribute('src', args.options.at(0)!.img)
+  expect(initialCheckedInputImg).toHaveAttribute('src', args.options.at(2)!.img)
   expect(initialCheckedInputLabel).toHaveClass('fr-label')
   expect(firstInputLabel).toHaveClass('fr-label')
   expect(initialCheckedInput.parentElement).toHaveClass('fr-radio-group')
   expect(firstInput).not.toBeChecked()
   expect(initialCheckedInput).toBeChecked()
-  firstInputLabel.click()
+  await firstInputLabel.click()
   expect(firstInput).toBeChecked()
   expect(initialCheckedInput).not.toBeChecked()
+  expect(args['onUpdate:modelValue']).toHaveBeenCalledWith('1')
 }
diff --git a/src/components/DsfrRadioButton/DsfrRadioButton.vue b/src/components/DsfrRadioButton/DsfrRadioButton.vue
@@ -20,6 +20,17 @@ const props = withDefaults(defineProps<DsfrRadioButtonProps>(), {
 
 defineEmits<{ (e: 'update:modelValue', payload: string | number | boolean): void }>()
 
+defineSlots<{
+  /**
+   * Slot pour personnaliser tout le contenu de la balise <label>
+   */
+  label(props: { label: string }): any
+  /**
+   * Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`)
+   */
+  'required-tip'(props: Record<string, never>): any
+}>()
+
 const defaultSvgAttrs = { viewBox: '0 0 80 80', width: '80px', height: '80px' }
 
 const richComputed = computed(() => props.rich || (!!props.img || !!props.svgPath))
@@ -51,10 +62,11 @@ const richComputed = computed(() => props.rich || (!!props.img || !!props.svgPat
         :for="id"
         class="fr-label"
       >
-        <!-- @slot Slot pour personnaliser tout le contenu de la balise <label> cf. [DsfrInput](/?path=/story/composants-champ-de-saisie-champ-simple-dsfrinput--champ-avec-label-personnalise). Une **props porte le même nom pour un label simple** (texte sans mise en forme) -->
-        <slot name="label">
+        <slot
+          name="label"
+          :label="label"
+        >
           {{ label }}
-          <!-- @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
               v-if="$attrs.required"
