ISTWCMS-5035:css for wcms2 parady of catalogs search page

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

 .uw-catalog-search {
-  margin:0;
-
+  margin:0 0 gesso-spacing(sm) 0;
   .catalog-search-form {
     display:grid;
     grid-template-columns: auto 3rem;
-    padding-left:0;
-    padding-right:0;
+    padding:0;
     position: relative;
+    .form-item{
+     margin:0;
+    }
     .form-text {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
@@ -16,20 +17,15 @@
     .button{
       &[aria-label="search"]{
         @include svg-background(search_2-white);
-       background-color:gesso-grayscale(gray-5);
+        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;

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

+.path-catalogs{
+  // margin-top: 0.625rem;
+
+  .views-element-container {
+    min-height: 3rem;
+    position: relative;
+  }
+  .uw-catalog-search{
+  }
+  .view-content {
+  // reset the flex
+    display: inherit;
+    -webkit-flex-flow: inherit;
+    -ms-flex-flow: inherit;
+    flex-flow: inherit;
+    gap: inherit;
+    grid-column:inherit;
+    grid-row: inherit;
+    margin: 1rem 0;
+    .item-list{
+     ul{
+       margin: 0;
+       padding: 0;
+       li{
+         list-style-type: none;
+         margin-left: 0;
+         padding-left: 0;
+         p{
+           margin:0;
+         }
+         .views-field{
+           a {
+             margin-right: .2rem;
+             text-decoration: underline;
+
+             &:hover,
+             &:focus{
+               text-decoration: none;
+             }
+           }
+           h2{
+             font-size: gesso-font-size(3);
+             span{
+               font-family:gesso-font-family(primary);
+               font-size: gesso-font-size(0);
+               @include medium{
+                 font-size: gesso-font-size(1);
+               }
+             }
+
+           }
+         }
+       }
+     }
+    }
+  }
+}
+.view-uw-view-catalog-show-nodes,
+.view-uw-view-catalog-show-terms{
+  display: inherit;
+  gap: inherit;
+  grid-template-columns:inherit;
+  padding: inherit;
+  position: inherit;
+  .view-content {
+    .item-list{
+      ul {
+        margin: 0;
+        padding: 0;
+
+        li {
+          list-style-type: none;
+          margin-left: 0;
+          padding-left: 0;
+          p{
+            margin:0;
+          }
+          a {
+            margin-right: .2rem;
+            text-decoration: underline;
+
+            &:hover,
+            &:focus{
+              text-decoration: none;
+            }
+          }
+          h2{
+            font-size: gesso-font-size(3);
+            span{
+              font-family:gesso-font-family(primary);
+              font-size: gesso-font-size(0);
+              @include medium{
+                font-size: gesso-font-size(1);
+              }
+            }
+
+          }
+        }
+      }
+    }
+  }
+
+}

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

+  {% if pattern_lab %}
+  <div class="path-catalogs">
+    <div class="views-element-container contextual-region">
+      <div class="uw-catalog-search">
+        <form class="catalog-search-form" data-drupal-selector="catalog-search-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" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="" class="button js-form-submit form-submit">
+          <input autocomplete="off" data-drupal-selector="form-elgxztep7mki3psok-nfqf9pcqjiq7-pglh3jj9f4r8" type="hidden" name="form_build_id" value="form-ELGxZTep7MKi3PsOK_nfqf9PcQjiQ7-pGLH3Jj9F4r8">
+          <input data-drupal-selector="edit-catalog-search-form-form-token" type="hidden" name="form_token" value="RpAjcd-zHahGERC452drdMaI_k0hmmw05FvjEP1rrnM">
+          <input data-drupal-selector="edit-catalog-search-form" type="hidden" name="form_id" value="catalog_search_form">
+        </form>
+      </div>
+      <div class="contextual-region view view-uw-view-catalogs view-id-uw_view_catalogs view-display-id-catalogs_page js-view-dom-id-58ff44c140cc61ce86df67b484c8d7df5452597b951d9a1a2455d599b6a6d093">
+        <div data-contextual-id="entity.view.edit_form:view=uw_view_catalogs:location=page&amp;name=uw_view_catalogs&amp;display_id=catalogs_page&amp;langcode=en" data-contextual-token="unOKTU88qEcBR258PDXRd2IMBDyzcGqUrUvP6nU6sL8" class="contextual"><button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Books (2) configuration options</button><ul class="contextual-links" hidden=""><li class="entityviewedit-form"><a href="/admin/structure/views/view/uw_view_catalogs/edit/catalogs_page?destination=/catalogs">Edit view</a></li></ul></div>
+        <div class="view-content">
+          <div class="item-list">
+            <ul>
+              <li><div class="views-field views-field-nid"><span class="field-content"><h2><a href="/catalogs/books">Books</a> <span>(2)</span></h2></span></div><div class="views-field views-field-description__value"><span class="field-content"><p>this is the description section - need to test&nbsp;</p></span></div></li>
+              <li><div class="views-field views-field-nid"><span class="field-content"><h2><a href="/catalogs/colours">Colours</a> <span>(1)</span></h2></span></div><div class="views-field views-field-description__value"><span class="field-content"><p>this is a description</p></span></div></li>
+              <li><div class="views-field views-field-nid"><span class="field-content"><h2><a href="/catalogs/painters">Painters</a> <span>(1)</span></h2></span></div><div class="views-field views-field-description__value"><span class="field-content"></span></div></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% else %}
+    {{ catalog }}
+  {% endif %}
+

source/_patterns/04-components/tabs/_tabs.scss

@@ -54,14 +54,12 @@
 // button
 .uw-tablinks {
   border-bottom: 0.4rem solid #fff;
-  font-size: gesso-font-size(-1);
   font-weight:inherit;
   margin:0 0 0 0.15rem;
   max-width: inherit;
   padding: 1rem 2rem;
   @include medium{
     border-bottom: 0.4rem solid #fff;
-
     font-weight:inherit;
     margin:0 0 0 0.15rem;
     max-width: inherit;