@ministryofjustice/frontend 3.3.1 → 3.5.0

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

@@ -1,124 +1,167 @@
-MOJFrontend.SortableTable = function(params) {
-	this.table = $(params.table);
-
-	if (this.table.data('moj-search-toggle-initialised')) {
-		return
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MOJFrontend = factory());
+})(this, (function () { 'use strict';
+
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 	}
 
-	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);
+	var _global_window_jQuery = window.jQuery;
+
+	var sortableTable$1;
+	var hasRequiredSortableTable;
+
+	function requireSortableTable () {
+		if (hasRequiredSortableTable) return sortableTable$1;
+		hasRequiredSortableTable = 1;
+		const $ = _global_window_jQuery;
+
+		function SortableTable(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.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.prototype.initialiseSortedColumn = function () {
-  var rows = this.getTableRowsArray();
-
-  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);
-    })
-};
-
-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]);
+		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';
+		};
+
+		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);
+		    }
+		  }
+		};
+
+		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);
+		};
+
+		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);
+		};
+
+		SortableTable.prototype.initialiseSortedColumn = function () {
+		  const rows = this.getTableRowsArray();
+
+		  this.table
+		    .find('th')
+		    .filter('[aria-sort="ascending"], [aria-sort="descending"]')
+		    .first()
+		    .each((index, el) => {
+		      const sortDirection = $(el).attr('aria-sort');
+		      const columnNumber = $(el).find('button').attr('data-index');
+		      const sortedRows = this.sort(rows, columnNumber, sortDirection);
+		      this.addRows(sortedRows);
+		    });
+		};
+
+		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);
+		};
+
+		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);
+		};
+
+		SortableTable.prototype.removeButtonStates = function () {
+		  this.table.find('thead th').attr('aria-sort', 'none');
+		};
+
+		SortableTable.prototype.addRows = function (rows) {
+		  for (let i = 0; i < rows.length; i++) {
+		    this.body.append(rows[i]);
+		  }
+		};
+
+		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
+		};
+
+		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
+		};
+
+		SortableTable.prototype.getCellValue = function (cell) {
+		  const val = cell.attr('data-sort-value') || cell.html();
+
+		  const valAsNumber = Number(val);
+		  return isNaN(valAsNumber) ? val : valAsNumber
+		};
+
+		sortableTable$1 = { SortableTable };
+		return sortableTable$1;
 	}
-    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
-};
+
+	var sortableTableExports = requireSortableTable();
+	var sortableTable = /*@__PURE__*/getDefaultExportFromCjs(sortableTableExports);
+
+	return sortableTable;
+
+}));

package/moj/components/sub-navigation/_sub-navigation.scss

@@ -6,49 +6,45 @@
   margin-bottom: govuk-spacing(7);
 }
 
-
 .moj-sub-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;
 
   @include govuk-media-query($from: tablet) {
-    box-shadow: inset 0 -1px 0 $govuk-border-colour;
     width: 100%;
+    box-shadow: inset 0 -1px 0 $govuk-border-colour;
   }
 }
 
-
 .moj-sub-navigation__item {
   @include govuk-font(19);
-  box-shadow: inset 0 -1px 0 $govuk-border-colour;
   display: block;
   margin-top: -1px;
+  box-shadow: inset 0 -1px 0 $govuk-border-colour;
 
   &:last-child {
     box-shadow: none;
   }
 
   @include govuk-media-query($from: tablet) {
-    box-shadow: none;
     display: inline-block;
-    margin-right: govuk-spacing(4);
     margin-top: 0;
+    margin-right: govuk-spacing(4);
+    box-shadow: none;
   }
-
 }
 
-
 .moj-sub-navigation__link {
   @include govuk-link-common;
   @include govuk-link-style-default;
   display: block;
+  position: relative;
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: govuk-spacing(3);
   text-decoration: none;
-  position: relative;
 
   @include govuk-media-query($from: tablet) {
     padding-left: 0;
@@ -64,54 +60,54 @@
   }
 
   &:focus {
-    color: govuk-colour("black"); // Focus colour on yellow should really be black.
     position: relative; // Ensure focus sits above everything else.
+    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: 100%;
-    position: absolute; bottom: 0; left: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
     width: 5px;
+    height: 100%;
+    background-color: govuk-colour("black");
 
     @include govuk-media-query($from: tablet) {
-      height: 5px;
       width: 100%;
+      height: 5px;
     }
   }
-
 }
 
