TWE-9 | FE | Featured services

[shyusu4]

Link to Ticket

Description of Changes Made

BE covered in #327

Styled the featured services block

• Motif heading and optional intro styling, card text styling
• Depending on how many cards are on the page, cards should fill the container space (min is 2 max is 4)

Note that this PR has commits from #329. Since this branch was out of date (created from feature/twe-9-featured-services), I've merged them into this one in order to work with the color themes.

How to Test

Open the featured_services_block through the pattern library (http://localhost:8000/pattern-library/render-pattern/patterns/molecules/streamfield/blocks/featured_services_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.
• 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

[albinazs]

Amazing job, @shyusu4!!

it looks like we'll need to create a --compact variant of the button link component with smaller paddings and shorter arrows and use it here.

when ready, please request CR from Chris L.

[shyusu4]

thank you, @albinazs - I've committed your feedback

[chris-lawton]

Nice work @shyusu4 - looks great!