@ministryofjustice/frontend 3.3.1 → 3.5.0

package/moj/components/progress-bar/_progress-bar.scss

@@ -7,11 +7,11 @@
 }
 
 .moj-progress-bar__list {
-  font-size: 0; // Hide white space between elements
-  list-style: none;
+  position: relative;
   margin: 0;
   padding: 0;
-  position: relative;
+  font-size: 0; // Hide white space between elements
+  list-style: none;
   text-align: justify;
   vertical-align: top;
 
@@ -22,84 +22,79 @@
   }
 
   &::before {
-    border-top: 6px solid govuk-colour("green");
     content: "";
-    left: 0;
     position: absolute;
     top: 13px;
+    left: 0;
     width: 100%;
+    border-top: 6px solid govuk-colour("green");
   }
-
 }
 
 .moj-progress-bar__item {
   @include govuk-font(19);
   display: inline-block;
-  max-width: 20%;
   position: relative;
+  max-width: 20%;
   text-align: center;
   vertical-align: top;
 
   &:first-child,
   &:last-child {
     &::before {
-      border-top: 6px solid govuk-colour("white");
       content: "";
       position: absolute;
-      top: 13px; left: 0;
+      top: 13px;
+      left: 0;
       width: 50%;
+      border-top: 6px solid govuk-colour("white");
     }
-
   }
 
   &:first-child {
-
     &::before {
       left: 0;
     }
-
   }
 
   &:last-child {
-
     &::before {
-      left: auto;
       right: 0;
+      left: auto;
     }
-
   }
 
-  &[aria-current=step] { // https://tink.uk/using-the-aria-current-attribute
+  &[aria-current="step"] {
+    // https://tink.uk/using-the-aria-current-attribute
     @include govuk-font($size: 19, $weight: "bold");
   }
-
 }
 
 .moj-progress-bar__icon {
-  position: relative;
-  background-color: govuk-colour("white");
-  border: 6px solid govuk-colour("green");
-  border-radius: 50%;
   box-sizing: border-box;
   display: block;
+  position: relative;
+  width: 32px;
   height: 32px;
-  margin-left: auto;
   margin-right: auto;
-  width: 32px;
+  margin-left: auto;
+  border: 6px solid govuk-colour("green");
+  border-radius: 50%;
+  background-color: govuk-colour("white");
 }
 
 .moj-progress-bar__icon--complete {
   background-color: govuk-colour("green");
   background-image: url(#{$moj-images-path}icon-progress-tick.svg);
-  background-position: 50% 50%;
   background-repeat: no-repeat;
+  background-position: 50% 50%;
 }
 
 .moj-progress-bar__label {
   @include govuk-font(16);
   display: block;
-  font-weight: inherit;
-  margin-top: govuk-spacing(3);
   position: relative;
+  margin-top: govuk-spacing(3);
+  font-weight: inherit;
   word-wrap: break-word; // Just in case
 }

package/moj/components/rich-text-editor/_rich-text-editor.scss

@@ -8,20 +8,20 @@
 }
 
 .moj-rich-text-editor__toolbar-button {
+  width: 40px;
+  height: 40px;
+  margin-left: -2px;
+  float: left;
+  border: 2px solid govuk-colour("black");
+  outline: 0;
+  color: govuk-colour("black");
   background-color: govuk-colour("white");
-  background-position: 50% 50%;
   background-repeat: no-repeat;
+  background-position: 50% 50%;
   background-size: 40px 40px;
-  border: 2px solid govuk-colour("black");
-  color: govuk-colour("black");
-  cursor: pointer;
-  float: left;
   text-decoration: none;
-  height: 40px;
-  margin-left: -2px;
-  outline: 0;
   vertical-align: top;
-  width: 40px;
+  cursor: pointer;
 
   &:first-child {
     margin-left: 0;
@@ -34,14 +34,15 @@
   }
 
   &: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: 2;
+    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;
   }
-
 }
 
 .moj-rich-text-editor__toolbar-button--bold {
@@ -57,8 +58,8 @@
 }
 
 .moj-rich-text-editor__toolbar-button--unordered-list {
-  background-image: url(#{$moj-images-path}icon-wysiwyg-unordered-list.svg);
   margin-left: govuk-spacing(2);
+  background-image: url(#{$moj-images-path}icon-wysiwyg-unordered-list.svg);
 }
 
 .moj-rich-text-editor__toolbar-button--ordered-list {
@@ -67,7 +68,7 @@
 
 .moj-rich-text-editor__content {
   min-height: 130px;
-  outline: none;
   overflow: auto;
   resize: vertical;
+  outline: none;
 }

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

@@ -1,139 +1,186 @@
-if('contentEditable' in document.documentElement) {
-  MOJFrontend.RichTextEditor = function(options) {
-    this.options = options;
-    this.options.toolbar = this.options.toolbar || {
-      bold: false,
-      italic: false,
-      underline: false,
-      bullets: true,
-      numbers: true
-    };
-    this.textarea = this.options.textarea;
-    this.container = $(this.textarea).parent();
-
-    if (this.container.data('moj-rich-text-editor-initialised')) {
-      return
-    }
-
-    this.container.data('moj-rich-text-editor-initialised', true);
-
-    this.createToolbar();
-    this.hideDefault();
-    this.configureToolbar();
-    this.keys = {
-      left: 37,
-      right: 39,
-      up: 38,
-      down: 40
-    };
-    this.container.on('click', '.moj-rich-text-editor__toolbar-button', $.proxy(this, 'onButtonClick'));
-    this.container.find('.moj-rich-text-editor__content').on('input', $.proxy(this, 'onEditorInput'));
-    this.container.find('label').on('click', $.proxy(this, 'onLabelClick'));
-    this.toolbar.on('keydown', $.proxy(this, 'onToolbarKeydown'));
-  };
-
-  MOJFrontend.RichTextEditor.prototype.onToolbarKeydown = function(e) {
-    var focusableButton;
-    switch(e.keyCode) {
-      case this.keys.right:
-      case this.keys.down:
-        focusableButton = this.toolbar.find('button[tabindex=0]');
-        var nextButton = focusableButton.next('button');
-        if(nextButton[0]) {
-          nextButton.focus();
-          focusableButton.attr('tabindex', '-1');
-          nextButton.attr('tabindex', '0');
-        }
-        break;
-      case this.keys.left:
-      case this.keys.up:
-        focusableButton = this.toolbar.find('button[tabindex=0]');
-        var previousButton = focusableButton.prev('button');
-        if(previousButton[0]) {
-          previousButton.focus();
-          focusableButton.attr('tabindex', '-1');
-          previousButton.attr('tabindex', '0');
-        }
-        break;
-    }
-  };
-
-  MOJFrontend.RichTextEditor.prototype.getToolbarHtml = function() {
-    var html = '';
-
-    html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
-
-    if(this.options.toolbar.bold) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
-    }
-
-    if(this.options.toolbar.italic) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
-    }
-
-    if(this.options.toolbar.underline) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
-    }
-
-    if(this.options.toolbar.bullets) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
-    }
-
-    if(this.options.toolbar.numbers) {
-      html += '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
-    }
-
-    html += '</div>';
-    return html;
-  };
-
-  MOJFrontend.RichTextEditor.prototype.getEnhancedHtml = function(val) {
-    return this.getToolbarHtml() + '<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>';
-  };
-
-  MOJFrontend.RichTextEditor.prototype.hideDefault = function() {
-    this.textarea = this.container.find('textarea');
-    this.textarea.addClass('govuk-visually-hidden');
-    this.textarea.attr('aria-hidden', true);
-    this.textarea.attr('tabindex', '-1');
-  };
-
-  MOJFrontend.RichTextEditor.prototype.createToolbar = function() {
-    this.toolbar = document.createElement('div');
-    this.toolbar.className = 'moj-rich-text-editor';
-    this.toolbar.innerHTML = this.getEnhancedHtml();
-    this.container.append(this.toolbar);
-    this.toolbar = this.container.find('.moj-rich-text-editor__toolbar');
-    this.container.find('.moj-rich-text-editor__content').html(this.textarea.val());
-  };
-
-  MOJFrontend.RichTextEditor.prototype.configureToolbar = function() {
-    this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button');
-    this.buttons.prop('tabindex', '-1');
-    var firstTab = this.buttons.first();
-    firstTab.prop('tabindex', '0');
-  };
-
-  MOJFrontend.RichTextEditor.prototype.onButtonClick = function(e) {
-    document.execCommand($(e.currentTarget).data('command'), false, null);
-  };
-
-  MOJFrontend.RichTextEditor.prototype.getContent = function() {
-    return this.container.find('.moj-rich-text-editor__content').html();
-  };
-
-  MOJFrontend.RichTextEditor.prototype.onEditorInput = function(e) {
-    this.updateTextarea();
-  };
-
-  MOJFrontend.RichTextEditor.prototype.updateTextarea = function() {
-    document.execCommand('defaultParagraphSeparator', false, 'p');
-    this.textarea.val(this.getContent());
-  };
-
-  MOJFrontend.RichTextEditor.prototype.onLabelClick = function(e) {
-    e.preventDefault();
-    this.container.find('.moj-rich-text-editor__content').focus();
-  };
-
-}
+(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 richTextEditor$1;
+	var hasRequiredRichTextEditor;
+
+	function requireRichTextEditor () {
+		if (hasRequiredRichTextEditor) return richTextEditor$1;
+		hasRequiredRichTextEditor = 1;
+		const $ = _global_window_jQuery;
+
+		function RichTextEditor(options) {
+		  if (!('contentEditable' in document.documentElement)) {
+		    return
+		  }
+
+		  this.options = options;
+		  this.options.toolbar = this.options.toolbar || {
+		    bold: false,
+		    italic: false,
+		    underline: false,
+		    bullets: true,
+		    numbers: true
+		  };
+		  this.textarea = this.options.textarea;
+		  this.container = $(this.textarea).parent();
+
+		  if (this.container.data('moj-rich-text-editor-initialised')) {
+		    return
+		  }
+
+		  this.container.data('moj-rich-text-editor-initialised', true);
+
+		  this.createToolbar();
+		  this.hideDefault();
+		  this.configureToolbar();
+		  this.keys = {
+		    left: 37,
+		    right: 39,
+		    up: 38,
+		    down: 40
+		  };
+		  this.container.on(
+		    'click',
+		    '.moj-rich-text-editor__toolbar-button',
+		    $.proxy(this, 'onButtonClick')
+		  );
+		  this.container
+		    .find('.moj-rich-text-editor__content')
+		    .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) {
+		  let focusableButton;
+		  switch (e.keyCode) {
+		    case this.keys.right:
+		    case this.keys.down: {
+		      focusableButton = this.toolbar.find('button[tabindex=0]');
+		      const nextButton = focusableButton.next('button');
+		      if (nextButton[0]) {
+		        nextButton.focus();
+		        focusableButton.attr('tabindex', '-1');
+		        nextButton.attr('tabindex', '0');
+		      }
+		      break
+		    }
+		    case this.keys.left:
+		    case this.keys.up: {
+		      focusableButton = this.toolbar.find('button[tabindex=0]');
+		      const previousButton = focusableButton.prev('button');
+		      if (previousButton[0]) {
+		        previousButton.focus();
+		        focusableButton.attr('tabindex', '-1');
+		        previousButton.attr('tabindex', '0');
+		      }
+		      break
+		    }
+		  }
+		};
+
+		RichTextEditor.prototype.getToolbarHtml = function () {
+		  let html = '';
+
+		  html += '<div class="moj-rich-text-editor__toolbar" role="toolbar">';
+
+		  if (this.options.toolbar.bold) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--bold" type="button" data-command="bold"><span class="govuk-visually-hidden">Bold</span></button>';
+		  }
+
+		  if (this.options.toolbar.italic) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--italic" type="button" data-command="italic"><span class="govuk-visually-hidden">Italic</span></button>';
+		  }
+
+		  if (this.options.toolbar.underline) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--underline" type="button" data-command="underline"><span class="govuk-visually-hidden">Underline</span></button>';
+		  }
+
+		  if (this.options.toolbar.bullets) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--unordered-list" type="button" data-command="insertUnorderedList"><span class="govuk-visually-hidden">Unordered list</span></button>';
+		  }
+
+		  if (this.options.toolbar.numbers) {
+		    html +=
+		      '<button class="moj-rich-text-editor__toolbar-button moj-rich-text-editor__toolbar-button--ordered-list" type="button" data-command="insertOrderedList"><span class="govuk-visually-hidden">Ordered list</span></button>';
+		  }
+
+		  html += '</div>';
+		  return html
+		};
+
+		RichTextEditor.prototype.getEnhancedHtml = function (val) {
+		  return `${this.getToolbarHtml()}<div class="govuk-textarea moj-rich-text-editor__content" contenteditable="true" spellcheck="false"></div>`
+		};
+
+		RichTextEditor.prototype.hideDefault = function () {
+		  this.textarea = this.container.find('textarea');
+		  this.textarea.addClass('govuk-visually-hidden');
+		  this.textarea.attr('aria-hidden', true);
+		  this.textarea.attr('tabindex', '-1');
+		};
+
+		RichTextEditor.prototype.createToolbar = function () {
+		  this.toolbar = document.createElement('div');
+		  this.toolbar.className = 'moj-rich-text-editor';
+		  this.toolbar.innerHTML = this.getEnhancedHtml();
+		  this.container.append(this.toolbar);
+		  this.toolbar = this.container.find('.moj-rich-text-editor__toolbar');
+		  this.container
+		    .find('.moj-rich-text-editor__content')
+		    .html(this.textarea.val());
+		};
+
+		RichTextEditor.prototype.configureToolbar = function () {
+		  this.buttons = this.container.find('.moj-rich-text-editor__toolbar-button');
+		  this.buttons.prop('tabindex', '-1');
+		  const firstTab = this.buttons.first();
+		  firstTab.prop('tabindex', '0');
+		};
+
+		RichTextEditor.prototype.onButtonClick = function (e) {
+		  document.execCommand($(e.currentTarget).data('command'), false, null);
+		};
+
+		RichTextEditor.prototype.getContent = function () {
+		  return this.container.find('.moj-rich-text-editor__content').html()
+		};
+
+		RichTextEditor.prototype.onEditorInput = function (e) {
+		  this.updateTextarea();
+		};
+
+		RichTextEditor.prototype.updateTextarea = function () {
+		  document.execCommand('defaultParagraphSeparator', false, 'p');
+		  this.textarea.val(this.getContent());
+		};
+
+		RichTextEditor.prototype.onLabelClick = function (e) {
+		  e.preventDefault();
+		  this.container.find('.moj-rich-text-editor__content').focus();
+		};
+
+		richTextEditor$1 = { RichTextEditor };
+		return richTextEditor$1;
+	}
+
+	var richTextEditorExports = requireRichTextEditor();
+	var richTextEditor = /*@__PURE__*/getDefaultExportFromCjs(richTextEditorExports);
+
+	return richTextEditor;
+
+}));

package/moj/components/search/_search.scss

@@ -26,17 +26,19 @@
 
 .moj-search__button {
   display: inline-block;
-  margin-bottom: 0;
-  margin-left: govuk-spacing(2);
   position: relative;
   top: -2px; // Override default gov properties due to active pixel movement
-  vertical-align: bottom;
   width: auto;
+  margin-bottom: 0;
+  margin-left: govuk-spacing(2);
+  vertical-align: bottom;
 }
 
 .moj-search--inline {
+  // stylelint-disable-next-line declaration-no-important
   padding: govuk-spacing(2) 0 !important;
   @include govuk-media-query($from: desktop) {
+    // stylelint-disable-next-line declaration-no-important
     padding: 0 !important;
   }
-}
+}