-
 .moj-sub-navigation__link[aria-current="page"] {
-  color: $govuk-link-active-colour;
   position: relative;
+  color: $govuk-link-active-colour;
   text-decoration: none;
 
-  &:before {
-    background-color: $govuk-link-colour;
+  &::before {
     content: "";
     display: block;
-    height: 100%;
-    position: absolute; bottom: 0; left: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
     width: 5px;
+    height: 100%;
+    background-color: $govuk-link-colour;
 
     @include govuk-media-query($from: tablet) {
-      height: 5px;
       width: 100%;
+      height: 5px;
     }
-
   }
 
   &:hover {
     color: $govuk-link-hover-colour;
   }
 
-  &:focus:before {
+  &:focus::before {
     background-color: govuk-colour("black");
   }
-
 }

package/moj/components/tag/_tag.scss

@@ -4,52 +4,51 @@
 
 .moj-tag {
   border: 2px solid $govuk-brand-colour;
-  background-color: $govuk-brand-colour;
   color: govuk-colour("white");
+  background-color: $govuk-brand-colour;
 
   &--purple {
     border: 2px solid govuk-colour("purple");
-    background-color: govuk-colour("purple");
     color: govuk-colour("white");
+    background-color: govuk-colour("purple");
   }
 
   &--bright-purple {
     border: 2px solid govuk-colour("bright-purple");
-    background-color: govuk-colour("bright-purple");
     color: govuk-colour("white");
+    background-color: govuk-colour("bright-purple");
   }
 
   &--red,
   &--error {
     border: 2px solid govuk-colour("red");
-    background-color: govuk-colour("red");
     color: govuk-colour("white");
+    background-color: govuk-colour("red");
   }
 
   &--green,
   &--success {
     border: 2px solid govuk-colour("green");
-    background-color: govuk-colour("green");
     color: govuk-colour("white");
+    background-color: govuk-colour("green");
   }
 
   &--blue,
   &--information {
     border: 2px solid govuk-colour("blue");
-    background-color: govuk-colour("blue");
     color: govuk-colour("white");
+    background-color: govuk-colour("blue");
   }
 
   &--black {
     border: 2px solid govuk-colour("black");
-    background-color: govuk-colour("black");
     color: govuk-colour("white");
+    background-color: govuk-colour("black");
   }
 
   &--grey {
     border: 2px solid govuk-colour("dark-grey");
-    background-color: govuk-colour("dark-grey");
     color: govuk-colour("white");
+    background-color: govuk-colour("dark-grey");
   }
-
 }

package/moj/components/task-list/_task-list.scss

@@ -3,10 +3,10 @@
    ========================================================================== */
 
 .moj-task-list {
-  list-style-type: none;
-  padding-left: 0;
   margin-top: 0;
   margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
   @include govuk-media-query($from: tablet) {
     min-width: 550px;
   }
@@ -14,7 +14,7 @@
 
 .moj-task-list__section {
   display: table;
-  @include govuk-font($size:24, $weight: bold);
+  @include govuk-font($size: 24, $weight: bold);
 }
 
 .moj-task-list__section-number {
@@ -29,18 +29,19 @@
 .moj-task-list__items {
   @include govuk-font($size: 19);
   @include govuk-responsive-margin(9, "bottom");
-  list-style: none;
   padding-left: 0;
+  list-style: none;
   @include govuk-media-query($from: tablet) {
     padding-left: govuk-spacing(6);
   }
 }
 
 .moj-task-list__item {
-  border-bottom: 1px solid $govuk-border-colour;
+  // stylelint-disable-next-line declaration-no-important
   margin-bottom: 0 !important;
   padding-top: govuk-spacing(2);
   padding-bottom: govuk-spacing(2);
+  border-bottom: 1px solid $govuk-border-colour;
   @include govuk-clearfix;
 }
 
@@ -51,8 +52,8 @@
 .moj-task-list__task-name {
   display: block;
   @include govuk-media-query($from: 450px) {
-    float: left;
     width: 75%;
+    float: left;
   }
 }
 
@@ -61,8 +62,8 @@
   margin-bottom: govuk-spacing(1);
 
   @include govuk-media-query($from: 450px) {
-    float: right;
     margin-top: 0;
     margin-bottom: 0;
+    float: right;
   }
 }

package/moj/components/ticket-panel/_ticket-panel.scss

@@ -11,10 +11,12 @@
     @include govuk-media-query($from: desktop) {
       display: flex;
       flex-wrap: nowrap;
+    }
+  }
 
-      & > * + * {
-        margin-left: govuk-spacing(3);
-      }
+  &--inline > * + * {
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(3);
     }
   }
 
@@ -25,30 +27,36 @@
   &__content {
     display: block;
     position: relative;
-    background-color: govuk-colour("light-grey");
-    padding: govuk-spacing(4);
     margin-bottom: govuk-spacing(3);
-    flex-grow: 1;
+    padding: govuk-spacing(4);
     border-left: 4px solid transparent;
+    background-color: govuk-colour("light-grey");
+    flex-grow: 1;
 
     &--grey {
       border-left-color: $govuk-border-colour;
     }
+
     &--blue {
       border-left-color: govuk-colour("blue");
     }
+
     &--red {
       border-left-color: govuk-colour("red");
     }
+
     &--yellow {
       border-left-color: govuk-colour("yellow");
     }
+
     &--green {
       border-left-color: govuk-colour("green");
     }
+
     &--purple {
       border-left-color: govuk-colour("purple");
     }
+
     &--orange {
       border-left-color: govuk-colour("orange");
     }