Add new "highlights" container layout

[cemms1]

Co-authored-by: Wai Sing Yiu wai.sing.yiu@guardian.co.uk
Co-authored-by: Frederick O'Brien frederick.obrien@guardian.co.uk

What's changed?

Adds new container layout for use as the "highlights" container.

This is a new container layout intended to only be used once per front, in the first position only. This is intended to be guided by training and not enforcement in the tool.

If the first container on a front has this highlights layout, it will be positioned above the title piece/nav sections on both web and apps to showcase feature stories across the site.

The display on desktop is to show three content items and a "peek" of the fourth item.
On mobile and apps it will display two content items and a "peek" of the third item.

How to test

We deployed the changes to CODE. The Config Tool displayed the new layout type fixed/highlights in the drop down list for layout type properly:

The new layout type fixed/highlights could be selected:

After saving the container, I could see the new layout type in the output file config.json in S3:

I reopened the config tool and the container was reloaded with the correct fixed/highlights type.

Implementation notes

When this PR is merged, the new layout type fixed/highlights will be available on the config tool, but it should not be used until we support this type of container on web/app.

We discussed this issue with the team (homepage redesign) and Jonathan Haynes. Given that the number of people using the tool in production is quite low, Jonathan believed that it should be sufficient just to make front editors aware that this new layout type should not be used for now.

We should inform users (and Jonathan) before we merge this PR.

Checklist

General

• 🤖 Relevant tests added
• ✅ CI checks / tests run locally
• 🔍 Checked on CODE

Client

• 🚫 No obvious console errors on the client (i.e. React dev mode errors)
• 🎛️ No regressions with existing user interactions (i.e. all existing buttons, inputs etc. work)
• 📷 Screenshots / GIFs of relevant UI changes included

[github-actions]

Deploy build 8078 of cms-fronts::facia-tool to CODE

All deployment options

• Deploy build 8078 of cms-fronts::facia-tool to CODE
• Deploy parts of build 8078 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[Georges-GNM]

Had a play on code - seems to be working as intended, and comparing with other PRs adding container layouts, this looks good to me!

[davidfurey]

Looks good to me, but please let Central Production know before merging

[prout-bot]

Seen on PROD (created by @cemms1 and merged by @waisingyiu 6 minutes and 23 seconds ago) Please check your changes!