TWE-10 - BE - Statistics group block (Division page) (#328)

* Add statistics group block to Division Page

* Add a label format to NumericStatisticsBlock

* TWE-10 | FE | New statistics group block (#334)

---------

Co-authored-by: Sherry <[email protected]>

Author: SharmaineLim

tbx/core/blocks.py

@@ -973,6 +973,27 @@ class NumericStatisticsBlock(blocks.StructBlock):
 
     class Meta:
         icon = "table"
+        label_format = "{headline_number} {description} {further_details}"
+
+
+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):

tbx/divisions/blocks.py

@@ -2,6 +2,7 @@
     FeaturedServicesBlock,
     FourPhotoCollageBlock,
     IntroductionWithImagesBlock,
+    NumericStatisticsGroupBlock,
     PartnersBlock,
     StoryBlock,
 )
@@ -10,5 +11,6 @@
 class DivisionStoryBlock(StoryBlock):
     four_photo_collage = FourPhotoCollageBlock()
     introduction_with_images = IntroductionWithImagesBlock()
+    numeric_statistics = NumericStatisticsGroupBlock()
     partners_block = PartnersBlock()
     featured_services = FeaturedServicesBlock()

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

@@ -0,0 +1,12 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+<div class="grid__stats-group stats-group">
+    {% if 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 %}
+    {% if value.intro %}
+        <div class="text text--five stats-group__intro">{{ value.intro|richtext }}</div>
+    {% 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 %}
+</div>

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

tbx/project_styleguide/templates/patterns/styleguide/components/components.html

@@ -109,6 +109,11 @@ <h2 class="underline mt-8 mb-2">Stats block textual</h2>
             {% include "patterns/molecules/streamfield/blocks/stats_textual.html" %}
         </div>
 
+        <div>
+            <h2 class="underline mt-8 mb-2">Numeric stats group block</h2>
+            {% include "patterns/molecules/streamfield/blocks/numeric_stats_group_block.html" %}
+        </div>
+
         <div>
             <h2 class="underline mt-8 mb-2">Event block</h2>
             {% include "patterns/molecules/streamfield/blocks/event_block.html" %}

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) {

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%;
+        }
+    }
+}

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;
     }
 }

tbx/static_src/sass/main.scss

@@ -44,6 +44,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';