Coded example box improvements

[murrlipp]

What

The coded example box template and associated HTML/Nunjucks/Figma tabs that appear on each component page would benefit from changes to make them more usable and clear.

Why

Whilst working on other tickets, @chrispymm and @murrlipp have identified some improvements to be made.

Tasks

• Consider making wrapper for 'Open this example in a new window' full width so that examples aren't partially obscured when scrolling in examples.
• Reconsider use of colour when HTML, Nunjucks and Figma tabs are active. There are currently multiple shades of grey that are very similar.
• Reconsider use of grey as a background colour for tabbed content, now that the page background colour has been updated to grey.
• Consider adding ability to set separate example box heights for desktop and mobile, so that example box heights aren't unnecessarily large when viewed on mobile.
• Relay decisions to team.
• Make changes and merge into main.

Who needs to be involved

• Interaction Designer
• Developer

Done

When the above tasks have been investigated, decisions made and updated in the appropriate templates.

[robertjmccarthy]

Pulled this into Cycle 5. However, priority for the work is low so it should be pulled forward if capacity allows. If not, we'll move this ticket to Cycle 6 for prioritisation.

[murrlipp]

@chrispymm here's the branch: https://github.com/ministryofjustice/moj-frontend/tree/update-example-box

I haven't touched the following point:

• Consider adding ability to set separate example box heights for desktop and mobile, so that example box heights aren't unnecessarily large when viewed on mobile.

And there's a strange styling quirk where a left and right border don't appear when the HTML tab is expanded. I can't see a reason for it, as discussed on Slack. If you're able to look at these two points that should be this ticket done.