Merge branch 'feature/ISTWCMS-5032-ebremner-catalog-search' into '3.0.x'

Feature/istwcms 5032 ebremner catalog search

See merge request !93

js/component_scripts.min.js

@@ -338,23 +338,6 @@ else if (e.keyCode === 37) {
   };
 })(jQuery, Drupal);
 
-/**
- * @file
- * Ckeditor Modal.
- */
-
-(function ($, Drupal) {
-  if ($.ui && $.ui.dialog) {
-    orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
-    $.ui.dialog.prototype._allowInteraction = function (event) {
-      if ($(event.target).closest('.cke_dialog').length) {
-        return true;
-      }
-      return orig_allowInteraction.apply(this, arguments);
-    };
-  }
-})(jQuery, Drupal);
-
 /**
  * @file
  */
@@ -390,6 +373,23 @@ else {
   };
 })(jQuery);
 
+/**
+ * @file
+ * Ckeditor Modal.
+ */
+
+(function ($, Drupal) {
+  if ($.ui && $.ui.dialog) {
+    orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
+    $.ui.dialog.prototype._allowInteraction = function (event) {
+      if ($(event.target).closest('.cke_dialog').length) {
+        return true;
+      }
+      return orig_allowInteraction.apply(this, arguments);
+    };
+  }
+})(jQuery, Drupal);
+
 /**
  * @file
  */

source/_patterns/00-config/_design-tokens.artifact.scss

@@ -503,4 +503,4 @@ $gesso: (
     xxl: 96px,
   ),
   gutter-width: 40px,
-);
+);
\ No newline at end of file

source/_patterns/04-components/catalog-search/_catalog-search.scss

+.uw-catalog-search {
+  margin:0;
+
+  .catalog-search-form {
+    display:grid;
+    grid-template-columns: auto 3rem;
+    position: relative;
+    .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:gesso-grayscale(gray-5);
+        background-position: 50% 50%;
+        background-repeat:no-repeat;
+        background-size:50%;
+        border:1px solid gesso-grayscale(gray-3);
+
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 3px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 3px;
+        height:2.47rem;
+        @include large {
+          height:2.46rem;
+        }
+        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:gesso-grayscale(white);
+          background-position: 50% 50%;
+        }
+      }
+    }
+  }
+}

source/_patterns/04-components/catalog-search/catalog-search.twig

+<div class="uw-catalog-search">
+  {% if pattern_lab %}
+    <div class="uw-catalog-search">
+      <form class="catalog-search-form" data-drupal-selector="catalog-search-all-form" action="/catalogs" method="post" id="catalog-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="catalog-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-catalog-search-all-form-form-token" type="hidden" name="form_token" value="ZwUmrQqVQLNwYel4ZKfXoIqHlDdO3R2L2wIyZNBPVPM">
+        <input data-drupal-selector="edit-catalog-search-all-form" type="hidden" name="form_id" value="catalog_search_all_form">
+      </form>
+    </div>
+
+  {% else %}
+    {{ catalog_search }}
+  {% endif %}
+</div>

source/images/icons/search_2-white.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M28.1,29.3l-7.2-10.5c4.1-3.2,5.2-9.1,2.5-13.7c-3-5-9.5-6.6-14.5-3.6c-5,3-6.6,9.5-3.6,14.5
+	c2.7,4.5,8.2,6.3,13,4.4l5.9,11.3c0.2,0.4,0.6,0.5,1,0.3l2.7-1.6C28.2,30.1,28.3,29.7,28.1,29.3L28.1,29.3z M18,16.7
+	c-3.4,2-7.8,0.9-9.8-2.5s-0.9-7.8,2.5-9.8c3.4-2,7.8-0.9,9.8,2.5S21.4,14.7,18,16.7L18,16.7z"/>
+</svg>

source/images/icons/search_2.svg

+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <title>search-2</title>
+  <path d="M28.067 29.328l-7.159-10.519c4.091-3.24 5.248-9.105 2.49-13.695-2.995-4.986-9.488-6.604-14.474-3.61-4.985 2.996-6.604 9.489-3.609 14.474 2.701 4.496 8.248 6.253 12.967 4.357l5.946 11.299c0.184 0.351 0.613 0.47 0.952 0.267l2.674-1.608c0.34-0.204 0.435-0.638 0.212-0.966zM18.049 16.689c-3.388 2.035-7.8 0.935-9.836-2.453s-0.934-7.8 2.453-9.835c3.387-2.036 7.799-0.935 9.834 2.453s0.936 7.801-2.452 9.835z"></path>
+</svg>
+