Merge pull request #285 from dnum-mi/feat/add-dsfr-fieldset

feat: ✨ Ajoute le composant DsfrFieldset

Author: laruiss

package-lock.json

@@ -55,7 +55,7 @@
     "@gouvfr/dsfr": "^1.3.1",
     "focus-trap": "^6.7.3",
     "focus-trap-vue": "^3.2.1",
-    "oh-vue-icons": "^0.4.7",
+    "oh-vue-icons": "^1.0.0-rc2",
     "vue": "^3.2.31"
   },
   "devDependencies": {

package.json

@@ -1,10 +1,9 @@
 import { fireEvent, render } from '@testing-library/vue'
-
+import VIcon from '../../icons.js'
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrAccordion from './DsfrAccordion.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
 
 describe('DsfrAccordion', () => {
   it('should render a simple accordion', async () => {

src/components/DsfrAccordion/DsfrAccordion.spec.js

@@ -1,10 +1,10 @@
-import OhVueIcon from 'oh-vue-icons/dist/v3/icon.es'
+import VIcon, { addIcons } from '../../icons.js'
 
 import { RiCheckboxCircleLine } from 'oh-vue-icons/icons'
 
 import DsfrButton from './DsfrButton.vue'
 
-OhVueIcon.add(RiCheckboxCircleLine)
+addIcons(RiCheckboxCircleLine)
 
 export default {
   component: DsfrButton,
@@ -130,7 +130,7 @@ BoutonSecondaire.args = {
 export const SuiteDeBoutons = (args) => ({
   components: {
     DsfrButton,
-    VIcon: OhVueIcon,
+    VIcon,
   },
   data () {
     return {

src/components/DsfrButton/DsfrButton.stories.js

@@ -1,10 +1,10 @@
-import OhVueIcon from 'oh-vue-icons/dist/v3/icon.es'
+import { addIcons } from '../../icons.js'
 
 import { RiCheckboxCircleLine } from 'oh-vue-icons/icons'
 
 import DsfrButtonGroup from './DsfrButtonGroup.vue'
 
-OhVueIcon.add(RiCheckboxCircleLine)
+addIcons(RiCheckboxCircleLine)
 
 export default {
   component: DsfrButtonGroup,

src/components/DsfrButton/DsfrButtonGroup.stories.js

@@ -1,10 +1,10 @@
-import OhVueIcon from 'oh-vue-icons/dist/v3/icon.es'
+import { addIcons } from '../../icons.js'
 
 import { RiInformationLine } from 'oh-vue-icons/icons'
 
 import DsfrCallout from './DsfrCallout.vue'
 
-OhVueIcon.add(RiInformationLine)
+addIcons(RiInformationLine)
 
 export default {
   component: DsfrCallout,

src/components/DsfrCallout/DsfrCallout.stories.js

@@ -0,0 +1,71 @@
+import { render } from '@testing-library/vue'
+
+import DsfrFieldset from './DsfrFieldset.vue'
+
+describe('DsfrFieldset', () => {
+  it('should render a DsfrFieldset component', () => {
+    const legend = 'Texte de la légende'
+    const slotContent = 'Contenu du slot par défaut'
+    const hint = 'Texte d̛’indice'
+    const { container, getByText } = render(DsfrFieldset, {
+      props: {
+        legend,
+        legendId: 'legend-id',
+        hint,
+      },
+      slots: {
+        default: slotContent,
+      },
+    })
+
+    const fieldsetEl = container.querySelector('fieldset')
+    const legendEl = fieldsetEl.firstElementChild
+    const legendByText = getByText(legend)
+    const fieldsetByText = getByText(slotContent)
+    const hintByText = getByText(hint)
+
+    const hintEl = legendEl.nextElementSibling
+
+    expect(fieldsetEl).not.toBeNull()
+    expect(fieldsetEl).toHaveClass('fr-fieldset')
+    expect(legendEl).toBe(legendByText)
+    expect(fieldsetByText).toBe(fieldsetEl)
+    expect(hintByText).toBe(hintEl)
+    expect(legendEl).toHaveClass('fr-fieldset__legend')
+    expect(legendEl).toHaveAttribute('id', 'legend-id')
+    expect(hintEl).toHaveClass('fr-hint-text')
+  })
+
+  it('should render a complex DsfrFieldset component', () => {
+    const legend = 'Contenu du slot de la légende'
+    const slotContent = 'Contenu du slot par défaut'
+    const hint = 'Contenu du slot de l’indice'
+    const { container, getByText } = render(DsfrFieldset, {
+      props: {
+        legendId: 'legend-id',
+      },
+      slots: {
+        default: slotContent,
+        hint,
+        legend,
+      },
+    })
+
+    const fieldsetEl = container.querySelector('fieldset')
+    const legendEl = fieldsetEl.firstElementChild
+    const legendByText = getByText(legend)
+    const fieldsetByText = getByText(slotContent)
+    const hintByText = getByText(hint)
+
+    const hintEl = legendEl.nextElementSibling
+
+    expect(fieldsetEl).not.toBeNull()
+    expect(fieldsetEl).toHaveClass('fr-fieldset')
+    expect(legendEl).toBe(legendByText)
+    expect(fieldsetByText).toBe(fieldsetEl)
+    expect(hintByText).toBe(hintEl)
+    expect(legendEl).toHaveClass('fr-fieldset__legend')
+    expect(legendEl).toHaveAttribute('id', 'legend-id')
+    expect(hintEl).toHaveClass('fr-hint-text')
+  })
+})

src/components/DsfrFieldset/DsfrFieldset.spec.js

@@ -0,0 +1,114 @@
+import DsfrFieldset from './DsfrFieldset.vue'
+
+export default {
+  component: DsfrFieldset,
+  title: 'Composants/Ensemble de champs - DsfrFieldset',
+  argTypes: {
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
+    legend: {
+      control: 'text',
+      description: 'Slot pour le contenu du titre du `fieldset` (sera dans `<legend class="fr-fieldset__legend">`). Une props du même nom est utilisable pour du texte simple sans mise en forme.',
+    },
+    legendClass: {
+      control: 'text',
+      description: 'Classes à ajouter à l’élément `<legend class="fr-fieldset__legend">`',
+    },
+    legendId: {
+      control: 'text',
+      description: 'id de la balise `legend`',
+    },
+    hint: {
+      control: 'text',
+      description: 'Slot pour le contenu de l’indice (sera dans `<span class="fr-hint-text">` qui sera dans `</legend>`). Une props du même nom est utilisable pour du texte simple sans mise en forme.',
+    },
+    hintClass: {
+      control: 'text',
+      description: 'Classe(s) à ajouter à l’élément <span class="fr-hint-text">',
+    },
+  },
+}
+
+export const EnsembleDeChamps = (args) => ({
+  components: {
+    DsfrFieldset,
+  },
+
+  data () {
+    return {
+      ...args,
+      expandedId: undefined,
+      title1: args.title + ' 1',
+      title2: args.title + ' 2',
+    }
+  },
+
+  template: `
+    <DsfrFieldset
+      :legend="legend"
+      :legend-class="legendClass"
+      :hint-class="hintClass"
+      :legend-id="legendId"
+      :hint="hint"
+    >
+      Contenu du fieldset
+    </DsfrFieldset>
+  `,
+
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+})
+EnsembleDeChamps.args = {
+  dark: false,
+  legend: 'Titre de l’ensemble des champs',
+  legendId: 'legend-id',
+  legendClass: '',
+  hintClass: '',
+  hint: 'Texte d’indice',
+}
+
+export const EnsemblePersonnaliseDeChamps = (args) => ({
+  components: {
+    DsfrFieldset,
+  },
+
+  data () {
+    return {
+      ...args,
+      expandedId: undefined,
+      title1: args.title + ' 1',
+      title2: args.title + ' 2',
+    }
+  },
+
+  template: `
+    <DsfrFieldset
+      :legend-id="legendId"
+      :legend-class="legendClass"
+      :hint-class="hintClass"
+    >
+      <template #legend>
+        {{ legend }} avec <em>de l’italique</em>
+      </template>
+      <template #hint>
+        {{ hint }} avec <strong>du gras</strong>
+      </template>
+      Contenu du fieldset
+    </DsfrFieldset>
+  `,
+
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+})
+EnsemblePersonnaliseDeChamps.args = {
+  dark: false,
+  legend: 'Contenu personnalisé du titre de l’ensemble des champs',
+  legendId: 'legend-id',
+  legendClass: '',
+  hintClass: '',
+  hint: 'Contenu personnalisé de l’indice',
+}

src/components/DsfrFieldset/DsfrFieldset.stories.js

@@ -0,0 +1,56 @@
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DsfrFieldset',
+
+  props: {
+    legend: {
+      type: String,
+      default: '',
+    },
+    legendClass: {
+      type: [String, Object],
+      default: '',
+    },
+    legendId: {
+      type: String,
+      default: undefined,
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    hintClass: {
+      type: [String, Object],
+      default: '',
+    },
+  },
+})
+</script>
+
+<template>
+  <fieldset class="fr-fieldset">
+    <legend
+      v-if="legend || $slots.legend?.().length"
+      :id="legendId"
+      class="fr-fieldset__legend"
+      :class="legendClass"
+    >
+      {{ legend }}
+      <!-- @slot Slot pour le contenu du titre du `fieldset` (sera dans `<legend class="fr-fieldset__legend">`). Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
+      <slot name="legend" />
+    </legend>
+    <span
+      v-if="hint || $slots.hint?.().length"
+      class="fr-hint-text"
+    >
+      {{ hint }}
+      <!-- @slot Slot pour le contenu de l’indice (sera dans `<span class="fr-hint-text">` qui sera dans `</legend>`). Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
+      <slot name="hint" />
+    </span>
+
+    <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<fieldset>`, après `</legend>`) -->
+    <slot />
+  </fieldset>
+</template>