@ministryofjustice/frontend 3.3.1 → 3.4.0

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

@@ -1,20 +1,15 @@
-const { queryByRole } = require("@testing-library/dom");
-const { userEvent } = require("@testing-library/user-event");
-const { configureAxe } = require("jest-axe");
-const $ = require("jquery");
+/* eslint-disable no-new */
 
-require("./search-toggle.js");
+const { queryByRole } = require('@testing-library/dom')
+const { userEvent } = require('@testing-library/user-event')
+const $ = require('jquery')
 
-const user = userEvent.setup();
-const axe = configureAxe({
-  rules: {
-    // disable landmark rules when testing isolated components.
-    region: { enabled: false },
-  },
-});
+require('./search-toggle.js')
+
+const user = userEvent.setup()
 
 const createComponent = () => {
-  html = `
+  const 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">
@@ -45,90 +40,90 @@ const createComponent = () => {
 
         </div>
       </div>
-<a href="#">link</a>`;
-  document.body.insertAdjacentHTML("afterbegin", html);
-  const component = document.querySelector(".moj-search-toggle");
-  return component;
-};
+<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;
+describe('search toggle', () => {
+  let component, buttonContainer, searchContainer
 
   beforeEach(() => {
-    component = createComponent();
-    searchContainer = component.querySelector(".moj-search");
-    buttonContainer = component.querySelector(".moj-search-toggle__toggle");
+    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"),
+        text: component.getAttribute('data-moj-search-toggle-text')
       },
       search: {
-        container: $(searchContainer),
-      },
-    });
-  });
+        container: $(searchContainer)
+      }
+    })
+  })
 
   afterEach(() => {
-    document.body.innerHTML = "";
-  });
+    document.body.innerHTML = ''
+  })
 
-  test("initialises component", () => {
-    const toggleButton = queryByRole(buttonContainer, "button");
+  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(toggleButton).toBeInTheDocument()
+    expect(toggleButton).toHaveTextContent('Find case')
+    expect(toggleButton).toHaveAttribute('aria-haspopup', 'true')
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
 
-    expect(searchContainer).toHaveClass("moj-js-hidden");
-  });
+    expect(searchContainer).toHaveClass('moj-js-hidden')
+  })
 
-  test("clicking button toggles search container", async () => {
-    const toggleButton = queryByRole(buttonContainer, "button");
+  test('clicking button toggles search container', async () => {
+    const toggleButton = queryByRole(buttonContainer, 'button')
 
-    await user.click(toggleButton);
+    await user.click(toggleButton)
 
-    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
-    expect(searchContainer).not.toHaveClass("moj-js-hidden");
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true')
+    expect(searchContainer).not.toHaveClass('moj-js-hidden')
 
-    const input = queryByRole(searchContainer, "searchbox");
-    expect(input).toHaveFocus();
+    const input = queryByRole(searchContainer, 'searchbox')
+    expect(input).toHaveFocus()
 
-    await user.click(toggleButton);
+    await user.click(toggleButton)
 
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(searchContainer).toHaveClass("moj-js-hidden");
-    expect(toggleButton).toHaveFocus();
-  });
+    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");
+  test('clicking outside closes the search container', async () => {
+    const toggleButton = queryByRole(buttonContainer, 'button')
 
-    await user.click(toggleButton);
+    await user.click(toggleButton)
 
-    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
-    expect(searchContainer).not.toHaveClass("moj-js-hidden");
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true')
+    expect(searchContainer).not.toHaveClass('moj-js-hidden')
 
-    await user.click(document.body);
+    await user.click(document.body)
 
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(searchContainer).toHaveClass("moj-js-hidden");
-  });
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+    expect(searchContainer).toHaveClass('moj-js-hidden')
+  })
 
-  test("tabbing closes the search container", async () => {
-    const toggleButton = queryByRole(buttonContainer, "button");
+  test('tabbing closes the search container', async () => {
+    const toggleButton = queryByRole(buttonContainer, 'button')
 
-    await user.click(toggleButton);
+    await user.click(toggleButton)
 
-    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
-    expect(searchContainer).not.toHaveClass("moj-js-hidden");
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'true')
+    expect(searchContainer).not.toHaveClass('moj-js-hidden')
 
-    await user.tab();
-    await user.tab();
+    await user.tab()
+    await user.tab()
 
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(searchContainer).toHaveClass("moj-js-hidden");
-  });
-});
+    expect(toggleButton).toHaveAttribute('aria-expanded', 'false')
+    expect(searchContainer).toHaveClass('moj-js-hidden')
+  })
+})

package/moj/components/side-navigation/_side-navigation.scss

@@ -14,27 +14,25 @@
     display: block;
     padding: govuk-spacing(4) 0 0;
   }
-
 }
 
 .moj-side-navigation__title {
   @include govuk-font($size: 19);
-  color: govuk-colour("dark-grey");
-  font-weight: normal;
   margin: 0;
   padding: govuk-spacing(2);
   padding-left: govuk-spacing(2) + 4px;
+  color: govuk-colour("dark-grey");
+  font-weight: normal;
 
   @include govuk-media-query($until: tablet) {
     display: none;
   }
-
 }
 
 .moj-side-navigation__list {
-  list-style: none;
   margin: 0;
   padding: 0;
+  list-style: none;
 
   @include govuk-media-query($until: tablet) {
     display: flex;
@@ -48,7 +46,6 @@
 }
 
 .moj-side-navigation__item {
-
   @include govuk-media-query($until: tablet) {
     display: flex;
   }
@@ -56,24 +53,22 @@
   a,
   a:link,
   a:visited {
-    background-color: inherit;
-    color: $govuk-link-colour;
     display: block;
+    color: $govuk-link-colour;
+    background-color: inherit;
     text-decoration: none;
 
     @include govuk-media-query($until: tablet) {
-      border-bottom: 4px solid transparent;
       padding: govuk-spacing(3);
       padding-bottom: govuk-spacing(3) - 4px; // Compensate for 4px border
+      border-bottom: 4px solid transparent;
     }
 
     @include govuk-media-query($from: tablet) {
-      background-color: inherit;
-      border-left: 4px solid transparent;
       padding: govuk-spacing(2);
+      border-left: 4px solid transparent;
+      background-color: inherit;
     }
-
-
   }
 
   a:hover {
@@ -81,16 +76,14 @@
   }
 
   a:focus {
+    position: relative;
+    border-color: $govuk-focus-text-colour;
     color: $govuk-focus-text-colour;
     background-color: $govuk-focus-colour;
-    border-color: $govuk-focus-text-colour;
-    position: relative;
   }
-
 }
 
 .moj-side-navigation__item--active {
-
   a:link,
   a:visited {
     border-color: $govuk-link-colour;
@@ -99,14 +92,14 @@
   }
 
   a:hover {
-    color: $govuk-link-hover-colour;
     border-color: $govuk-link-hover-colour;
+    color: $govuk-link-hover-colour;
   }
 
   a:focus {
+    border-color: $govuk-focus-text-colour;
     color: $govuk-focus-text-colour;
     background-color: $govuk-focus-colour;
-    border-color: $govuk-focus-text-colour;
   }
 
   @include govuk-media-query($from: tablet) {
@@ -120,6 +113,4 @@
       background-color: $govuk-focus-colour;
     }
   }
-
-
 }

package/moj/components/sortable-table/_sortable-table.scss

