ISTWCMS-5725: rebasing the search blocks

src/patterns/04-components/_index.scss

@@ -20,6 +20,7 @@
 @forward 'facts-and-figures/facts-and-figures';
 @forward 'filters/filters';
 @forward 'form-item/form-item';
+@forward 'form-view-search/form-view-search';
 @forward 'google_maps/google_maps';
 @forward 'instagram/instagram';
 @forward 'icon/icon';

src/patterns/04-components/form-view-search/_form-view-search.scss

+@use '../../01-core' as *;
+
+.uw-search-form {
+  margin:0 0 var(--size-sm) 0;
+
+  .catalog-search-form,
+  .service-search-form,
+  .uw-project-search-form {
+    display: grid;
+    grid-template-columns: auto var(--size-6);
+    padding: 0;
+    position: relative;
+
+    .form-item {
+      .description {
+        margin: var(--size-xs) 0;
+      }
+    }
+
+    .form-text {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      width: 100%;
+    }
+
+    // The search button icon using the svg background
+    // function the svg
+    .button {
+      &[aria-label="search"]{
+        //@include svg-background(search_2-white);
+        background-color: var(--gray-5);
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        background-size: 50%;
+        border: var(--size-xs) solid var(--gray-3);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 3px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 3px;
+        height: 2.39rem;
+        margin: 0;
+        max-width: inherit;
+        padding: 0;
+        transition: background-color 200ms cubic-bezier(0.4, 0, 1, 1);
+        vertical-align: top;
+        white-space: normal;
+        width: inherit;
+
+        &:hover,
+        &:focus{
+          //@include svg-background(search_2);
+          background-color: var(--uw-white);
+          background-position: 50% 50%;
+        }
+      }
+    }
+  }
+}

src/patterns/04-components/form-view-search/form-view-search.twig

+<div class="uw-form-search">
+  {% if pattern_lab %}
+    <div class="uw-form-search">
+      <form class="form-search-form" data-drupal-selector="form-search-all-form" action="/catalogs" method="post" id="form-search-form" accept-charset="UTF-8" data-drupal-form-fields="edit-search-input,edit-submit">
+        <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-search-input form-item-search-input form-no-label">
+          <input data-drupal-selector="edit-search-input" type="text" id="edit-search-input" name="search_input" value="" size="60" maxlength="128" placeholder="Search within all catalogs" class="form-text required" required="required" aria-required="true">
+
+        </div>
+        <input aria-label="search" class="form-search-submit button js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="">
+        <input autocomplete="off" data-drupal-selector="form-sxccibplaegc-73-lec694bsvanum6b-j-wflacshoi" type="hidden" name="form_build_id" value="form-sxCCiBplaegC_73_LEC694bSvAnuM6B-j-wFlACShOI">
+        <input data-drupal-selector="edit-form-search-all-form-form-token" type="hidden" name="form_token" value="ZwUmrQqVQLNwYel4ZKfXoIqHlDdO3R2L2wIyZNBPVPM">
+        <input data-drupal-selector="edit-form-search-all-form" type="hidden" name="form_id" value="form_search_all_form">
+      </form>
+    </div>
+
+  {% else %}
+    <div class="uw-search-form">
+      {{ form_search }}
+    </div>
+  {% endif %}
+</div>