@ministryofjustice/frontend 3.6.1 → 3.6.3

package/moj/components/multi-file-upload/template.njk

@@ -1,4 +1,4 @@
-<div class="moj-multi-file-upload {{- ' ' + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-multi-file-upload {{- " " + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="moj-multi-file__uploaded-files {% if params.uploadedFiles.items.length == 0 %}moj-hidden{% endif%}">
     <h2 class="govuk-heading-m">{{ params.uploadedFiles.heading.html | safe if params.uploadedFiles.heading.html else params.uploadedFiles.heading.text }}</h2>
     <div class="govuk-summary-list moj-multi-file-upload__list">

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

@@ -5,7 +5,7 @@
 })(this, (function (exports) { 'use strict';
 
   function MultiSelect(options) {
-    this.container = window.jQuery(options.container);
+    this.container = $(options.container);
 
     if (this.container.data('moj-multi-select-initialised')) {
       return
@@ -19,12 +19,12 @@
       allId = `${idPrefix}checkboxes-all`;
     }
 
-    this.toggle = window.jQuery(this.getToggleHtml(allId));
+    this.toggle = $(this.getToggleHtml(allId));
     this.toggleButton = this.toggle.find('input');
-    this.toggleButton.on('click', window.jQuery.proxy(this, 'onButtonClick'));
+    this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
     this.container.append(this.toggle);
-    this.checkboxes = window.jQuery(options.checkboxes);
-    this.checkboxes.on('click', window.jQuery.proxy(this, 'onCheckboxClick'));
+    this.checkboxes = $(options.checkboxes);
+    this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
     this.checked = options.checked || false;
   }
 
@@ -52,7 +52,7 @@
 
   MultiSelect.prototype.checkAll = function () {
     this.checkboxes.each(
-      window.jQuery.proxy(function (index, el) {
+      $.proxy(function (index, el) {
         el.checked = true;
       }, this)
     );
@@ -61,7 +61,7 @@
 
   MultiSelect.prototype.uncheckAll = function () {
     this.checkboxes.each(
-      window.jQuery.proxy(function (index, el) {
+      $.proxy(function (index, el) {
         el.checked = false;
       }, this)
     );

package/moj/components/multi-select/multi-select.mjs

@@ -1,5 +1,5 @@
 function MultiSelect(options) {
-  this.container = window.jQuery(options.container);
+  this.container = $(options.container);
 
   if (this.container.data('moj-multi-select-initialised')) {
     return
@@ -13,12 +13,12 @@ function MultiSelect(options) {
     allId = `${idPrefix}checkboxes-all`;
   }
 
-  this.toggle = window.jQuery(this.getToggleHtml(allId));
+  this.toggle = $(this.getToggleHtml(allId));
   this.toggleButton = this.toggle.find('input');
-  this.toggleButton.on('click', window.jQuery.proxy(this, 'onButtonClick'));
+  this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
   this.container.append(this.toggle);
-  this.checkboxes = window.jQuery(options.checkboxes);
-  this.checkboxes.on('click', window.jQuery.proxy(this, 'onCheckboxClick'));
+  this.checkboxes = $(options.checkboxes);
+  this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
   this.checked = options.checked || false;
 }
 
@@ -46,7 +46,7 @@ MultiSelect.prototype.onButtonClick = function (e) {
 
 MultiSelect.prototype.checkAll = function () {
   this.checkboxes.each(
-    window.jQuery.proxy(function (index, el) {
+    $.proxy(function (index, el) {
       el.checked = true;
     }, this)
   );
@@ -55,7 +55,7 @@ MultiSelect.prototype.checkAll = function () {
 
 MultiSelect.prototype.uncheckAll = function () {
   this.checkboxes.each(
-    window.jQuery.proxy(function (index, el) {
+    $.proxy(function (index, el) {
       el.checked = false;
     }, this)
   );

package/moj/components/notification-badge/template.njk

@@ -1,5 +1,5 @@
 {%- if params.text.length %}
-<span id="{{ params.id | default('notifications') }}" class="moj-notification-badge {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<span id="{{ params.id | default("notifications") }}" class="moj-notification-badge {{- " " + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{- params.text | safe -}}
 </span>
 {% endif -%}

package/moj/components/organisation-switcher/template.njk

@@ -1,11 +1,11 @@
-<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="moj-organisation-nav {{- ' ' + params.classes if params.classes }}" aria-label="{{ params.label | default('Organisation switcher') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="moj-organisation-nav {{- " " + params.classes if params.classes }}" aria-label="{{ params.label | default("Organisation switcher") }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="moj-organisation-nav__title">
     {{- params.html | safe if params.html else params.text -}}
   </div>
 
   {% if params.link %}
-    {%- set linkText = params.link.text | default('Change organisation') -%}
-    <a {%- if params.link.id %} id="{{ params.link.id }}"{% endif %} href="{{ params.link.href }}" class="moj-organisation-nav__link {{- ' ' + params.link.classes if params.link.classes }}" {%- for attribute, value in params.link.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {%- set linkText = params.link.text | default("Change organisation") -%}
+    <a {%- if params.link.id %} id="{{ params.link.id }}"{% endif %} href="{{ params.link.href }}" class="moj-organisation-nav__link {{- " " + params.link.classes if params.link.classes }}" {%- for attribute, value in params.link.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
       {{- linkText -}}
     </a>
   {% endif %}

package/moj/components/page-header-actions/template.njk

@@ -2,7 +2,7 @@
 {% from "govuk/macros/attributes.njk" import govukAttributes %}
 {%- from "govuk/components/button/macro.njk" import govukButton %}
 
-<div class="moj-page-header-actions {{- ' ' + params.classes if params.classes}}" {{- govukAttributes(params.attributes) -}}>
+<div class="moj-page-header-actions {{- " " + params.classes if params.classes}}" {{- govukAttributes(params.attributes) -}}>
     <div class="moj-page-header-actions__title">
         <h{{ params.heading.level | default(1) }} class="{{ params.heading.classes | default("govuk-heading-xl") }}">
         {{- params.heading.html | safe if params.heading.html else params.heading.text -}}

package/moj/components/pagination/template.njk

@@ -1,4 +1,4 @@
-<nav class="moj-pagination {{- ' ' + params.classes if params.classes}}" aria-label="Pagination navigation">
+<nav class="moj-pagination {{- " " + params.classes if params.classes}}" aria-label="Pagination navigation">
 
   <ul class="moj-pagination__list">
     {%- if params.previous %}
@@ -8,7 +8,7 @@
     {% endif -%}
 
     {%- for item in params.items %}
-      {%- if item.type == 'dots' %}
+      {%- if item.type == "dots" %}
         <li class="moj-pagination__item moj-pagination__item--dots">…</li>
       {% else %}
         {%- if item.selected %}

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

@@ -6,7 +6,7 @@
 
   function PasswordReveal(element) {
     this.el = element;
-    const $el = window.jQuery(this.el);
+    const $el = $(this.el);
 
     if ($el.data('moj-password-reveal-initialised')) {
       return
@@ -16,16 +16,16 @@
     $el.attr('spellcheck', 'false');
 
     $el.wrap('<div class="moj-password-reveal"></div>');
-    this.container = window.jQuery(this.el).parent();
+    this.container = $(this.el).parent();
     this.createButton();
   }
 
   PasswordReveal.prototype.createButton = function () {
-    this.button = window.jQuery(
+    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', window.jQuery.proxy(this, 'onButtonClick'));
+    this.button.on('click', $.proxy(this, 'onButtonClick'));
   };
 
   PasswordReveal.prototype.onButtonClick = function () {

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

@@ -1,6 +1,6 @@
 function PasswordReveal(element) {
   this.el = element;
-  const $el = window.jQuery(this.el);
+  const $el = $(this.el);
 
   if ($el.data('moj-password-reveal-initialised')) {
     return
@@ -10,16 +10,16 @@ function PasswordReveal(element) {
   $el.attr('spellcheck', 'false');
 
   $el.wrap('<div class="moj-password-reveal"></div>');
-  this.container = window.jQuery(this.el).parent();
+  this.container = $(this.el).parent();
   this.createButton();
 }
 
 PasswordReveal.prototype.createButton = function () {
-  this.button = window.jQuery(
+  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', window.jQuery.proxy(this, 'onButtonClick'));
+  this.button.on('click', $.proxy(this, 'onButtonClick'));
 };
 
 PasswordReveal.prototype.onButtonClick = function () {

package/moj/components/primary-navigation/template.njk

@@ -1,10 +1,10 @@
-<div class="moj-primary-navigation {{- ' ' + params.containerClasses if params.containerClasses}}">
+<div class="moj-primary-navigation {{- " " + params.containerClasses if params.containerClasses}}">
 
   <div class="moj-primary-navigation__container">
 
     <div class="moj-primary-navigation__nav">
 
-      <nav class="moj-primary-navigation {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+      <nav class="moj-primary-navigation {{- " " + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
         <ul class="moj-primary-navigation__list">
 

package/moj/components/progress-bar/template.njk

@@ -1,9 +1,9 @@
-<div id="{{ params.id | default('progress') }}" class="moj-progress-bar {{- ' ' + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div id="{{ params.id | default("progress") }}" class="moj-progress-bar {{- " " + params.classes if params.classes}}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <ol class="moj-progress-bar__list">
     {%- for item in params.items %}
-    <li id="{{ item.id | default('progress-item-' + loop.index) }}" class="moj-progress-bar__item {{- ' ' + item.classes if item.classes }}" {{- ' aria-current="step"' | safe if item.active }} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-      <span class="moj-progress-bar__icon {{- ' moj-progress-bar__icon--complete' if item.complete }}"></span>
-      <span class="moj-progress-bar__label {{- ' ' + item.label.classes if item.label.classes }}">
+    <li id="{{ item.id | default("progress-item-" + loop.index) }}" class="moj-progress-bar__item {{- " " + item.classes if item.classes }}" {{- ' aria-current="step"' | safe if item.active }} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+      <span class="moj-progress-bar__icon {{- " moj-progress-bar__icon--complete" if item.complete }}"></span>
+      <span class="moj-progress-bar__label {{- " " + item.label.classes if item.label.classes }}">
         {{- item.label.html | safe if item.label.html else item.label.text -}}
       </span>
     </li>

package/moj/components/rich-text-editor/rich-text-editor.js

@@ -18,7 +18,7 @@
       numbers: true
     };
     this.textarea = this.options.textarea;
-    this.container = window.jQuery(this.textarea).parent();
+    this.container = $(this.textarea).parent();
 
     if (this.container.data('moj-rich-text-editor-initialised')) {
       return
@@ -38,13 +38,13 @@
     this.container.on(
       'click',
       '.moj-rich-text-editor__toolbar-button',
-      window.jQuery.proxy(this, 'onButtonClick')
+      $.proxy(this, 'onButtonClick')
     );
     this.container
       .find('.moj-rich-text-editor__content')
-      .on('input', window.jQuery.proxy(this, 'onEditorInput'));
-    this.container.find('label').on('click', window.jQuery.proxy(this, 'onLabelClick'));
-    this.toolbar.on('keydown', window.jQuery.proxy(this, 'onToolbarKeydown'));
+      .on('input', $.proxy(this, 'onEditorInput'));
+    this.container.find('label').on('click', $.proxy(this, 'onLabelClick'));
+    this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'));
   }
 
   RichTextEditor.prototype.onToolbarKeydown = function (e) {
@@ -139,7 +139,7 @@
   };
 
   RichTextEditor.prototype.onButtonClick = function (e) {
-    document.execCommand(window.jQuery(e.currentTarget).data('command'), false, null);
+    document.execCommand($(e.currentTarget).data('command'), false, null);
   };
 
   RichTextEditor.prototype.getContent = function () {

package/moj/components/rich-text-editor/rich-text-editor.mjs

@@ -12,7 +12,7 @@ function RichTextEditor(options) {
     numbers: true
   };
   this.textarea = this.options.textarea;
-  this.container = window.jQuery(this.textarea).parent();
+  this.container = $(this.textarea).parent();
 
   if (this.container.data('moj-rich-text-editor-initialised')) {
     return
@@ -32,13 +32,13 @@ function RichTextEditor(options) {
   this.container.on(
     'click',
     '.moj-rich-text-editor__toolbar-button',
-    window.jQuery.proxy(this, 'onButtonClick')
+    $.proxy(this, 'onButtonClick')
   );
   this.container
     .find('.moj-rich-text-editor__content')
-    .on('input', window.jQuery.proxy(this, 'onEditorInput'));
-  this.container.find('label').on('click', window.jQuery.proxy(this, 'onLabelClick'));
-  this.toolbar.on('keydown', window.jQuery.proxy(this, 'onToolbarKeydown'));
+    .on('input', $.proxy(this, 'onEditorInput'));
+  this.container.find('label').on('click', $.proxy(this, 'onLabelClick'));
+  this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'));
 }
 
 RichTextEditor.prototype.onToolbarKeydown = function (e) {
@@ -133,7 +133,7 @@ RichTextEditor.prototype.configureToolbar = function () {
 };
 
 RichTextEditor.prototype.onButtonClick = function (e) {
-  document.execCommand(window.jQuery(e.currentTarget).data('command'), false, null);
+  document.execCommand($(e.currentTarget).data('command'), false, null);
 };
 
 RichTextEditor.prototype.getContent = function () {

package/moj/components/search/template.njk

@@ -1,10 +1,10 @@
 {%- from "govuk/components/input/macro.njk" import govukInput %}
 {%- from "govuk/components/button/macro.njk" import govukButton %}
 
-<div class="moj-search {{- ' ' + params.classes if params.classes}}">
+<div class="moj-search {{- " " + params.classes if params.classes}}">
 
   {%- if params.hint %}
-    {% set hintClasses = 'moj-search__hint ' + (params.hint.classes if params.hint.classes) %}
+    {% set hintClasses = "moj-search__hint " + (params.hint.classes if params.hint.classes) %}
     {% set hintText = params.hint.text %}
     {% set hint = { classes: hintClasses, text: hintText } %}
   {% endif -%}
@@ -13,21 +13,21 @@
     {% set method = params.method %}
   {% endif -%}
 
-  <form action="{{ params.action }}" method="{{ params.method | default('get') }}">
+  <form action="{{ params.action }}" method="{{ params.method | default("get") }}">
     {{ govukInput({
-      classes: 'moj-search__input ' + (params.input.classes if params.input.classes),
+      classes: "moj-search__input " + (params.input.classes if params.input.classes),
       label: {
-        classes: 'moj-search__label ' + (params.label.classes if params.label.classes),
+        classes: "moj-search__label " + (params.label.classes if params.label.classes),
         text: params.label.text
       },
       hint: hint,
       id: params.input.id,
       name: params.input.name,
-      type: 'search'
+      type: "search"
     }) }}
 
     {{ govukButton({
-      classes: 'moj-search__button ' + (params.button.classes if params.button.classes),
+      classes: "moj-search__button " + (params.button.classes if params.button.classes),
       text: params.button.text
     }) }}
   </form>

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

@@ -6,8 +6,8 @@
 
   function SearchToggle(options) {
     this.options = options;
-    this.container = window.jQuery(this.options.search.container);
-    this.toggleButtonContainer = window.jQuery(this.options.toggleButton.container);
+    this.container = $(this.options.search.container);
+    this.toggleButtonContainer = $(this.options.toggleButton.container);
 
     if (this.container.data('moj-search-toggle-initialised')) {
       return
@@ -18,15 +18,15 @@
     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 = window.jQuery(
+    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', window.jQuery.proxy(this, 'onToggleButtonClick'));
+    this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
     this.toggleButtonContainer.append(this.toggleButton);
-    window.jQuery(document).on('click', this.onDocumentClick.bind(this));
-    window.jQuery(document).on('focusin', this.onDocumentClick.bind(this));
+    $(document).on('click', this.onDocumentClick.bind(this));
+    $(document).on('focusin', this.onDocumentClick.bind(this));
   }
 
   SearchToggle.prototype.showMenu = function () {
@@ -50,8 +50,8 @@
 
   SearchToggle.prototype.onDocumentClick = function (e) {
     if (
-      !window.jQuery.contains(this.toggleButtonContainer[0], e.target) &&
-      !window.jQuery.contains(this.container[0], e.target)
+      !$.contains(this.toggleButtonContainer[0], e.target) &&
+      !$.contains(this.container[0], e.target)
     ) {
       this.hideMenu();
     }

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

@@ -1,7 +1,7 @@
 function SearchToggle(options) {
   this.options = options;
-  this.container = window.jQuery(this.options.search.container);
-  this.toggleButtonContainer = window.jQuery(this.options.toggleButton.container);
+  this.container = $(this.options.search.container);
+  this.toggleButtonContainer = $(this.options.toggleButton.container);
 
   if (this.container.data('moj-search-toggle-initialised')) {
     return
@@ -12,15 +12,15 @@ function SearchToggle(options) {
   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 = window.jQuery(
+  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', window.jQuery.proxy(this, 'onToggleButtonClick'));
+  this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
   this.toggleButtonContainer.append(this.toggleButton);
-  window.jQuery(document).on('click', this.onDocumentClick.bind(this));
-  window.jQuery(document).on('focusin', this.onDocumentClick.bind(this));
+  $(document).on('click', this.onDocumentClick.bind(this));
+  $(document).on('focusin', this.onDocumentClick.bind(this));
 }
 
 SearchToggle.prototype.showMenu = function () {
@@ -44,8 +44,8 @@ SearchToggle.prototype.onToggleButtonClick = function () {
 
 SearchToggle.prototype.onDocumentClick = function (e) {
   if (
-    !window.jQuery.contains(this.toggleButtonContainer[0], e.target) &&
-    !window.jQuery.contains(this.container[0], e.target)
+    !$.contains(this.toggleButtonContainer[0], e.target) &&
+    !$.contains(this.container[0], e.target)
   ) {
     this.hideMenu();
   }

package/moj/components/side-navigation/template.njk

@@ -1,7 +1,7 @@
-<nav class="moj-side-navigation {{- ' ' + params.classes if params.classes }}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<nav class="moj-side-navigation {{- " " + params.classes if params.classes }}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.sections %}
     {%- for section in params.sections %}
-      <h{{ section.heading.headingLevel | default(4) }} class="moj-side-navigation__title {{- ' ' + section.heading.classes if section.heading.classes }}"{% for attribute, value in section.heading.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+      <h{{ section.heading.headingLevel | default(4) }} class="moj-side-navigation__title {{- " " + section.heading.classes if section.heading.classes }}"{% for attribute, value in section.heading.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
         {{- section.heading.html | safe if section.heading.html else section.heading.text -}}
       </h{{ section.heading.headingLevel | default(4) }}>
       <ul class="moj-side-navigation__list">
@@ -25,4 +25,4 @@
       {% endfor -%}
     </ul>
   {% endif -%}
-</nav>
+</nav>

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

@@ -5,7 +5,7 @@
 })(this, (function (exports) { 'use strict';
 
   function SortableTable(params) {
-    this.table = window.jQuery(params.table);
+    this.table = $(params.table);
 
     if (this.table.data('moj-search-toggle-initialised')) {
       return
@@ -18,7 +18,7 @@
     this.createHeadingButtons();
     this.createStatusBox();
     this.initialiseSortedColumn();
-    this.table.on('click', 'th button', window.jQuery.proxy(this, 'onSortButtonClick'));
+    this.table.on('click', 'th button', $.proxy(this, 'onSortButtonClick'));
   }
 
   SortableTable.prototype.setupOptions = function (params) {
@@ -32,7 +32,7 @@
     const headings = this.table.find('thead th');
     let heading;
     for (let i = 0; i < headings.length; i++) {
-      heading = window.jQuery(headings[i]);
+      heading = $(headings[i]);
       if (heading.attr('aria-sort')) {
         this.createHeadingButton(heading, i);
       }
@@ -41,13 +41,13 @@
 
   SortableTable.prototype.createHeadingButton = function (heading, i) {
     const text = heading.text();
-    const button = window.jQuery(`<button type="button" data-index="${i}">${text}</button>`);
+    const button = $(`<button type="button" data-index="${i}">${text}</button>`);
     heading.text('');
     heading.append(button);
   };
 
   SortableTable.prototype.createStatusBox = function () {
-    this.status = window.jQuery(
+    this.status = $(
       '<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />'
     );
     this.table.parent().append(this.status);
@@ -61,8 +61,8 @@
       .filter('[aria-sort="ascending"], [aria-sort="descending"]')
       .first()
       .each((index, el) => {
-        const sortDirection = window.jQuery(el).attr('aria-sort');
-        const columnNumber = window.jQuery(el).find('button').attr('data-index');
+        const sortDirection = $(el).attr('aria-sort');
+        const columnNumber = $(el).find('button').attr('data-index');
         const sortedRows = this.sort(rows, columnNumber, sortDirection);
         this.addRows(sortedRows);
       });
@@ -70,7 +70,7 @@
 
   SortableTable.prototype.onSortButtonClick = function (e) {
     const columnNumber = e.currentTarget.getAttribute('data-index');
-    const sortDirection = window.jQuery(e.currentTarget).parent().attr('aria-sort');
+    const sortDirection = $(e.currentTarget).parent().attr('aria-sort');
     let newSortDirection;
     if (sortDirection === 'none' || sortDirection === 'descending') {
       newSortDirection = 'ascending';
@@ -81,7 +81,7 @@
     const sortedRows = this.sort(rows, columnNumber, newSortDirection);
     this.addRows(sortedRows);
     this.removeButtonStates();
-    this.updateButtonState(window.jQuery(e.currentTarget), newSortDirection);
+    this.updateButtonState($(e.currentTarget), newSortDirection);
   };
 
   SortableTable.prototype.updateButtonState = function (button, direction) {
@@ -114,8 +114,8 @@
   SortableTable.prototype.sort = function (rows, columnNumber, sortDirection) {
     const newRows = rows.sort(
       function (rowA, rowB) {
-        const tdA = window.jQuery(rowA).find('td,th').eq(columnNumber);
-        const tdB = window.jQuery(rowB).find('td,th').eq(columnNumber);
+        const tdA = $(rowA).find('td,th').eq(columnNumber);
+        const tdB = $(rowB).find('td,th').eq(columnNumber);
 
         const valueA =
           sortDirection === 'ascending'

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

@@ -1,5 +1,5 @@
 function SortableTable(params) {
-  this.table = window.jQuery(params.table);
+  this.table = $(params.table);
 
   if (this.table.data('moj-search-toggle-initialised')) {
     return
@@ -12,7 +12,7 @@ function SortableTable(params) {
   this.createHeadingButtons();
   this.createStatusBox();
   this.initialiseSortedColumn();
-  this.table.on('click', 'th button', window.jQuery.proxy(this, 'onSortButtonClick'));
+  this.table.on('click', 'th button', $.proxy(this, 'onSortButtonClick'));
 }
 
 SortableTable.prototype.setupOptions = function (params) {
@@ -26,7 +26,7 @@ SortableTable.prototype.createHeadingButtons = function () {
   const headings = this.table.find('thead th');
   let heading;
   for (let i = 0; i < headings.length; i++) {
-    heading = window.jQuery(headings[i]);
+    heading = $(headings[i]);
     if (heading.attr('aria-sort')) {
       this.createHeadingButton(heading, i);
     }
@@ -35,13 +35,13 @@ SortableTable.prototype.createHeadingButtons = function () {
 
 SortableTable.prototype.createHeadingButton = function (heading, i) {
   const text = heading.text();
-  const button = window.jQuery(`<button type="button" data-index="${i}">${text}</button>`);
+  const button = $(`<button type="button" data-index="${i}">${text}</button>`);
   heading.text('');
   heading.append(button);
 };
 
 SortableTable.prototype.createStatusBox = function () {
-  this.status = window.jQuery(
+  this.status = $(
     '<div aria-live="polite" role="status" aria-atomic="true" class="govuk-visually-hidden" />'
   );
   this.table.parent().append(this.status);
@@ -55,8 +55,8 @@ SortableTable.prototype.initialiseSortedColumn = function () {
     .filter('[aria-sort="ascending"], [aria-sort="descending"]')
     .first()
     .each((index, el) => {
-      const sortDirection = window.jQuery(el).attr('aria-sort');
-      const columnNumber = window.jQuery(el).find('button').attr('data-index');
+      const sortDirection = $(el).attr('aria-sort');
+      const columnNumber = $(el).find('button').attr('data-index');
       const sortedRows = this.sort(rows, columnNumber, sortDirection);
       this.addRows(sortedRows);
     });
@@ -64,7 +64,7 @@ SortableTable.prototype.initialiseSortedColumn = function () {
 
 SortableTable.prototype.onSortButtonClick = function (e) {
   const columnNumber = e.currentTarget.getAttribute('data-index');
-  const sortDirection = window.jQuery(e.currentTarget).parent().attr('aria-sort');
+  const sortDirection = $(e.currentTarget).parent().attr('aria-sort');
   let newSortDirection;
   if (sortDirection === 'none' || sortDirection === 'descending') {
     newSortDirection = 'ascending';
@@ -75,7 +75,7 @@ SortableTable.prototype.onSortButtonClick = function (e) {
   const sortedRows = this.sort(rows, columnNumber, newSortDirection);
   this.addRows(sortedRows);
   this.removeButtonStates();
-  this.updateButtonState(window.jQuery(e.currentTarget), newSortDirection);
+  this.updateButtonState($(e.currentTarget), newSortDirection);
 };
 
 SortableTable.prototype.updateButtonState = function (button, direction) {
@@ -108,8 +108,8 @@ SortableTable.prototype.getTableRowsArray = function () {
 SortableTable.prototype.sort = function (rows, columnNumber, sortDirection) {
   const newRows = rows.sort(
     function (rowA, rowB) {
-      const tdA = window.jQuery(rowA).find('td,th').eq(columnNumber);
-      const tdB = window.jQuery(rowB).find('td,th').eq(columnNumber);
+      const tdA = $(rowA).find('td,th').eq(columnNumber);
+      const tdB = $(rowB).find('td,th').eq(columnNumber);
 
       const valueA =
         sortDirection === 'ascending'

package/moj/components/sub-navigation/template.njk

@@ -1,9 +1,9 @@
-<nav class="moj-sub-navigation {{- ' ' + params.classes if params.classes}}" aria-label="{{ params.label or 'Secondary navigation region' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<nav class="moj-sub-navigation {{- " " + params.classes if params.classes}}" aria-label="{{ params.label or "Secondary navigation region" }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 
   <ul class="moj-sub-navigation__list">
 
     {%- for item in params.items %}
-      <li class="moj-sub-navigation__item {{- ' ' + item.classes if item.classes}}">
+      <li class="moj-sub-navigation__item {{- " " + item.classes if item.classes}}">
         <a class="moj-sub-navigation__link" {{ 'aria-current="page"' | safe if item.active }} href="{{ item.href }}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
           {{- item.html | safe if item.html else item.text -}}
         </a>