Merge pull request #1110 from dnum-mi/fix/checkboxset-legend

Fix/checkboxset legend

Author: laruiss

src/components/DsfrCheckbox/DsfrCheckboxSet.spec.ts

@@ -155,4 +155,63 @@ describe('DsfrCheckboxSet', () => {
     // Then
     expect(legendEl.nextElementSibling).toBe(null)
   })
+
+  describe('legend', () => {
+    // Given
+    const firstLabelText = 'Premier label'
+    const secondLabelText = 'Deuxième label'
+    const modelValue = []
+    const options = [
+      {
+        id: '1',
+        label: firstLabelText,
+        value: 'un',
+        modelValue,
+        name: '1',
+      },
+      {
+        id: '2',
+        label: secondLabelText,
+        value: 'deux',
+        modelValue,
+        name: '2',
+      },
+    ]
+    const legendText = 'Légende de l’ensemble des champs'
+    it('should render legend cause slot is used', async () => {
+      // When
+      const { container } = render(DsfrCheckboxSet, {
+        props: {
+          legend: legendText,
+          errorMessage: 'Message d’erreur',
+          options,
+        },
+      })
+      expect(container.querySelectorAll('legend')).toHaveLength(1)
+    })
+    it('should render legend cause props legend is not empty', async () => {
+      // When
+      const { container } = render(DsfrCheckboxSet, {
+        props: {
+          legend: legendText,
+          options,
+        },
+        slots: {
+          legend: () => legendText,
+        },
+      })
+      expect(container.querySelectorAll('legend')).toHaveLength(1)
+    })
+    it('should not render legend cause no legend is provided', async () => {
+      // When
+      const { container } = render(DsfrCheckboxSet, {
+        props: {
+          options,
+        },
+      })
+
+      // Then
+      expect(container.querySelectorAll('legend')).toHaveLength(0)
+    })
+  })
 })

src/components/DsfrCheckbox/DsfrCheckboxSet.vue

@@ -19,6 +19,12 @@ const props = withDefaults(defineProps<DsfrCheckboxSetProps>(), {
   modelValue: () => [],
 })
 
+defineSlots<{
+  default?: () => any
+  legend?: () => any
+  'required-tip'?: () => any
+}>()
+
 const message = computed(() => {
   return props.errorMessage || props.validMessage
 })
@@ -45,6 +51,7 @@ const modelValue = defineModel()
       :role="(errorMessage || validMessage) ? 'group' : undefined"
     >
       <legend
+        v-if="legend || $slots.legend"
         :id="titleId"
         class="fr-fieldset__legend fr-text--regular"
       >