From 9a99d42e35407231fc632d7de2f51e7d14590184 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Mon, 6 Jan 2025 19:11:19 +0800 Subject: [PATCH 1/3] Add statistics group block to Division Page --- tbx/core/blocks.py | 20 +++++++++++++++++++ tbx/divisions/blocks.py | 2 ++ .../blocks/numeric_stats_group_block.html | 15 ++++++++++++++ .../blocks/numeric_stats_group_block.yaml | 17 ++++++++++++++++ 4 files changed, 54 insertions(+) create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html create mode 100644 tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.yaml diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 4ed0bef83..15a52cf6b 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -936,6 +936,26 @@ class Meta: icon = "table" +class NumericStatisticsGroupBlock(blocks.StructBlock): + title = blocks.CharBlock(max_length=255, required=False) + intro = blocks.RichTextBlock( + features=settings.NO_HEADING_RICH_TEXT_FEATURES, required=False + ) + statistics = blocks.ListBlock( + NumericStatisticsBlock(), + max_num=4, + min_num=1, + ) + + class Meta: + group = "Custom" + icon = "table" + label = "Numeric statistics" + template = ( + "patterns/molecules/streamfield/blocks/numeric_stats_group_block.html" + ) + + class TextualStatisticsBlock(blocks.StructBlock): headline_text = blocks.CharBlock( max_length=255, diff --git a/tbx/divisions/blocks.py b/tbx/divisions/blocks.py index 643f6a4b5..33a9865b2 100644 --- a/tbx/divisions/blocks.py +++ b/tbx/divisions/blocks.py @@ -1,6 +1,7 @@ from tbx.core.blocks import ( FourPhotoCollageBlock, IntroductionWithImagesBlock, + NumericStatisticsGroupBlock, PartnersBlock, StoryBlock, ) @@ -9,4 +10,5 @@ class DivisionStoryBlock(StoryBlock): four_photo_collage = FourPhotoCollageBlock() introduction_with_images = IntroductionWithImagesBlock() + numeric_statistics = NumericStatisticsGroupBlock() partners_block = PartnersBlock() diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html new file mode 100644 index 000000000..783b539dc --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html @@ -0,0 +1,15 @@ +{% load wagtailcore_tags wagtailimages_tags %} +
+ {# Section heading #} + {% if value.title %} +

{{ value.title }}

+ {% endif %} + {# Section intro #} + {% if value.intro %} +
{{ value.intro|richtext }}
+ {% endif %} + {# Stats #} + {# Not sure if the impact report page (which uses stats_numeric.html) should be affected. #} + {% include "patterns/molecules/streamfield/blocks/stats_numeric.html" with value=value.statistics %} +
+ diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.yaml new file mode 100644 index 000000000..fb09b690f --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.yaml @@ -0,0 +1,17 @@ +context: + value: + title: Lighting little fires + intro: 'Torchbox has been supporting charities since the start of the digital era. Some of the stats we're particularly proud of:' + statistics: + - headline_number: 120 + description: charities + further_details: and counting... + - headline_number: 24 + description: years + further_details: working with the sector + - headline_number: '263%' + description: traffic increase + further_details: for an imaginary charity + - headline_number: 1 + description: Guinness record + further_details: working with the DEC From 31f142d41a7a368aefd011db6323258799441ab0 Mon Sep 17 00:00:00 2001 From: Amanda Lim-Cabuloy Date: Mon, 6 Jan 2025 19:24:52 +0800 Subject: [PATCH 2/3] Add a label format to NumericStatisticsBlock --- tbx/core/blocks.py | 1 + 1 file changed, 1 insertion(+) diff --git a/tbx/core/blocks.py b/tbx/core/blocks.py index 15a52cf6b..de41745c6 100644 --- a/tbx/core/blocks.py +++ b/tbx/core/blocks.py @@ -934,6 +934,7 @@ class NumericStatisticsBlock(blocks.StructBlock): class Meta: icon = "table" + label_format = "{headline_number} {description} {further_details}" class NumericStatisticsGroupBlock(blocks.StructBlock): From 016f1015059a4713ec553e620beeebd203f38cac Mon Sep 17 00:00:00 2001 From: Sherry Date: Fri, 10 Jan 2025 13:53:58 +0300 Subject: [PATCH 3/3] TWE-10 | FE | New statistics group block (#334) --- .../blocks/numeric_stats_group_block.html | 11 ++++------ .../styleguide/components/components.html | 5 +++++ tbx/static_src/sass/components/_grid.scss | 3 ++- .../sass/components/_stats-group.scss | 20 +++++++++++++++++++ tbx/static_src/sass/components/_stats.scss | 12 +++++------ tbx/static_src/sass/main.scss | 1 + 6 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 tbx/static_src/sass/components/_stats-group.scss diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html index 783b539dc..a2f9327cf 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html @@ -1,15 +1,12 @@ {% load wagtailcore_tags wagtailimages_tags %} -
- {# Section heading #} +
{% if value.title %} -

{{ value.title }}

+ {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading=value.title classes="motif-heading motif-heading--two-c motif-heading--static stats-group__heading" %} {% endif %} - {# Section intro #} {% if value.intro %} -
{{ value.intro|richtext }}
+
{{ value.intro|richtext }}
{% endif %} {# Stats #} {# Not sure if the impact report page (which uses stats_numeric.html) should be affected. #} {% include "patterns/molecules/streamfield/blocks/stats_numeric.html" with value=value.statistics %} -
- +
\ No newline at end of file diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html index 485b3390c..66dfa590d 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html @@ -109,6 +109,11 @@

Stats block textual

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

Numeric stats group block

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

Event block

{% include "patterns/molecules/streamfield/blocks/event_block.html" %} diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index 7b8e586b1..b5b49f9a9 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, + &__stats-group { grid-column: 2 / span 4; @include media-query(large) { diff --git a/tbx/static_src/sass/components/_stats-group.scss b/tbx/static_src/sass/components/_stats-group.scss new file mode 100644 index 000000000..1c5de933f --- /dev/null +++ b/tbx/static_src/sass/components/_stats-group.scss @@ -0,0 +1,20 @@ +@use 'config' as *; + +.stats-group { + &__heading { + margin-bottom: $spacer-mini; + + @include media-query('large') { + max-width: 50%; + } + } + + &__intro { + margin-bottom: $spacer-medium; + + @include media-query('large') { + margin-bottom: $spacer-half; + max-width: 60%; + } + } +} diff --git a/tbx/static_src/sass/components/_stats.scss b/tbx/static_src/sass/components/_stats.scss index d38fd792a..c1b618370 100644 --- a/tbx/static_src/sass/components/_stats.scss +++ b/tbx/static_src/sass/components/_stats.scss @@ -36,10 +36,9 @@ &__number { @include font-size(size-zero); - color: var(--color--heading); + color: var(--color--theme-primary); display: block; - font-weight: $weight--light; - line-height: 1; + font-weight: $weight--semibold; } &__text { @@ -51,14 +50,15 @@ } &__description { - @include font-size('size-five'); + @include font-size('size-four'); + font-weight: $weight--semibold; color: var(--color--heading); display: block; - margin-bottom: $spacer-mini; + line-height: 1; } &__details { - @include font-size('size-eight'); + @include font-size('size-seven'); display: block; } } diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss index 6e12c478f..083cff13b 100755 --- a/tbx/static_src/sass/main.scss +++ b/tbx/static_src/sass/main.scss @@ -43,6 +43,7 @@ @use 'components/markdown-block'; @use 'components/mode-switcher'; @use 'components/motif-heading'; +@use 'components/stats-group'; @use 'components/pagination'; @use 'components/partners'; @use 'components/photo-collage';