From fab76c7093b01f2936359b41bddc5459a41df22e Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Tue, 8 Sep 2020 10:57:06 -0400
Subject: [PATCH] Updating generic tabs and refactoring multi tab list
---
.../_multi-tab-list-include-content.twig | 47 +++++++++++++
.../multi-type-list/multi-type-list.twig | 67 +++++++------------
.../multi-type-list/multi-type-list.yml | 5 --
source/_patterns/04-components/tabs/tabs.twig | 24 ++++++-
4 files changed, 93 insertions(+), 50 deletions(-)
create mode 100644 source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
diff --git a/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig b/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
new file mode 100644
index 00000000..ba0bfc2b
--- /dev/null
+++ b/source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig
@@ -0,0 +1,47 @@
+{% for info in lists[type] %}
+ {% if type == 'Blog' %}
+
+ {% include '@components/teaser/teaser--blog/teaser--blog.twig' with {
+ 'title': info.title,
+ 'url': info.url,
+ 'date': info.date,
+ 'author_name': info.author_name,
+ 'author_link': info.author_link,
+ 'sources': info.sources,
+ 'img_element': info.img_element,
+ 'alt': info.alt,
+ 'tags': info.tags,
+ 'content': info.content
+ } %}
+
+ {% endif%}
+
+ {% if type == 'News' %}
+
+ {% include '@components/teaser/teaser--news/teaser--news.twig' with {
+ 'title': info.title,
+ 'url': info.url,
+ 'date': info.date,
+ 'sources': info.sources,
+ 'img_element': info.img_element,
+ 'alt': info.alt,
+ 'content': info.contnet
+ } %}
+
+ {% endif %}
+
+ {% if type == 'Events' %}
+
+ {% include '@components/teaser/teaser--event/teaser--event.twig' with {
+ 'title': info.title,
+ 'url': info.url,
+ 'date': info.date,
+ 'sources': info.sources,
+ 'img_element': info.img_element,
+ 'alt': info.alt,
+ 'tags': info.tags,
+ 'content': info.content
+ } %}
+
+ {% endif %}
+{% endfor %}
\ 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
index 6088a3d2..6ab521d7 100644
--- a/source/_patterns/04-components/multi-type-list/multi-type-list.twig
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.twig
@@ -3,56 +3,37 @@
{% set content_list = content_list|merge([type]) %}
{% endfor %}
-{{ dd(content_list) }}
-
{% embed '@components/tabs/tabs.twig' with {
'content_list': content_list
} %}
{% for type, list in lists %}
-
- {% block content~{{ type }} %}
- {% 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
- } %}
+ {% for info in list %}
+
+ {% if loop.parent.loop.index == 1 %}
+ {% block content_area_1 %}
+ {% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
+ 'type': type,
+ 'lists': lists
+ } %}
+ {% endblock %}
+ {% elseif loop.parent.loop.index == 2 %}
+ {% block content_area_2 %}
+ {% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
+ 'type': type,
+ 'lists': lists
+ } %}
+ {% endblock %}
+ {% elseif loop.parent.loop.index == 3 %}
+ {% block content_area_3 %}
+ {% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
+ 'type': type,
+ 'lists': lists
+ } %}
+ {% endblock %}
{% endif %}
- {% endblock %}
+ {% endfor %}
{% endfor %}
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
index aa41b048..6b16e08e 100644
--- a/source/_patterns/04-components/multi-type-list/multi-type-list.yml
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
@@ -251,8 +251,3 @@ lists:
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>
-
-content_list:
- - blogs
- - events
- - news
\ No newline at end of file
diff --git a/source/_patterns/04-components/tabs/tabs.twig b/source/_patterns/04-components/tabs/tabs.twig
index 20c4027c..b53e73c5 100644
--- a/source/_patterns/04-components/tabs/tabs.twig
+++ b/source/_patterns/04-components/tabs/tabs.twig
@@ -2,6 +2,8 @@
button button--large {{ modifier_classes }}
{%- endset %}
+{% block something %}
+{% endblock %}
<div class="uw-tabs">
<div class="uw-tab" role="tablist" aria-label="Multi-tab-list">
@@ -14,9 +16,27 @@
<h2 class="hide-js"> {{ type }}</h2>
<div id="{{ type }}" class="uw-tabcontent" role="tabpanel" tabindex="0" aria-labelledby="tab-{{ loop.index }}" {% if loop.index > 1 %} hidden {% endif %} >
- {% block content-{{ type }} %}
- Content content content
+ {% if loop.index == 1 %}
+ {% block content_area_1 %}
+ Content area 1
{% endblock %}
+ {% elseif loop.index == 2 %}
+ {% block content_area_2 %}
+ Content area 2
+ {% endblock %}
+ {% elseif loop.index == 3 %}
+ {% block content_area_3 %}
+ Content area 3
+ {% endblock %}
+ {% elseif loop.index == 4 %}
+ {% block content_area_4 %}
+ Content area 4
+ {% endblock %}
+ {% elseif loop.index == 5 %}
+ {% block content_area_5 %}
+ Content area 5
+ {% endblock %}
+ {% endif %}
</div>
{% endfor %}
--
GitLab