Add notification banner component

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+:new: **New features**
+
+#### New notification banner component
+
+We’ve added a new notification banner component, ported from the GOV.UK Design System.
+
+This was added in [pull request #1408: Add notification banner component](https://github.com/nhsuk/nhsuk-frontend/pull/1408).
+
 :boom: **Breaking changes**
 
 You must make the following changes when you migrate to this release, or your service might break.

packages/nhsuk-frontend-review/src/examples/all.njk

@@ -50,6 +50,13 @@
 {% block content %}
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">
+      {% call notificationBanner() %}
+        <p class="nhsuk-notification-banner__heading">
+          You have 7 days left to send your application.
+          <a class="nhsuk-notification-banner__link" href="#">View application</a>.
+        </p>
+      {% endcall %}
+
       <h1>Components</h1>
 
       {{ contentsList({

packages/nhsuk-frontend-review/src/layouts/page.njk

@@ -20,6 +20,7 @@
 {% from 'nhsuk/components/input/macro.njk' import input %}
 {% from 'nhsuk/components/inset-text/macro.njk' import insetText %}
 {% from 'nhsuk/components/label/macro.njk' import label %}
+{% from 'nhsuk/components/notification-banner/macro.njk' import notificationBanner %}
 {% from 'nhsuk/components/pagination/macro.njk' import pagination %}
 {% from 'nhsuk/components/panel/macro.njk' import panel %}
 {% from 'nhsuk/components/radios/macro.njk' import radios %}

packages/nhsuk-frontend/src/nhsuk/components/_index.scss

@@ -22,6 +22,7 @@
 @forward "input";
 @forward "inset-text";
 @forward "label";
+@forward "notification-banner";
 @forward "pagination";
 @forward "panel";
 @forward "checkboxes";

packages/nhsuk-frontend/src/nhsuk/components/index.mjs

@@ -3,6 +3,7 @@ export * from './character-count/character-count.mjs'
 export * from './checkboxes/checkboxes.mjs'
 export * from './error-summary/error-summary.mjs'
 export * from './header/header.mjs'
+export * from './notification-banner/notification-banner.mjs'
 export * from './radios/radios.mjs'
 export * from './skip-link/skip-link.mjs'
 export * from './tabs/tabs.mjs'

packages/nhsuk-frontend/src/nhsuk/components/notification-banner/README.md

@@ -0,0 +1,9 @@
+# Notification banner
+
+## Installation
+
+See the [main README quick start guide](https://github.com/nhsuk/nhsuk-frontend#quick-start) for how to install this component.
+
+## Guidance and examples
+
+To learn more about the notification banner component and when to use it, visit the [design system in the NHS digital service manual](https://service-manual.nhs.uk/design-system/components/notification-banner) for guidance, examples and options.

packages/nhsuk-frontend/src/nhsuk/components/notification-banner/_index.scss

@@ -0,0 +1,94 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+.nhsuk-notification-banner {
+  border: $nhsuk-border-width solid $color_nhsuk-blue;
+
+  @include nhsuk-font($size: 19);
+  @include nhsuk-responsive-margin(8, "bottom");
+
+  &:focus {
+    outline: $nhsuk-focus-width solid $nhsuk-focus-color;
+  }
+}
+
+.nhsuk-notification-banner__header {
+  padding: 2px nhsuk-spacing(3) nhsuk-spacing(1);
+  background-color: $color_nhsuk-blue;
+
+  // Ensures the notification header appears separate to the notification body
+  // text in high contrast mode
+  border-bottom: 1px solid transparent;
+
+  @include nhsuk-media-query($from: tablet) {
+    padding: 2px nhsuk-spacing(4) nhsuk-spacing(1);
+  }
+}
+
+.nhsuk-notification-banner__title {
+  margin: 0;
+  padding: 0;
+  color: $color_nhsuk-white;
+
+  // Set the size again because this element is a heading and the user agent
+  // font size overrides the inherited font size
+  @include nhsuk-font($size: 19, $weight: bold);
+}
+
+.nhsuk-notification-banner__content {
+  $padding-tablet: nhsuk-spacing(4);
+  padding: nhsuk-spacing(3);
+
+  @include nhsuk-text-color;
+  @include nhsuk-media-query($from: tablet) {
+    padding: $padding-tablet;
+  }
+
+  // Wrap content at the same place that a 2/3 grid column ends, to maintain
+  // shorter line-lengths when the notification banner is full width
+  > * {
+    // When elements have their own padding (like lists), include the padding
+    // in the max-width calculation
+    box-sizing: border-box;
+
+    // Calculate the internal width of a two-thirds column...
+    $two-col-width: calc($nhsuk-page-width * 2 / 3) - calc($nhsuk-gutter * 1 / 3);
+
+    // ...and then factor in the left border and padding
+    $banner-exterior: ($padding-tablet + $nhsuk-border-width);
+    max-width: $two-col-width - $banner-exterior;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.nhsuk-notification-banner__heading {
+  margin: 0 0 nhsuk-spacing(3);
+  padding: 0;
+
+  @include nhsuk-font($size: 26, $weight: bold);
+}
+
+.nhsuk-notification-banner__link {
+  @include nhsuk-link-style-no-visited-state;
+}
+
+.nhsuk-notification-banner--success {
+  border-color: $nhsuk-button-color;
+
+  .nhsuk-notification-banner__header {
+    background-color: $nhsuk-button-color;
+  }
+
+  .nhsuk-notification-banner__link {
+    @include nhsuk-link-style-success;
+    @include nhsuk-link-style(
+      $link-color: $nhsuk-button-color,
+      $link-visited-color: $nhsuk-button-color,
+      $link-hover-color: $nhsuk-button-hover-color,
+      $link-active-color: $nhsuk-button-active-color
+    );
+  }
+}

packages/nhsuk-frontend/src/nhsuk/components/notification-banner/_notification-banner.scss

@@ -0,0 +1 @@
+@forward ".";

packages/nhsuk-frontend/src/nhsuk/components/notification-banner/accessibility.puppeteer.test.mjs

@@ -0,0 +1,35 @@
+import { axe, goToComponent } from '@nhsuk/frontend-helpers/puppeteer.mjs'
+
+import { examples } from './macro-options.mjs'
+
+describe('Notification banner', () => {
+  /** @type {RuleObject} */
+  let axeRules
+
+  /** @type {Page} */
+  let page
+
+  beforeAll(() => {
+    axeRules = {
+      /**
+       * Ignore 'Element has a tabindex greater than 0' for custom
+       * tabindex tests
+       */
+      tabindex: { enabled: false }
+    }
+  })
+
+  describe('Component examples', () => {
+    it('passes accessibility tests', async () => {
+      for (const example in examples) {
+        page = await goToComponent(browser, 'notification-banner', { example })
+        await expect(axe(page, axeRules)).resolves.toHaveNoViolations()
+      }
+    }, 120000)
+  })
+})
+
+/**
+ * @import { RuleObject } from 'axe-core'
+ * @import { Page } from 'puppeteer'
+ */