From 17c4616acfa62a3bab8c3347054e4c2f30ae9f72 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Fri, 10 Jan 2025 16:56:46 +0800 Subject: [PATCH 1/7] Add LinkColumnsBlock --- tbx/core/blocks.py | 18 +++++++++ .../blocks/link_columns_block.html | 17 +++++++++ .../blocks/link_columns_block.yaml | 38 +++++++++++++++++++ tbx/services/blocks.py | 2 + 4 files changed, 75 insertions(+) create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.yaml diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 4ed0bef83..330e873c2 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -333,6 +333,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/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html new file mode 100644 index 000000000..68e5b3063 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html @@ -0,0 +1,17 @@ +{% load wagtailcore_tags wagtailimages_tags %} +
+ {# Section heading #} +

{{ value.title }}

+ + {# Section intro #} +
{{ value.intro|richtext }}
+ + {# Links #} + +
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.yaml new file mode 100644 index 000000000..e062f2e11 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.yaml @@ -0,0 +1,38 @@ +context: + value: + title: Optional section title (Link columns) + intro: '

Optional section intro

' + 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/services/blocks.py b/tbx/services/blocks.py index e4ea7a748..f4feee529 100644 --- a/tbx/services/blocks.py +++ b/tbx/services/blocks.py @@ -4,6 +4,7 @@ FeaturedCaseStudyBlock, FourPhotoCollageBlock, ImageWithAltTextBlock, + LinkColumnsBlock, PartnersBlock, PhotoCollageBlock, PromoBlock, @@ -69,4 +70,5 @@ class ServiceStoryBlock(StoryBlock): class ServiceAreaStoryBlock(StoryBlock): blog_chooser = BlogChooserBlock() four_photo_collage = FourPhotoCollageBlock() + link_columns = LinkColumnsBlock() work_chooser = WorkChooserBlock() From ba593210f0855bda81b668a4edce4e3639d89f2e Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Fri, 10 Jan 2025 16:57:18 +0800 Subject: [PATCH 2/7] Add LinkColumnsBlock to service area page in pattern library --- .../streamfield/service_area_story_container.html | 1 + 1 file changed, 1 insertion(+) diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html index 1b5a2829a..41b269845 100644 --- a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/service_area_story_container.html +++ b/tbx/project_styleguide/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" %} From 7d77713793bf202202382ae9ecea2fe4f35df481 Mon Sep 17 00:00:00 2001 From: shyusu4 Date: Mon, 20 Jan 2025 12:02:08 +0300 Subject: [PATCH 3/7] Links columns block FE draft --- .../blocks/link_columns_block.html | 20 ++++----- tbx/static_src/sass/components/_grid.scss | 3 +- .../sass/components/_link-columns.scss | 43 +++++++++++++++++++ tbx/static_src/sass/config/_mixins.scss | 8 ++-- tbx/static_src/sass/main.scss | 1 + 5 files changed, 61 insertions(+), 14 deletions(-) create mode 100644 tbx/static_src/sass/components/_link-columns.scss diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html index 68e5b3063..674ad2221 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html @@ -1,16 +1,16 @@ {% load wagtailcore_tags wagtailimages_tags %} -
- {# Section heading #} -

{{ value.title }}

+
+
+ {% 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 %} +
{{ value.intro|richtext }}
+ {% endif %} +
- {# Section intro #} -
{{ value.intro|richtext }}
- - {# Links #} -
    + diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index 7b8e586b1..814938119 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -101,7 +101,8 @@ } &__related-posts-simple, - &__team-listing { + &__team-listing, + &__link-columns { grid-column: 2 / span 4; @include media-query(large) { diff --git a/tbx/static_src/sass/components/_link-columns.scss b/tbx/static_src/sass/components/_link-columns.scss new file mode 100644 index 000000000..39c585eee --- /dev/null +++ b/tbx/static_src/sass/components/_link-columns.scss @@ -0,0 +1,43 @@ +@use 'config' as *; + +.link-columns { + &__header { + margin-bottom: $spacer-half; + } + + &__links { + display: grid; + grid-template-columns: 1fr; + column-gap: $spacer-half; + + @include media-query(medium) { + grid-template-columns: repeat(2, 1fr); + } + + @include media-query(large) { + grid-template-columns: repeat(3, 1fr); + } + } + + &__item { + padding: $spacer-mini-plus 0; + border-top: 1px solid var(--color--border); + } + + &__link { + @include font-size(size-six); + color: var(--color--white); + + &:hover { + color: var(--color--theme-primary); + } + } + + &__arrow { + @include arrow-link-icon-styles( + $width: 22px, + $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 index b786da6d4..ee3600ff5 100755 --- a/tbx/static_src/sass/config/_mixins.scss +++ b/tbx/static_src/sass/config/_mixins.scss @@ -185,13 +185,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 index 6e12c478f..e355ed5a8 100755 --- a/tbx/static_src/sass/main.scss +++ b/tbx/static_src/sass/main.scss @@ -33,6 +33,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'; From 2666f42c37d66bc2be15424f226e26b17ff51ce6 Mon Sep 17 00:00:00 2001 From: shyusu4 Date: Mon, 20 Jan 2025 14:58:56 +0300 Subject: [PATCH 4/7] Add to pattern library and fine-tune styles --- .../patterns/styleguide/components/components.html | 5 +++++ tbx/static_src/sass/components/_link-columns.scss | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html index 485b3390c..9ecb880e2 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html @@ -199,6 +199,11 @@

    Table block

    {% include "patterns/molecules/streamfield/blocks/typed_table_block.html" %}
+
+

Link columns block

+ {% include "patterns/molecules/streamfield/blocks/link_columns_block.html" %} +
+

Division signpost block

{% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %} diff --git a/tbx/static_src/sass/components/_link-columns.scss b/tbx/static_src/sass/components/_link-columns.scss index 39c585eee..ad0bee5df 100644 --- a/tbx/static_src/sass/components/_link-columns.scss +++ b/tbx/static_src/sass/components/_link-columns.scss @@ -29,13 +29,18 @@ color: var(--color--white); &:hover { + transition: color $transition-quick; color: var(--color--theme-primary); + + @include reduced-motion() { + transition: none; + } } } &__arrow { @include arrow-link-icon-styles( - $width: 22px, + $width: 18px, $interaction-color: var(--color--theme-primary) ); color: var(--color--theme-primary); From 8fd8459b7c2cc850d7530f9699d339101a59e322 Mon Sep 17 00:00:00 2001 From: shyusu4 Date: Tue, 21 Jan 2025 15:14:30 +0300 Subject: [PATCH 5/7] Add underline in high contrast mode and add tail so arrow is attached to the last word --- .../streamfield/blocks/link_columns_block.html | 2 +- tbx/static_src/sass/components/_link-columns.scss | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html index 674ad2221..0edae9aff 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html @@ -10,7 +10,7 @@ diff --git a/tbx/static_src/sass/components/_link-columns.scss b/tbx/static_src/sass/components/_link-columns.scss index ad0bee5df..c9ca043b5 100644 --- a/tbx/static_src/sass/components/_link-columns.scss +++ b/tbx/static_src/sass/components/_link-columns.scss @@ -36,6 +36,16 @@ transition: none; } } + + @include high-contrast-mode() { + text-decoration: underline; + } + } + + &__tail { + // Keep the arrow attached to the last word so it's not orphaned on a new line + white-space: nowrap; + display: inline; } &__arrow { From 3b4d22739d58527a520d058c8d7a73ea529ba0a8 Mon Sep 17 00:00:00 2001 From: Sherry Date: Tue, 21 Jan 2025 15:21:29 +0300 Subject: [PATCH 6/7] TWE-19 | FE | Links columns block (#345) --- .../blocks/link_columns_block.html | 20 +++---- .../styleguide/components/components.html | 5 ++ tbx/static_src/sass/components/_grid.scss | 3 +- .../sass/components/_link-columns.scss | 58 +++++++++++++++++++ tbx/static_src/sass/config/_mixins.scss | 8 ++- tbx/static_src/sass/main.scss | 1 + 6 files changed, 81 insertions(+), 14 deletions(-) create mode 100644 tbx/static_src/sass/components/_link-columns.scss diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html index 68e5b3063..0edae9aff 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html @@ -1,16 +1,16 @@ {% load wagtailcore_tags wagtailimages_tags %} -
- {# Section heading #} -

{{ value.title }}

+
+
+ {% 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 %} +
{{ value.intro|richtext }}
+ {% endif %} +
- {# Section intro #} -
{{ value.intro|richtext }}
- - {# Links #} -
+
+

Link columns block

+ {% include "patterns/molecules/streamfield/blocks/link_columns_block.html" %} +
+

Division signpost block

{% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %} diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index 7b8e586b1..814938119 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -101,7 +101,8 @@ } &__related-posts-simple, - &__team-listing { + &__team-listing, + &__link-columns { grid-column: 2 / span 4; @include media-query(large) { diff --git a/tbx/static_src/sass/components/_link-columns.scss b/tbx/static_src/sass/components/_link-columns.scss new file mode 100644 index 000000000..c9ca043b5 --- /dev/null +++ b/tbx/static_src/sass/components/_link-columns.scss @@ -0,0 +1,58 @@ +@use 'config' as *; + +.link-columns { + &__header { + margin-bottom: $spacer-half; + } + + &__links { + display: grid; + grid-template-columns: 1fr; + column-gap: $spacer-half; + + @include media-query(medium) { + grid-template-columns: repeat(2, 1fr); + } + + @include media-query(large) { + grid-template-columns: repeat(3, 1fr); + } + } + + &__item { + padding: $spacer-mini-plus 0; + border-top: 1px solid var(--color--border); + } + + &__link { + @include font-size(size-six); + color: var(--color--white); + + &:hover { + transition: color $transition-quick; + color: var(--color--theme-primary); + + @include reduced-motion() { + transition: none; + } + } + + @include high-contrast-mode() { + text-decoration: underline; + } + } + + &__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 index b786da6d4..ee3600ff5 100755 --- a/tbx/static_src/sass/config/_mixins.scss +++ b/tbx/static_src/sass/config/_mixins.scss @@ -185,13 +185,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 index 6e12c478f..e355ed5a8 100755 --- a/tbx/static_src/sass/main.scss +++ b/tbx/static_src/sass/main.scss @@ -33,6 +33,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'; From 931dda9abfd91777fc31e802b809f93d79b2fa04 Mon Sep 17 00:00:00 2001 From: shyusu4 Date: Wed, 22 Jan 2025 19:40:34 +0300 Subject: [PATCH 7/7] Add underlines to links, update styles for improved accessibility --- .../blocks/link_columns_block.html | 2 +- .../sass/components/_link-columns.scss | 30 +++++++++++-------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html index 0edae9aff..0eb81ef44 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/link_columns_block.html @@ -10,7 +10,7 @@ diff --git a/tbx/static_src/sass/components/_link-columns.scss b/tbx/static_src/sass/components/_link-columns.scss index c9ca043b5..dd30ddbbd 100644 --- a/tbx/static_src/sass/components/_link-columns.scss +++ b/tbx/static_src/sass/components/_link-columns.scss @@ -6,16 +6,14 @@ } &__links { - display: grid; - grid-template-columns: 1fr; - column-gap: $spacer-half; - @include media-query(medium) { - grid-template-columns: repeat(2, 1fr); + columns: 2; + column-gap: $spacer-large; } @include media-query(large) { - grid-template-columns: repeat(3, 1fr); + columns: 3; + column-gap: $spacer-half; } } @@ -25,21 +23,29 @@ } &__link { + display: block; + width: fit-content; + + &:focus { + @include focus-style(); + } + } + + &__link-text { @include font-size(size-six); - color: var(--color--white); + @include link-styles( + $color: var(--color--link), + $interaction-color: var(--color--theme-primary), + $offset: 5px + ); &:hover { transition: color $transition-quick; - color: var(--color--theme-primary); @include reduced-motion() { transition: none; } } - - @include high-contrast-mode() { - text-decoration: underline; - } } &__tail {