Merge pull request #264 from dnum-mi/fix/add-input-hint

fix: 🐛 Corrige l'oubli de l'indice du composant champ de saisie

Author: laruiss

src/components/DsfrInput/DsfrInput.stories.js

@@ -13,6 +13,10 @@ export default {
       control: 'text',
       description: 'Label du champ de saisie',
     },
+    hint: {
+      control: 'text',
+      description: 'Indice associé au champ de saisie',
+    },
     labelVisible: {
       control: 'boolean',
       description: 'Indique si le label doit être visible (`true`) ou non (`false`, défaut)',
@@ -65,6 +69,7 @@ export const LabelNotVisible = (args) => ({
       <DsfrInput
         :model-value="modelValue"
         :label="label"
+        :hint="hint"
         :placeholder="placeholder"
         :label-visible="labelVisible"
         :disabled="disabled"
@@ -77,7 +82,6 @@ export const LabelNotVisible = (args) => ({
 })
 LabelNotVisible.args = {
   dark: false,
-  label: 'Label champ de saisie',
   labelVisible: false,
   placeholder: 'Placeholder',
   modelValue: '',
@@ -98,6 +102,7 @@ export const LabelVisible = (args) => ({
       <DsfrInput
         :model-value="modelValue"
         :label="label"
+        :hint="hint"
         :label-visible="labelVisible"
         :placeholder="placeholder"
         :disabled="disabled"
@@ -111,6 +116,7 @@ export const LabelVisible = (args) => ({
 LabelVisible.args = {
   dark: false,
   label: 'Label champ de saisie',
+  hint: 'Indice de champ de saisie',
   labelVisible: true,
   placeholder: 'Placeholder',
   modelValue: '',

src/components/DsfrInput/DsfrInput.vue

@@ -20,6 +20,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    hint: {
+      type: String,
+      default: '',
+    },
     labelVisible: Boolean,
     modelValue: {
       type: String,
@@ -47,6 +51,10 @@ export default defineComponent({
     :for="id"
   >
     {{ label }} {{ $attrs.required ? '*' : '' }}
+    <span
+      v-if="hint"
+      class="fr-hint-text"
+    >{{ hint }}</span>
   </label>
   <component
     :is="isComponent"

src/components/DsfrInput/DsfrInputGroup.stories.js

@@ -13,6 +13,10 @@ export default {
       control: 'text',
       description: 'Label du champ de saisie. Sera passé à DsfrInput si modelValue n’est pas `undefined`',
     },
+    hint: {
+      control: 'text',
+      description: 'Indice associé au champ de saisie',
+    },
     labelVisible: {
       control: 'boolean',
       description: 'Indique si le label doit être visible (`true`) ou non (`false`, défaut). Sera passé à DsfrInput si modelValue n’est pas `undefined`',
@@ -65,6 +69,7 @@ export const ChampEnErreur = (args) => ({
         :error-message="errorMessage"
         :model-value="modelValue"
         :label="label"
+        :hint="hint"
         :label-visible="labelVisible"
         :placeholder="placeholder"
         :is-invalid="isInvalid"

src/components/DsfrInput/DsfrInputGroup.vue

@@ -26,6 +26,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    hint: {
+      type: String,
+      default: '',
+    },
     labelVisible: Boolean,
     modelValue: {
       type: String,
@@ -76,6 +80,7 @@ export default defineComponent({
       :is-valid="!!validMessage"
       :is-invalid="!!errorMessage"
       :label="label"
+      :hint="hint"
       :description-id="descriptionId"
       :label-visible="labelVisible"
       :model-value="modelValue"