@ministryofjustice/frontend 3.3.0 → 3.4.0

package/moj/components/form-validator/form-validator.js

@@ -1,11 +1,12 @@
-MOJFrontend.FormValidator = function(form, options) {
-  this.form = form;
-  this.errors = [];
-  this.validators = [];
-  $(this.form).on('submit', $.proxy(this, 'onSubmit'));
-  this.summary = (options && options.summary) ? $(options.summary) : $('.govuk-error-summary');
-  this.originalTitle = document.title;
-};
+MOJFrontend.FormValidator = function (form, options) {
+  this.form = form
+  this.errors = []
+  this.validators = []
+  $(this.form).on('submit', $.proxy(this, 'onSubmit'))
+  this.summary =
+    options && options.summary ? $(options.summary) : $('.govuk-error-summary')
+  this.originalTitle = document.title
+}
 
 MOJFrontend.FormValidator.entityMap = {
   '&': '&',
@@ -16,141 +17,148 @@ MOJFrontend.FormValidator.entityMap = {
   '/': '/',
   '`': '`',
   '=': '='
-};
+}
 
-MOJFrontend.FormValidator.prototype.escapeHtml = function(string) {
-  return String(string).replace(/[&<>"'`=\/]/g, function fromEntityMap (s) {
-    return MOJFrontend.FormValidator.entityMap[s];
-  });
-};
+MOJFrontend.FormValidator.prototype.escapeHtml = function (string) {
+  return String(string).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
+    return MOJFrontend.FormValidator.entityMap[s]
+  })
+}
 
-MOJFrontend.FormValidator.prototype.resetTitle = function() {
-  document.title = this.originalTitle;
-};
+MOJFrontend.FormValidator.prototype.resetTitle = function () {
+  document.title = this.originalTitle
+}
 
-MOJFrontend.FormValidator.prototype.updateTitle = function() {
-  document.title = "" + this.errors.length + " errors - " + document.title;
-};
+MOJFrontend.FormValidator.prototype.updateTitle = function () {
+  document.title = `${this.errors.length} errors - ${document.title}`
+}
 
 MOJFrontend.FormValidator.prototype.showSummary = function () {
-  this.summary.html(this.getSummaryHtml());
-  this.summary.removeClass('moj-hidden');
-  this.summary.attr('aria-labelledby', 'errorSummary-heading');
-  this.summary.focus();
-};
+  this.summary.html(this.getSummaryHtml())
+  this.summary.removeClass('moj-hidden')
+  this.summary.attr('aria-labelledby', 'errorSummary-heading')
+  this.summary.focus()
+}
 
