ISTWCMS-5732: css for new filter look, includes new buttons styles

src/patterns/04-components/button/button--cancel/button--cancel.yml → src/patterns/04-components/button/button~cancel.yml

 ---
+modifier_classes: 'button--cancel'
 is_button_tag: true
 is_demo: true
+is_disabled: false
 url: '#'
 text: 'Cancel'
-text_demo: 'Cancel (Link)'
+text_demo: 'Cancel Link'

src/patterns/04-components/button/button~danger.yml

+---
+modifier_classes: 'button--danger'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Danger'
+text_demo: 'Danger Link'

src/patterns/04-components/button/button~highlight.yml

+---
+modifier_classes: 'button--highlight'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Highlight'
+text_demo: 'Highlight link'

src/patterns/04-components/button/button--medium/button--medium.yml → src/patterns/04-components/button/button~large.yml

 ---
+modifier_classes: 'button--large'
 is_button_tag: true
 is_demo: true
+is_disabled: false
 url: '#'
-text: 'Button'
-text_demo: 'Link Button'
+text: 'Large'
+text_demo: 'Large link'

src/patterns/04-components/button/button--large/button--large.yml → src/patterns/04-components/button/button~link.yml

 ---
-is_button_tag: true
+modifier_classes: 'button--link'
+is_button_tag: false
 is_demo: true
+is_disabled: false
 url: '#'
-text: 'Submit'
+text: 'Link'
 text_demo: 'Link'

src/patterns/04-components/button/button~medium.yml

+---
+modifier_classes: 'button--medium'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Medium'
+text_demo: 'Medium link'

src/patterns/04-components/button/button~primary.yml

+---
+modifier_classes: 'button--primary'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Primary'
+text_demo: 'Primary link'

src/patterns/04-components/button/button~secondary.yml

+---
+modifier_classes: 'button--secondary'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Secondary'
+text_demo: 'Secondary link'

src/patterns/04-components/button/button--danger/button--danger.yml → src/patterns/04-components/button/button~small.yml

 ---
+modifier_classes: 'button--small'
 is_button_tag: true
 is_demo: true
+is_disabled: false
 url: '#'
-text: 'Delete'
-text_demo: 'Delete (Link)'
+text: 'Small'
+text_demo: 'Small link'

src/patterns/04-components/button/button~standard.yml

+---
+modifier_classes: 'button--standard'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Standard'
+text_demo: 'Standard link'

src/patterns/04-components/button/button~unstyled.yml

+---
+modifier_classes: 'button--unstyled'
+is_button_tag: true
+is_demo: true
+is_disabled: false
+url: '#'
+text: 'Unstyled'
+text_demo: 'Unstyled link'

src/patterns/04-components/facts-and-figures/_facts-and-figures.scss

@@ -634,10 +634,12 @@ are the same height. */
         line-height: var(--font-lineheight-2);
       }
 
