New block

content_manager/blocks.py

@@ -876,6 +876,19 @@ class Meta:
         template = "content_manager/blocks/item_grid.html"
 
 
+class TabBlock(blocks.StructBlock):
+    title = blocks.CharBlock(label=_("Title"))
+    content = ColumnBlock(label=_("Content"))
+
+
+class TabsBlock(blocks.StreamBlock):
+    tabs = TabBlock(label=_("Tab"), min_num=1, max_num=15)
+
+    class Meta:
+        icon = "grip"
+        template = "content_manager/blocks/tabs.html"
+
+
 class AdjustableColumnBlock(blocks.StructBlock):
     width = blocks.ChoiceBlock(
         label=_("Column width"),
@@ -1016,6 +1029,7 @@ class Meta:
     ("separator", SeparatorBlock(label=_("Separator"), group=_("Page structure"))),
     ("multicolumns", MultiColumnsWithTitleBlock(label=_("Multiple columns"), group=_("Page structure"))),
     ("item_grid", ItemGridBlock(label=_("Item grid"), group=_("Page structure"))),
+    ("tabs", TabsBlock(label=_("Tabs"), group=_("Page structure"))),
     ("fullwidthbackground", FullWidthBackgroundBlock(label=_("Full width background"), group=_("Page structure"))),
     (
         "fullwidthbackgroundwithsidemenu",

content_manager/templates/content_manager/blocks/accordions.html

@@ -1,25 +1,25 @@
 {% load dsfr_tags wagtailcore_tags %}
 <div class="fr-container fr-py-3w">
-    <div class="fr-grid-row fr-grid-row--gutters">
-        <div class="fr-col-12 fr-col-offset-md-2 fr-col-md-8">
-            {% for subblock in block.value %}
-                {% if subblock.block_type == 'title' %}
-                    <div class="fr-col-12">
-                        <h2>{{ subblock.value }}</h2>
-                    </div>
-                {% endif %}
-            {% endfor %}
-            <div class="fr-accordions-group">
-                {% for subblock in block.value %}
-                    {% if subblock.block_type == 'accordion' %}
-                        {% with forloop.counter0|lower as str_counter %}
-                            {% with "accordion-"|add:accordions_id|add:"-"|add:str_counter as accordion_id %}  
-                                {% dsfr_accordion id=accordion_id title=subblock.value.title content=subblock.value.content|richtext %}
-                            {% endwith %}
-                        {% endwith %}
-                    {% endif %}
-                {% endfor %}
-            </div>
-        </div>
+  <div class="fr-grid-row fr-grid-row--gutters">
+    <div class="fr-col-12 fr-col-offset-md-2 fr-col-md-8">
+      {% for subblock in block.value %}
+        {% if subblock.block_type == 'title' %}
+          <div class="fr-col-12">
+            <h2>{{ subblock.value }}</h2>
+          </div>
+        {% endif %}
+      {% endfor %}
+      <div class="fr-accordions-group">
+        {% for subblock in block.value %}
+          {% if subblock.block_type == 'accordion' %}
+            {% with forloop.counter0|lower as str_counter %}
+              {% with "accordion-"|add:accordions_id|add:"-"|add:str_counter as accordion_id %}
+                {% dsfr_accordion id=accordion_id title=subblock.value.title content=subblock.value.content|richtext %}
+              {% endwith %}
+            {% endwith %}
+          {% endif %}
+        {% endfor %}
+      </div>
     </div>
+  </div>
 </div>

content_manager/templates/content_manager/blocks/tabs.html

@@ -0,0 +1,24 @@
+{% load i18n wagtailcore_tags %}
+<div class="fr-tabs">
+  <ul class="fr-tabs__list"
+      role="tablist"
+      aria-label="{% translate 'Tabs group' %}">
+    {% for subblock in block.value %}
+      <li role="presentation">
+        <button id="tabpanel-{{ block.id }}-{{ forloop.counter }}"
+                class="fr-tabs__tab fr-icon-checkbox-line fr-tabs__tab--icon-left"
+                tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"
+                role="tab"
+                aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
+                aria-controls="tabpanel-{{ block.id }}-{{ forloop.counter }}-panel">{{ subblock.value.title }}</button>
+      </li>
+    {% endfor %}
+  </ul>
+  {% for subblock in block.value %}
+    <div id="tabpanel-{{ block.id }}-{{ forloop.counter }}-panel"
+         class="fr-tabs__panel{% if forloop.first %} fr-tabs__panel--selected{% endif %}"
+         role="tabpanel"
+         aria-labelledby="tabpanel-{{ block.id }}-{{ forloop.counter }}"
+         tabindex="0">{{ subblock.value.content }}</div>
+  {% endfor %}
+</div>