Merge pull request #589 from dnum-mi/develop

Develop

Author: laruiss

src/components/DsfrHeader/DsfrHeader.vue

@@ -123,8 +123,8 @@ defineEmits<{
                   aria-controls="header-search"
                   aria-label="Recherche"
                   title="Recherche"
-                  :data-fr-opened="showSearchModal"
-                  @click="showSearchModal"
+                  :data-fr-opened="searchModalOpened"
+                  @click.prevent.stop="showSearchModal()"
                 />
                 <button
                   v-if="quickLinks?.length"
@@ -136,7 +136,7 @@ defineEmits<{
                   aria-label="Menu"
                   title="Menu"
                   data-testid="open-menu-btn"
-                  @click="showMenu()"
+                  @click.prevent.stop="showMenu()"
                 />
               </div>
             </div>
@@ -218,7 +218,7 @@ defineEmits<{
               class="fr-btn fr-btn--close"
               aria-controls="header-navigation"
               data-testid="close-modal-btn"
-              @click="hideModal"
+              @click.prevent.stop="hideModal()"
             >
               Fermer
             </button>
@@ -246,7 +246,7 @@ defineEmits<{
             </div>
           </div>
         </div>
-        <slot/>
+        <slot />
       </div>
     </div>
   </header>

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>