Add blue panel (Interruption card) component

[frankieroberto]

This adds a variant of the Panel component one with a solid blue background, for use as an interruption card.

Blue panel

This is intended for use when you need to stop users in a journey to tell them important information. This should be used vary sparingly, as there is some evidence that users can end up ignoring it, however it could work in some contexts, such as when shown after many regular pages with the off-white background.

The blue panel would be used with the reversed Button variant - which already mentions ‘interruption cards’ in the guidance.

See relevant threads for examples and discussion:

• Stop users in a journey to tell them important information on NHS design backlog
• Interruption card on GOVUK design backlog
• Interruption card in MoJ Design System

Checklist

• [ ] Tested against our testing policy (Resolution, Browser & Accessibility)
• [ ] Follows our coding standards and style guide
• [x] CHANGELOG entry

[paulrobertlloyd]

Initial gut reaction; yes to the blue variant, however the white variant is something that appears to be very different, and a component that possibly overlaps with a few others (card, notifications, warnings…).

[frankieroberto]

@paulrobertlloyd the white one is definitely 'experimental'... 😂

The NHS warning callout is quite different, and we don’t have a notification component (yet - maybe we should). The Card component is quite similar though (basically a different border) - but maybe that’s more designed for where the whole thing is clickable and you have several of them tiled up? (That said, there is a non-clickable one which I forgot about...)

[frankieroberto]

Here’s our feedback panel using the existing card rather than the white panel variant:

Kinda works, but maybe stands out a bit less? 🤔

[michaelgallagher]

re: the white card, worth considering this?

re: the blue card, minor thing, but should there be less padding between the button and bottom of the card?

[frankieroberto]

re: the white card, worth considering this?

Ooh I hadn’t seen that. Although in our case we’d need to use the secondary button as we already have a green primary button further down the page. And to me the blue border pairs nicely with the new blue outlined secondary button.

re: the blue card, minor thing, but should there be less padding between the button and bottom of the card?

Yeah I think so. It’s caused by the extra default spacing below the button - but that can be reduced.

[anandamaryon1]

Nice, blue panel for interruption cards is helpful. With the minor tweak to button margin-bottom, nhsuk-u-margin-bottom-3 seems about right to my eyes (accounting for the button shadow and the heading text increasing the padding at the top visually).

Inclined to agree with others that the white variant doesn't seem to fit with the panel component.

[sarawilcox]

I think the blue one is fine. We've had teams using something like this for interruption cards for some time. Like other people, I'm not sure about the white one.

[frankieroberto]

@anandamaryon1 @paulrobertlloyd @colinrotherham @sarawilcox @michaelgallagher ok I’ve updated this pull request to purely add the blue panel variant (aka Interruption card).

Also reduced the margin below the button, although this is purely done using an nhsuk-u-margin-bottom-3 override class rather than being automatic.

As the interruption card would normally be the only thing on the page, I think there’s no immediate need to support headingClasses in order to reduce the font size of the h1?

[anandamaryon1]

Looking at this and reading some backlog discussions about interruption cards, I've seen some suggestions to use start pages instead, as a way to break up a journey and provide some new context (e.g https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/241#issuecomment-632587931 & https://github.com/nhsuk/nhsapp-frontend/issues/19#issuecomment-2501391420). These seem reasonable suggestions.

They would not be suitable for what I'd think of as 'system' messages, where the system has to tell you something, e.g something has changed and now you need to do something, but in those cases a notification banner seems more appropriate?

The difference between this interruption card and a 'normal' page is just the visual treatment, which makes you stop and think twice. I'm wondering whether we have any evidenced use-cases for this?

[frankieroberto]

@anandamaryon1 I think there’s definitely a valid debate about whether you need the different visual treatment of a blue background, or whether just a regular content page with a green button with a distinct label is sufficient.

I don’t have any strong evidence for the need for the blue background personally, but others might? I think the MOJ Design system team did some research on it (see their page) and @edwardhorsford might remember the research from back on the passports service?

There would likely have to be some clear guidance to encourage people not to over-use it though, as I suspect part of the value of the blue background is it being distinct from the usual pattern and infrequently seen?

Do we know why the "reverse" button was first added to the NHS design system? The guidance for that already mentions interruption cards, but no other context offered!

White buttons on solid background colour are good on components like interruption cards where link text, primary and secondary buttons would be lost.

[paulmsmith]

111 online has at least two patterns that I would say fits the pattern use-case of "need to stop users in a journey to tell them important information."

Module Zero

Some notes about this pattern:

