feat: ✨ Nouveau composant Segmented (Contrôle Segmenté)

Author: vincentlaine

package-lock.json

@@ -73,7 +73,7 @@
     "docs:preview": "cross-env VITEPRESS=true vitepress preview"
   },
   "dependencies": {
-    "@gouvfr/dsfr": "~1.10.2",
+    "@gouvfr/dsfr": "~1.11.0",
     "focus-trap": "^7.5.4",
     "focus-trap-vue": "^4.0.3",
     "oh-vue-icons": "1.0.0-rc3",

package.json

@@ -0,0 +1,35 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
+import { render } from '@testing-library/vue'
+
+import Segmented from './DsfrSegmented.vue'
+
+describe('DsfrSegmented', () => {
+  it('should render a radio button with label in div', () => {
+    // Given
+    const label = 'Segemented label'
+    const value = 1
+    const name = 'segmented-name'
+
+    // When
+    const { getByText, getByDisplayValue } = render(Segmented, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        label,
+        value,
+        name,
+      },
+    })
+
+    const labelEl = getByText(label)
+    const inputRadio = getByDisplayValue(value)
+
+    // Then
+    expect(labelEl).toHaveClass('fr-label')
+    expect(inputRadio).toBeInTheDocument()
+    expect(labelEl.getAttribute('for')).toBe(inputRadio.id)
+  })
+})

src/components/DsfrSegmented/DsfrSegmented.spec.ts

@@ -0,0 +1,82 @@
+import DsfrSegmented from './DsfrSegmented.vue'
+
+/**
+ * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/controle-segmente)
+ */
+export default {
+  component: DsfrSegmented,
+  title: 'Composants/DsfrSegmented',
+  argTypes: {
+    id: {
+      control: 'text',
+      description: '(optionnel) Valeur de l’attribut `id` du contrôle segmenté. Par défaut, un id pseudo-aléatoire sera donné.',
+    },
+    options: {
+      control: 'object',
+      description: 'Tableau d’objets : chaque objet contient les props à passer à `DsfrSegmented` - *N.B. : Ne fait pas partie du composant',
+    },
+    modelValue: {
+      control: 'text',
+      description: 'Valeur de la case active',
+    },
+    onChange: { action: 'changed' },
+    'update:modelValue': {
+      description: 'Événement émis à chaque changement de valeur',
+    },
+  },
+}
+
+export const Segmented = (args) => ({
+  components: { DsfrSegmented },
+  data () {
+    return args
+  },
+  template: `
+  <div class="fr-form-group">
+    <fieldset
+      class="fr-segmented"
+    >
+      <div
+        class="fr-segmented__elements"
+      >
+        <DsfrSegmented
+          v-for="option of options"
+          :modelValue="modelValue"
+          v-bind="option"
+          @update:modelValue="updateCheckedValue($event)"
+        />
+      </div>
+    </fieldset>
+  </div>
+  `,
+  methods: {
+    updateCheckedValue (val) {
+      if (val === this.modelValue) {
+        return
+      }
+      this.onChange(val)
+      this.modelValue = val
+    },
+  },
+})
+Segmented.args = {
+  modelValue: '3',
+  options: [
+    {
+      label: 'Valeur 1',
+      value: '1',
+      name: 'Choix',
+    },
+    {
+      label: 'Valeur 2',
+      value: '2',
+      disabled: true,
+      name: 'Choix',
+    },
+    {
+      label: 'Valeur 3',
+      value: '3',
+      name: 'Choix',
+    },
+  ],
+}

src/components/DsfrSegmented/DsfrSegmented.stories.ts

@@ -0,0 +1,23 @@
+import type { OhVueIcon as VIcon } from 'oh-vue-icons'
+
+export type DsfrSegmentedProps = {
+  id?: string
+  name?: string
+  modelValue?: string | number
+  value: string | number
+  label: string,
+  disabled?: boolean,
+  icon?: string | InstanceType<typeof VIcon>['$props']
+}
+
+export type DsfrSegmentedSetProps = {
+  titleId?: string,
+  disabled?: boolean,
+  small?: boolean,
+  inline?: boolean,
+  name?: string,
+  hint?: string;
+  legend?: string,
+  modelValue: string | number,
+  options?: DsfrSegmentedProps[],
+}

