TWE-19 - BE - Link columns block (Service area page) (#337)

* Add LinkColumnsBlock * Add LinkColumnsBlock to service area page in pattern library * Links columns block FE draft * Add to pattern library and fine-tune styles * Add underline in high contrast mode and add tail so arrow is attached to the last word * TWE-19 | FE | Links columns block (#345) * Add underlines to links, update styles for improved accessibility --------- Co-authored-by: shyusu4 <[email protected]>
torchbox · Jan 31, 2025 · 1ab0914 · 1ab0914
1 parent 59439eb
commit 1ab0914
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 3 deletions.
diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py
@@ -368,6 +368,24 @@ class Meta:
         )
 
 
+class LinkColumnsBlock(blocks.StructBlock):
+    """
+    Displays a list of links in columns.
+    Used on the service area page.
+    """
+
+    title = blocks.CharBlock(max_length=255, required=False)
+    intro = blocks.RichTextBlock(
+        features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False
+    )
+    links = LinkBlock(max_num=None, min_num=1)
+
+    class Meta:
+        group = "Custom"
+        icon = "link"
+        template = "patterns/molecules/streamfield/blocks/link_columns_block.html"
+
+
 class PartnersBlock(blocks.StructBlock):
     title = blocks.CharBlock(max_length=255, required=False)
     partner_logos = blocks.ListBlock(CustomImageChooserBlock(), label="Logos")

diff --git a/...de/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html b/...de/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html
@@ -4,3 +4,4 @@
 {% include "patterns/molecules/streamfield/blocks/work_chooser_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/pullquote_block.html" %}
 {% include "patterns/molecules/streamfield/blocks/blog_chooser_block.html" %}
+{% include "patterns/molecules/streamfield/blocks/link_columns_block.html" %}
diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html
@@ -0,0 +1,17 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div class="grid__link-columns link-columns">
+    <div class="link-columns__header">
+        {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading--two motif-heading--static link-columns__title " %}
+        {% if value.intro %}
+            <div class="link-columns__intro rich-text">{{ value.intro|richtext }}</div>
+        {% endif %}
+    </div>
+
+    <ul class="link-columns__links">
+        {% for link in value.links %}
+            <li class="link-columns__item">
+                <a class="link-columns__link" href="{{ link.value.url }}"><span class="link-columns__link-text">{{ link.value.text }}</span><span class="link-columns__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="link-columns__arrow" %}</span></a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>
diff --git a/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.yaml b/...roject_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.yaml
@@ -0,0 +1,38 @@
+context:
+  value:
+    title: Optional section title (Link columns)
+    intro: '<p>Optional section intro</p>'
+    links:
+      - value:
+          text: Digital marketing for charities
+          url: '#'
+      - value:
+          text: Search engine optimisation (SEO)
+          url: '#'
+      - value:
+          text: Website design and development
+          url: '#'
+      - value:
+          text: Strategy, innovation and AI
+          url: '#'
+      - value:
+          text: Google Ad Grants management
+          url: '#'
+      - value:
+          text: Digital marketing creative
+          url: '#'
+      - value:
+          text: Digital marketing training
+          url: '#'
+      - value:
+          text: Wagtail CMS services
+          url: '#'
+      - value:
+          text: Email marketing
+          url: '#'
+      - value:
+          text: Pay-per-click (PPC)
+          url: '#'
+      - value:
+          text: Social media management
+          url: '#'
diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html
@@ -209,6 +209,11 @@ <h2 class="underline mt-8 mb-2">Table block</h2>
             {% include "patterns/molecules/streamfield/blocks/typed_table_block.html" %}
         </div>
 
+        <div>
+            <h2 class="underline mt-8 mb-2">Link columns block</h2>
+            {% include "patterns/molecules/streamfield/blocks/link_columns_block.html" %}
+        </div>
+
         <div>
             <h2 class="underline mt-8 mb-2">Division signpost block</h2>
             {% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %}

diff --git a/tbx/services/blocks.py b/tbx/services/blocks.py
@@ -6,6 +6,7 @@
     FeaturedCaseStudyBlock,
     FourPhotoCollageBlock,
     ImageWithAltTextBlock,
+    LinkColumnsBlock,
     PartnersBlock,
     PhotoCollageBlock,
     PromoBlock,
@@ -70,4 +71,5 @@ class ServiceStoryBlock(StoryBlock):
 class ServiceAreaStoryBlock(StoryBlock):
     blog_chooser = BlogChooserBlock()
     four_photo_collage = FourPhotoCollageBlock()
+    link_columns = LinkColumnsBlock()
     work_chooser = WorkChooserBlock()
diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss
@@ -111,6 +111,7 @@
 
     &__related-posts-simple,
     &__team-listing,
+    &__link-columns,
     &__stats-group {
         grid-column: 2 / span 4;
 

diff --git a/tbx/static_src/sass/components/_link-columns.scss b/tbx/static_src/sass/components/_link-columns.scss
@@ -0,0 +1,64 @@
+@use 'config' as *;
+
+.link-columns {
+    &__header {
+        margin-bottom: $spacer-half;
+    }
+
+    &__links {
+        @include media-query(medium) {
+            columns: 2;
+            column-gap: $spacer-large;
+        }
+
+        @include media-query(large) {
+            columns: 3;
+            column-gap: $spacer-half;
+        }
+    }
+
+    &__item {
+        padding: $spacer-mini-plus 0;
+        border-top: 1px solid var(--color--border);
+    }
+
+    &__link {
+        display: block;
+        width: fit-content;
+
+        &:focus {
+            @include focus-style();
+        }
+    }
+
+    &__link-text {
+        @include font-size(size-six);
+        @include link-styles(
+            $color: var(--color--link),
+            $interaction-color: var(--color--theme-primary),
+            $offset: 5px
+        );
+
+        &:hover {
+            transition: color $transition-quick;
+
+            @include reduced-motion() {
+                transition: none;
+            }
+        }
+    }
+
+    &__tail {
+        // Keep the arrow attached to the last word so it's not orphaned on a new line
+        white-space: nowrap;
+        display: inline;
+    }
+
+    &__arrow {
+        @include arrow-link-icon-styles(
+            $width: 18px,
+            $interaction-color: var(--color--theme-primary)
+        );
+        color: var(--color--theme-primary);
+    }
+}
diff --git a/tbx/static_src/sass/config/_mixins.scss b/tbx/static_src/sass/config/_mixins.scss
@@ -193,13 +193,15 @@
 @mixin arrow-link-icon-styles(
     $mobile-hidden: false,
     $color: var(--color--decoration),
-    $interaction-color: var(--color--link-interaction)
+    $interaction-color: var(--color--link-interaction),
+    $width: 72px,
+    $height: 22px
 ) {
     // Apply all common styles regardless of mobile-hidden
     display: inline-block;
     color: $color;
-    width: 72px;
-    height: 22px;
+    width: $width;
+    height: $height;
     transition: transform, $transition-quick;
 
     @include reduced-motion() {

diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss
@@ -36,6 +36,7 @@
 @use 'components/image';
 @use 'components/instagram-gallery';
 @use 'components/intro-with-images';
+@use 'components/link-columns';
 @use 'components/link';
 @use 'components/listing';
 @use 'components/listing-avatar';