Merge pull request #901 from dnum-mi/feat/custom-switch-text

feat: ✨ now can customize text under toggle switch

Author: laruiss

src/components/DsfrToggleSwitch/DsfrToggleSwitch.md

@@ -19,6 +19,9 @@ Le `DsfrToggleSwitch` est un composant Vue versatile, conçu pour permettre à l
 | `labelLeft`    | `boolean` | `false`                 |             | Permet d'afficher le label à gauche de l'interrupteur                     |
 | `borderBottom` | `boolean` | `false`                 |             | Affiche une bordure sous l'interrupteur et le label                       |
 | `inputId`      | `string`  | `getRandomId('toggle')` |             | Identifiant unique pour le toggle. Utilisé pour l'accessibilité.          |
+| `activeText`   | `string`  | `Activé`                |             | Texte à afficher sous l'interrupteur lorsqu'il est activé |
+| `inactiveText` | `string`  | `Désactivé`             |             | Texte à afficher sous l'interrupteur lorsqu'il est désactivé |
+| `notext`       | `boolean`  | `false`                |             | Désactive l'affichage de activeText et inactiveText |
 
 ## 📡 Évenements
 

src/components/DsfrToggleSwitch/DsfrToggleSwitch.stories.ts

@@ -1,4 +1,4 @@
-import { fn } from '@storybook/test'
+import { expect, fn, within } from '@storybook/test'
 
 import DsfrToggleSwitch from './DsfrToggleSwitch.vue'
 
@@ -43,6 +43,18 @@ export default {
       description:
         'Appelé à chaque changement de la valeur `checked`.\n\n*N.B. : Ne fait pas partie du composant.*',
     },
+    activeText: {
+      control: 'text',
+      description: 'Texte à afficher sous l\'interrupteur lorsqu\'il est activé',
+    },
+    inactiveText: {
+      control: 'text',
+      description: 'Texte à afficher sous l\'interrupteur lorsqu\'il est désactivé',
+    },
+    noText: {
+      control: 'boolean',
+      description: 'Désactive l\'affichage de activeText et inactiveText',
+    },
     'update:modelValue': {
       description:
         'Evènement de mise à jour de la valeur contenue dans modelValue',
@@ -137,3 +149,79 @@ InterrupteurAvecBordure.args = {
   modelValue: true,
   borderBottom: true,
 }
+
+export const InterrupteurAvecTextePersonnalisé = (args) => ({
+  components: { DsfrToggleSwitch },
+  data () {
+    return args
+  },
+  template: `
+    <DsfrToggleSwitch
+      v-model="modelValue"
+      :label="label"
+      :hint="hint"
+      :input-id="inputId"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+    />
+  `,
+  watch: {
+    modelValue (newVal) {
+      this.onChange(newVal)
+    },
+  },
+})
+InterrupteurAvecTextePersonnalisé.args = {
+  label: 'Interrupteur 1',
+  hint: 'Indice',
+  inputId: 'toggle-4',
+  modelValue: true,
+  activeText: 'Autorisé',
+  inactiveText: 'Interdit',
+}
+
+export const InterrupteurSansTexte = (args) => ({
+  components: { DsfrToggleSwitch },
+  data () {
+    return args
+  },
+  template: `
+    <DsfrToggleSwitch
+      v-model="modelValue"
+      :label="label"
+      :hint="hint"
+      :input-id="inputId"
+      :no-text="noText"
+    />
+  `,
+  watch: {
+    modelValue (newVal) {
+      this.onChange(newVal)
+    },
+  },
+})
+InterrupteurSansTexte.args = {
+  label: 'Interrupteur 1',
+  hint: 'Indice',
+  inputId: 'toggle-5',
+  modelValue: true,
+  noText: true,
+}
+
+InterrupteurAvecTextePersonnalisé.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const toggleSwitch = canvas.getByLabelText('Interrupteur 1') as HTMLInputElement
+  expect(toggleSwitch.checked).toBe(true)
+  toggleSwitch.click()
+  expect(toggleSwitch.checked).toBe(false)
+  toggleSwitch.click()
+
+  const toggleSwitchLabel = canvas.getByText('Interrupteur 1') as HTMLLabelElement
+  toggleSwitchLabel.click()
+  expect(toggleSwitch.checked).toBe(false)
+  toggleSwitchLabel.click()
+  expect(toggleSwitch.checked).toBe(true)
+
+  const hint = canvas.getByText('Indice') as HTMLParagraphElement
+  expect(hint).toBeVisible()
+}

src/components/DsfrToggleSwitch/DsfrToggleSwitch.types.ts

@@ -6,4 +6,7 @@ export type DsfrToggleSwitchProps = {
   disabled?: boolean
   labelLeft?: boolean
   borderBottom?: boolean
+  activeText?: string
+  inactiveText?: string
+  noText?: boolean
 }

src/components/DsfrToggleSwitch/DsfrToggleSwitch.vue

@@ -13,6 +13,9 @@ const props = withDefaults(defineProps<DsfrToggleSwitchProps>(), {
   label: '',
   labelLeft: false,
   borderBottom: false,
+  activeText: 'Activé',
+  inactiveText: 'Désactivé',
+  noText: false,
 })
 
 defineEmits<{ (e: 'update:modelValue', payload: boolean): void }>()
@@ -45,8 +48,8 @@ const labelId = computed(() => {
       :id="labelId"
       class="fr-toggle__label"
       :for="inputId"
-      data-fr-checked-label="Activé"
-      data-fr-unchecked-label="Désactivé"
+      :data-fr-checked-label="noText ? undefined : activeText"
+      :data-fr-unchecked-label="noText ? undefined : inactiveText"
       style="--toggle-status-width: 3.55208125rem;"
     >
       {{ label }}

src/components/DsfrToggleSwitch/docs-demo/DsfrToggleSwitchDemo.vue

@@ -12,8 +12,10 @@ import DsfrToggleSwitch from '../DsfrToggleSwitch.vue'
       label-left
     />
     <DsfrToggleSwitch
-      label="Label action interrupteur"
+      label="Vitesse lumière ?"
       border-bottom
+      active-text="Vers l'infini et au-delà"
+      inactive-text="restons terre à terre"
     />
   </div>
 </template>