Merge pull request #587 from vincentlaine/feat/searchBarDisabled

feat: ✨ Ajout de la possibilité de rendre le composant SearchBar disabled

Author: laruiss

src/components/DsfrSearchBar/DsfrSearchBar.stories.ts

@@ -27,6 +27,10 @@ export default {
       control: 'text',
       description: 'Texte à afficher si le champ de recherhe n’est pas rempli',
     },
+    disabled: {
+      control: 'boolean',
+      description: 'Permet de désactiver le champ et le bouton, la saisie du champ et le clic sur le bouton sera impossible.',
+    },
     buttonText: {
       control: 'text',
       description: 'Texte du bouton de la barre de recherche',
@@ -106,3 +110,35 @@ BarreDeRechercheLarge.args = {
   modelValue: '',
   large: true,
 }
+
+export const BarreDeRechercheDesactivee = (args) => ({
+  components: {
+    DsfrSearchBar,
+  },
+  data () {
+    return args
+  },
+  template: `
+      <DsfrSearchBar
+        :label="label"
+        :placeholder="placeholder"
+        :labelVisible="labelVisible"
+        :button-text="buttonText"
+        :hide-icon="hideIcon"
+        v-model="modelValue"
+        :large="large"
+        :disabled="disabled"
+      />
+  `,
+
+})
+BarreDeRechercheDesactivee.args = {
+  label: 'Label de search bar',
+  hideIcon: false,
+  placeholder: 'Rechercher',
+  buttonText: '',
+  labelVisible: false,
+  modelValue: '',
+  large: false,
+  disabled: true,
+}

src/components/DsfrSearchBar/DsfrSearchBar.vue

@@ -11,7 +11,8 @@ withDefaults(defineProps<{
   large?: boolean
   buttonText?: string
   modelValue?: string
-  placeholder?: string
+  placeholder?: string,
+  disabled?: boolean
 }>(), {
   id: () => getRandomId('search', 'input'),
   label: '',
@@ -40,11 +41,13 @@ defineEmits<{
       :model-value="modelValue"
       :label-visible="false"
       :label="label"
+      :disabled="disabled"
       @update:model-value="$emit('update:modelValue', $event)"
       @keydown.enter="$emit('search')"
     />
     <DsfrButton
       title="Rechercher"
+      :disabled="disabled"
       @click="$emit('search')"
     >
       {{ buttonText }}
@@ -56,4 +59,10 @@ defineEmits<{
 .fr-search-bar > .fr-label + .fr-input {
   margin: 0;
 }
+
+/* Obligé de faire ça car ils ont hardcode la couleur dans le DSFR sans prendre en compte que ce champ pouvait être disabled */
+.fr-search-bar .fr-input:disabled {
+  box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey);
+  color: var(--text-disabled-grey);
+}
 </style>