-MOJFrontend.FormValidator.prototype.getSummaryHtml = function() {
-  var html = '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>';
-  html += '<div class="govuk-error-summary__body">';
-  html += '<ul class="govuk-list govuk-error-summary__list">';
-  for (var i = 0, j = this.errors.length; i < j; i++) {
-    var error = this.errors[i];
-    html += '<li>';
-    html +=   '<a href="#' + this.escapeHtml(error.fieldName) + '">';
-    html +=     this.escapeHtml(error.message);
-    html +=   '</a>';
-    html += '</li>';
+MOJFrontend.FormValidator.prototype.getSummaryHtml = function () {
+  let html =
+    '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>'
+  html += '<div class="govuk-error-summary__body">'
+  html += '<ul class="govuk-list govuk-error-summary__list">'
+  for (let i = 0, j = this.errors.length; i < j; i++) {
+    const error = this.errors[i]
+    html += '<li>'
+    html += `<a href="#${this.escapeHtml(error.fieldName)}">`
+    html += this.escapeHtml(error.message)
+    html += '</a>'
+    html += '</li>'
   }
-  html += '</ul>';
-  html += '</div>';
-  return html;
-};
+  html += '</ul>'
+  html += '</div>'
+  return html
+}
 
-MOJFrontend.FormValidator.prototype.hideSummary = function() {
-  this.summary.addClass('moj-hidden');
-  this.summary.removeAttr('aria-labelledby');
-};
+MOJFrontend.FormValidator.prototype.hideSummary = function () {
+  this.summary.addClass('moj-hidden')
+  this.summary.removeAttr('aria-labelledby')
+}
 
 MOJFrontend.FormValidator.prototype.onSubmit = function (e) {
-  this.removeInlineErrors();
-  this.hideSummary();
-  this.resetTitle();
-  if(!this.validate()) {
-    e.preventDefault();
-    this.updateTitle();
-    this.showSummary();
-    this.showInlineErrors();
+  this.removeInlineErrors()
+  this.hideSummary()
+  this.resetTitle()
+  if (!this.validate()) {
+    e.preventDefault()
+    this.updateTitle()
+    this.showSummary()
+    this.showInlineErrors()
   }
-};
+}
 
-MOJFrontend.FormValidator.prototype.showInlineErrors = function() {
-  for (var i = 0, j = this.errors.length; i < j; i++) {
-    this.showInlineError(this.errors[i]);
+MOJFrontend.FormValidator.prototype.showInlineErrors = function () {
+  for (let i = 0, j = this.errors.length; i < j; i++) {
+    this.showInlineError(this.errors[i])
   }
-};
+}
 
 MOJFrontend.FormValidator.prototype.showInlineError = function (error) {
-  var errorSpanId = error.fieldName + '-error';
-  var errorSpan = '<span class="govuk-error-message" id="'+ errorSpanId +'">'+this.escapeHtml(error.message)+'</span>';
-  var control = $("#" + error.fieldName);
-  var fieldContainer = control.parents(".govuk-form-group");
-  var label = fieldContainer.find('label');
-  var legend = fieldContainer.find("legend");
-  var fieldset = fieldContainer.find("fieldset");
-  fieldContainer.addClass('govuk-form-group--error');
-  if(legend.length) {
-    legend.after(errorSpan);
-    fieldContainer.attr('aria-invalid', 'true');
-    MOJFrontend.addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId);
+  const errorSpanId = `${error.fieldName}-error`
+  const errorSpan = `<span class="govuk-error-message" id="${
+    errorSpanId
+  }">${this.escapeHtml(error.message)}</span>`
+  const control = $(`#${error.fieldName}`)
+  const fieldContainer = control.parents('.govuk-form-group')
+  const label = fieldContainer.find('label')
+  const legend = fieldContainer.find('legend')
+  const fieldset = fieldContainer.find('fieldset')
+  fieldContainer.addClass('govuk-form-group--error')
+  if (legend.length) {
+    legend.after(errorSpan)
+    fieldContainer.attr('aria-invalid', 'true')
+    MOJFrontend.addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId)
   } else {
-    label.after(errorSpan);
-    control.attr('aria-invalid', 'true');
-    MOJFrontend.addAttributeValue(control[0], 'aria-describedby', errorSpanId);
+    label.after(errorSpan)
+    control.attr('aria-invalid', 'true')
+    MOJFrontend.addAttributeValue(control[0], 'aria-describedby', errorSpanId)
   }
-};
+}
 
-MOJFrontend.FormValidator.prototype.removeInlineErrors = function() {
-  var error;
-  var i;
-  for (var i = 0; i < this.errors.length; i++) {
-    this.removeInlineError(this.errors[i]);
+MOJFrontend.FormValidator.prototype.removeInlineErrors = function () {
+  for (let i = 0; i < this.errors.length; i++) {
+    this.removeInlineError(this.errors[i])
   }
-};
+}
 
-MOJFrontend.FormValidator.prototype.removeInlineError = function(error) {
-  var control = $("#" + error.fieldName);
-  var fieldContainer = control.parents(".govuk-form-group");
-  fieldContainer.find('.govuk-error-message').remove();
-  fieldContainer.removeClass('govuk-form-group--error');
-  fieldContainer.find("[aria-invalid]").attr('aria-invalid', 'false');
-  var errorSpanId = error.fieldName + '-error';
-  MOJFrontend.removeAttributeValue(fieldContainer.find('[aria-describedby]')[0], 'aria-describedby', errorSpanId);
-};
+MOJFrontend.FormValidator.prototype.removeInlineError = function (error) {
+  const control = $(`#${error.fieldName}`)
+  const fieldContainer = control.parents('.govuk-form-group')
+  fieldContainer.find('.govuk-error-message').remove()
+  fieldContainer.removeClass('govuk-form-group--error')
+  fieldContainer.find('[aria-invalid]').attr('aria-invalid', 'false')
+  const errorSpanId = `${error.fieldName}-error`
+  MOJFrontend.removeAttributeValue(
+    fieldContainer.find('[aria-describedby]')[0],
+    'aria-describedby',
+    errorSpanId
+  )
+}
 
-MOJFrontend.FormValidator.prototype.addValidator = function(fieldName, rules) {
+MOJFrontend.FormValidator.prototype.addValidator = function (fieldName, rules) {
   this.validators.push({
-    fieldName: fieldName,
-    rules: rules,
+    fieldName,
+    rules,
     field: this.form.elements[fieldName]
-  });
-};
+  })
+}
 
