@ministryofjustice/frontend 3.3.1 → 3.5.0

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

@@ -1,53 +1,83 @@
-MOJFrontend.SearchToggle = function (options) {
-  this.options = options;
-  this.container = $(this.options.search.container);
-  this.toggleButtonContainer = $(this.options.toggleButton.container);
-
-  if (this.container.data("moj-search-toggle-initialised")) {
-    return;
-  }
-
-  this.container.data("moj-search-toggle-initialised", true);
-
-  const svg =
-    '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
-
-  this.toggleButton = $(
-    '<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' +
-      this.options.toggleButton.text +
-      svg +
-      "</button>"
-  );
-  this.toggleButton.on("click", $.proxy(this, "onToggleButtonClick"));
-  this.toggleButtonContainer.append(this.toggleButton);
-  $(document).on("click", this.onDocumentClick.bind(this));
-  $(document).on("focusin", this.onDocumentClick.bind(this));
-};
-
-MOJFrontend.SearchToggle.prototype.showMenu = function () {
-  this.toggleButton.attr("aria-expanded", "true");
-  this.container.removeClass("moj-js-hidden");
-  this.container.find("input").first().get(0).focus();
-};
-
-MOJFrontend.SearchToggle.prototype.hideMenu = function () {
-  this.container.addClass("moj-js-hidden");
-  this.toggleButton.attr("aria-expanded", "false");
-};
-
-MOJFrontend.SearchToggle.prototype.onToggleButtonClick = function () {
-  if (this.toggleButton.attr("aria-expanded") == "false") {
-    this.showMenu();
-  } else {
-    this.hideMenu();
-  }
-};
-
-MOJFrontend.SearchToggle.prototype.onDocumentClick = function (e) {
-  if (
-    !$.contains(this.toggleButtonContainer[0], e.target) &&
-    !$.contains(this.container[0], e.target)
-  ) {
-    this.hideMenu();
-  }
-};
+(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;
+	}
+
+	var _global_window_jQuery = window.jQuery;
+
+	var searchToggle$1;
+	var hasRequiredSearchToggle;
+
+	function requireSearchToggle () {
+		if (hasRequiredSearchToggle) return searchToggle$1;
+		hasRequiredSearchToggle = 1;
+		const $ = _global_window_jQuery;
+
+		function SearchToggle(options) {
+		  this.options = options;
+		  this.container = $(this.options.search.container);
+		  this.toggleButtonContainer = $(this.options.toggleButton.container);
+
+		  if (this.container.data('moj-search-toggle-initialised')) {
+		    return
+		  }
+
+		  this.container.data('moj-search-toggle-initialised', true);
+
+		  const svg =
+		    '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
+
+		  this.toggleButton = $(
+		    `<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">
+      ${this.options.toggleButton.text} ${svg}
+    </button>`
+		  );
+		  this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
+		  this.toggleButtonContainer.append(this.toggleButton);
+		  $(document).on('click', this.onDocumentClick.bind(this));
+		  $(document).on('focusin', this.onDocumentClick.bind(this));
+		}
+
+		SearchToggle.prototype.showMenu = function () {
+		  this.toggleButton.attr('aria-expanded', 'true');
+		  this.container.removeClass('moj-js-hidden');
+		  this.container.find('input').first().get(0).focus();
+		};
+
+		SearchToggle.prototype.hideMenu = function () {
+		  this.container.addClass('moj-js-hidden');
+		  this.toggleButton.attr('aria-expanded', 'false');
+		};
+
+		SearchToggle.prototype.onToggleButtonClick = function () {
+		  if (this.toggleButton.attr('aria-expanded') === 'false') {
+		    this.showMenu();
+		  } else {
+		    this.hideMenu();
+		  }
+		};
+
+		SearchToggle.prototype.onDocumentClick = function (e) {
+		  if (
+		    !$.contains(this.toggleButtonContainer[0], e.target) &&
+		    !$.contains(this.container[0], e.target)
+		  ) {
+		    this.hideMenu();
+		  }
+		};
+
+		searchToggle$1 = { SearchToggle };
+		return searchToggle$1;
+	}
+
+	var searchToggleExports = requireSearchToggle();
+	var searchToggle = /*@__PURE__*/getDefaultExportFromCjs(searchToggleExports);
+
+	return searchToggle;
+
+}));

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

@@ -1,24 +1,25 @@
 .moj-search-toggle__button {
   @include govuk-font($size: 19, $weight: bold);
-  background-color: transparent;
-  border: none;
-  color: $govuk-link-colour;
-  cursor: pointer;
   display: inline-block;
   padding-top: 12px;
+  padding-right: 0;
   padding-bottom: 13px;
   padding-left: 0;
-  padding-right: 0;
+  border: none;
+  color: $govuk-link-colour;
+  background-color: transparent;
+  cursor: pointer;
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
+  appearance: none;
 
   &__icon {
     display: inline-block;
+    width: 20px;
     height: 20px;
     margin-left: govuk-spacing(2);
+    fill: currentcolor;
     vertical-align: middle;
-    width: 20px;
-    fill: currentColor;
 
     @media screen and (forced-colors: active) {
       fill: windowText;
@@ -26,12 +27,14 @@
   }
 
   &: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;
     position: relative;
     z-index: 1;
+    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;
   }
 }
 
@@ -39,14 +42,17 @@
   padding: govuk-spacing(3);
 
   @include govuk-media-query($until: desktop) {
-    padding-left: 0 !important;
+    // stylelint-disable-next-line declaration-no-important
     padding-right: 0 !important;
+    // stylelint-disable-next-line declaration-no-important
+    padding-left: 0 !important;
   }
 }
 
 // JS enabled
 .js-enabled .moj-search--toggle {
   @include govuk-media-query($until: desktop) {
+    // stylelint-disable-next-line declaration-no-important
     padding-top: 0 !important;
   }
 }
@@ -59,11 +65,11 @@
   background-color: govuk-colour("light-grey");
 
   @include govuk-media-query($from: desktop) {
-    max-width: 450px;
     position: absolute;
-    right: -15px;
+    z-index: 10;
     top: 50px; // Height of nav bar
+    right: -15px;
     width: 450px;
-    z-index: 10;
+    max-width: 450px;
   }
 }

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;
+}