add new error banner module for showing users js errors

this ensures it's reusable by other components, and easier to unit test
by isolating the separate concerns

note: this is not in Modules since that's designed for classes that are
then bound to an element in the DOM as indicated by a data-module
attribute. This will just live at the window.GOVUK level since we want
there to only ever be one `.banner-dangerous` warning.

app/assets/javascripts/errorBanner.js

@@ -0,0 +1,18 @@
+(function (window) {
+  "use strict";
+
+  /*
+  This module is intended to be used to show and hide an error banner based on a javascript trigger. You should make
+  sure the banner has an appropriate aria-live attribute, and a tabindex of -1 so that screenreaders and keyboard users
+  are alerted to the change respectively.
+
+  This may behave in unexpected ways if you have more than one element with the `banner-dangerous` class on your page.
+  */
+  window.GOVUK.ErrorBanner = {
+    hideBanner: () => $('.banner-dangerous').addClass('govuk-!-display-none'),
+    showBanner: (errorMessage) => $('.banner-dangerous')
+      .html(`<span class="govuk-visually-hidden">Error:</span> ${errorMessage}`)
+      .removeClass('govuk-!-display-none')
+      .trigger('focus'),
+  };
+})(window);

gulpfile.js

@@ -182,6 +182,7 @@ const javascripts = () => {
     paths.src + 'javascripts/registerSecurityKey.js',
     paths.src + 'javascripts/authenticateSecurityKey.js',
     paths.src + 'javascripts/updateStatus.js',
+    paths.src + 'javascripts/errorBanner.js',
     paths.src + 'javascripts/homepage.js',
     paths.src + 'javascripts/main.js',
   ])

tests/javascripts/errorBanner.test.js

@@ -0,0 +1,41 @@
+beforeAll(() => {
+  require('../../app/assets/javascripts/errorBanner.js')
+});
+
+afterAll(() => {
+    require('./support/teardown.js');
+});
+
+describe("Error Banner", () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe("The `hideBanner` method", () => {
+    test("Will hide the element", () => {
+      document.body.innerHTML = `
+      <span class="govuk-error-message banner-dangerous js-error-visible">
+      </span>`;
+      window.GOVUK.ErrorBanner.hideBanner();
+      expect(document.querySelector('.banner-dangerous').classList).toContain('govuk-!-display-none')
+    });
+  });
+
+  describe("The `showBanner` method", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <span class="govuk-error-message banner-dangerous js-error-visible govuk-!-display-none">
+        </span>`;
+
+      window.GOVUK.ErrorBanner.showBanner('Some Err');
+    });
+
+    test("Will set a specific error message on the element", () => {
+      expect(document.querySelector('.banner-dangerous').textContent).toEqual('Error: Some Err')
+    });
+
+    test("Will show the element", () => {
+      expect(document.querySelector('.banner-dangerous').classList).not.toContain('govuk-!-display-none')
+    });
+  });
+});