• Referred to internally as Module zero or "Mod Zero", that name is taken from the Pathways software tool which is organised into 'modules'.
• I think when describing it in our terms it is probably better called something like the 'vital to confirm' interrupt or even just as the content says the "Check it's not an emergency" interrupt.
• Research showed the need for a strong visual difference from the rest of the flow.
• It is actually a bit of a hack/work-around because of how long it would take to walk people though those conditions/causes-for-concern page-by-page.there was an assumption that people in a life threatening emergency were unlikely to go online
• Mod zero content is there as a "just in case"

I'm going to invite @LaurenMcAllister to contribute about her work on what we lovingly call the 'weird questions' interrupt.

[frankieroberto]

@colinrotherham @anandamaryon1 I've fixed the conflicts with main and updated this to fit our new code structure.

Do we still think this could be released, or shall we wait for more research?

@paulmsmith any update on that 111 emergency panel pattern?

[paulrobertlloyd]

I’m for us adding this in, but I think the design is the easiest part of adding this, whereas getting the guidance right will be crucial. It’s odd that this is such a well used pattern across government, but only added to the MoJ Design System. Maybe their guidance can be a starting point for ours?

[frankieroberto]

I've just pushed b5ee59a8d03c50f1b4709b7cc54d90bf41808934 which adds support for a titleClasses macro param and a nhsuk-panel__title--l modifier which drops the font size down from 48 (XL) to 36 (L).

The XL size seems ok for the green confirmation panel, which typically uses a short h1 like "Application complete", but for the blue interruption panel the text could be quite a bit longer - eg see MOJ examples.

[anandamaryon1]

We discussed this component at the Design System Review Panel. We agreed it seems to have many NHS-specific use-cases and we are continuing to gather examples (adding them to this issue) with a view to releasing this once we have finalised this PR and drafted guidance for the service manual.

Some points raised for consideration:

• Adding a ‘no’ option beside the main ‘ok, continue’ button. Eg. to give a clear no action if panel is used as a confirmation, instead of relying on a normal back button.
• Styling: will one visual treatment work for all use cases or do we need different variants? i.e. is the presentation flexible enough?

[colinrotherham]

Would be great to add as many examples to this PR as we can

[anandamaryon1]

Would be great to add as many examples to this PR as we can

Deffo!

I've asked some colleagues whether they're OK with me sharing their examples in GitHub. I was going to add them to the issue, since that'll stay open once this PR is closed.

[frankieroberto]

@anandamaryon1 @colinrotherham @paulrobertlloyd think I’ve addressed all the comments!?

We can keep collecting examples in https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/241

I've added a 'Cancel' link beside the button in the example, but we can update the wording if we have a better example.

In terms of flexibility, I’ve added support for the titleClasses macro option, and --xl, --l and --m options for the title. Is that enough for now do we think?

[frankieroberto]

@colinrotherham thanks for the ✅ . @anandamaryon1 are you happy with this too?

Happy to update the example if we’ve got a better one. (Or that could be a follow-up PR).

Shall I make a start on the guidance too?

[sarawilcox]

Could we put out a call for tested NHS examples? Or is there anything suitable here? https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/241

[frankieroberto]

@sarawilcox most of those examples are from the app and are perhaps a slightly different use case?

We could do something vaccinations related?

(patient name) had a COVID-19 vaccine less than 3 months ago

They had a COVID-19 vaccine on (date).

For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.

[Continue anyway]

[frankieroberto]

Or could use this example from @paulrobertlloyd: #152

[sarawilcox]

@sarawilcox most of those examples are from the app and are perhaps a slightly different use case?

We could do something vaccinations related?

(patient name) had a COVID-19 vaccine less than 3 months ago They had a COVID-19 vaccine on (date). For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months. [Continue anyway]

Yes, good to have a vaccine/staff facing one. I think this is a good example. The one above (Paul's) is a bit complex for a coded example.

[frankieroberto]

@sarawilcox done. The content in that example comes from our live service - written by @Anna-Sutton.

[sarawilcox]

If you fancy having a go at drafting the guidance, @frankieroberto, that would be really helpful. I can then take a look at it.

[colinrotherham]

Thank you for adding the example. Does the spacing below the link need another look?

[frankieroberto]

@colinrotherham:

Thank you for adding the example. Does the spacing below the link need another look?

That’s caused by the default margin below links in the button group. I've had a look at tweaking that separately in #1609

[frankieroberto]

@anandamaryon1 @colinrotherham is this mergeable?

[sarawilcox]

Hi Frankie, might be best if @colinrotherham @anandamaryon1 and I discuss this at our Monday PR catchup.

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud