@ministryofjustice/frontend 3.3.0 → 3.4.0

package/moj/components/banner/_banner.scss

@@ -3,43 +3,39 @@
    ========================================================================== */
 
 .moj-banner {
+  margin-bottom: govuk-spacing(6);
+  padding: govuk-spacing(2);
   border: 5px solid $govuk-brand-colour;
   color: $govuk-brand-colour;
   font-size: 0; // Removes white space when using inline-block on child element.
-  margin-bottom: govuk-spacing(6);
-  padding: govuk-spacing(2);
 }
 
-
 .moj-banner__icon {
-  fill: currentColor;
-  float: left;
   margin-right: govuk-spacing(2);
+  float: left;
+  fill: currentcolor;
 }
 
 .moj-banner__message {
   @include govuk-font($size: 19);
-  color: govuk-colour("black");
   display: block;
   overflow: hidden;
+  color: govuk-colour("black");
 }
 
 .moj-banner__message h2 {
   margin-bottom: govuk-spacing(2);
 }
 
-
 .moj-banner__message h2:last-child,
 .moj-banner__message p:last-child {
   margin-bottom: 0;
 }
 
-
 .moj-banner__assistive {
   @include govuk-visually-hidden;
 }
 
-
 /* Style variants
    ========================================================================== */
 
@@ -48,7 +44,6 @@
   color: govuk-colour("green");
 }
 
-
 .moj-banner--warning {
   border-color: govuk-colour("red");
   color: govuk-colour("red");

package/moj/components/button-menu/_button-menu.scss

@@ -23,8 +23,8 @@ $moj-datepicker-mid-grey: #949494;
 }
 
 .moj-button-menu__toggle-button svg {
-  transform: rotate(180deg);
   margin-top: 2px;
+  transform: rotate(180deg);
 }
 
 .moj-button-menu__toggle-button[aria-expanded="true"] svg {
@@ -32,13 +32,13 @@ $moj-datepicker-mid-grey: #949494;
 }
 
 .moj-button-menu__wrapper {
-  list-style: none;
   position: absolute;
+  z-index: 10;
+  top: 43px; // 38px button height, 2px shadow, 3px gap
+  width: 200px;
   margin: 0;
   padding: 0;
-  width: 200px;
-  top: 43px; //38px button height, 2px shadow, 3px gap
-  z-index: 10;
+  list-style: none;
 
   &--right {
     right: 0;
@@ -48,9 +48,10 @@ $moj-datepicker-mid-grey: #949494;
 /* Menu items with no JS */
 .moj-button-menu__item {
   display: inline-block;
+  width: auto; // Override GDS’s 100% width
   margin-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(2);
-  width: auto; // Override GDS’s 100% width
+
   &:last-child {
     margin-right: 0;
   }
@@ -67,12 +68,12 @@ $moj-datepicker-mid-grey: #949494;
   width: 100%;
   margin-top: 0;
   margin-right: 0;
-  margin-left: 0;
   margin-bottom: 0;
+  margin-left: 0;
   padding: govuk-spacing(2);
   border: $govuk-border-width-form-element solid transparent;
-  border-radius: 0;
   border-bottom: 1px solid $moj-datepicker-mid-grey;
+  border-radius: 0;
   color: $govuk-text-colour;
   background-color: govuk-colour("light-grey");
   text-align: left;
@@ -105,10 +106,10 @@ $moj-datepicker-mid-grey: #949494;
   }
 
   &:focus {
+    z-index: 10;
     border-color: $govuk-focus-colour;
     outline: $govuk-focus-width solid transparent;
     box-shadow: inset 0 0 0 1px $govuk-focus-colour;
-    z-index: 10;
   }
 
   &:focus:not(:active):not(:hover) {

package/moj/components/button-menu/button-menu.js

@@ -8,157 +8,157 @@
 /**
  * @param {HTMLElement} $module
  * @param {ButtonMenuConfig} config
- * @constructor
+ * @class
  */
 MOJFrontend.ButtonMenu = function ($module, config = {}) {
   if (!$module) {
-    return this;
+    return this
   }
 
   const schema = Object.freeze({
     properties: {
-      buttonText: { type: "string" },
-      buttonClasses: { type: "string" },
-      alignMenu: { type: "string" },
-    },
-  });
+      buttonText: { type: 'string' },
+      buttonClasses: { type: 'string' },
+      alignMenu: { type: 'string' }
+    }
+  })
 
   const defaults = {
-    buttonText: "Actions",
-    alignMenu: "left",
-    buttonClasses: "",
-  };
+    buttonText: 'Actions',
+    alignMenu: 'left',
+    buttonClasses: ''
+  }
   // data attributes override JS config, which overrides defaults
   this.config = this.mergeConfigs(
     defaults,
     config,
-    this.parseDataset(schema, $module.dataset),
-  );
+    this.parseDataset(schema, $module.dataset)
+  )
 
