ISTWCMS-3712: adding stylings, twig and javascript for Expand/Collapse

source/_meta/_01-foot.twig

@@ -13,6 +13,7 @@
     <script src="../../../js/dist/scripts.min.js?{{ cacheBuster }}"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js?{{ cacheBuster }}"></script>
     <script src="../../../source/_patterns/04-components/facts-and-figures/facts-and-figures.js?{{ cacheBuster }}"></script>
+    <script src="../../../source/_patterns/04-components/expand-collapse/expand-collapse.js?{{ cacheBuster }}"></script>
 
     <!--DO NOT REMOVE-->
     {{ patternLabFoot | raw }}

source/_patterns/04-components/expand-collapse/_expand-collapse.scss

+.uw-expand-collapse {
+  &__item {
+    display: block;
+    width: 100%;
+  }
+
+  &__controls {
+    display: grid;
+    grid-template-columns: 50% 50%;
+  }
+
+  &__button {
+    background-color: gesso-grayscale('gray-1');
+    color: gesso-grayscale('gray-2');
+    font-family: "BureauGrotCond Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+    font-size: 1.125rem;
+    letter-spacing: 0.055rem;
+    padding: 0.75rem;
+    position: relative;
+    text-align: left;
+    text-transform: uppercase;
+    width: 100%;
+
+    &:hover {
+      background-color: gesso-grayscale('gray-2');
+      color: gesso-grayscale('gray-1');
+    }
+
+    &--controls {
+      text-align: center;
+    }
+
+    &--title {
+      &:hover {
+        &::after {
+          border: solid gesso-grayscale('gray-1');
+          border-width: 0 3px 3px 0;
+        }
+      }
+
+      &::after {
+        border: solid gesso-grayscale('gray-2');
+        border-width: 0 3px 3px 0;
+        content: '';
+        display: inline-block;
+        padding: 3px;
+        position: absolute;
+        right: 5%;
+        top: 40%;
+        -webkit-transform: rotate(45deg);
+        transform: rotate(45deg);
+        transform-origin: 50% 50%;
+        z-index: 2;
+      }
+
+      &.uw-expanded {
+        &::after {
+          -webkit-transform: rotate(-135deg);
+          transform: rotate(-135deg);
+        }
+      }
+    }
+  }
+
+  &__text {
+    display: none;
+    font-size: 1rem;
+    padding: 1rem 2rem;
+  }
+}

source/_patterns/04-components/expand-collapse/expand-collapse.js

+(function ($, Drupal) {
+  Drupal.behaviors.expandcollapse = {
+    attach: function (context, settings) {
+      $(document).ready(function(){
+
+        $('.uw-expand-collapse').each(function() {
+
+          // Get the id of the expand collapse.
+          var id = '#uw-expand-collapse-' + $(this).data('id');
+
+          // When the expand all button is clicked, expand all the items.
+          $(id + ' [data-type="expand-all"]').click(function() {
+
+            // Find each of the buttons, which are the titles and change
+            // aria-expanded and add class to show expanded.
+            $(id + ' .uw-expand-collapse__items button').each(function() {
+              $(this).attr('aria-expanded', true);
+              $(this).addClass('uw-expanded');
+            });
+
+            // Find each of the text and add css to display them.
+            $(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function() {
+              $(this).css('display', 'block');
+            });
+          });
+
+          // When the collapse all button is clicked, collapse all the items.
+          $(id + ' [data-type="collapse-all"]').click(function() {
+
+            // Find each of the buttons, which are the titles and change
+            // aria-expanded and remove class to show collapsed.
+            $(id + ' .uw-expand-collapse__items button').each(function() {
+              $(this).attr('aria-expanded', true);
+              $(this).removeClass('uw-expanded');
+            });
+
+            // Find each of the text and add css to display them.
+            $(id + ' .uw-expand-collapse__items .uw-expand-collapse__text').each(function() {
+              $(this).css('display', 'none');
+            });
+          });
+
+          // Step through each of the titles and add a click function.
+          $(id + ' .uw-expand-collapse__items button').click(function() {
+
+            // If this has an expanded class, remove it and change aria expanded to false.
+            // Otherwise add the expanded class and set aria-expanded to true.
+            if ($(this).hasClass('uw-expanded')) {
+              $(this).attr('aria-expanded', false);
+              $(this).removeClass('uw-expanded');
+            }
+            else {
+              $(this).attr('aria-expanded', true);
+              $(this).addClass('uw-expanded');
+            }
+
+            // Toggle the text to show/hide.
+            $(this).parent().parent().find('.uw-expand-collapse__text').toggle();
+          })
+        });
+
+      });
+    }
+  };
+})(jQuery, Drupal);

source/_patterns/04-components/expand-collapse/expand-collapse.twig

+<div id="uw-expand-collapse-{{ id }}" class="uw-expand-collapse" data-id="{{ id }}">
+  <div class="uw-expand-collapse__controls">
+    <button class="uw-expand-collapse__button uw-expand-collapse__button--controls" data-type="expand-all">Expand All</button>
+    <button class="uw-expand-collapse__button uw-expand-collapse__button--controls" data-type="collapse-all">Collapse All</button>
+  </div>
+  <div class="uw-expand-collapse__items">
+    {% for ec in ecs %}
+      <div class="uw-expand-collapse__item">
+        <h2>
+          <button aria-expanded="false" class="uw-expand-collapse__button uw-expand-collapse__button--title" data-type="title">
+            {{ ec.title }}
+          </button>
+        </h2>
+        <div class="uw-expand-collapse__text">
+          {{ ec.text }}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</div>

source/_patterns/04-components/expand-collapse/expand-collapse.yml

+id: '444-23245as3-424'
+ecs:
+  -
+    title: 'Title #1'
+    text: 'Text #1'
+  -
+    title: 'Title #2'
+    text: 'Text #2'
+  -
+    title: 'Title #3'
+    text: 'Text #3'