Updating generic tabs and refactoring multi tab list

source/_patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig

+{% 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

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 %}
 

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

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 %}