-  this.$module = $module;
-};
+  this.$module = $module
+}
 
 MOJFrontend.ButtonMenu.prototype.init = function () {
   // If only one button is provided, don't initiate a menu and toggle button
   // if classes have been provided for the toggleButton, apply them to the single item
-  if (this.$module.children.length == 1) {
-    const button = this.$module.children[0];
+  if (this.$module.children.length === 1) {
+    const button = this.$module.children[0]
     button.classList.forEach((className) => {
-      if (className.startsWith("govuk-button-")) {
-        button.classList.remove(className);
+      if (className.startsWith('govuk-button-')) {
+        button.classList.remove(className)
       }
-      button.classList.remove("moj-button-menu__item")
-    });
+      button.classList.remove('moj-button-menu__item')
+    })
     if (this.config.buttonClasses) {
-      button.classList.add(...this.config.buttonClasses.split(" "));
+      button.classList.add(...this.config.buttonClasses.split(' '))
     }
   }
   // Otherwise intialise a button menu
   if (this.$module.children.length > 1) {
-    this.initMenu();
+    this.initMenu()
   }
-};
+}
 
 MOJFrontend.ButtonMenu.prototype.initMenu = function () {
-  this.$menu = this.createMenu();
-  this.$module.insertAdjacentHTML("afterbegin", this.toggleTemplate());
-  this.setupMenuItems();
+  this.$menu = this.createMenu()
+  this.$module.insertAdjacentHTML('afterbegin', this.toggleTemplate())
+  this.setupMenuItems()
 
-  this.$menuToggle = this.$module.querySelector(":scope > button");
-  this.items = this.$menu.querySelectorAll("a, button");
+  this.$menuToggle = this.$module.querySelector(':scope > button')
+  this.items = this.$menu.querySelectorAll('a, button')
 
-  this.$menuToggle.addEventListener("click", (event) => {
-    this.toggleMenu(event);
-  });
+  this.$menuToggle.addEventListener('click', (event) => {
+    this.toggleMenu(event)
+  })
 
-  this.$module.addEventListener("keydown", (event) => {
-    this.handleKeyDown(event);
-  });
+  this.$module.addEventListener('keydown', (event) => {
+    this.handleKeyDown(event)
+  })
 
-  document.addEventListener("click", (event) => {
+  document.addEventListener('click', (event) => {
     if (!this.$module.contains(event.target)) {
-      this.closeMenu(false);
+      this.closeMenu(false)
     }
-  });
-};
+  })
+}
 
 MOJFrontend.ButtonMenu.prototype.createMenu = function () {
-  const $menu = document.createElement("ul");
-  $menu.setAttribute("role", "list");
-  $menu.hidden = true;
-  $menu.classList.add("moj-button-menu__wrapper");
-  if (this.config.alignMenu == "right") {
-    $menu.classList.add("moj-button-menu__wrapper--right");
+  const $menu = document.createElement('ul')
+  $menu.setAttribute('role', 'list')
+  $menu.hidden = true
+  $menu.classList.add('moj-button-menu__wrapper')
+  if (this.config.alignMenu === 'right') {
+    $menu.classList.add('moj-button-menu__wrapper--right')
   }
 
-  this.$module.appendChild($menu);
+  this.$module.appendChild($menu)
   while (this.$module.firstChild !== $menu) {
-    $menu.appendChild(this.$module.firstChild);
+    $menu.appendChild(this.$module.firstChild)
   }
 
-  return $menu;
-};
+  return $menu
+}
 
 MOJFrontend.ButtonMenu.prototype.setupMenuItems = function () {
   Array.from(this.$menu.children).forEach((item) => {
     // wrap item in li tag
-    const listItem = document.createElement("li");
-    this.$menu.insertBefore(listItem, item);
-    listItem.appendChild(item);
+    const listItem = document.createElement('li')
+    this.$menu.insertBefore(listItem, item)
+    listItem.appendChild(item)
 
-    item.setAttribute("tabindex", -1);
+    item.setAttribute('tabindex', -1)
 
-    if (item.tagName == "BUTTON") {
-      item.setAttribute("type", "button");
+    if (item.tagName === 'BUTTON') {
+      item.setAttribute('type', 'button')
     }
 
     item.classList.forEach((className) => {
-      if (className.startsWith("govuk-button")) {
-        item.classList.remove(className);
+      if (className.startsWith('govuk-button')) {
+        item.classList.remove(className)
       }
-    });
+    })
 
     // add a slight delay after click before closing the menu, makes it *feel* better
-    item.addEventListener("click", (event) => {
+    item.addEventListener('click', (event) => {
       setTimeout(() => {
-        this.closeMenu(false);
-      }, 50);
-    });
-  });
-};
+        this.closeMenu(false)
+      }, 50)
+    })
+  })
+}
 
 MOJFrontend.ButtonMenu.prototype.toggleTemplate = function () {
   return `
-    <button type="button" class="govuk-button moj-button-menu__toggle-button ${this.config.buttonClasses || ""}" aria-haspopup="true" aria-expanded="false">
+    <button type="button" class="govuk-button moj-button-menu__toggle-button ${this.config.buttonClasses || ''}" aria-haspopup="true" aria-expanded="false">
       <span>
        ${this.config.buttonText}
        <svg width="11" height="5" viewBox="0 0 11 5"  xmlns="http://www.w3.org/2000/svg">
          <path d="M5.5 0L11 5L0 5L5.5 0Z" fill="currentColor"/>
        </svg>
       </span>
-    </button>`;
-};
+    </button>`
+}
 
 /**
  * @returns {boolean}
  */
 MOJFrontend.ButtonMenu.prototype.isOpen = function () {
-  return this.$menuToggle.getAttribute("aria-expanded") === "true";
-};
+  return this.$menuToggle.getAttribute('aria-expanded') === 'true'
+}
 
 MOJFrontend.ButtonMenu.prototype.toggleMenu = function (event) {
-  event.preventDefault();
+  event.preventDefault()
 
   // If menu is triggered with mouse don't move focus to first item
-  const keyboardEvent = event.detail == 0;
-  const focusIndex = keyboardEvent ? 0 : -1;
+  const keyboardEvent = event.detail === 0
+  const focusIndex = keyboardEvent ? 0 : -1
 
   if (this.isOpen()) {
-    this.closeMenu();
+    this.closeMenu()
   } else {
-    this.openMenu(focusIndex);
+    this.openMenu(focusIndex)
   }
-};
+}
 
 /**
  * Opens the menu and optionally sets the focus to the item with given index
@@ -166,12 +166,12 @@ MOJFrontend.ButtonMenu.prototype.toggleMenu = function (event) {
  * @param {number} focusIndex - The index of the item to focus
  */
 MOJFrontend.ButtonMenu.prototype.openMenu = function (focusIndex = 0) {
-  this.$menu.hidden = false;
-  this.$menuToggle.setAttribute("aria-expanded", "true");
+  this.$menu.hidden = false
+  this.$menuToggle.setAttribute('aria-expanded', 'true')
   if (focusIndex !== -1) {
-    this.focusItem(focusIndex);
+    this.focusItem(focusIndex)
   }
-};
+}
 
 /**
  * Closes the menu and optionally returns focus back to menuToggle
@@ -179,12 +179,12 @@ MOJFrontend.ButtonMenu.prototype.openMenu = function (focusIndex = 0) {
  * @param {boolean} moveFocus - whether to return focus to the toggle button
  */
 MOJFrontend.ButtonMenu.prototype.closeMenu = function (moveFocus = true) {
-  this.$menu.hidden = true;
-  this.$menuToggle.setAttribute("aria-expanded", "false");
+  this.$menu.hidden = true
+  this.$menuToggle.setAttribute('aria-expanded', 'false')
   if (moveFocus) {
-    this.$menuToggle.focus();
+    this.$menuToggle.focus()
   }
-};
+}
 
 /**
  * Focuses the menu item at the specified index
@@ -192,65 +192,68 @@ MOJFrontend.ButtonMenu.prototype.closeMenu = function (moveFocus = true) {
  * @param {number} index - the index of the item to focus
  */
 MOJFrontend.ButtonMenu.prototype.focusItem = function (index) {
-  if (index >= this.items.length) index = 0;
-  if (index < 0) index = this.items.length - 1;
+  if (index >= this.items.length) index = 0
+  if (index < 0) index = this.items.length - 1
 
-  this.items.item(index)?.focus();
-};
+  const menuItem = this.items.item(index)
+  if (menuItem) {
+    menuItem.focus()
+  }
+}
 
 MOJFrontend.ButtonMenu.prototype.currentFocusIndex = function () {
-  const activeElement = document.activeElement;
-  const menuItems = Array.from(this.items);
+  const activeElement = document.activeElement
+  const menuItems = Array.from(this.items)
 
-  return menuItems.indexOf(activeElement);
-};
+  return menuItems.indexOf(activeElement)
+}
 
 MOJFrontend.ButtonMenu.prototype.handleKeyDown = function (event) {
-  if (event.target == this.$menuToggle) {
+  if (event.target === this.$menuToggle) {
     switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
-        this.openMenu();
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        this.openMenu(this.items.length - 1);
-        break;
+      case 'ArrowDown':
+        event.preventDefault()
+        this.openMenu()
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        this.openMenu(this.items.length - 1)
+        break
     }
   }
 
   if (this.$menu.contains(event.target) && this.isOpen()) {
     switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
+      case 'ArrowDown':
+        event.preventDefault()
         if (this.currentFocusIndex() !== -1) {
-          this.focusItem(this.currentFocusIndex() + 1);
+          this.focusItem(this.currentFocusIndex() + 1)
         }
-        break;
-      case "ArrowUp":
-        event.preventDefault();
+        break
+      case 'ArrowUp':
+        event.preventDefault()
         if (this.currentFocusIndex() !== -1) {
-          this.focusItem(this.currentFocusIndex() - 1);
+          this.focusItem(this.currentFocusIndex() - 1)
         }
-        break;
-      case "Home":
-        event.preventDefault();
-        this.focusItem(0);
-        break;
-      case "End":
-        event.preventDefault();
-        this.focusItem(this.items.length - 1);
-        break;
+        break
+      case 'Home':
+        event.preventDefault()
+        this.focusItem(0)
+        break
+      case 'End':
+        event.preventDefault()
+        this.focusItem(this.items.length - 1)
+        break
     }
   }
 
-  if (event.key == "Escape" && this.isOpen()) {
-    this.closeMenu();
+  if (event.key === 'Escape' && this.isOpen()) {
+    this.closeMenu()
   }
-  if (event.key == "Tab" && this.isOpen()) {
-    this.closeMenu(false);
+  if (event.key === 'Tab' && this.isOpen()) {
+    this.closeMenu(false)
   }
-};
+}
 
 /**
  * Parse dataset
@@ -258,23 +261,23 @@ MOJFrontend.ButtonMenu.prototype.handleKeyDown = function (event) {
  * Loop over an object and normalise each value using {@link normaliseString},
  * optionally expanding nested `i18n.field`
  *
- * @param {{ schema: Schema }} Component - Component class
+ * @param {Schema} schema - component schema
  * @param {DOMStringMap} dataset - HTML element dataset
- * @returns {Object} Normalised dataset
+ * @returns {object} Normalised dataset
  */
 MOJFrontend.ButtonMenu.prototype.parseDataset = function (schema, dataset) {
-  const parsed = {};
+  const parsed = {}
 
-  for (const [field, attributes] of Object.entries(schema.properties)) {
+  for (const [field, ,] of Object.entries(schema.properties)) {
     if (field in dataset) {
       if (dataset[field]) {
-        parsed[field] = dataset[field];
+        parsed[field] = dataset[field]
       }
     }
   }
 
-  return parsed;
-};
+  return parsed
+}
 
 /**
  * Config merging function
@@ -286,28 +289,28 @@ MOJFrontend.ButtonMenu.prototype.parseDataset = function (schema, dataset) {
  * @returns {{ [key: string]: unknown }} A merged config object
  */
 MOJFrontend.ButtonMenu.prototype.mergeConfigs = function (...configObjects) {
-  const formattedConfigObject = {};
+  const formattedConfigObject = {}
 
   // Loop through each of the passed objects
   for (const configObject of configObjects) {
     for (const key of Object.keys(configObject)) {
-      const option = formattedConfigObject[key];
-      const override = configObject[key];
+      const option = formattedConfigObject[key]
+      const override = configObject[key]
 
       // Push their keys one-by-one into formattedConfigObject. Any duplicate
       // keys with object values will be merged, otherwise the new value will
       // override the existing value.
-      if (typeof option === "object" && typeof override === "object") {
+      if (typeof option === 'object' && typeof override === 'object') {
         // @ts-expect-error Index signature for type 'string' is missing
-        formattedConfigObject[key] = this.mergeConfigs(option, override);
+        formattedConfigObject[key] = this.mergeConfigs(option, override)
       } else {
-        formattedConfigObject[key] = override;
+        formattedConfigObject[key] = override
       }
     }
   }
 
-  return formattedConfigObject;
-};
+  return formattedConfigObject
+}
 
 /**
  * Schema for component config