-MOJFrontend.FormValidator.prototype.validate = function() {
-  this.errors = [];
-  var validator = null,
-    validatorReturnValue = true,
-    i,
-    j;
+MOJFrontend.FormValidator.prototype.validate = function () {
+  this.errors = []
+  let validator = null
+  let validatorReturnValue = true
+  let i
+  let j
   for (i = 0; i < this.validators.length; i++) {
-    validator = this.validators[i];
+    validator = this.validators[i]
     for (j = 0; j < validator.rules.length; j++) {
-      validatorReturnValue = validator.rules[j].method(validator.field,
-        validator.rules[j].params);
+      validatorReturnValue = validator.rules[j].method(
+        validator.field,
+        validator.rules[j].params
+      )
 
       if (typeof validatorReturnValue === 'boolean' && !validatorReturnValue) {
         this.errors.push({
           fieldName: validator.fieldName,
           message: validator.rules[j].message
-        });
-        break;
-      } else if(typeof validatorReturnValue === 'string') {
+        })
+        break
+      } else if (typeof validatorReturnValue === 'string') {
         this.errors.push({
           fieldName: validatorReturnValue,
           message: validator.rules[j].message
-        });
-        break;
+        })
+        break
       }
     }
   }
-  return this.errors.length === 0;
-};
+  return this.errors.length === 0
+}

package/moj/components/header/_header.scss

@@ -3,9 +3,9 @@
    ========================================================================== */
 
 .moj-header {
-  background-color: govuk-colour("black");
   padding-top: govuk-spacing(3);
   border-bottom: 10px solid $govuk-brand-colour;
+  background-color: govuk-colour("black");
 }
 
 .moj-header__container {
@@ -20,7 +20,6 @@
   @include govuk-media-query($from: desktop) {
     float: left;
   }
-
 }
 
 .moj-header__logotype-crown {
@@ -28,7 +27,6 @@
   top: -4px;
   margin-right: govuk-spacing(1);
   vertical-align: top;
-
 }
 
 .moj-header__logotype-crest {
@@ -44,19 +42,19 @@
   @include govuk-media-query($from: desktop) {
     float: right;
   }
-
 }
 