@@ -1,66 +1,68 @@
 [aria-sort] button,
 [aria-sort] button:hover {
-  background-color: transparent;
+  position: relative;
+  margin: 0;
+  padding: 0 10px 0 0;
   border-width: 0;
+  color: #005ea5;
+  background-color: transparent;
   -webkit-box-shadow: 0 0 0 0;
   -moz-box-shadow: 0 0 0 0;
   box-shadow: 0 0 0 0;
-  color: #005ea5;
-  cursor: pointer;
   font-family: inherit;
   font-size: inherit;
+  font-size: 1em;
   font-weight: inherit;
-  padding: 0 10px 0 0;
-  position: relative;
   text-align: inherit;
-  font-size: 1em;
-  margin: 0;
+  cursor: pointer;
 }
 
 [aria-sort] button:focus {
-  background-color: $govuk-focus-colour;
-  color: $govuk-focus-text-colour;
-  box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
   outline: none;
+  color: $govuk-focus-text-colour;
+  background-color: $govuk-focus-colour;
+  box-shadow:
+    0 -2px $govuk-focus-colour,
+    0 4px $govuk-focus-text-colour;
 }
 
 [aria-sort]:first-child button {
   right: auto;
 }
 
-[aria-sort] button:before {
+[aria-sort] button::before {
   content: " \25bc";
   position: absolute;
-  right: -1px;
   top: 9px;
+  right: -1px;
   font-size: 0.5em;
 }
 
-[aria-sort] button:after {
+[aria-sort] button::after {
   content: " \25b2";
   position: absolute;
-  right: -1px;
   top: 1px;
+  right: -1px;
   font-size: 0.5em;
 }
 
-[aria-sort="ascending"] button:before,
-[aria-sort="descending"] button:before {
+[aria-sort="ascending"] button::before,
+[aria-sort="descending"] button::before {
   content: none;
 }
 
-[aria-sort="ascending"] button:after {
+[aria-sort="ascending"] button::after {
   content: " \25b2";
-  font-size: .8em;
   position: absolute;
-  right: -5px;
   top: 2px;
+  right: -5px;
+  font-size: 0.8em;
 }
 
-[aria-sort="descending"] button:after {
+[aria-sort="descending"] button::after {
   content: " \25bc";
-  font-size: .8em;
   position: absolute;
-  right: -5px;
   top: 2px;
-}
+  right: -5px;
+  font-size: 0.8em;
+}

package/moj/components/sortable-table/sortable-table.js

@@ -1,124 +1,146 @@
-MOJFrontend.SortableTable = function(params) {
-	this.table = $(params.table);
-
-	if (this.table.data('moj-search-toggle-initialised')) {
-		return
-	}
-
-	this.table.data('moj-search-toggle-initialised', true);
-
-	this.setupOptions(params);
-	this.body = this.table.find('tbody');
-	this.createHeadingButtons();
-	this.createStatusBox();
-  this.initialiseSortedColumn();
-	this.table.on('click', 'th button', $.proxy(this, 'onSortButtonClick'));
-};
-
-MOJFrontend.SortableTable.prototype.setupOptions = function(params) {
-	params = params || {};
-	this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)';
-	this.ascendingText = params.ascendingText || 'ascending';
-	this.descendingText = params.descendingText || 'descending';
-};
-
-MOJFrontend.SortableTable.prototype.createHeadingButtons = function() {
-	var headings = this.table.find('thead th');
-	var heading;
-	for(var i = 0; i < headings.length; i++) {
-		heading = $(headings[i]);
-		if(heading.attr('aria-sort')) {
-			this.createHeadingButton(heading, i);
-		}
-	}
-};
-
-MOJFrontend.SortableTable.prototype.createHeadingButton = function(heading, i) {
-	var text = heading.text();
-	var button = $('<button type="button" data-index="'+i+'">'+text+'</button>');
-	heading.text('');
-	heading.append(button);
-};
-
-MOJFrontend.SortableTable.prototype.createStatusBox = function() {
-	this.status = $('<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />');
-	this.table.parent().append(this.status);
-};
+MOJFrontend.SortableTable = function (params) {
+  this.table = $(params.table)
+
+  if (this.table.data('moj-search-toggle-initialised')) {
+    return
+  }
+
+  this.table.data('moj-search-toggle-initialised', true)
+
+  this.setupOptions(params)
+  this.body = this.table.find('tbody')
+  this.createHeadingButtons()
+  this.createStatusBox()
+  this.initialiseSortedColumn()
+  this.table.on('click', 'th button', $.proxy(this, 'onSortButtonClick'))
+}
+
+MOJFrontend.SortableTable.prototype.setupOptions = function (params) {
+  params = params || {}
+  this.statusMessage = params.statusMessage || 'Sort by %heading% (%direction%)'
+  this.ascendingText = params.ascendingText || 'ascending'
+  this.descendingText = params.descendingText || 'descending'
+}
+
+MOJFrontend.SortableTable.prototype.createHeadingButtons = function () {
+  const headings = this.table.find('thead th')
+  let heading
+  for (let i = 0; i < headings.length; i++) {
+    heading = $(headings[i])
+    if (heading.attr('aria-sort')) {
+      this.createHeadingButton(heading, i)
+    }
+  }
+}
+
+MOJFrontend.SortableTable.prototype.createHeadingButton = function (
+  heading,
+  i
+) {
+  const text = heading.text()
+  const button = $(`<button type="button" data-index="${i}">${text}</button>`)
+  heading.text('')
+  heading.append(button)
+}
+
+MOJFrontend.SortableTable.prototype.createStatusBox = function () {
+  this.status = $(
+    '<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />'
+  )
+  this.table.parent().append(this.status)
+}
 
 MOJFrontend.SortableTable.prototype.initialiseSortedColumn = function () {
-  var rows = this.getTableRowsArray();
+  const rows = this.getTableRowsArray()
 
-  this.table.find("th")
+  this.table
+    .find('th')
     .filter('[aria-sort="ascending"], [aria-sort="descending"]')
     .first()
     .each((index, el) => {
-      var sortDirection = $(el).attr('aria-sort');
-      var columnNumber = $(el).find('button').attr('data-index');
-      var sortedRows = this.sort(rows, columnNumber, sortDirection);
-      this.addRows(sortedRows);
+      const sortDirection = $(el).attr('aria-sort')
+      const columnNumber = $(el).find('button').attr('data-index')
+      const sortedRows = this.sort(rows, columnNumber, sortDirection)
+      this.addRows(sortedRows)
     })
-};
-
-MOJFrontend.SortableTable.prototype.onSortButtonClick = function(e) {
-	var columnNumber = e.currentTarget.getAttribute('data-index');
-	var sortDirection = $(e.currentTarget).parent().attr('aria-sort');
-	var newSortDirection;
-	if(sortDirection === 'none' || sortDirection === 'descending') {
-		newSortDirection = 'ascending';
-	} else {
-		newSortDirection = 'descending';
-	}
-	var rows = this.getTableRowsArray();
-	var sortedRows = this.sort(rows, columnNumber, newSortDirection);
-	this.addRows(sortedRows);
-	this.removeButtonStates();
-	this.updateButtonState($(e.currentTarget), newSortDirection);
-};
-
-MOJFrontend.SortableTable.prototype.updateButtonState = function(button, direction) {
-	button.parent().attr('aria-sort', direction);
-	var message = this.statusMessage;
-	message = message.replace(/%heading%/, button.text());
-	message = message.replace(/%direction%/, this[direction+'Text']);
-	this.status.text(message);
-};
-
-MOJFrontend.SortableTable.prototype.removeButtonStates = function() {
-	this.table.find('thead th').attr('aria-sort', 'none');
-};
-
-MOJFrontend.SortableTable.prototype.addRows = function(rows) {
-	for(var i = 0; i < rows.length; i++) {
-		this.body.append(rows[i]);
-	}
-};
-
-MOJFrontend.SortableTable.prototype.getTableRowsArray = function() {
-	var rows = [];
-	var trs = this.body.find('tr');
-	for (var i = 0; i < trs.length; i++) {
-		rows.push(trs[i]);
-	}
-    return rows;
-};
-
-MOJFrontend.SortableTable.prototype.sort = function(rows, columnNumber, sortDirection) {
-	var newRows = rows.sort((function(rowA, rowB) {
-		var tdA = $(rowA).find('td,th').eq(columnNumber);
-		var tdB = $(rowB).find('td,th').eq(columnNumber);
-		
-		var valueA = sortDirection === 'ascending' ? this.getCellValue(tdA) : this.getCellValue(tdB);
-		var valueB = sortDirection === 'ascending' ? this.getCellValue(tdB) : this.getCellValue(tdA);
-
-		if (typeof valueA === 'string' || typeof valueB === 'string') return valueA.toString().localeCompare(valueB.toString());
-		return valueA-valueB;
-	}.bind(this)));
-	return newRows;
-};
-
-MOJFrontend.SortableTable.prototype.getCellValue = function(cell) {
-	var val = cell.attr('data-sort-value') || cell.html();
-
-	var floatVal = parseFloat(val)
-	return isNaN(floatVal) ? val : floatVal
-};
+}
+
+MOJFrontend.SortableTable.prototype.onSortButtonClick = function (e) {
+  const columnNumber = e.currentTarget.getAttribute('data-index')
+  const sortDirection = $(e.currentTarget).parent().attr('aria-sort')
+  let newSortDirection
+  if (sortDirection === 'none' || sortDirection === 'descending') {
+    newSortDirection = 'ascending'
+  } else {
+    newSortDirection = 'descending'
+  }
+  const rows = this.getTableRowsArray()
+  const sortedRows = this.sort(rows, columnNumber, newSortDirection)
+  this.addRows(sortedRows)
+  this.removeButtonStates()
+  this.updateButtonState($(e.currentTarget), newSortDirection)
+}
+
+MOJFrontend.SortableTable.prototype.updateButtonState = function (
+  button,
+  direction
+) {
+  button.parent().attr('aria-sort', direction)
+  let message = this.statusMessage
+  message = message.replace(/%heading%/, button.text())
+  message = message.replace(/%direction%/, this[`${direction}Text`])
+  this.status.text(message)
+}
+
+MOJFrontend.SortableTable.prototype.removeButtonStates = function () {
+  this.table.find('thead th').attr('aria-sort', 'none')
+}
+
+MOJFrontend.SortableTable.prototype.addRows = function (rows) {
+  for (let i = 0; i < rows.length; i++) {
+    this.body.append(rows[i])
+  }
+}
+
+MOJFrontend.SortableTable.prototype.getTableRowsArray = function () {
+  const rows = []
+  const trs = this.body.find('tr')
+  for (let i = 0; i < trs.length; i++) {
+    rows.push(trs[i])
+  }
+  return rows
+}
+
+MOJFrontend.SortableTable.prototype.sort = function (
+  rows,
+  columnNumber,
+  sortDirection
+) {
+  const newRows = rows.sort(
+    function (rowA, rowB) {
+      const tdA = $(rowA).find('td,th').eq(columnNumber)
+      const tdB = $(rowB).find('td,th').eq(columnNumber)
+
+      const valueA =
+        sortDirection === 'ascending'
+          ? this.getCellValue(tdA)
+          : this.getCellValue(tdB)
+      const valueB =
+        sortDirection === 'ascending'
+          ? this.getCellValue(tdB)
+          : this.getCellValue(tdA)
+
+      if (typeof valueA === 'string' || typeof valueB === 'string')
+        return valueA.toString().localeCompare(valueB.toString())
+      return valueA - valueB
+    }.bind(this)
+  )
+  return newRows
+}
+
+MOJFrontend.SortableTable.prototype.getCellValue = function (cell) {
+  const val = cell.attr('data-sort-value') || cell.html()
+
+  const valAsNumber = Number(val)
+  return isNaN(valAsNumber) ? val : valAsNumber
+}