TWE-667 | Blog page updates

tbx/blog/migrations/0030_blogindexpage_introduction_and_page_links.py

@@ -0,0 +1,26 @@
+# Generated by Django 5.2.5 on 2025-10-22 09:34
+
+from django.db import migrations, models
+
+import tbx.core.utils.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("blog", "0029_relatedblogpage"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="blogindexpage",
+            name="introduction",
+            field=models.TextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name="blogindexpage",
+            name="page_links",
+            field=tbx.core.utils.fields.StreamField(
+                blank=True, block_lookup={}, help_text="Add up to 3 styled page links."
+            ),
+        ),
+    ]

tbx/blog/models.py

@@ -23,7 +23,7 @@
 
 from bs4 import BeautifulSoup
 
-from tbx.core.blocks import StoryBlock
+from tbx.core.blocks import StoryBlock, StyledPageLinkBlock
 from tbx.core.models import BasePage
 from tbx.core.utils.fields import StreamField
 from tbx.core.utils.models import (
@@ -37,9 +37,26 @@
 
 class BlogIndexPage(BasePage):
     template = "patterns/pages/blog/blog_listing.html"
-
     subpage_types = ["BlogPage"]
 
+    introduction = models.TextField(
+        blank=True,
+    )
+
+    page_links = StreamField(
+        [
+            ("styled_page_link", StyledPageLinkBlock()),
+        ],
+        blank=True,
+        max_num=3,
+        help_text="Add up to 3 styled page links.",
+    )
+
+    content_panels = BasePage.content_panels + [
+        FieldPanel("introduction"),
+        FieldPanel("page_links"),
+    ]
+
     @cached_property
     def taxonomy_slugs(self):
         services = Service.objects.values_list("slug", flat=True)

tbx/core/blocks.py

@@ -32,6 +32,12 @@
 logger = logging.getLogger(__name__)
 
 
+class ColourTheme(models.TextChoices):
+    CORAL = "theme-coral", "Coral"
+    NEBULINE = "theme-nebuline", "Nebuline"
+    LAGOON = "theme-lagoon", "Lagoon"
+
+
 class LinkStructValue(blocks.StructValue):
     @cached_property
     def url(self):
@@ -48,6 +54,28 @@ def text(self):
             return page.title
 
 
+class StyledPageLinkBlock(blocks.StructBlock):
+    """
+    A styled page link block with optional title and style choices.
+    """
+
+    page = blocks.PageChooserBlock()
+    title = blocks.CharBlock(
+        required=False,
+        help_text="Optional custom title. If not provided, the page title will be used.",
+    )
+    style = blocks.ChoiceBlock(
+        choices=ColourTheme.choices,
+        default=ColourTheme.CORAL,
+        help_text="Choose the visual style for this link.",
+    )
+
+    class Meta:
+        icon = "link"
+        label = "Styled Page Link"
+        template = "patterns/molecules/streamfield/blocks/styled_page_link_block.html"
+
+
 class InternalLinkBlock(blocks.StructBlock):
     page = blocks.PageChooserBlock()
     link_text = blocks.CharBlock(required=False)
@@ -553,11 +581,6 @@ class IconChoice(models.TextChoices):
 
 
 class DivisionSignpostCardBlock(blocks.StructBlock):
-    class ColourTheme(models.TextChoices):
-        CORAL = "theme-coral", "Coral"
-        NEBULINE = "theme-nebuline", "Nebuline"
-        LAGOON = "theme-lagoon", "Lagoon"
-
     card_colour = blocks.ChoiceBlock(
         choices=ColourTheme.choices, default=ColourTheme.CORAL, max_length=20
     )

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.html

@@ -0,0 +1,9 @@
+{% load wagtailcore_tags %}
+
+<a href="{% pageurl value.page %}" class="button styled-page-links__button styled-page-links__button--{{ value.style }}">
+    {% if value.title %}
+        {{ value.title }}
+    {% else %}
+        {{ value.page.title }}
+    {% endif %}
+</a>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/styled_page_link_block.yaml

@@ -0,0 +1,12 @@
+context:
+  value:
+    page:
+      title: Charity
+      url: '#'
+    title: Charity
+    style: charity
+
+tags:
+  pageurl:
+    value.page:
+      raw: '#'

tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html

@@ -1,11 +1,29 @@
 {% load wagtailcore_tags %}
 
-<div class="title-filters {% if hide_tags %}title-filters--no-tags{% endif %}">
+<div class="title-filters {% if introduction or page_links %}title-filters--no-tags{% endif %}">
     <div class="title-filters__title">
         <h1 class="heading heading--mega">{{ item.title }}</h1>
     </div>
 
-    {% if tags and not hide_tags %}
+    {% if introduction or page_links %}
+        <div class="title-filters__info">
+            {% if introduction %}
+                <div class="title-filters__introduction">
+                    <p>{{ introduction|linebreaksbr }}</p>
+                </div>
+            {% endif %}
+
+            {% if page_links %}
+                <div class="title-filters__styled-page-links styled-page-links">
+                    {% for block in page_links %}
+                        {% include_block block %}
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
+    {% endif %}
+
+    {% if tags and not introduction and not page_links %}
         <div class="title-filters__tags">
             <div class="tags">
                 <p class="sr-only">Filter by category</p>

tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html

@@ -10,7 +10,8 @@
 
 {% block content %}
     <div class="grid grid--spacer-large">
-        {% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags %}
+
+        {% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags introduction=page.introduction page_links=page.page_links %}
 
         <ul class="page-listing page-listing--blog">
             {% for post in blog_posts %}

tbx/static_src/sass/components/_four-photo-collage.scss

@@ -44,10 +44,9 @@
             grid-template-columns:
                 minmax(100px, 200px) minmax(60px, 120px) minmax(210px, 420px)
                 minmax(320px, 640px);
-            grid-template-rows: minmax(180px, 360px) minmax(230px, 460px) minmax(
-                    40px,
-                    80px
-                );
+            grid-template-rows:
+                minmax(180px, 360px) minmax(230px, 460px)
+                minmax(40px, 80px);
             gap: $spacer-mini-plus;
             // ensures the individual images remain at the correct aspect ratio
             aspect-ratio: 7 / 4;

tbx/static_src/sass/components/_grid.scss

@@ -8,11 +8,15 @@
     margin: 0 auto;
 
     @include media-query(large) {
-        grid-template-columns: $grid-gutters-large repeat(12, 1fr) $grid-gutters-large;
+        grid-template-columns:
+            $grid-gutters-large repeat(12, 1fr)
+            $grid-gutters-large;
     }
 
     @include media-query(x-large) {
-        grid-template-columns: $grid-gutters-x-large repeat(12, 1fr) $grid-gutters-x-large;
+        grid-template-columns:
+            $grid-gutters-x-large repeat(12, 1fr)
+            $grid-gutters-x-large;
     }
 
     &--spacer-large {

tbx/static_src/sass/components/_styled-page-links.scss

@@ -0,0 +1,33 @@
+@use 'config' as *;
+
+.styled-page-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacer-mini;
+
+    &__button {
+        &--theme-coral {
+            &:focus,
+            &:hover {
+                background-color: var(--color--coral);
+                color: var(--color--white);
+            }
+        }
+
+        &--theme-nebuline {
+            &:focus,
+            &:hover {
+                background-color: var(--color--nebuline);
+                color: var(--color--white);
+            }
+        }
+
+        &--theme-lagoon {
+            &:focus,
+            &:hover {
+                background-color: var(--color--lagoon);
+                color: var(--color--white);
+            }
+        }
+    }
+}

tbx/static_src/sass/components/_title-filters.scss

@@ -48,13 +48,43 @@
     }
 
     &--no-tags {
+        @include media-query(large) {
+            flex-direction: column;
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: auto auto;
+        }
+
         #{$root}__title {
             @include media-query(large) {
-                flex-grow: 1;
+                flex-grow: 0;
+            }
+        }
+
+        &::before {
+            @include media-query(large) {
+                grid-column: 1;
+                grid-row: 1;
             }
         }
     }
 
+    &__introduction {
+        @include font-size('size-four');
+        font-weight: $weight--light;
+    }
+
+    &__styled-page-links {
+        margin-top: $spacer-small-plus;
+    }
+
+    &__info {
+        @include media-query(large) {
+            grid-column: 2;
+            grid-row: 2;
+        }
+    }
+
     &__title {
         margin-bottom: $spacer-small;
 
@@ -66,6 +96,12 @@
             #{$root}--team & {
                 flex-basis: 50%;
             }
+
+            #{$root}--no-tags & {
+                grid-column: 2;
+                grid-row: 1;
+                margin-bottom: $spacer-small-plus;
+            }
         }
     }
 

tbx/static_src/sass/main.scss

@@ -66,6 +66,7 @@
 @use 'components/sprites-preview-icons';
 @use 'components/stats';
 @use 'components/streamfield';
+@use 'components/styled-page-links';
 @use 'components/swirls';
 @use 'components/team-page-meta';
 @use 'components/tabbed-paragraph';