-      em, i {
+      em,
+      i {
         font-style: normal;
       }
-      strong, b {
+      strong,
+      b {
         font-weight: bold;
       }
     }

src/patterns/04-components/filters/_filters.scss

 /**
  * @file
- * Collapsible details.
+ * Collapsible details for filter page.
  *
- * @see collapse.js
  */
+@use '../../01-core' as *;
+
 .views-exposed-form{
   margin: 0 !important;
   padding: 0 !important;
   .form-actions{
     display: flex;
-    gap: var(--size-4);
+    justify-content: flex-end;
+    flex-flow: row;
+    gap: var(--size-2);
+    margin-top: var(--size-1);
     .button.js-form-submit.form-submit{
+      @extend %button--highlight;
       font-weight: inherit;
-      &:last-of-type{
-        //background-color: gesso-color(button, primary, background);
-        //color: gesso-color(button,primary,text);
-        &:hover,
-        &:focus {
-          //background-color: gesso-color(button, primary, background-hover);
-          //color: gesso-color(button,primary,text);
+      order: 1;
+      &[data-drupal-selector="edit-reset"]{
+        @extend %button--standard;
+        order: -1;
+      }
+    }
+  }
+  .form--inline{
+    .form-item.form-wrapper {
+      background: var(--uw-white);
+      margin: 0;
+      .form-item{
+        float: inherit;
+        .form-item{
+          margin: 0;
+        }
+      }
+    }
+    details{
+      &.uw-details,
+      &.seven-details{
+        background: var(--uw-white);
+        border: var(--size-xs) solid var(--gray-3);
+        border-width: var(--size-xs) var(--size-xs) 0 var(--size-xs);
+        box-shadow: none;
+        font-family: var(--font-systembold);
+        font-size: var(--font-size-000);
+        margin: 0;
+        &[open] > .seven-details__summary {
+          background-color: var(--gray-2);
+          color: var(--uw-black-primary);
+        }
+        &:hover > .seven-details__summary {
+          background-color: var(--gray-2);
+          color: var(--uw-black-primary);
+        }
+        &:last-of-type{
+          border-width: var(--size-xs);
+          margin-bottom: var(--size-1);
+        }
+      }
+      summary{
+        &.seven-details__summary,
+        &.details__summary {
+          background-color: var(--uw-white);
         }
       }
     }

src/patterns/04-components/filters/filters.js

@@ -7,9 +7,7 @@
   Drupal.behaviors.filtersopen = {
     attach: function () {
       $(document).ready(function () {
-        $('.view-filters details').each(function () {
-          $(this).attr('open', '');
-        });
+        $('.view-filters details').first().attr('open', '');
       });
     }
   };

src/patterns/04-components/filters/filters.twig

@@ -20,7 +20,7 @@
   {% if pattern_lab %}
     <form class="views-exposed-form bef-exposed-form" data-drupal-selector="views-exposed-form-uw-view-events-event-page" action="" method="" id="views-exposed-form-uw-view-events-event-page" accept-charset="UTF-8">
       <div class="form--inline clearfix">
-        <details open data-drupal-selector="edit-title-collapsible" aria-describedby="edit-title-collapsible--description" id="edit-title-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-title-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+        <details open data-drupal-selector="edit-title-collapsible" aria-describedby="edit-title-collapsible--description" id="edit-title-collapsible" class="js-form-wrapper form-item form-wrapper seven-details">    <summary role="button" aria-controls="edit-title-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
             <span>Title</span>
           </summary>
           <div class="seven-details__wrapper details-wrapper">
@@ -29,7 +29,7 @@
             </div>
           </div>
         </details>
-        <details open data-drupal-selector="edit-date-collapsible" aria-describedby="edit-date-collapsible--description" id="edit-date-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-date-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+        <details open data-drupal-selector="edit-date-collapsible" aria-describedby="edit-date-collapsible--description" id="edit-date-collapsible" class="js-form-wrapper form-item form-wrapper seven-details">    <summary role="button" aria-controls="edit-date-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
             <span>Date range</span>
           </summary><div class="seven-details__wrapper details-wrapper">
             <div class="seven-details__description">Limit to events where the first date of the event:</div>
@@ -37,7 +37,7 @@
               <label for="edit-date-type">Operator</label>
               <select data-drupal-selector="edit-date-type" id="edit-date-type" name="date_type" class="form-select"><option value="<">Is less than</option><option value="<=">Is less than or equal to</option><option value="=" selected="selected">Is equal to</option><option value="!=">Is not equal to</option><option value=">=">Is greater than or equal to</option><option value=">">Is greater than</option><option value="between">Is between</option><option value="not between">Is not between</option></select>
             </div>
-            <div data-drupal-selector="edit-date" id="edit-date" class="js-form-wrapper form-wrapper"><div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-date-value form-item-date-value">
+            <div data-drupal-selector="edit-date" id="edit-date" class="js-form-wrapper form-item form-wrapper"><div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-date-value form-item-date-value">
 
                 <input class="bef-datepicker form-text hasDatepicker" type="text" autocomplete="off" data-drupal-selector="edit-date-value" id="edit-date-value" name="date[value]" value=""  maxlength="128" data-drupal-states="{&quot;visible&quot;:[{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;\u003C&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;\u003C=&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;=&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;!=&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;\u003E=&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;\u003E&quot;}},{&quot;:input[name=\u0022date_type\u0022]&quot;:{&quot;value&quot;:&quot;regular_expression&quot;}}]}">
 
@@ -58,7 +58,7 @@
             </div>
           </div>
         </details>
-        <details open data-drupal-selector="edit-type-collapsible" aria-describedby="edit-type-collapsible--description" id="edit-type-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-type-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+        <details open data-drupal-selector="edit-type-collapsible" aria-describedby="edit-type-collapsible--description" id="edit-type-collapsible" class="js-form-wrapper form-item form-wrapper seven-details">    <summary role="button" aria-controls="edit-type-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
             <span>Types</span>
           </summary><div class="seven-details__wrapper details-wrapper">
             <div class="seven-details__description">Limit to events where the type is one or more of:</div><div id="edit-type" class="form-checkboxes"><a class="bef-toggle" href="#">Select All</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">
@@ -126,7 +126,7 @@
             </div>
           </div>
         </details>
-        <details open data-drupal-selector="edit-field-uw-event-tags-target-id-collapsible" aria-describedby="edit-field-uw-event-tags-target-id-collapsible--description" id="edit-field-uw-event-tags-target-id-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-field-uw-event-tags-target-id-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+        <details open data-drupal-selector="edit-field-uw-event-tags-target-id-collapsible" aria-describedby="edit-field-uw-event-tags-target-id-collapsible--description" id="edit-field-uw-event-tags-target-id-collapsible" class="js-form-wrapper form-item form-wrapper seven-details">    <summary role="button" aria-controls="edit-field-uw-event-tags-target-id-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
             <span>Tags</span>
           </summary><div class="seven-details__wrapper details-wrapper">
             <div class="seven-details__description">Limit to events tagged with one or more of:</div><div id="edit-field-uw-event-tags-target-id" class="form-checkboxes"><a class="bef-toggle" href="#">Select None</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">
@@ -134,7 +134,7 @@
             </div>
           </div>
         </details>
-        <details open data-drupal-selector="edit-audience-collapsible" aria-describedby="edit-audience-collapsible--description" id="edit-audience-collapsible" class="js-form-wrapper form-wrapper seven-details">    <summary role="button" aria-controls="edit-audience-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
+        <details open data-drupal-selector="edit-audience-collapsible" aria-describedby="edit-audience-collapsible--description" id="edit-audience-collapsible" class="js-form-wrapper form-item form-wrapper seven-details">    <summary role="button" aria-controls="edit-audience-collapsible" aria-expanded="false" aria-pressed="false" class="seven-details__summary">
             <span>Audience</span>
           </summary><div class="seven-details__wrapper details-wrapper">
             <div class="seven-details__description">Limit to events where the audience is one or more of:</div><div id="edit-audience" class="form-checkboxes"><a class="bef-toggle" href="#">Select All</a><div class="form-checkboxes bef-checkboxes bef-select-all-none bef-processed">

src/patterns/04-components/form-item/_form-item.scss

@@ -5,8 +5,10 @@
 
 .form-item {
   margin: 0 0 var(--size-2);
-  .form--inline .form-checkboxes &{
-    margin: inherit;
+  .form--inline{
+    .form-checkboxes &{
+      margin: inherit;
+    }
   }
 }
 

src/patterns/04-components/multi-type-list/multi-type-list.twig

@@ -26,7 +26,7 @@
           } %}
           {% if view_all %}
             <div class="uw-multi-type-list__button">
-              {% include '@components/button/button--large/button--large.twig' with {
+              {% include '@components/button/button.twig' with {
                 'url': view_all[type].url,
                 'text': view_all[type].text,
               } %}
@@ -42,7 +42,7 @@
           } %}
           {% if view_all %}
             <div class="uw-multi-type-list__button">
-              {% include '@components/button/button--large/button--large.twig' with {
+              {% include '@components/button/button.twig' with {
                 'url': view_all[type].url,
                 'text': view_all[type].text,
               } %}
@@ -58,7 +58,7 @@
           } %}
           {% if view_all %}
             <div class="uw-multi-type-list__button">
-              {% include '@components/button/button--large/button--large.twig' with {
+              {% include '@components/button/button.twig' with {
                 'url': view_all[type].url,
                 'text': view_all[type].text,
               } %}

src/patterns/04-components/pager/_pager.scss

@@ -47,7 +47,6 @@ $pager-bp: 600px !default;
   transition:
     color var(---dur-short) var(--ease-out-1),
     background-color var(--dur-standard) var(--ease-out-1);
-
   &:focus {
     outline: 1px dotted $pager-link-focus-outline-color;
   }
@@ -73,15 +72,11 @@ $pager-bp: 600px !default;
   @extend %pager__link;
   display: inline-block;
   text-decoration: none;
-  &:visited {
-    color: $pager-link-color;
-  }
   &:hover,
   &:focus {
     background-color: $pager-background-color-hover;
     color: var(--uw-white);
   }
-
   &:active {
     background-color: $pager-background-color-active;
     color: $pager-link-color-active;
@@ -103,10 +98,6 @@ $pager-bp: 600px !default;
       fill: $pager-background-color;
     }
   }
-
-  &:visited {
-    color: var(--uw-white);
-  }
 }
 
 .pager__item--previous {

src/patterns/04-components/site-name/_site-name.scss

@@ -41,7 +41,6 @@ $site-slogan-font-size: var(--font-size-2);
     @media(min-width: $screen-md) {
       font-size: $site-slogan-font-size;
     }
-
     margin: 0;
     padding: 0 0 0.5rem;
   }