@ministryofjustice/frontend 3.3.0 → 3.4.0

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

@@ -0,0 +1,128 @@
+/* eslint-disable no-new */
+
+const { queryByRole, queryAllByRole } = require('@testing-library/dom')
+const { userEvent } = require('@testing-library/user-event')
+
+require('./multi-select.js')
+
+const user = userEvent.setup()
+
+const createComponent = (id = 'multi-select', idprefix = false) => {
+  const 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
+  let container
+  let checkboxes
+
+  beforeEach(() => {
+    component = createComponent()
+    container = component.querySelector('#multi-select-select-all')
+    checkboxes = component.querySelectorAll('tbody input[type=checkbox]')
+
+    new MOJFrontend.MultiSelect({
+      container,
+      checkboxes
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('initialises component', () => {
+    const selectToggle = queryByRole(container, 'checkbox')
+
+    expect(selectToggle).toBeInTheDocument()
+    expect(selectToggle).toHaveAccessibleName('Select all')
+  })
+
+  test('toggles all checkboxes', async () => {
+    const selectToggle = queryByRole(container, 'checkbox')
+    const tbody = component.querySelector('tbody')
+    const checkboxes = queryAllByRole(tbody, 'checkbox')
+
+    expect(checkboxes).toHaveLength(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).toHaveLength(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/notification-badge/_notification-badge.scss

@@ -3,15 +3,15 @@
    ========================================================================== */
 
 .moj-notification-badge {
-    @include govuk-font($size: 16, $weight: "bold");
-    color: govuk-colour("white");
-    display: inline-block;
-    min-width: 15px;
-    padding: 5px 8px 2px 8px;
-    border-radius: 75px;
-    background-color: govuk-colour("red");
-    font-size: 16px;
-    font-weight: 600;
-    text-align: center;
-    white-space: nowrap;
-}
+  @include govuk-font($size: 16, $weight: "bold");
+  display: inline-block;
+  min-width: 15px;
+  padding: 5px 8px 2px;
+  border-radius: 75px;
+  color: govuk-colour("white");
+  background-color: govuk-colour("red");
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}

package/moj/components/organisation-switcher/_organisation-switcher.scss

@@ -13,8 +13,8 @@
 .moj-organisation-nav__title {
   @include govuk-font($size: 19, $weight: "bold");
   @include govuk-media-query($from: tablet) {
-    float: left;
     width: 75%;
+    float: left;
   }
 }
 

package/moj/components/page-header-actions/_page-header-actions.scss

@@ -1,11 +1,11 @@
 .moj-page-header-actions {
   display: flex;
+  min-height: govuk-spacing(7); // Match button height
+  margin-bottom: govuk-spacing(7);
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: govuk-spacing(2);
-  margin-bottom: govuk-spacing(7);
-  min-height: govuk-spacing(7); // Match button height
 }
 
 .moj-page-header-actions__title {
@@ -18,6 +18,7 @@
   .moj-button-group {
     margin-bottom: 0;
   }
+
   .govuk-button {
     margin-bottom: 0;
   }

package/moj/components/pagination/_pagination.scss

@@ -2,10 +2,10 @@
   // text-align: center;
 
   @include govuk-media-query($from: desktop) {
+    margin-right: - govuk-spacing(1);
 
     // Alignment adjustments
     margin-left: - govuk-spacing(1);
-    margin-right: - govuk-spacing(1);
 
     // Hide whitespace between elements
     font-size: 0;
@@ -13,19 +13,18 @@
     // Trick to remove the need for floats
     text-align: justify;
 
-    &:after {
-      content: '';
+    &::after {
+      content: "";
       display: inline-block;
       width: 100%;
     }
   }
-
 }
 
 .moj-pagination__list {
-  list-style: none;
   margin: 0;
   padding: 0;
+  list-style: none;
   @include govuk-media-query($from: desktop) {
     display: inline-block;
     margin-bottom: 0;
@@ -36,6 +35,7 @@
 .moj-pagination__results {
   @include govuk-font(19);
   margin-top: 0;
+  padding: govuk-spacing(1);
   @include govuk-media-query($from: desktop) {
     display: inline-block;
     margin-bottom: 0;
@@ -50,49 +50,49 @@
 
 .moj-pagination__item--active,
 .moj-pagination__item--dots {
-  font-weight: bold;
   height: 25px;
   padding: govuk-spacing(1) govuk-spacing(2);
+  font-weight: bold;
   text-align: center;
 }
 
 .moj-pagination__item--dots {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
-.moj-pagination__item--prev .moj-pagination__link:before,
-.moj-pagination__item--next .moj-pagination__link:after {
-    display: inline-block;
-    height: 10px;
-    width: 10px;
-    border-style: solid;
-    color: govuk-colour("black");
-    background: transparent;
-    -webkit-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-    content: "";
+.moj-pagination__item--prev .moj-pagination__link::before,
+.moj-pagination__item--next .moj-pagination__link::after {
+  content: "";
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  border-style: solid;
+  color: govuk-colour("black");
+  background: transparent;
 }
 
-.moj-pagination__item--prev .moj-pagination__link:before {
-    border-width: 3px 0 0 3px;
-    margin-right: govuk-spacing(1);
+.moj-pagination__item--prev .moj-pagination__link::before {
+  margin-right: govuk-spacing(1);
+  border-width: 3px 0 0 3px;
 }
 
-.moj-pagination__item--next .moj-pagination__link:after {
-    border-width: 0 3px 3px 0;
-    margin-left: govuk-spacing(1);
+.moj-pagination__item--next .moj-pagination__link::after {
+  margin-left: govuk-spacing(1);
+  border-width: 0 3px 3px 0;
 }
 
 .moj-pagination__link {
   @include govuk-link-common;
   @include govuk-link-style-default;
   display: block;
+  min-width: 25px;
   padding: govuk-spacing(1);
   text-align: center;
   text-decoration: none;
-  min-width: 25px;
 
   &:link,
   &:visited {
@@ -106,9 +106,4 @@
   &:focus {
     color: govuk-colour("black");
   }
-
-}
-
-.moj-pagination__results {
-  padding: govuk-spacing(1);
 }

package/moj/components/password-reveal/_password-reveal.scss

@@ -12,5 +12,4 @@
   &__button {
     width: 80px;
   }
-
-}
+}

package/moj/components/password-reveal/password-reveal.js

@@ -1,32 +1,33 @@
-MOJFrontend.PasswordReveal = function(element) {
-  this.el = element;
-  var $el = $(this.el)
+MOJFrontend.PasswordReveal = function (element) {
+  this.el = element
+  const $el = $(this.el)
 
   if ($el.data('moj-password-reveal-initialised')) {
     return
   }
 
-  $el.data('moj-password-reveal-initialised', true);
-  $el.attr('spellcheck', 'false');
+  $el.data('moj-password-reveal-initialised', true)
+  $el.attr('spellcheck', 'false')
 
-  $el.wrap('<div class="moj-password-reveal"></div>');
-  this.container = $(this.el).parent();
-  this.createButton();
-};
+  $el.wrap('<div class="moj-password-reveal"></div>')
+  this.container = $(this.el).parent()
+  this.createButton()
+}
 
-MOJFrontend.PasswordReveal.prototype.createButton = function() {
-  this.button = $('<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>');
-  this.container.append(this.button);
-  this.button.on('click', $.proxy(this, 'onButtonClick'));
-};
+MOJFrontend.PasswordReveal.prototype.createButton = function () {
+  this.button = $(
+    '<button type="button" class="govuk-button govuk-button--secondary moj-password-reveal__button">Show <span class="govuk-visually-hidden">password</span></button>'
+  )
+  this.container.append(this.button)
+  this.button.on('click', $.proxy(this, 'onButtonClick'))
+}
 
-MOJFrontend.PasswordReveal.prototype.onButtonClick = function() {
+MOJFrontend.PasswordReveal.prototype.onButtonClick = function () {
   if (this.el.type === 'password') {
-    this.el.type = 'text';
-    this.button.html('Hide <span class="govuk-visually-hidden">password</span>');
+    this.el.type = 'text'
+    this.button.html('Hide <span class="govuk-visually-hidden">password</span>')
   } else {
-    this.el.type = 'password';
-    this.button.html('Show <span class="govuk-visually-hidden">password</span>');
+    this.el.type = 'password'
+    this.button.html('Show <span class="govuk-visually-hidden">password</span>')
   }
-};
-
+}

package/moj/components/password-reveal/password-reveal.spec.js

@@ -1,55 +1,57 @@
-const { getByDisplayValue, getByText } = require("@testing-library/dom");
-const { userEvent } = require("@testing-library/user-event");
-const { configureAxe } = require("jest-axe");
+/* eslint-disable no-new */
 
-require("./password-reveal.js");
+const { getByDisplayValue, getByText } = require('@testing-library/dom')
+const { userEvent } = require('@testing-library/user-event')
+const { configureAxe } = require('jest-axe')
 
-const user = userEvent.setup();
+require('./password-reveal.js')
+
+const user = userEvent.setup()
 const axe = configureAxe({
   rules: {
     // disable landmark rules when testing isolated components.
-    region: { enabled: false },
-  },
-});
+    region: { enabled: false }
+  }
+})
 
-describe("Password reveal", () => {
-  let container;
+describe('Password reveal', () => {
+  let container
 
   beforeEach(() => {
-    const input = document.createElement("input");
-    input.type = "password";
-    input.value = "password";
+    const input = document.createElement('input')
+    input.type = 'password'
+    input.value = 'password'
 
-    new MOJFrontend.PasswordReveal(input);
+    new MOJFrontend.PasswordReveal(input)
 
-    container = input.parentNode;
-  });
+    container = input.parentNode
+  })
 
-  test("initialises container", () => {
-    expect(container).toHaveClass("moj-password-reveal");
-    expect(container).toContainElement(getByText(container, "Show"));
-  });
+  test('initialises container', () => {
+    expect(container).toHaveClass('moj-password-reveal')
+    expect(container).toContainElement(getByText(container, 'Show'))
+  })
 
-  test("toggle reveal", async () => {
-    const input = getByDisplayValue(container, "password");
-    const button = getByText(container, "Show");
+  test('toggle reveal', async () => {
+    const input = getByDisplayValue(container, 'password')
+    const button = getByText(container, 'Show')
 
-    await user.click(button);
+    await user.click(button)
 
-    expect(input).toHaveAttribute("type", "text");
-    expect(button).toHaveTextContent("Hide");
+    expect(input).toHaveAttribute('type', 'text')
+    expect(button).toHaveTextContent('Hide')
 
-    await user.click(button);
+    await user.click(button)
 
-    expect(input).toHaveAttribute("type", "password");
-    expect(button).toHaveTextContent("Show");
-  });
+    expect(input).toHaveAttribute('type', 'password')
+    expect(button).toHaveTextContent('Show')
+  })
 
-  test("accessibility", async () => {
-    const button = getByText(container, "Show");
+  test('accessibility', async () => {
+    const button = getByText(container, 'Show')
 
-    expect(await axe(document.body)).toHaveNoViolations();
-    await user.click(button);
-    expect(await axe(document.body)).toHaveNoViolations();
-  });
-});
+    expect(await axe(document.body)).toHaveNoViolations()
+    await user.click(button)
+    expect(await axe(document.body)).toHaveNoViolations()
+  })
+})

package/moj/components/primary-navigation/_primary-navigation.scss

@@ -11,12 +11,11 @@
   font-size: 0; // Hide whitespace between elements
   text-align: justify; // Trick to remove the need for floats
 
-  &:after {
-    content: '';
+  &::after {
+    content: "";
     display: inline-block;
     width: 100%;
   }
-
 }
 
 .moj-primary-navigation__nav {
@@ -25,36 +24,34 @@
     display: inline-block;
     vertical-align: middle;
   }
-
 }
 
 .moj-primary-navigation__list {
-  font-size: 0; // Removes white space when using inline-block on child element.
-  list-style: none;
   margin: 0;
   padding: 0;
+  font-size: 0; // Removes white space when using inline-block on child element.
+  list-style: none;
 }
 
 .moj-primary-navigation__item {
   @include govuk-font($size: 19);
   display: inline-block;
-  margin-right: govuk-spacing(4);
   margin-top: 0;
+  margin-right: govuk-spacing(4);
 
   &:last-child {
     margin-right: 0;
   }
-
 }
 
 .moj-primary-navigation__link {
   @include govuk-link-common;
   @include govuk-link-style-default;
   display: block;
-  padding-bottom: 15px;
   padding-top: 15px;
-  text-decoration: none;
+  padding-bottom: 15px;
   font-weight: bold;
+  text-decoration: none;
 
   &:link,
   &:visited {
@@ -66,63 +63,63 @@
   }
 
   &:focus {
-    color: govuk-colour("black"); // Focus colour on yellow should really be black.
     position: relative; // Ensure focus sits above everything else.
     z-index: 1;
+    color: govuk-colour("black"); // Focus colour on yellow should really be black.
     box-shadow: none;
   }
 
-  &:focus:before {
-    background-color: govuk-colour("black");
+  &:focus::before {
     content: "";
     display: block;
-    height: 5px;
-    position: absolute; bottom: 0; left: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
     width: 100%;
+    height: 5px;
+    background-color: govuk-colour("black");
   }
 
   &[aria-current] {
-    color: $govuk-link-colour;
     position: relative;
-    text-decoration: none;
+    color: $govuk-link-colour;
     font-weight: bold;
-    &:before {
-      background-color: $govuk-link-colour;
+    text-decoration: none;
+
+    &::before {
       content: "";
       display: block;
-      height: 5px;
-      position: absolute; bottom: 0; left: 0;
+      position: absolute;
+      bottom: 0;
+      left: 0;
       width: 100%;
+      height: 5px;
+      background-color: $govuk-link-colour;
     }
 
     &:hover {
       color: $govuk-link-hover-colour;
 
-      &:before {
+      &::before {
         background-color: $govuk-link-hover-colour;
       }
     }
 
     &:focus {
-      color: govuk-colour("black"); // Focus colour on yellow should really be black.
       position: relative; // Ensure focus sits above everything else.
       border: none;
+      color: govuk-colour("black"); // Focus colour on yellow should really be black.
 
-      &:before {
+      &::before {
         background-color: govuk-colour("black");
       }
-
     }
-
   }
-
 }
 
 .moj-primary-navigation__search {
-
   @include govuk-media-query($from: desktop) {
     display: inline-block;
     vertical-align: middle;
   }
-
 }