@ministryofjustice/frontend 3.2.2 → 3.3.1

package/moj/all.js

@@ -123,14 +123,7 @@ MOJFrontend.initAll = function (options) {
     });
   });
 
-  var $sortableTables = scope.querySelectorAll('[data-module="moj-sortable-table"]');
-  MOJFrontend.nodeListForEach($sortableTables, function ($table) {
-    new MOJFrontend.SortableTable({
-      table: $table
-    });
-  });
-
-  const $datepickers = document.querySelectorAll('[data-module="moj-date-picker"]')
+  const $datepickers = scope.querySelectorAll('[data-module="moj-date-picker"]')
   MOJFrontend.nodeListForEach($datepickers, function ($datepicker) {
     new MOJFrontend.DatePicker($datepicker, {}).init();
   })
@@ -142,7 +135,7 @@ MOJFrontend.initAll = function (options) {
 
 }
 
-MOJFrontend.version = '3.2.2'
+MOJFrontend.version = '3.3.1'
 
 MOJFrontend.AddAnother = function(container) {
 	this.container = $(container);
@@ -2214,7 +2207,7 @@ MOJFrontend.SearchToggle = function (options) {
 MOJFrontend.SearchToggle.prototype.showMenu = function () {
   this.toggleButton.attr("aria-expanded", "true");
   this.container.removeClass("moj-js-hidden");
-  this.container.find("input").first().focus();
+  this.container.find("input").first().get(0).focus();
 };
 
 MOJFrontend.SearchToggle.prototype.hideMenu = function () {

package/moj/components/date-picker/date-picker.spec.js

@@ -195,12 +195,12 @@ describe("Date picker with defaults", () => {
 
   test("can navigate back in time", async () => {
     const today = dayjs();
-    const previousMonth = dayjs().subtract(1, 'month')
-    const previousYear = previousMonth.subtract(1, 'year')
+    const previousMonth = dayjs().subtract(1, "month");
+    const previousYear = previousMonth.subtract(1, "year");
 
-    const currentTitle = `${today.format('MMMM YYYY')}`;
-    const previousMonthTitle = `${previousMonth.format('MMMM YYYY')}`;
-    const previousYearTitle = `${previousYear.format('MMMM YYYY')}`;
+    const currentTitle = `${today.format("MMMM YYYY")}`;
+    const previousMonthTitle = `${previousMonth.format("MMMM YYYY")}`;
+    const previousYearTitle = `${previousYear.format("MMMM YYYY")}`;
 
     await user.click(calendarButton);
     let prevMonthButton = getByText(dialog, "Previous month");
@@ -215,12 +215,12 @@ describe("Date picker with defaults", () => {
 
   test("can navigate forward in time", async () => {
     const today = dayjs();
-    const nextMonth = dayjs().add(1, 'month')
-    const nextYear = nextMonth.add(1, 'year')
+    const nextMonth = dayjs().add(1, "month");
+    const nextYear = nextMonth.add(1, "year");
 
-    const currentTitle = `${today.format('MMMM YYYY')}`;
-    const nextMonthTitle = `${nextMonth.format('MMMM YYYY')}`;
-    const nextYearTitle = `${nextYear.format('MMMM YYYY')}`;
+    const currentTitle = `${today.format("MMMM YYYY")}`;
+    const nextMonthTitle = `${nextMonth.format("MMMM YYYY")}`;
+    const nextYearTitle = `${nextYear.format("MMMM YYYY")}`;
 
     await user.click(calendarButton);
     let nextMonthButton = getByText(dialog, "Next month");
@@ -728,7 +728,7 @@ describe("button menu JS API", () => {
         }
         datesToExclude = datesToExclude.map((date) => date.startOf("day"));
         config = {
-          excludedDates: `${datesToExclude[0].format("D/M/YYYY")}-${datesToExclude[datesToExclude.length-1].format("D/M/YYYY")}`,
+          excludedDates: `${datesToExclude[0].format("D/M/YYYY")}-${datesToExclude[datesToExclude.length - 1].format("D/M/YYYY")}`,
         };
         const datePicker = new MOJFrontend.DatePicker(component, config);
         datePicker.init();
@@ -775,13 +775,13 @@ describe("button menu JS API", () => {
       const config = { leadingZeros: false };
       new MOJFrontend.DatePicker(component, config).init();
       calendarButton = screen.getByRole("button", { name: "Choose date" });
-      const dateToSelect = screen.queryByText("9")?.closest("button");
-      const selectedDate = dayjs().date(9);
+      const dateToSelect = dayjs().date(9);
+      const dateButton = screen.getByTestId(dateToSelect.format("D/M/YYYY"));
 
       await user.click(calendarButton);
-      await user.click(dateToSelect);
+      await user.click(dateButton);
 
-      expect(input).toHaveValue(selectedDate.format("D/M/YYYY"));
+      expect(input).toHaveValue(dateToSelect.format("D/M/YYYY"));
     });
 
     test("with leadingZeros true", async () => {
@@ -790,13 +790,13 @@ describe("button menu JS API", () => {
       const config = { leadingZeros: true };
       new MOJFrontend.DatePicker(component, config).init();
       calendarButton = screen.getByRole("button", { name: "Choose date" });
-      const dateToSelect = screen.queryByText("9")?.closest("button");
-      const selectedDate = dayjs().date(9);
+      const dateToSelect = dayjs().date(9);
+      const dateButton = screen.getByTestId(dateToSelect.format("DD/MM/YYYY"));
 
       await user.click(calendarButton);
-      await user.click(dateToSelect);
+      await user.click(dateButton);
 
-      expect(input).toHaveValue(selectedDate.format("DD/MM/YYYY"));
+      expect(input).toHaveValue(dateToSelect.format("DD/MM/YYYY"));
     });
 
     test.skip.failing("minDate", async () => {
@@ -880,7 +880,7 @@ describe("button menu JS API", () => {
         let daysToExclude = datesToExclude.map((date) => date.date());
         const lastDayinMonth = dayjs().endOf("month").date();
         config = {
-          excludedDates: `${datesToExclude[0].format("D/M/YYYY")}-${datesToExclude[datesToExclude.length-1].format("D/M/YYYY")}`,
+          excludedDates: `${datesToExclude[0].format("D/M/YYYY")}-${datesToExclude[datesToExclude.length - 1].format("D/M/YYYY")}`,
         };
 
         datePicker = new MOJFrontend.DatePicker(component, config).init();
@@ -962,13 +962,13 @@ describe("Datepicker data-attributes API", () => {
 
     input = screen.getByLabelText("Date");
     calendarButton = screen.getByRole("button", { name: "Choose date" });
-    const dateToSelect = screen.queryByText("9")?.closest("button");
-    const selectedDate = dayjs().date(9);
+    const dateToSelect = dayjs().date(9);
+    const dateButton = screen.getByTestId(dateToSelect.format("D/M/YYYY"));
 
     await user.click(calendarButton);
-    await user.click(dateToSelect);
+    await user.click(dateButton);
 
-    expect(input).toHaveValue(selectedDate.format("D/M/YYYY"));
+    expect(input).toHaveValue(dateToSelect.format("D/M/YYYY"));
   });
 
   test("with leadingZeros true", async () => {
@@ -977,13 +977,13 @@ describe("Datepicker data-attributes API", () => {
 
     input = screen.getByLabelText("Date");
     calendarButton = screen.getByRole("button", { name: "Choose date" });
-    const dateToSelect = screen.queryByText("9")?.closest("button");
-    const selectedDate = dayjs().date(9);
+    const dateToSelect = dayjs().date(9);
+    const dateButton = screen.getByTestId(dateToSelect.format("DD/MM/YYYY"));
 
     await user.click(calendarButton);
-    await user.click(dateToSelect);
+    await user.click(dateButton);
 
-    expect(input).toHaveValue(selectedDate.format("DD/MM/YYYY"));
+    expect(input).toHaveValue(dateToSelect.format("DD/MM/YYYY"));
   });
 
   test.skip.failing("minDate", async () => {
@@ -1072,7 +1072,7 @@ describe("Datepicker data-attributes API", () => {
       let daysToExclude = datesToExclude.map((date) => date.date());
       const lastDayinMonth = dayjs().endOf("month").date();
       component = createComponent({
-        excludedDates: `${datesToExclude[0].format("D/M/YYYY")}-${datesToExclude[datesToExclude.length-1].format("D/M/YYYY")}`,
+        excludedDates: `${datesToExclude[0].format("D/M/YYYY")}-${datesToExclude[datesToExclude.length - 1].format("D/M/YYYY")}`,
       });
       datePicker = new MOJFrontend.DatePicker(component).init();
       calendarButton = screen.getByRole("button", { name: "Choose date" });

package/moj/components/interruption-card/_interruption-card.scss

@@ -14,6 +14,13 @@
   color: govuk-colour("white");
 }
 
+// If $govuk-global-styles is true, we need to override the color and size on elements
+// within the body class directly
+.moj-interruption-card__body > * {
+  @include govuk-font-size($size: 24);
+  color: govuk-colour("white");
+}
+
 .moj-interruption-card__body:last-child {
   margin-bottom: 0;
 }

package/moj/components/multi-select/multi-select.spec.js

@@ -0,0 +1,135 @@
+const {
+  queryByRole,
+  queryAllByRole,
+} = require("@testing-library/dom");
+const { userEvent } = require("@testing-library/user-event");
+const { configureAxe } = require("jest-axe");
+
+require("./multi-select.js");
+
+const user = userEvent.setup();
+const axe = configureAxe({
+  rules: {
+    // disable landmark rules when testing isolated components.
+    region: { enabled: false },
+  },
+});
+
+const createComponent = (id = "multi-select", idprefix = false) => {
+  html = `
+<table id="${id}" class="govuk-table" data-module="moj-multi-select" data-multi-select-checkbox="#${id}-select-all" ${idprefix ? 'data-multi-select-idprefix="' + idprefix + '-"' : ""}>
+  <thead class="govuk-table__head">
+    <tr class="govuk-table__row">
+      <th class="govuk-table__header" scope="col" id="${id}-select-all"></th>
+      <th class="govuk-table__header" scope="col">Name</th>
+    </tr>
+  </thead>
+  <tbody class="govuk-table__body">
+    <tr class="govuk-table__row govuk-table__row--selected">
+      <td class="govuk-table__cell">
+        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
+          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-aconcagua">
+          <label class="govuk-label govuk-checkboxes__label" for="mountain-aconcagua">
+            <span class="govuk-visually-hidden">Select Aconcagua</span>
+          </label>
+        </div>
+      </td>
+      <td class="govuk-table__cell">Aconcagua</td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
+          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-denali" value="denali">
+          <label class="govuk-label govuk-checkboxes__label" for="mountain-denali">
+            <span class="govuk-visually-hidden">Select Denali</span>
+          </label>
+        </div>
+      </td>
+      </td>
+      <td class="govuk-table__cell">Denali</td>
+    </tr>
+  </tbody>
+</table>
+`;
+  document.body.insertAdjacentHTML("afterbegin", html);
+  const component = document.querySelector(`#${id}`);
+  return component;
+};
+
+describe("multi select", () => {
+  let component, container;
+
+  beforeEach(() => {
+    component = createComponent();
+    container = component.querySelector("#multi-select-select-all");
+    checkboxes = component.querySelectorAll("tbody input[type=checkbox]");
+
+    new MOJFrontend.MultiSelect({
+      container: container,
+      checkboxes: checkboxes,
+    });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    component, container, (checkboxes = undefined);
+  });
+
+  test("initialises component", () => {
+    const selectToggle = queryByRole(container, "checkbox");
+
+    expect(selectToggle).not.toBeNull();
+    expect(selectToggle).toHaveAccessibleName("Select all");
+  });
+
+  test("toggles all checkboxes", async () => {
+    const selectToggle = queryByRole(container, "checkbox");
+    const tbody = component.querySelector("tbody");
+    let checkboxes = queryAllByRole(tbody, "checkbox");
+
+    expect(checkboxes.length).toBe(2);
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).not.toBeChecked();
+    });
+
+    await user.click(selectToggle);
+    expect(selectToggle).toBeChecked();
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).toBeChecked();
+    });
+
+    await user.click(selectToggle);
+    expect(selectToggle).not.toBeChecked();
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+
+  test("deselcting single checkbox unchecks all checkbox", async () => {
+    const selectToggle = queryByRole(container, "checkbox");
+    const tbody = component.querySelector("tbody");
+    const checkboxes = queryAllByRole(tbody, "checkbox");
+
+    expect(checkboxes.length).toBe(2);
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).not.toBeChecked();
+    });
+
+    await user.click(selectToggle);
+    expect(selectToggle).toBeChecked();
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).toBeChecked();
+    });
+
+    await user.click(checkboxes[0]);
+    expect(checkboxes[0]).not.toBeChecked();
+    expect(selectToggle).not.toBeChecked();
+
+    await user.click(checkboxes[0]);
+    expect(checkboxes[0]).toBeChecked();
+    expect(selectToggle).toBeChecked();
+  });
+});

package/moj/components/search-toggle/search-toggle.js

@@ -27,7 +27,7 @@ MOJFrontend.SearchToggle = function (options) {
 MOJFrontend.SearchToggle.prototype.showMenu = function () {
   this.toggleButton.attr("aria-expanded", "true");
   this.container.removeClass("moj-js-hidden");
-  this.container.find("input").first().focus();
+  this.container.find("input").first().get(0).focus();
 };
 
 MOJFrontend.SearchToggle.prototype.hideMenu = function () {

package/moj/components/search-toggle/search-toggle.spec.js

@@ -0,0 +1,134 @@
+const { queryByRole } = require("@testing-library/dom");
+const { userEvent } = require("@testing-library/user-event");
+const { configureAxe } = require("jest-axe");
+const $ = require("jquery");
+
+require("./search-toggle.js");
+
+const user = userEvent.setup();
+const axe = configureAxe({
+  rules: {
+    // disable landmark rules when testing isolated components.
+    region: { enabled: false },
+  },
+});
+
+const createComponent = () => {
+  html = `
+<div class="moj-search-toggle" data-module="moj-search-toggle" data-moj-search-toggle-text="Find case">
+        <div class="moj-search-toggle__toggle"></div>
+        <div class="moj-search-toggle__search">
+
+          <div class="moj-search moj-search--ondark moj-search--toggle moj-js-hidden">
+
+            <form action="" method="get">
+
+              <div class="govuk-form-group">
+                <label class="govuk-label moj-search__label govuk-visually-hidden" for="search2">
+                  Search
+                </label>
+
+                <div id="search2-hint" class="govuk-hint moj-search__hint ">
+                  Enter case number, for example 123456
+                </div>
+
+                <input class="govuk-input moj-search__input " id="search2" name="search2" type="search" aria-describedby="search2-hint">
+
+              </div>
+
+              <button type="submit" class="govuk-button moj-search__button " data-module="govuk-button">
+                Search
+              </button>
+
+            </form>
+          </div>
+
+        </div>
+      </div>
+<a href="#">link</a>`;
+  document.body.insertAdjacentHTML("afterbegin", html);
+  const component = document.querySelector(".moj-search-toggle");
+  return component;
+};
+
+describe("search toggle", () => {
+  let component, buttonContainer, searchContainer;
+
+  beforeEach(() => {
+    component = createComponent();
+    searchContainer = component.querySelector(".moj-search");
+    buttonContainer = component.querySelector(".moj-search-toggle__toggle");
+
+    new MOJFrontend.SearchToggle({
+      toggleButton: {
+        container: $(buttonContainer),
+        text: component.getAttribute("data-moj-search-toggle-text"),
+      },
+      search: {
+        container: $(searchContainer),
+      },
+    });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("initialises component", () => {
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton).not.toBeNull();
+    expect(toggleButton).toHaveTextContent("Find case");
+    expect(toggleButton).toHaveAttribute("aria-haspopup", "true");
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+
+    expect(searchContainer).toHaveClass("moj-js-hidden");
+  });
+
+  test("clicking button toggles search container", async () => {
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    await user.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+    expect(searchContainer).not.toHaveClass("moj-js-hidden");
+
+    const input = queryByRole(searchContainer, "searchbox");
+    expect(input).toHaveFocus();
+
+    await user.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(searchContainer).toHaveClass("moj-js-hidden");
+    expect(toggleButton).toHaveFocus();
+  });
+
+  test("clicking outside closes the search container", async () => {
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    await user.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+    expect(searchContainer).not.toHaveClass("moj-js-hidden");
+
+    await user.click(document.body);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(searchContainer).toHaveClass("moj-js-hidden");
+  });
+
+  test("tabbing closes the search container", async () => {
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    await user.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+    expect(searchContainer).not.toHaveClass("moj-js-hidden");
+
+    await user.tab();
+    await user.tab();
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(searchContainer).toHaveClass("moj-js-hidden");
+  });
+});