Add notification banner component

[edwardhorsford]

Adds a new component 'notification banner' adapted from GOV.UK Frontend.

Steps taken:

• Copied all files from /govuk-frontend/src/govuk/components/nofication-banner, removing those we don't use.
• Updated namespace from govuk to nhsuk
• Adapted mixins and other classes to nhs equivalents
• Added new nhsuk-success-color sass variable.

Default example:

Success example:

[paulrobertlloyd]

Could you add some screenshots?

One question I have is whether the background should be white or the page background colour, the faded blue/grey.

[edwardhorsford]

Could you add some screenshots?

One question I have is whether the background should be white or the page background colour, the faded blue/grey.

I hadn't thought about that yet, but here are two examples from my service with clear or white background:

[colinrotherham]

Other than cache issues in actions/cache#1621 it's all wired up now 🙌

E.g. Auto focus is working in notification-banner/success.html

[anandamaryon1]

Looking good.

I notice that, like the error summary, we have a visible focus outline on the success version. Shall we try to fix these, or wait for the GOV extension work to progress @colinrotherham?

[colinrotherham]

Ah I've come to like the focus outline, it only kicks in for alert roles (same as error summary)

The focus outline is visible in GOV.UK Frontend too:

• error-summary/mixed-with-and-without-links/preview
• notification-banner/auto-focus-explicitly-enabled-with-type-as-success/preview

Other than the background colour (fixed) it seems like a sensible addition

[anandamaryon1]

Ok fair enough 👍

[edwardhorsford]

After some discussion on slack we feel these should likely have a transparent background (page colour) to match how the error summary works. I've updated the screenshots in the initial PR to match.

[colinrotherham]

@edwardhorsford I've updated this PR to target support/9.x

Should unblock you from installing it into the service manual website

[colinrotherham]

Thanks again for this @edwardhorsford

I've switched it back to v10.x by targetting main

This PR currently adds support for Nunjucks data-disable-auto-focus but it only works via the JavaScript config at the moment, similarly over in GOV.UK Frontend this same feature works in both Nunjucks and JavaScript

What shall we do?

I'm tempted to either drop support for Nunjucks data-disable-auto-focus or fix it and make sure we add it to Error Summary too so it's not left behind

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[colinrotherham]

@edwardhorsford This is now ready to go if you can have a look please @anandamaryon1 🙌

I've split out work to configure all components by either Nunjucks or JavaScript in:

• Add JavaScript configuration support to components #1506