@ministryofjustice/frontend 2.2.5 → 3.0.1

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

@@ -1,95 +1,49 @@
-/* ==========================================================================
-   #BUTTON GROUP
-   ========================================================================== */
+$moj-button-hover-colour: #767676;
+$moj-datepicker-mid-grey: #949494;
 
 .moj-button-menu {
   display: inline-block;
   position: relative;
-}
-
-/* TOGGLE BUTTON */
 
-.moj-button-menu__toggle-button {
-  display: inline-block;
-  margin-right: govuk-spacing(2);
-  margin-bottom: govuk-spacing(2);
-  width: auto; // Override GDS’s 100% width
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &:after {
-    background-repeat: no-repeat;
-    background-image: url(#{$moj-images-path}icon-arrow-white-down.svg);
-    content: '';
-    display: inline-block;
-    height: 5px;
-    margin-left: govuk-spacing(2);
-    width: 10px;
-    vertical-align: middle;
-  }
-}
-
-.moj-button-menu__toggle-button:focus {
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-black-down.svg);
+  > .govuk-button {
+    margin-bottom: 0;
   }
 }
 
-.moj-button-menu__toggle-button[aria-expanded="true"]:focus {
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-black-up.svg);
-  }
-}
-
-.moj-button-menu__toggle-button:hover {
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-white-down.svg);
-  }
-}
-
-.moj-button-menu__toggle-button[aria-expanded="true"]:hover {
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-white-up.svg);
-  }
+.moj-button-menu__toggle-button {
+  display: inline;
 }
 
-.moj-button-menu__toggle-button[aria-expanded="true"] {
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-white-up.svg);
-  }
+.moj-button-menu__toggle-button span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.moj-button-menu__toggle-button--secondary {
-  margin-bottom: govuk-spacing(1);
-  margin-right: 0;
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-black-down.svg);
-  }
+.moj-button-menu__toggle-button svg {
+  transform: rotate(180deg);
+  margin-top: 2px;
 }
 
-.moj-button-menu__toggle-button--secondary[aria-expanded="true"] {
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-black-up.svg);
-  }
+.moj-button-menu__toggle-button[aria-expanded="true"] svg {
+  transform: rotate(0deg);
 }
 
