Add featured services block to Division Page

torchbox · Jan 6, 2025 · d260e50 · d260e50
1 parent 81c7468
commit d260e50
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 0 deletions.
diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py
@@ -283,6 +283,41 @@ class Meta:
         template = "patterns/molecules/streamfield/blocks/dynamic_hero_block.html"
 
 
+class FeaturedPageCardBlock(blocks.StructBlock):
+    heading = blocks.CharBlock(required=False)
+    description = blocks.RichTextBlock(features=settings.NO_HEADING_RICH_TEXT_FEATURES)
+    image = ImageChooserBlock()
+    link_text = blocks.CharBlock()
+    accessible_link_text = blocks.CharBlock(
+        help_text=(
+            "Used by screen readers. This should be descriptive for accessibility. "
+            'If not filled, the "Link text" field will be used instead.'
+        ),
+        required=False,
+    )
+    page = blocks.PageChooserBlock()
+
+    class Meta:
+        icon = "breadcrumb-expand"
+
+
+class FeaturedServicesBlock(blocks.StructBlock):
+    title = blocks.CharBlock(max_length=255, required=False)
+    intro = blocks.RichTextBlock(
+        features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
+    )
+    cards = blocks.ListBlock(
+        FeaturedPageCardBlock(),
+        max_num=4,
+        min_num=2,
+    )
+
+    class Meta:
+        group = "Custom"
+        icon = "thumbtack"
+        template = "patterns/molecules/streamfield/blocks/featured_services_block.html"
+
+
 class FourPhotoCollageBlock(blocks.StructBlock):
     """Accepts 4 photos shown as a collage + text below. Used on the division page."""
 

diff --git a/tbx/divisions/blocks.py b/tbx/divisions/blocks.py
@@ -1,4 +1,5 @@
 from tbx.core.blocks import (
+    FeaturedServicesBlock,
     FourPhotoCollageBlock,
     IntroductionWithImagesBlock,
     PartnersBlock,
@@ -10,3 +11,4 @@ class DivisionStoryBlock(StoryBlock):
     four_photo_collage = FourPhotoCollageBlock()
     introduction_with_images = IntroductionWithImagesBlock()
     partners_block = PartnersBlock()
+    featured_services = FeaturedServicesBlock()
diff --git a/...t_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.html b/...t_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.html
@@ -0,0 +1,24 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div>
+    {# Section heading #}
+    <h2>{{ value.title }}</h2>
+
+    {# Section intro #}
+    <div>{{ value.intro|richtext }}</div>
+
+    {# Signposting cards #}
+    <ul>
+        {% for card in value.cards %}
+            <li class="{{ card.card_colour }}">
+                {% firstof card.heading card.page.title %}
+                {{ card.description|richtext }}
+                {% image card.image fill-100x100 %}
+                <a href="{% pageurl card.page %}"
+                   {% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
+                >
+                    {{ card.link_text }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>
diff --git a/...t_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml b/...t_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.yaml
@@ -0,0 +1,23 @@
+context:
+  value:
+    title: Our featured services
+    intro: This is an optional field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    cards:
+      - heading: Advocacy, Engagement & Income
+        description: '<p>Grow your audience, mobilise and increase your income through design, communication and strategy</p>'
+        link_text: Our services
+        accessible_link_text: Our Advocacy, Engagement & Income services
+      - heading: Measure, Analyse & Optimise
+        description: '<p>Organise your data to gain the insights and confidence needed to boost your charity&apos;s performance.</p>'
+        link_text: Our services
+        accessible_link_text: Our Measure, Analyse & Optimise services
+      - heading: Scale impact through Technology
+        description: '<p>We design technology that&apos;s built for humans. Scale your impact and better deliver your services by leveraging our expertise.</p>'
+        link_text: Our services
+        accessible_link_text: Our services on scaling impact through Technology
+
+tags:
+  image:
+    'card.image fill-100x100':
+      raw: |
+        <img alt="" height="100" src="https://picsum.photos/100/100.webp" width="100">