Add new styled page links blocks for blog index

Author: kevinhowbrook

tbx/blog/migrations/0031_blogindexpage_page_links.py

@@ -0,0 +1,21 @@
+# Generated by Django 5.2.5 on 2025-10-22 09:34
+
+from django.db import migrations
+
+import tbx.core.utils.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("blog", "0030_adds_introduction_field"),
+    ]
+
+    operations = [
+        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 (
@@ -43,8 +43,18 @@ class BlogIndexPage(BasePage):
         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

tbx/core/blocks.py

@@ -48,6 +48,33 @@ def text(self):
             return page.title
 
 
+class StyledPageLinkBlock(blocks.StructBlock):
+    """
+    A styled page link block with optional title and style choices.
+    """
+
+    class StyleChoice(models.TextChoices):
+        CHARITY = "charity", "Charity"
+        PUBLIC = "public", "Public"
+        WAGTAIL = "wagtail", "Wagtail"
+
+    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=StyleChoice.choices,
+        default=StyleChoice.CHARITY,
+        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)

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="contact-cta__button button styled-page-link--{{ 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

@@ -11,6 +11,14 @@ <h1 class="heading heading--mega">{{ item.title }}</h1>
         </div>
     {% endif %}
 
+    {% if page_links %}
+        <div class="styled-page-links">
+            {% for block in page_links %}
+                {% include_block block %}
+            {% endfor %}
+        </div>
+    {% endif %}
+
     {% if tags and not hide_tags %}
         <div class="title-filters__tags">
             <div class="tags">

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

@@ -11,7 +11,7 @@
 {% block content %}
     <div class="grid grid--spacer-large">
 
-        {% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags introduction=page.introduction %}
+        {% 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,40 @@
+@use 'config' as *;
+
+.styled-page-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacer-mini;
+    margin-bottom: $spacer-small;
+
+    @include media-query(large) {
+        margin-bottom: $spacer-medium;
+    }
+}
+
+// Style variations for the contact-cta__button button
+.styled-page-link--charity {
+    &:hover,
+    &:focus {
+        background-color: $color--coral;
+        color: var(--color--background);
+        border-color: $color--coral;
+    }
+}
+
+.styled-page-link--public {
+    &:hover,
+    &:focus {
+        background-color: $color--nebuline;
+        color: var(--color--background);
+        border-color: $color--nebuline;
+    }
+}
+
+.styled-page-link--wagtail {
+    &:hover,
+    &:focus {
+        background-color: $color--lagoon;
+        color: var(--color--background);
+        border-color: $color--lagoon;
+    }
+}