TWE-10 | FE | New statistics group block #334

shyusu4 · 2025-01-09T09:42:17Z

Description of Changes Made

BE is covered in #328

Styled the new statistics group block

Changed numeric colors to use the primary theme color
Applied the motif heading (will be updated further in TWE-28 to match the finalized design)
Margin adjustments for headings and intro text in stats group stylesheet

How to Test

Open the numeric_stats_group_block through the pattern library (http://localhost:8000/pattern-library/render-pattern/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html)

Screenshots

Expand to see more

MR Checklist

Add a description of your pull request and instructions for the reviewer to verify your work.
If your pull request is for a specific ticket, link to it in the description.
Stay on point and keep it small so the merge request can be easily reviewed.
[x ] Tests and linting passes.

Unit tests

Added
Not required

Documentation

Updated build docs
Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
Not required

Browser testing

I have tested in the following browsers and environments (edit the list as required)
- Latest version of Chrome on mac
- Latest version of Firefox on mac
- Latest version of Safari on mac
- Safari on last two versions of iOS
- Chrome on last two versions of Android
Not required

Data protection

Not relevant
This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

I have tested the changes in both light and dark mode
The change is not relevant to dark and light mode

Accessibility

Automated WCAG 2.1 tests pass
HTML validation passes
Manual WCAG 2.1 tests completed
I have tested in a screen reader
I have tested in high-contrast mode
Any animations removed for prefers-reduced-motion
Not required

Sustainability

Images are optimised and lazy-loading used where appropriate
SVGs have been optimised
Perfomance and transfer of data considered
If JavaScript is needed alternatives have been considered
Not required

Pattern library

The pattern library component for this template displays correctly, and does not break parent templates
The styleguide is updated if relevant
Changes are not relevant the pattern library

TWE-25 - FE - Update main heading styles

Fix linting issue from previous merge

TWE-6 | FE | Update color themes - dark mode

… feature/twe-10-stats-block-FE

albinazs · 2025-01-09T12:49:48Z

thank you, @shyusu4!

I've noticed that the font size and weight need to be updated for the stats description and details, as well as the bottom margin of the stats block itself.

other than that, it looks good to me, and over to @chris-lawton

chris-lawton · 2025-01-09T16:42:12Z

...ct_styleguide/templates/patterns/molecules/streamfield/blocks/numeric_stats_group_block.html

    {% if value.title %}
-        <h2 class="heading heading--two">{{ value.title }}</h2>
+    {% include "patterns/atoms/motif-heading/motif-heading.html" with heading_level=2 heading="Lighting little fires" classes="motif-heading motif-heading--two-c motif-heading--static stats-group__heading" %}


Question: Should the heading be set from a variable or will that be implemented as part of https://torchbox.atlassian.net/browse/TWE-28?

thank you @chris-lawton - it should indeed be a variable

chris-lawton

Nice work @shyusu4 - looks great!

helenb · 2025-01-10T08:50:32Z

tbx/project_styleguide/templates/patterns/base_page.html

@@ -126,4 +126,3 @@
 {% block footer %}
    {% include "patterns/organisms/footer/footer.html" %}
 {% endblock footer %}
-


Nitpick: we should always have one blank line at the end of files as it helps with git diffs - can you check your editor settings to ensure that it doesn't automatically remove them?

helenb · 2025-01-10T08:52:28Z

docs/front-end/fonts.md

@@ -2,7 +2,7 @@

 The site uses 'Outfit' as the main font and 'sans-serif' as the fallback font.

-Outfit is avaible from [Google Fonts](https://fonts.google.com/specimen/Outfit) and is a variable font. This means that the font can be loaded as a single file and the weight and style can be adjusted using CSS. Any weight between 300 and 600 can be used.
+Outfit is avaible from [Google Fonts](https://fonts.google.com/specimen/Outfit) and is a variable font. This means that the font can be loaded as a single file and the weight and style can be adjusted using CSS. Any weight between 200 and 600 can be used.


Praise: thank you for keeping the documentation up to date!

helenb · 2025-01-10T08:56:00Z

tbx/project_styleguide/templates/patterns/atoms/icons/quote-icon.html

@@ -5,8 +5,8 @@
        </mask>
        <g mask="url(#{{ mask_id }})" transform="translate(-25.84 3.44)">
            <path fill="currentColor" d="M-11-312.4h1351v696H-11z" class="quote-icon__white" />
-            <path d="M8.59 6.934c.1 1.181 1.73 1.554 2.406.558 3.973-5.98 9.391-11.01 13.069-12.448l-.032.66c-1.405 42.635 30.37 67.332 41.634 74.642 1.065.713 2.448-.322 1.953-1.449-6.89-15.108-3.408-28.904 9.999-41.85 2.545-2.375 5.36-5.472 7.785-8.588 0 0 2.918-3.607 5.746-8.615l.15.155c4.888 7.734 5.635 16.737 5.636 21.662.022 1.177 1.566 1.693 2.313.847 3.491-4.093 9.539-12.472 10.852-21.89 3.126-22.78-10.24-46.876-34.836-54.319-1.16-.35-2.077.781-1.418 1.769 2.038 3.333 3.152 7.944 2.872 13.81C76.072-14.556 59.433 5.29 59.433 5.29S44.76-16.077 45.407-29.643c.283-5.94 1.83-10.422 4.177-13.542a1.205 1.205 0 00-1.244-1.898C23.872-40.392 11.524-20.045 9.19-7.296c-1.052 5.609-.83 10.838-.6 14.23z" fill="var(--color--accent-two)" />


Query: are the various changes to icons here relevant to this MR? It looks like this includes various general updates to the colours, in which case it might be worth updating the merge request description - or possibly you need a rebase in order to hide changes that are coming in from other merge requests.

I forgot to mention but I think the MR is out of date as i've seen these changes before from Albina. These are the commits I reviewed as part of this one:

10b5b4d

35bd38e

f412fb4

Hi @helenb, I initially picked the wrong branch to merge into for this PR and later switched it. I’ve already rebased the branch and updated it already from feature/twe-10-stats-block, so everything is up to date on my end. It looks like some changes are still showing up in the diff, probably due to a GitHub glitch and the diff didn’t update after the target branch was updated.

helenb · 2025-01-10T08:58:52Z

Thank you @shyusu4 - please excuse the drive-by review - just doing a few random pull request checks in my role as tech lead. It looks like you're doing great stuff.

* 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]>

albinazs and others added 13 commits January 2, 2025 13:48

Update main heading styles

0347da3

Update fonts docs

8080cbb

Update color themes dark mode

23bbf3b

Linting

d648d2f

Clean code

b3b5c1e

Merge pull request #326 from torchbox/feature/twe-25-page-title

4661977

TWE-25 - FE - Update main heading styles

Fix linting issue from previous merge

fd5af4f

Merge pull request #330 from torchbox/fix/lint-issue

8f49103

Fix linting issue from previous merge

Remove newline at end of file

6697022

Merge pull request #329 from torchbox/feature/twe-6-theme-colors-fe

4657acd

TWE-6 | FE | Update color themes - dark mode

Merge remote-tracking branch 'origin/integration/2024-evolution' into…

4b9b671

… feature/twe-10-stats-block-FE

Numeric stats group block FE

10b5b4d

Fix formatting

35bd38e

shyusu4 changed the title ~~Feature/twe 10 stats block fe~~ TWE-10 | FE | New statistics group block Jan 9, 2025

shyusu4 marked this pull request as ready for review January 9, 2025 11:36

shyusu4 requested a review from albinazs January 9, 2025 11:36

shyusu4 changed the base branch from integration/2024-evolution to feature/twe-10-stats-block January 9, 2025 12:39

albinazs requested a review from chris-lawton January 9, 2025 13:02

Update stats font size and weight

f412fb4

chris-lawton reviewed Jan 9, 2025

View reviewed changes

chris-lawton approved these changes Jan 9, 2025

View reviewed changes

helenb reviewed Jan 10, 2025

View reviewed changes

Update stats block heading to variable

10fe349

shyusu4 merged commit af9bb2b into feature/twe-10-stats-block Jan 10, 2025
4 checks passed

shyusu4 deleted the feature/twe-10-stats-block-FE branch January 10, 2025 10:53

SharmaineLim mentioned this pull request Jan 10, 2025

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

Merged

31 tasks

SharmaineLim pushed a commit that referenced this pull request Jan 15, 2025

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

016f101

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TWE-10 | FE | New statistics group block #334

TWE-10 | FE | New statistics group block #334

shyusu4 commented Jan 9, 2025 •

edited

Loading

albinazs commented Jan 9, 2025

chris-lawton Jan 9, 2025

shyusu4 Jan 10, 2025

chris-lawton left a comment

helenb Jan 10, 2025

helenb Jan 10, 2025

helenb Jan 10, 2025 •

edited

Loading

chris-lawton Jan 10, 2025

shyusu4 Jan 10, 2025

helenb commented Jan 10, 2025 •

edited

Loading

TWE-10 | FE | New statistics group block #334

TWE-10 | FE | New statistics group block #334

Conversation

shyusu4 commented Jan 9, 2025 • edited Loading

Description of Changes Made

How to Test

Screenshots

MR Checklist

Unit tests

Documentation

Browser testing

Data protection

Light and dark mode

Accessibility

Sustainability

Pattern library

albinazs commented Jan 9, 2025

chris-lawton Jan 9, 2025

Choose a reason for hiding this comment

shyusu4 Jan 10, 2025

Choose a reason for hiding this comment

chris-lawton left a comment

Choose a reason for hiding this comment

helenb Jan 10, 2025

Choose a reason for hiding this comment

helenb Jan 10, 2025

Choose a reason for hiding this comment

helenb Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

chris-lawton Jan 10, 2025

Choose a reason for hiding this comment

shyusu4 Jan 10, 2025

Choose a reason for hiding this comment

helenb commented Jan 10, 2025 • edited Loading

shyusu4 commented Jan 9, 2025 •

edited

Loading

helenb Jan 10, 2025 •

edited

Loading

helenb commented Jan 10, 2025 •

edited

Loading