-.moj-button-menu__toggle-button--secondary:hover {
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-black-down.svg);
-  }
-}
+.moj-button-menu__wrapper {
+  list-style: none;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  width: 200px;
+  top: 43px; //38px button height, 2px shadow, 3px gap
+  z-index: 10;
 
-.moj-button-menu__toggle-button--secondary[aria-expanded="true"]:hover {
-  &:after {
-    background-image: url(#{$moj-images-path}icon-arrow-black-up.svg);
+  &--right {
+    right: 0;
   }
 }
 
-
-/* MENU ITEM */
-
+/* Menu items with no JS */
 .moj-button-menu__item {
   display: inline-block;
   margin-right: govuk-spacing(2);
@@ -100,57 +54,65 @@
   }
 }
 
-.moj-button-menu [role=menuitem] {
-  @include govuk-font(19);
-  background-color: govuk-colour("light-grey");
-  border: none;
+/* Menu items with JS */
+.moj-button-menu li > .moj-button-menu__item {
+  $button-shadow-size: 0;
+  @include govuk-font($size: 19, $line-height: 19px);
+
   box-sizing: border-box;
-  display: block;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-left: 0;
   margin-bottom: 0;
   padding: govuk-spacing(2);
+  border: $govuk-border-width-form-element solid transparent;
+  border-radius: 0;
+  border-bottom: 1px solid $moj-datepicker-mid-grey;
+  color: $govuk-text-colour;
+  background-color: govuk-colour("light-grey");
   text-align: left;
-  width: 100%;
-  -webkit-box-sizing: border-box;
+  vertical-align: top;
+  cursor: pointer;
   -webkit-appearance: none;
+  appearance: none;
 
   &:link,
-  &:visited {
+  &:visited,
+  &:active,
+  &:hover {
+    color: $govuk-text-colour;
     text-decoration: none;
-    color: govuk-colour("black");
   }
 
+  &:active,
   &:hover {
-    background-color: govuk-colour("mid-grey");
+    color: govuk-colour("white");
   }
 
-  &:focus {
-    outline: 3px solid govuk-colour("yellow");
-    outline-offset: 0;
-		position: relative;
-    z-index: 10;
-	}
-}
-
-/* MENU WRAPPER */
-
-.moj-button-menu__wrapper {
-  font-size: 0; /* Hide whitespace between elements */
-}
-
-.moj-button-menu__wrapper--right {
-  right: 0;
-}
+  // Fix unwanted button padding in Firefox
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
 
-.moj-button-menu [role=menu] {
-  position: absolute;
-  width: 200px;
-  z-index: 10;
-}
+  &:hover {
+    background-color: $moj-button-hover-colour;
+  }
 
-.moj-button-menu [aria-expanded="true"] + [role=menu] {
-	display: block;
-}
+  &:focus {
+    border-color: $govuk-focus-colour;
+    outline: $govuk-focus-width solid transparent;
+    box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+    z-index: 10;
+  }
 
-.moj-button-menu [aria-expanded="false"] + [role=menu] {
-	display: none;
+  &:focus:not(:active):not(:hover) {
+    border-color: $govuk-focus-colour;
+    color: $govuk-focus-text-colour;
+    background-color: $govuk-focus-colour;
+    box-shadow: 0 2px 0 $govuk-focus-text-colour;
+  }
 }

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

@@ -1,155 +1,324 @@
-MOJFrontend.ButtonMenu = function(params) {
-	this.container = $(params.container);
-	this.menu = this.container.find('.moj-button-menu__wrapper');
-	if(params.menuClasses) {
-		this.menu.addClass(params.menuClasses);
-	}
-	this.menu.attr('role', 'menu');
-	this.mq = params.mq;
-	this.buttonText = params.buttonText;
-	this.buttonClasses = params.buttonClasses || '';
-	this.keys = { esc: 27, up: 38, down: 40, tab: 9 };
-	this.menu.on('keydown', '[role=menuitem]', $.proxy(this, 'onButtonKeydown'));
-	this.createToggleButton();
-	this.setupResponsiveChecks();
-	$(document).on('click', $.proxy(this, 'onDocumentClick'));
-};
+/**
+ * @typedef {object} ButtonMenuConfig
+ * @property {string} [buttonText=Actions] - Label for the toggle button
+ * @property {"left" | "right"} [alignMenu=left] - the alignment of the menu
+ * @property {string} [buttonClasses=govuk-button--secondary] - css classes applied to the toggle button
+ */
 
-MOJFrontend.ButtonMenu.prototype.onDocumentClick = function(e) {
-	if(!$.contains(this.container[0], e.target)) {
-	  this.hideMenu();
+/**
+ * @param {HTMLElement} $module
+ * @param {ButtonMenuConfig} config
+ * @constructor
+ */
+MOJFrontend.ButtonMenu = function ($module, config = {}) {
+  if (!$module) {
+    return this;
   }
-};
 
-MOJFrontend.ButtonMenu.prototype.createToggleButton = function() {
-	this.menuButton = $('<button class="govuk-button moj-button-menu__toggle-button ' + this.buttonClasses + '" type="button" aria-haspopup="true" aria-expanded="false">'+this.buttonText+'</button>');
-	this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'));
-	this.menuButton.on('keydown', $.proxy(this, 'onMenuKeyDown'));
+  const schema = Object.freeze({
+    properties: {
+      buttonText: { type: "string" },
+      buttonClasses: { type: "string" },
+      alignMenu: { type: "string" },
+    },
+  });
+
+  const defaults = {
+    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.$module = $module;
 };
 
-MOJFrontend.ButtonMenu.prototype.setupResponsiveChecks = function() {
-	this.mql = window.matchMedia(this.mq);
-	this.mql.addListener($.proxy(this, 'checkMode'));
-	this.checkMode(this.mql);
+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];
+    button.classList.forEach((className) => {
+      if (className.startsWith("govuk-button-")) {
+        button.classList.remove(className);
+      }
+      button.classList.remove("moj-button-menu__item")
+    });
+    if (this.config.buttonClasses) {
+      button.classList.add(...this.config.buttonClasses.split(" "));
+    }
+  }
+  // Otherwise intialise a button menu
+  if (this.$module.children.length > 1) {
+    this.initMenu();
+  }
 };
 
-MOJFrontend.ButtonMenu.prototype.checkMode = function(mql) {
-	if(mql.matches) {
-		this.enableBigMode();
-	} else {
-		this.enableSmallMode();
-	}
+MOJFrontend.ButtonMenu.prototype.initMenu = function () {
+  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.addEventListener("click", (event) => {
+    this.toggleMenu(event);
+  });
+
+  this.$module.addEventListener("keydown", (event) => {
+    this.handleKeyDown(event);
+  });
+
+  document.addEventListener("click", (event) => {
+    if (!this.$module.contains(event.target)) {
+      this.closeMenu(false);
+    }
+  });
 };
 
-MOJFrontend.ButtonMenu.prototype.enableSmallMode = function() {
-	this.container.prepend(this.menuButton);
-	this.hideMenu();
-	this.removeButtonClasses();
-	this.menu.attr('role', 'menu');
-	this.container.find('.moj-button-menu__item').attr('role', 'menuitem');
+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");
+  }
+
+  this.$module.appendChild($menu);
+  while (this.$module.firstChild !== $menu) {
+    $menu.appendChild(this.$module.firstChild);
+  }
+
+  return $menu;
 };
 
-MOJFrontend.ButtonMenu.prototype.enableBigMode = function() {
-	this.menuButton.detach();
-	this.showMenu();
-	this.addButtonClasses();
-	this.menu.removeAttr('role');
-	this.container.find('.moj-button-menu__item').removeAttr('role');
+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);
+
+    item.setAttribute("tabindex", -1);
+
+    if (item.tagName == "BUTTON") {
+      item.setAttribute("type", "button");
+    }
+
+    item.classList.forEach((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) => {
+      setTimeout(() => {
+        this.closeMenu(false);
+      }, 50);
+    });
+  });
 };
 
-MOJFrontend.ButtonMenu.prototype.removeButtonClasses = function() {
-	this.menu.find('.moj-button-menu__item').each(function(index, el) {
-		if($(el).hasClass('govuk-button--secondary')) {
-			$(el).attr('data-secondary', 'true');
-			$(el).removeClass('govuk-button--secondary');
-		}
-		if($(el).hasClass('govuk-button--warning')) {
-			$(el).attr('data-warning', 'true');
-			$(el).removeClass('govuk-button--warning');
-		}
-		$(el).removeClass('govuk-button');
-	});
+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">
+      <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>`;
 };
 
-MOJFrontend.ButtonMenu.prototype.addButtonClasses = function() {
-	this.menu.find('.moj-button-menu__item').each(function(index, el) {
-		if($(el).attr('data-secondary') == 'true') {
-			$(el).addClass('govuk-button--secondary');
-		}
-		if($(el).attr('data-warning') == 'true') {
-			$(el).addClass('govuk-button--warning');
-		}
-		$(el).addClass('govuk-button');
-	});
+/**
+ * @returns {boolean}
+ */
+MOJFrontend.ButtonMenu.prototype.isOpen = function () {
+  return this.$menuToggle.getAttribute("aria-expanded") === "true";
 };
 
-MOJFrontend.ButtonMenu.prototype.hideMenu = function() {
-	this.menuButton.attr('aria-expanded', 'false');
+MOJFrontend.ButtonMenu.prototype.toggleMenu = function (event) {
+  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;
+
+  if (this.isOpen()) {
+    this.closeMenu();
+  } else {
+    this.openMenu(focusIndex);
+  }
 };
 
-MOJFrontend.ButtonMenu.prototype.showMenu = function() {
-	this.menuButton.attr('aria-expanded', 'true');
+/**
+ * Opens the menu and optionally sets the focus to the item with given index
+ *
+ * @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");
+  if (focusIndex !== -1) {
+    this.focusItem(focusIndex);
+  }
 };
 
-MOJFrontend.ButtonMenu.prototype.onMenuButtonClick = function() {
-	this.toggle();
+/**
+ * Closes the menu and optionally returns focus back to menuToggle
+ *
+ * @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");
+  if (moveFocus) {
+    this.$menuToggle.focus();
+  }
 };
 
-MOJFrontend.ButtonMenu.prototype.toggle = function() {
-	if(this.menuButton.attr('aria-expanded') == 'false') {
-		this.showMenu();
-		this.menu.find('[role=menuitem]').first().focus();
-	} else {
-		this.hideMenu();
-		this.menuButton.focus();
-	}
+/**
+ * Focuses the menu item at the specified index
+ *
+ * @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;
+
+  this.items.item(index)?.focus();
 };
 
-MOJFrontend.ButtonMenu.prototype.onMenuKeyDown = function(e) {
-	switch (e.keyCode) {
-		case this.keys.down:
-			this.toggle();
-			break;
-	}
+MOJFrontend.ButtonMenu.prototype.currentFocusIndex = function () {
+  const activeElement = document.activeElement;
+  const menuItems = Array.from(this.items);
+
+  return menuItems.indexOf(activeElement);
 };
 
-MOJFrontend.ButtonMenu.prototype.onButtonKeydown = function(e) {
-	switch (e.keyCode) {
-		case this.keys.up:
-			e.preventDefault();
-			this.focusPrevious(e.currentTarget);
-			break;
-		case this.keys.down:
-			e.preventDefault();
-			this.focusNext(e.currentTarget);
-			break;
-		case this.keys.esc:
-			if(!this.mql.matches) {
-				this.menuButton.focus();
-				this.hideMenu();
-			}
-			break;
-		case this.keys.tab:
-			if(!this.mql.matches) {
-				this.hideMenu();
-			}
-	}
+MOJFrontend.ButtonMenu.prototype.handleKeyDown = function (event) {
+  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;
+    }
+  }
+
+  if (this.$menu.contains(event.target) && this.isOpen()) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (this.currentFocusIndex() !== -1) {
+          this.focusItem(this.currentFocusIndex() + 1);
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (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;
+    }
+  }
+
+  if (event.key == "Escape" && this.isOpen()) {
+    this.closeMenu();
+  }
+  if (event.key == "Tab" && this.isOpen()) {
+    this.closeMenu(false);
+  }
 };
 
-MOJFrontend.ButtonMenu.prototype.focusNext = function(currentButton) {
-	var next = $(currentButton).next();
-	if(next[0]) {
-		next.focus();
-	} else {
-		this.container.find('[role=menuitem]').first().focus();
-	}
+/**
+ * Parse dataset
+ *
+ * Loop over an object and normalise each value using {@link normaliseString},
+ * optionally expanding nested `i18n.field`
+ *
+ * @param {{ schema: Schema }} Component - Component class
+ * @param {DOMStringMap} dataset - HTML element dataset
+ * @returns {Object} Normalised dataset
+ */
+MOJFrontend.ButtonMenu.prototype.parseDataset = function (schema, dataset) {
+  const parsed = {};
+
+  for (const [field, attributes] of Object.entries(schema.properties)) {
+    if (field in dataset) {
+      if (dataset[field]) {
+        parsed[field] = dataset[field];
+      }
+    }
+  }
+
+  return parsed;
 };
 
-MOJFrontend.ButtonMenu.prototype.focusPrevious = function(currentButton) {
-	var prev = $(currentButton).prev();
-	if(prev[0]) {
-		prev.focus();
-	} else {
-		this.container.find('[role=menuitem]').last().focus();
-	}
+/**
+ * Config merging function
+ *
+ * Takes any number of objects and combines them together, with
+ * greatest priority on the LAST item passed in.
+ *
+ * @param {...{ [key: string]: unknown }} configObjects - Config objects to merge
+ * @returns {{ [key: string]: unknown }} A merged config object
+ */
+MOJFrontend.ButtonMenu.prototype.mergeConfigs = function (...configObjects) {
+  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];
+
+      // 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") {
+        // @ts-expect-error Index signature for type 'string' is missing
+        formattedConfigObject[key] = this.mergeConfigs(option, override);
+      } else {
+        formattedConfigObject[key] = override;
+      }
+    }
+  }
+
+  return formattedConfigObject;
 };
+
+/**
+ * Schema for component config
+ *
+ * @typedef {object} Schema
+ * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
+ */
+
+/**
+ * Schema property for component config
+ *
+ * @typedef {object} SchemaProperty
+ * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+ */