Increase homepage sector cards from 3 to 4

[jhancock532]

There was no ticket for this work, context provided by Lily is as follows.

Summary
The homepage currently limits the sector cards component to a maximum of 3 items. As part of the new IA, we need to increase this to 4.

Background
We're removing the Wagtail CMS card and replacing the current three-card layout with four sectors:

• Charity
• Health
• Public Sector
• GLAM

At the moment, the card block in Wagtail has a hard limit of three items, preventing us from adding the fourth sector.

Acceptance criteria

• Increase the maximum number of cards from 3 to 4.
• Ensure the homepage layout supports four cards without breaking the design across desktop, tablet and mobile.

Description of Changes Made

• Updated the DivisionSignpostBlock to support 4 items, breaking out of the grid container on desktop to give each card slightly more space to render.
• Made adjustments to color theme variables so that the green card renders correctly (including focus outline color for green card button)
• Tweaked the alignment of the arrow so that it aligns with the text in the card button.

How to Test

Add four cards to the homepage, and verify they render well across viewports.

Check out the pattern library component locally: http://localhost:8000/pattern-library/render-pattern/patterns/molecules/streamfield/blocks/division_signpost_block.html

Screenshots

Expand to see more

Light mode, with focus state, on desktop.

Dark mode, with focus state, on tablet - desktop.

Safari - external monitor

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
• Performance 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]

I thought I had found a bug but it seemed to be related to missing images. I will approve but please could you complete the A11y tests from the PR checklist, and if time update the styleguide so that there are images displayed for the sector cards.

[jhancock532]

Ran through the accessibility checks following docs/accessibility-testing.md, all items passed.