feat: #3607230 Add the how-we-deliver icons from the design as theme assets

Four icons the Horizon Aid programme page needs, taken from the design and shipped as theme assets beside the existing lightbulb.svg.

  • icon-people.svg
  • icon-check.svg
  • icon-handshake.svg
  • icon-search.svg

They sit on the how-we-deliver cards of a programme page. Each ships with its fill baked in, because the cards render them through an <img> and an image cannot be recoloured by CSS: the two on blue tiles are white, the two on yellow tiles navy, matching the design.

Why not the component's own icon_image prop: it is an object prop, and Canvas does not pass object props into a content template, which is #3613652 — closed as won't fix. The cards therefore place a small tile through the HTML Code atom, whose code is a string prop and renders. Inlining the SVG markup was the first attempt and it fails config validation: the 6.5KB handshake trips the prop's (.|\r?\n)* pattern. Referencing the files keeps each snippet near 275 characters.

Verified on a clean install: 56px tiles at 12px radius in brand blue and yellow, 28px glyphs, all four loading, one per cell exactly as the design places them.

The recipe side is a separate merge request on #3607228 and depends on these files, so this one should land first.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports

Loading