Adding multi-type-list component

css/styles.css

@@ -4331,6 +4331,29 @@ fieldset,
     .mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
       color: #000; }
 
+/* Style the tab */
+.uw-multi-type-list-tab {
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  overflow: hidden; }
+  .uw-multi-type-list-tab button {
+    background-color: inherit;
+    cursor: pointer;
+    float: left;
+    outline: none;
+    padding: 14px 16px;
+    transition: 0.3s; }
+    .uw-multi-type-list-tab button:hover {
+      background-color: #ddd; }
+    .uw-multi-type-list-tab button:active {
+      background-color: #ccc; }
+
+/* Style the tab content */
+.uw-tabcontent {
+  border: 1px solid #ccc;
+  display: none;
+  padding: 6px 12px; }
+
 .page-title {
   padding-top: 1rem; }
 

js/component_scripts.min.js

@@ -111,3 +111,46 @@
     }
   };
 })(jQuery, Drupal);
+
+(function ($, Drupal) {
+  Drupal.behaviors.multitypelist = {
+    attach: function (context, settings) {
+
+      $(document).ready(function() {
+        if ($('.uw-multi-type-list-tab').length > 0) {
+
+          $('.uw-tabcontent')[0].style.display = 'block';
+
+          $('.uw-tablinks').each(function(index, value) {
+            var type = this.getAttribute('data-type');
+            this.click(function() {
+              openTab(type);
+            });
+          });
+        }
+      });
+
+      function openTab(cityName) {
+        alert('CLICKED');
+        // Declare all variables
+        var i, tabcontent, tablinks;
+
+        // Get all elements with class="tabcontent" and hide them
+        tabcontent = document.getElementsByClassName("uw-tabcontent");
+        for (i = 0; i < tabcontent.length; i++) {
+          tabcontent[i].style.display = "none";
+        }
+
+        // Get all elements with class="tablinks" and remove the class "active"
+        tablinks = document.getElementsByClassName("uw-tablinks");
+        for (i = 0; i < tablinks.length; i++) {
+          tablinks[i].className = tablinks[i].className.replace(" active", "");
+        }
+
+        // Show the current tab, and add an "active" class to the button that opened the tab
+        document.getElementById(cityName).style.display = "block";
+        evt.currentTarget.className += " active";
+      }
+    }
+  };
+})(jQuery, Drupal);
\ No newline at end of file

source/_patterns/04-components/multi-type-list/_multi-type-list.scss

+/* Style the tab */
+.uw-multi-type-list-tab {
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  overflow: hidden;
+
+  button {
+    background-color: inherit;
+    cursor: pointer;
+    float: left;
+    outline: none;
+    padding: 14px 16px;
+    transition: 0.3s;
+
+    &:hover {
+      background-color: #ddd;
+    }
+
+    &:active {
+      background-color: #ccc;
+    }
+  }
+}
+
+/* Style the tab content */
+.uw-tabcontent {
+  border: 1px solid #ccc;
+  display: none;
+  padding: 6px 12px;
+}
\ No newline at end of file

source/_patterns/04-components/multi-type-list/multi-type-list.js

+(function ($, Drupal) {
+  Drupal.behaviors.multitypelist = {
+    attach: function (context, settings) {
+
+      $(document).ready(function() {
+        if ($('.uw-multi-type-list-tab').length > 0) {
+
+          $('.uw-tabcontent')[0].style.display = 'block';
+
+          $('.uw-tablinks').each(function(index, value) {
+            var type = this.getAttribute('data-type');
+            this.click(function() {
+              openTab(type);
+            });
+          });
+        }
+      });
+
+      function openTab(cityName) {
+        alert('CLICKED');
+        // Declare all variables
+        var i, tabcontent, tablinks;
+
+        // Get all elements with class="tabcontent" and hide them
+        tabcontent = document.getElementsByClassName("uw-tabcontent");
+        for (i = 0; i < tabcontent.length; i++) {
+          tabcontent[i].style.display = "none";
+        }
+
+        // Get all elements with class="tablinks" and remove the class "active"
+        tablinks = document.getElementsByClassName("uw-tablinks");
+        for (i = 0; i < tablinks.length; i++) {
+          tablinks[i].className = tablinks[i].className.replace(" active", "");
+        }
+
+        // Show the current tab, and add an "active" class to the button that opened the tab
+        document.getElementById(cityName).style.display = "block";
+        evt.currentTarget.className += " active";
+      }
+    }
+  };
+})(jQuery, Drupal);
\ No newline at end of file

source/_patterns/04-components/multi-type-list/multi-type-list.twig

+<div class="uw-multi-type-list-tab">
+  {% for type, list in lists %}
+    <button class="uw-tablinks" data-type="{{ type }}">{{ type }}</button>
+  {% endfor %}
+</div>
+
+{% for type, list in lists %}
+  <div id="{{ type }}" class="uw-tabcontent">
+
+    {% for content in list %}
+
+      {% if type == 'Blog' %}
+        {% include '@components/teaser/teaser--blog/teaser--blog.twig' with {
+          'title': content.title,
+          'url': content.url,
+          'date': content.date,
+          'author_name': content.author_name,
+          'author_link': content.author_link,
+          'sources': content.sources,
+          'img_element': content.img_element,
+          'alt': content.alt,
+          'tags': content.tags,
+          'content': content.content
+        } %}
+      {% endif %}
+
+      {% if type == 'News' %}
+        {% include '@components/teaser/teaser--news/teaser--news.twig' with {
+          'title': content.title,
+          'url': content.url,
+          'date': content.date,
+          'sources': content.sources,
+          'img_element': content.img_element,
+          'alt': content.alt,
+          'content': content.content
+        } %}
+      {% endif %}
+
+      {% if type == 'Events' %}
+        {% include '@components/teaser/teaser--event/teaser--event.twig' with {
+          'title': content.title,
+          'url': content.url,
+          'date': content.date,
+          'sources': content.sources,
+          'img_element': content.img_element,
+          'alt': content.alt,
+          'tags': content.tags,
+          'content': content.content
+        } %}
+      {% endif %}
+    </div>
+  {% endfor %}
+{% endfor %}
\ No newline at end of file

source/_patterns/04-components/multi-type-list/multi-type-list.yml

+lists:
+  Blog:
+    -
+      title: 'Blog Teaser title'
+      url: '#'
+      date: 'Friday, September 18, 2020'
+      author_name: 'Author Lastname'
+      author_link: '#'
+      tags:
+        - url: '#'
+          title: 'Tag 1'
+        - url: '#'
+          title: 'Tag 2'
+        - url: '#'
+          title: 'Tag 3'
+        - url: '#'
+          title: 'Tag 4'
+      sources:
+        - srcset: '../../../../source/images/president/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '../../../../source/images/president/president_xlarge.jpg'
+      alt: 'Alternative text for blog teaser photo'
+      content: |-
+        <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
+  News:
+    -
+      title: 'News Teaser title'
+      url: '#'
+      date: 'Sep. 18, 2020'
+      sources:
+        - srcset: '../../../../source/images/president/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '../../../../source/images/president/president_xlarge.jpg'
+      alt: 'Alternative text for blog teaser photo'
+      content: |-
+        <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
+  Events:
+    -
+      title: 'Event Teaser title'
+      url: '#'
+      date: 'Friday, September 18, 2020 - 4:20 PM'
+      sources:
+        - srcset: '../../../../source/images/president/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '../../../../source/images/president/president_xlarge.jpg'
+      alt: 'Alternative text for blog teaser photo'
+      content: |-
+        <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
\ No newline at end of file