-.moj-header__link, .moj-header__link > a {
+.moj-header__link,
+.moj-header__link > a {
   @include govuk-link-common;
   @include govuk-link-style-default;
-  border-bottom: 1px solid transparent;
-  color: govuk-colour("white");
   display: inline-block;
-  text-decoration: none;
-  line-height: 25px; // Override due to alignment issue in Chrome
   margin-bottom: -1px;
   overflow: hidden; // Fixes focus gaps in background colour
+  border-bottom: 1px solid transparent;
+  color: govuk-colour("white");
+  line-height: 25px; // Override due to alignment issue in Chrome
+  text-decoration: none;
   vertical-align: middle;
 
   &:link,
@@ -78,6 +76,7 @@
   &--organisation-name {
     @include govuk-font($size: 24, $weight: "bold");
     vertical-align: middle;
+
     &:hover {
       border-color: transparent;
     }
@@ -93,6 +92,7 @@
     @include govuk-media-query($from: desktop) {
       margin-left: govuk-spacing(1);
     }
+
     &:hover {
       border-color: transparent;
     }
@@ -100,20 +100,19 @@
 }
 
 .moj-header__link a {
-  vertical-align: text-bottom;
   margin-bottom: 1px;
+  vertical-align: text-bottom;
 
   &:hover {
     border-color: govuk-colour("white");
   }
 
   @include govuk-media-query($until: desktop) {
-    vertical-align: middle;
     margin-bottom: -1px;
+    vertical-align: middle;
   }
 }
-
-
+// stylelint-disable-next-line selector-no-qualifying-type
 span.moj-header__link {
   &:hover {
     border-color: transparent;
@@ -122,15 +121,15 @@ span.moj-header__link {
 
 // Navigation
 .moj-header__navigation {
+  margin-top: govuk-spacing(1) - 2px;
   color: govuk-colour("white");
-  margin-top: govuk-spacing(1)-2px;
 }
 
 .moj-header__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;
 }
 
 .moj-header__navigation-item {
@@ -141,7 +140,6 @@ span.moj-header__link {
   &:last-child {
     margin-right: 0;
   }
-
 }
 
 .moj-header__navigation-link {
@@ -156,15 +154,15 @@ span.moj-header__link {
   }
 
   &:hover {
+    // stylelint-disable-next-line declaration-no-important
     text-decoration: underline !important;
   }
 
   &:focus {
     color: govuk-colour("black");
   }
-
 }
 
-.moj-header__navigation-link[aria-current=page] {
+.moj-header__navigation-link[aria-current="page"] {
   text-decoration: none;
 }

package/moj/components/identity-bar/_identity-bar.scss

@@ -4,11 +4,11 @@
 
 .moj-identity-bar {
   @include govuk-clearfix;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2) - 1px; /* Negative by 1px to compensate */
+  color: govuk-colour("black");
   background-color: govuk-colour("white");
   box-shadow: inset 0 -1px 0 0 govuk-colour("mid-grey"); /* Takes up no space */
-  color: govuk-colour("black");
-  padding-bottom: govuk-spacing(2) - 1px; /* Negative by 1px to compensate */
-  padding-top: govuk-spacing(2);
 }
 
 .moj-identity-bar__container {
@@ -16,7 +16,7 @@
   font-size: 0; /* Hide whitespace between elements */
   text-align: justify; /* Trick to remove the need for floats */
 
-  &:after {
+  &::after {
     content: "";
     display: inline-block;
     width: 100%;
@@ -36,9 +36,9 @@
 
   @include govuk-media-query($from: tablet) {
     display: inline-block;
-    vertical-align: top;
     padding-top: govuk-spacing(2) + 1px; /* Alignment tweaks */
     padding-bottom: govuk-spacing(2) - 1px; /* Alignment tweaks */
+    vertical-align: top;
   }
 }
 

package/moj/components/interruption-card/_interruption-card.scss

@@ -1,8 +1,8 @@
 .moj-interruption-card {
-  background-color: govuk-colour("blue");
   margin-bottom: govuk-spacing(3);
-  @include govuk-responsive-padding(7, $adjustment: $govuk-border-width*-1);
   border: $govuk-border-width solid transparent;
+  background-color: govuk-colour("blue");
+  @include govuk-responsive-padding(7, $adjustment: $govuk-border-width * -1);
 }
 
 .moj-interruption-card__content {
@@ -14,6 +14,13 @@
   color: govuk-colour("white");
 }
 
+// If $govuk-global-styles is true, we need to override the color and size on elements
+// within the body class directly
+.moj-interruption-card__body > * {
+  @include govuk-font-size($size: 24);
+  color: govuk-colour("white");
+}
+
 .moj-interruption-card__body:last-child {
   margin-bottom: 0;
 }

package/moj/components/messages/_messages.scss

@@ -9,38 +9,37 @@
 
 .moj-message-list {
   min-height: 200px;
-  overflow-y: scroll;
-  overflow-x: hidden;
   padding: govuk-spacing(1);
+  overflow-x: hidden;
+  overflow-y: scroll;
 
   &__date {
     @include govuk-font($size: 19, $weight: "bold");
+    display: inline-block;
+    width: 100%;
     padding: govuk-spacing(3) 0;
     color: govuk-colour("dark-grey");
-    display: inline-block;
     text-align: center;
-    width: 100%;
   }
-
 }
 
 .moj-message-item {
-  border-radius: 0.5em 0.5em 0.75em 0.5em;
+  position: relative;
   margin-bottom: govuk-spacing(1);
   padding: govuk-spacing(3);
-  position: relative;
+  border-radius: 0.5em 0.5em 0.75em;
 
   @include govuk-media-query($from: tablet) {
     width: 50%;
   }
 
   &--sent {
-    color: govuk-colour("white");
-    background-color: $govuk-brand-colour;
     margin-right: govuk-spacing(2);
     padding-right: govuk-spacing(5);
-    text-align: right;
     float: right;
+    color: govuk-colour("white");
+    background-color: $govuk-brand-colour;
+    text-align: right;
 
     &::after {
       content: "";
@@ -55,24 +54,22 @@
   }
 
   &--received {
-    background-color: govuk-colour("light-grey");
-    float: left;
     margin-left: govuk-spacing(2);
     padding-left: govuk-spacing(5);
+    float: left;
+    background-color: govuk-colour("light-grey");
 
     &::after {
       content: "";
       position: absolute;
-      left: -1.5em;
       bottom: 0;
+      left: -1.5em;
       width: 1.5em;
       height: 1.5em;
       border-right: 1em solid govuk-colour("light-grey");
       border-bottom-right-radius: 1.75em 1.5em;
     }
-
   }
-
 }
 
 .moj-message-item a:link,
@@ -85,7 +82,6 @@
 }
 
 .moj-message-item__text {
-
   &--sent table {
     color: govuk-colour("white");
 
@@ -93,9 +89,7 @@
     & td {
       border-bottom: 1px solid govuk-colour("white");
     }
-
   }
-
 }
 
 .moj-message-item__meta {
@@ -108,5 +102,4 @@
   &--timestamp {
     @include govuk-font($size: 16, $weight: "bold");
   }
-
 }

package/moj/components/multi-file-upload/README.md

@@ -1 +1 @@
-# Multi file upload
+# Multi file upload

package/moj/components/multi-file-upload/_multi-file-upload.scss

@@ -1,66 +1,70 @@
 .moj-multi-file-upload {
-	margin-bottom: 40px;
+  margin-bottom: 40px;
 }
 
 .moj-multi-file-upload--enhanced .moj-multi-file-upload__button {
-	display: none;
+  display: none;
 }
 
 .moj-multi-file-upload__dropzone {
-  outline: 3px dashed govuk-colour('black');
-	display: flex;
-	text-align: center;
-	padding: govuk-spacing(9) govuk-spacing(3);
-	transition: outline-offset .1s ease-in-out, background-color .1s linear;
+  display: flex;
+  padding: govuk-spacing(9) govuk-spacing(3);
+  transition:
+    outline-offset 0.1s ease-in-out,
+    background-color 0.1s linear;
+  outline: 3px dashed govuk-colour("black");
+  text-align: center;
 }
 
 .moj-multi-file-upload__dropzone label {
-	margin-bottom: 0;
-	display: inline-block;
-	width: auto;
+  display: inline-block;
+  width: auto;
+  margin-bottom: 0;
 }
 
 .moj-multi-file-upload__dropzone p {
-  margin-bottom: 0;
   margin-right: 10px;
+  margin-bottom: 0;
   padding-top: 7px;
 }
 
-.moj-multi-file-upload__dropzone [type=file] {
-	position: absolute;
-	left: -9999em;
+.moj-multi-file-upload__dropzone [type="file"] {
+  position: absolute;
+  left: -9999em;
 }
 
 .moj-multi-file-upload--dragover {
-	background: #b1b4b6;
-	outline-color: #6f777b;
+  outline-color: #6f777b;
+  background: #b1b4b6;
 }
 
 .moj-multi-file-upload--focused {
-	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;
 }
 
 .moj-multi-file-upload__error {
-	color: govuk-colour('red');
-	font-weight: bold;
+  color: govuk-colour("red");
+  font-weight: bold;
 }
 
 .moj-multi-file-upload__success {
-	color: govuk-colour('green');
-	font-weight: bold;
+  color: govuk-colour("green");
+  font-weight: bold;
 }
 
 .moj-multi-file-upload__error svg {
-   fill: currentColor;
-   float: left;
-   margin-right: govuk-spacing(2);
+  margin-right: govuk-spacing(2);
+  float: left;
+  fill: currentcolor;
 }
 
 .moj-multi-file-upload__success svg {
-	fill: currentColor;
-	float: left;
-	margin-right: govuk-spacing(2);
-}
+  margin-right: govuk-spacing(2);
+  float: left;
+  fill: currentcolor;
+}