src/components/DsfrSegmented/DsfrSegmented.types.ts

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { getRandomId } from '../../utils/random-utils'
+
+import type { DsfrSegmentedProps } from './DsfrSegmented.types'
+import { computed } from 'vue'
+
+export type { DsfrSegmentedProps }
+
+const props = withDefaults(defineProps<DsfrSegmentedProps>(), {
+  id: () => getRandomId('basic', 'checkbox'),
+  modelValue: '',
+  label: '',
+  hint: '',
+  icon: undefined,
+})
+
+defineEmits<{(e: 'update:modelValue', payload: string | number): void}>()
+
+const iconProps = computed(() => typeof props.icon === 'string' ? { name: props.icon } : props.icon)
+</script>
+
+<template>
+  <div
+    class="fr-segmented__element"
+  >
+    <input
+      :id="id"
+      type="radio"
+      :name="name"
+      :value="value"
+      :checked="modelValue === value"
+      :disabled="disabled"
+      v-bind="$attrs"
+      @click="$emit('update:modelValue', value)"
+    >
+    <label
+      :for="id"
+      class="fr-label"
+    >
+      <VIcon
+        v-if="icon"
+        v-bind="iconProps"
+      />
+      <span v-if="icon">&nbsp;</span>
+      {{ label }}
+    </label>
+  </div>
+</template>

src/components/DsfrSegmented/DsfrSegmented.vue

@@ -0,0 +1,41 @@
+import DsfrSegmentedSet from './DsfrSegmentedSet.vue'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
+
+import '../../main.css'
+
+describe('DsfrSegmentedSet', () => {
+  it('should mount Segemented Set', () => {
+    cy.mount(DsfrSegmentedSet, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        legend: 'Légende des champs',
+        hint: 'Description 1',
+        selectedValue: 1,
+        inline: false,
+        modelValue: '1',
+        name: 'segmentedset',
+        options: [
+          {
+            label: 'Valeur 1',
+            value: '1',
+          },
+          {
+            label: 'Valeur 2',
+            value: '2',
+            disabled: true,
+          },
+          {
+            label: 'Valeur 3',
+            value: '3',
+          },
+        ],
+      },
+    })
+      .get('.fr-segmented__element:first-child input')
+      .should('not.have.focus')
+  })
+})

src/components/DsfrSegmented/DsfrSegmentedSet.e2e.ts

@@ -0,0 +1,86 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
+import { fireEvent, render } from '@testing-library/vue'
+
+import SegmentedSet from './DsfrSegmentedSet.vue'
+
+describe('DsfrSegmentedSet', () => {
+  it('should render a set of segmented with label in div', () => {
+    // Given
+    const legend = 'Légende pour l’ensemble des champs'
+    const selectedValue = 1
+
+    // When
+    const { getByText, getByRole } = render(SegmentedSet, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        legend,
+        modelValue: selectedValue,
+      },
+    })
+
+    getByRole('group')
+    const legendEl = getByText(legend)
+
+    // Then
+    expect(legendEl).toBeInTheDocument()
+  })
+
+  it('should render a set of segmented with label in div', async () => {
+    // Given
+    const legend = 'Légende pour l’ensemble des champs'
+    const disabledLabel = 'Label 2'
+    const disabledValue = 2
+    const selectedLabel = 'Label 1'
+    const selectedValue = 1
+    const toClickLabel = 'Label 3'
+    const options = [
+      {
+        label: selectedLabel,
+        value: selectedValue,
+        disabled: false,
+      },
+      {
+        label: disabledLabel,
+        value: disabledValue,
+        disabled: true,
+      },
+      {
+        label: toClickLabel,
+        value: 3,
+        disabled: false,
+      },
+    ]
+
+    // When
+    const { getByText, getByDisplayValue } = render(SegmentedSet, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        options,
+        legend,
+        modelValue: selectedValue,
+      },
+    })
+
+    const legendEl = getByText(legend)
+    const disabledInput = getByDisplayValue(disabledValue)
+    const selectedSegmented = getByDisplayValue(selectedValue)
+    const uncheckedSegmented = getByDisplayValue(3)
+
+    await fireEvent.click(uncheckedSegmented)
+
+    // Then
+    expect(legendEl).toBeInTheDocument()
+    expect(disabledInput).toBeDisabled()
+    expect(selectedSegmented).not.toBeDisabled()
+    expect(selectedSegmented).not.toBeChecked()
+    expect(uncheckedSegmented).toBeChecked()
+  })
+})