Add bootstrap accordion block

stopwatch/models/components.py

@@ -205,7 +205,7 @@ class PersonListBlock(StructBlock):
     class Meta:
         template = 'stopwatch/components/person_list.html'
 
-    heading = CharBlock()
+    heading = CharBlock(required=False)
     people = ListBlock(SnippetChooserBlock(Person))
 
     def get_context(self, value, parent_context=None):
@@ -259,12 +259,38 @@ class SummaryTextBlock(RichTextBlock):
                 'link', 'document-link', 'blockquote']
 
 
+class AccordionStreamBlock(StreamBlock):
+    """
+    Accordion content block
+    """
+    required = True
+    richtext = StructBlock([
+        ('title', CharBlock(
+            label='Title',
+        )),
+        ('content', RichTextBlock()),
+    ])
+    people = StructBlock([
+        ('title', CharBlock(
+            label='Title',
+        )),
+        ('content', PersonListBlock()),
+    ])
+
+    class Meta:
+        icon = 'folder-open-1'
+        template = 'stopwatch/components/accordion_block.html'
+        label = 'Accordion'
+
+
 TEXT_MODULES = (
     ('text', RichTextBlock(features=['h1', 'h2', 'h3', 'h4', 'bold',
      'italic', 'ol', 'ul', 'hr', 'link', 'document-link', 'image', 'embed', 'blockquote'])),
     # ('quote', PullQuoteBlock()), # NB: there may be historical uses of this, even though it is removed
     ('embed', EmbedBlock()),
     ('downloads', DownloadsBlock()),
+
+
 )
 
 CONTENT_MODULES = TEXT_MODULES + (
@@ -275,7 +301,8 @@ class SummaryTextBlock(RichTextBlock):
     ('person_listing', PersonListBlock()),
     ('organisation_listing', OrganisationListBlock()),
     ('alert', AlertBlock()),
-    ('calendar', CalendarBlock())
+    ('calendar', CalendarBlock()),
+    ('accordion', AccordionStreamBlock())
 )
 
 LANDING_MODULES = CONTENT_MODULES + (

stopwatch/scss/overrides.scss

@@ -278,3 +278,28 @@ input.btn-check:checked + label.btn {
   background: $lightred;
   border: 1px solid $primary;
 }
+
+/* Bootstrap accordion block */
+.accordion-header {
+  .accordion-block-title {
+    text-decoration: none !important;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    i.bi-chevron-up {
+      display: block;
+    }
+    i.bi-chevron-down {
+      display: none;
+    }
+    &.collapsed {
+      i.bi-chevron-down {
+        display: block;
+      }
+      i.bi-chevron-up {
+        display: none;
+      }
+    }
+  }
+}

stopwatch/templates/stopwatch/components/accordion_block.html

@@ -0,0 +1,24 @@
+{% load static wagtailcore_tags %}
+
+{% for block in self %}
+{% with block.id|stringformat:"s" as block_id %}
+  <div id="accordion-{{ block_id }}" role="tablist" aria-multiselectable="false" class="accordion">
+  {% for block in self %}
+    <div class="accordion-block">
+      <div class="accordion-header" role="tab" id="heading-{{ block_id }}">
+        <a class="accordion-block-title heading-large mb-3 collapsed" type="button"
+        data-bs-toggle="collapse" data-bs-target="#collapse-{{ forloop.parentloop.counter }}-{{ block_id }}"  
+        aria-expanded="false" aria-controls="collapse-{{ forloop.parentloop.counter }}-{{ block_id }}">
+          {% include_block block.value.title %}
+          <i class="bi bi-chevron-down"></i>
+          <i class="bi bi-chevron-up"></i>
+        </a>
+      </div>
+      <div id="collapse-{{ forloop.parentloop.counter }}-{{ block_id }}" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ block_id }}">
+        <div class="accordion-block-body">{% include_block block.value.content %}</div>
+      </div>
+    </div>
+  {% endfor %}
+  </div>
+  {% endwith %}
+{% endfor %}