Add interruption panel

[frankieroberto]

At the NHS we’ve just published the Interruption panel variant, to support the Interruption page pattern.

This is based on the longstanding pattern used across GOVUK services (see backlog thread), and the excellent guidance from Ministry of Justice Interruption card component.

This pull request proposes adding the same pattern to the GOV.UK Design System.

Like the NHS one, it uses a variant of the Panel component rather than creating a new component. Unlike the NHS one, as well as setting the background colour to blue, it also sets the text as left-aligned (this is because the default green one is centre-aligned, unlike the NHS version).

Links and buttons currently require govuk-button--inverse or govuk-link--inverse modifiers, however these could default to white instead, when used within the panel.

[romaricpascal]

Thanks for proposing this @frankieroberto ! We're currently all hands on deck finalising v6.0 so we've added a reminder to our roadmap to prioritise having a look after we're through 😊

[frankieroberto]

@romaricpascal thank you! Would you mind approving the workflow again so I can check the tests are now passing? Good luck with v6!

[frankieroberto]

Well done on getting v6 out! 🙌

Can I nudge you on reviewing the interruption panel suggestion when you a moment? Happy to help with any guidance if needed.

[kellylee-gds]

Sorry for the delay @frankieroberto. Following v6, we've had to pivot to focus on some organisational changes which has taken us away from our regular sprint work. We're hoping to review your suggestion in the next few weeks 🙏🏻

[calvin-lau-sig7]

Hi @frankieroberto, thanks for making this contribution. We’ve put together a small squad to think about this. We’re supportive of publishing this as a variant in the Panel component. To do this, we’d still need some things.

Minimal usage guidance:

• when to use
• how to use (where can the panel be placed, such as interruption page only? consider MoJ use cases?)
• what can go into the panel
• where within a journey it’s been used in live services

Summary of relevant supporting evidence:

• evidence of use in live services
• evidence it’s been tested with users

Other things to consider:

• adding action links, similar to the MoJ component

Would you be able to help put some of this together? We thought you’ve probably got a view of most of this already.

[frankieroberto]

@calvin-lau-sig7 I’m happy to help but I don’t have loads of time at the moment. We collated some examples from the NHS for our design system: https://service-manual.nhs.uk/design-system/patterns/interruption-page – you’re welcome to borrow any of that.

I’m a bit out of the loop now on GOV.UK branded services, but I’m sure there are some live examples (a few on alphagov/govuk-design-system-backlog#27 ) - could be worth asking on the cross-gov Slack?

The MOJ team did a lot of working looking into it too for their pattern so they may have some more examples from live services.

[frankieroberto]

@calvin-lau-sig7 oh and for the action links, I think rather than supporting primaryAction and secondaryAction like the MOJ component, it’s simpler and more flexible to instead rely on passing html into the panel component, and then use Button components or links within the panel for the actions. They can be grouped using the existing <div class="govuk-button-group"> code if needed.

That’s the approach we took on the NHS design system anyway.

The guidance can still suggest only using a single button, with or without a link, but the component itself is flexible.

There are already --inverse variants of the govuk buttons and links, so those aren’t needed. The only decision you’d need to make is whether to apply the inverse styles automatically to buttons and links in the interruption panel component using CSS selectors, or whether to require users to add them manually. (Depends on how you interpret the Sass philosophy!)

[calvin-lau-sig7]

Good stuff, thanks @frankieroberto! Just checking how involved you wanted or could be on this.
We'll get together to put a bit of planning for this next week.

[frankieroberto]

@calvin-lau-sig7 feel free to invite me to anything and I'll come if I can!

Would you also mind approving the workflow so we can check that the tests still pass? Is it also possible to trigger the preview deployment so that you can all see proposed component variant?

[owenatgov]

@frankieroberto It just needs a rebase because we've fiddled with the required tests. Gimme a sec I can do it

[frankieroberto]

@owenatgov have added you to the fork at https://github.com/x-govuk/govuk-frontend - free free to push to the branch!

[owenatgov]

@frankieroberto Aha that's that permission problem I was getting sorted 😁 Thanks! Done. Tests should run as normal now.

[owenatgov]

Those test failures are coming from our new snapshot tests which we've introduced as part of the wider work to move from @import to @use. I would say it's fine to not worry about them for right now, since the other relevant tests are passing.

[frankieroberto]

@owenatgov thanks! Is it possible to get the preview deploying, or does that not work from contributions from outside the team?

[owenatgov]

@frankieroberto Ah sorry I glossed over that part of your earlier comment. I've just created one.

[calvin-lau-sig7]

Hi @frankieroberto, wanted to give an update on behalf of the team again.

We've done some desk research to gather the use cases and supporting evidence. We've concluded that the most practical and suitable solution for us to publish this is to:

1. Add 'Interruption' as a type of panel in the 'Panel' component.
2. Publish a new 'Interruption page' pattern, fairly minimal, likely similar in size and guidance detail as the 'Confirmation page', relying on existing guidance and linking to the NHS and MoJ Design Systems.

We're expecting to have something ready to review as a revamped PR/preview in a few weeks time!

[frankieroberto]

@calvin-lau-sig7 nice! We took a similar decision to make it a variant of the Panel component rather than its own component (although MOJ Design System made it a standalone component).

We did briefly debate what modifier to use in the CSS, considering --blue, but quickly settled on --interruption to try and signal that this shouldn’t be used for other purposes.

You’ll also have to consider whether to apply the govuk-button--inverse and govuk-link--inverse modifiers automatically to buttons and links within govuk-panel--interruption, or whether to require users to add the classes.

[kellylee-gds]

Hey @frankieroberto. We'd like to hold a show & tell to demo what we've built as a result of your contribution. We're also inviting the MoJ design system folks and we've used their Interruption card to also inform this component and pattern.

Are there any days / times which work particularly well for you to join a show & tell? Also feel free to invite other folks from your team too!

[frankieroberto]

Hey @frankieroberto. We'd like to hold a show & tell to demo...

Woohoo 🎉 I'll DM you to discuss dates and times 😄

[owenatgov]

@frankieroberto A little update on the tech side of things:

1. Re: inverse styles, we're hoping we can kill 2 birds with 1 stone via this issue Explore using CSS custom properties to set --inverse styles in bulk #6486 which we're hoping to get into soon via some work we're doing with rationalising our functional colours in the coming weeks
2. You may've seen that we've made some updates to our sass architecture as we start the move from @import to @use, which are due to go out in 6.2.0 on Monday all being well. I think this is easily solvable with a rebase. I'm happy to do this now if you're alright with me doing that?

[NickColley]

Doing some pull requests to get this closer to ready, so will be cherry-picking commits from our local version of this branch when I merge into our local version of this branch.

[NickColley]

Thank you @frankieroberto for this great contribution, thank you so much, we're going to merge this shortly...
So the plan is to ship this in a week or two as part of version 6.4.0. 🙌🏻

We'll add the CHANGELOG entry for as well later tracked by:
alphagov/govuk-design-system#5486

We are also investigating your suggestion around buttons and links automatically being styled white over at:

• #6483
• #6482

You can follow the remaining issues in the wider 'Publish the Interruption panel contribution' epic.

[romaricpascal]

Cheers for the contribution @frankieroberto! 🥳