TWE-2 - FE - Division signpost block

[albinazs]

Link to Ticket

Based on #314

Description of Changes Made

Designed division signpost block

Additional FE changes (discussed separately with Ben E.):

• Title and subtitle design (size2 semibold and size 5)
• Button-links design is updated (white color in default state, black or white bg on hover for light and dark modes respectively)
• Increased margin-bottom for the card text
• Type scale changes to pass accessibility checks (size 4, 4b and size 5, 5b)
• The card background colors on hover will be updated once hexes are provided, possibly in TWE-6

The theme colors code will be cleaned up in TWE-6 and TWE-22

How to Test

Check in the DPL: http://0.0.0.0:8000/pattern-library/render-pattern/patterns/molecules/streamfield/blocks/division_signpost_block.html

Screenshots

Expand to see more

Screen.Recording.2024-12-19.at.1.52.42.PM.mov

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.
• 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

[helenb]

@albinazs it would be good to make sure all the accessibility checks are covered for each FE pr - not sure if you still have some in progress?

[helenb]

I am getting some issues with the grid__division-signpost not being picked up if I test this locally - I think it may be an issue with my local build as the code looks fine to me as far as I can tell. (although I do notice the class is in there twice in the _grid.scss file)

[albinazs]

@helenb We've discussed with Ben E. the necessary changes for the automated tests to pass and have increased the type scale for the project. The code is also cleaned

[chris-lawton]

Praise: This is one of my favourite things to come to CSS recently! So powerful : )

[chris-lawton]

Nice work @albinazs - this is looking great! I wonder if it we should add it to the styleguide?

[albinazs]

Thank you, @chris-lawton - that was fast!
I've committed all the suggestions and added the new block to the style guide.