app/assets/javascripts/errorBanner.js

(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('display-none'),
    showBanner: () => $('.banner-dangerous')
      .removeClass('display-none')
      .trigger('focus'),
  };
})(window);
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. 2021-07-20 12:14:10 +01:00			`(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 = {`
Removing or changing more govuk styles 2023-08-25 10:40:56 -04:00			`hideBanner: () => $('.banner-dangerous').addClass('display-none'),`
hard-code html error message for errorBanner turns out that we're only using errorBanner with a static message, and it's also full of rich html content. This means that it's probably better to put it in the html templates with other content, rather than hidden away in js files if we can help it. Since there are two places, had to dupe the error message but i think that's fine as i don't anticipate this error message being used in significantly more places. making it a string is a bit gross and means we don't get nice syntax highlighting on it, but as it needs to be passed in to a jinja macro that's the way it has to go unfortunately. 2021-09-13 16:31:58 +01:00			`showBanner: () => $('.banner-dangerous')`
Removing or changing more govuk styles 2023-08-25 10:40:56 -04:00			`.removeClass('display-none')`
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. 2021-07-20 12:14:10 +01:00			`.trigger('focus'),`
			`};`
			`})(window);`