fix: separate the drawer and mobile search form (#1332)

Prevents duplicate ids

Co-authored-by: Sebastian Thulin <sebastian.thulin@helsingborg.se>

Author: sebastianthulin

assets/source/3.0/sass/search.scss

@@ -69,7 +69,8 @@ $search-border-radius: var(--c-search-form-border-radius, var(--c-field-border-r
 #hero-search-form,
 #header-search-form,
 #menu-mega,
-#mobile-search-form {
+#mobile-search-form,
+#drawer-search-form {
   &.c-form.search-form,
   .c-form {
     .c-field__inner,
@@ -86,7 +87,9 @@ $search-border-radius: var(--c-search-form-border-radius, var(--c-field-border-r
 #header-search-form input[type="search"],
 #header-search-form .c-field__inner,
 #mobile-search-form input[type="search"],
-#mobile-search-form .c-field__inner {
+#mobile-search-form .c-field__inner,
+#drawer-search-form input[type="search"],
+#drawer-search-form .c-field__inner {
   border-radius: inherit;
   border: none;
 }

views/v3/partials/navigation/drawer.blade.php

@@ -30,7 +30,7 @@
     @slot('search')
         @includeWhen(
                 $showMobileSearchDrawer,
-                'partials.search.mobile-search-form',
+                'partials.search.drawer-search-form',
                 ['classList' => ['search-form', 'u-margin__top--2', 'u-width--100']]
             )
     @endslot

views/v3/partials/search/drawer-search-form.blade.php

@@ -0,0 +1,38 @@
+@form([
+  'id'        => 'drawer-search-form',
+  'method'    => 'get',
+  'action'    => $homeUrl,
+  'classList' => $classList
+])
+    @group(['direction' => 'horizontal', 'classList' => ['u-margin--auto']])
+        @field([
+            'id'            => 'drawer-search-form__field',
+            'type'          => 'search',
+            'name'          => 's',
+            'required'      => false,
+            'size'          => 'sm',
+            'radius'        => 'sm',
+            'borderless'    => true,
+            'label'         => $lang->searchQuestion,
+            'hideLabel'     => true,
+            'icon'          => ['icon' => 'search'],
+            'classList'     => [
+                'u-flex-grow--1',
+                'u-box-shadow--1',
+            ]
+        ])
+        @endfield
+
+        @button([
+            'id'            => 'drawer-search-form__submit',
+            'text'          => $lang->search,
+            'color'         => 'default',
+            'type'          => 'submit',
+            'size'          => 'sm',
+            'attributeList' => [
+                'aria-label' => $lang->search,
+            ],
+        ])
+        @endbutton
+    @endgroup
+@endform