diff --git a/css/styles.css b/css/styles.css
index 31a1bd19b927448086506eba6a273d63aa7d217d..bce761704da29faa3fabda9e9c568ee50bbcc64d 100644
--- a/css/styles.css
+++ b/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; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 051717fa633763026c3af899287b57bd166e85d1..5ffde968635783c74d2a466a488fd6f481be26e1 100644
--- a/js/component_scripts.min.js
+++ b/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
diff --git a/source/_patterns/04-components/multi-type-list/_multi-type-list.scss b/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3f78b32a34ba3de42a0aaab4ea0967e3c5954d2a
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/_multi-type-list.scss
@@ -0,0 +1,30 @@
+/* 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
diff --git a/source/_patterns/04-components/multi-type-list/multi-type-list.js b/source/_patterns/04-components/multi-type-list/multi-type-list.js
new file mode 100644
index 0000000000000000000000000000000000000000..05849f1cd34037fe0095a5567dcc113077087918
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.js
@@ -0,0 +1,42 @@
+(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
diff --git a/source/_patterns/04-components/multi-type-list/multi-type-list.twig b/source/_patterns/04-components/multi-type-list/multi-type-list.twig
new file mode 100644
index 0000000000000000000000000000000000000000..eb6994fc137f60ea5922bcaceea61422133cf74b
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.twig
@@ -0,0 +1,53 @@
+<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
diff --git a/source/_patterns/04-components/multi-type-list/multi-type-list.yml b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ea666e170ae00612ad623ab4764e64ba4d61a208
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
@@ -0,0 +1,87 @@
+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