@ministryofjustice/frontend 3.3.1 → 3.5.0

package/moj/all.scss

@@ -1,3 +1,5 @@
+$govuk-suppressed-warnings: ("govuk-typography-scale-14");
+
 @import "node_modules/govuk-frontend/dist/govuk/base";
 
 @import "settings/all";

package/moj/components/_all.scss

@@ -1,5 +1,6 @@
 @import "action-bar/action-bar";
 @import "add-another/add-another";
+@import "alert/alert";
 @import "badge/badge";
 @import "banner/banner";
 @import "button-menu/button-menu";

package/moj/components/action-bar/_action-bar.scss

@@ -14,14 +14,14 @@
     margin-right: govuk-spacing(2);
     padding-right: govuk-spacing(2) + 2px; // Takes into account divider width
 
-    &:after {
+    &::after {
       content: "";
-      background-color: govuk-colour("light-grey");
-      height: 40px;
       position: absolute;
-      right: 0;
       top: 0;
+      right: 0;
       width: 2px;
+      height: 40px;
+      background-color: govuk-colour("light-grey");
     }
   }
 
@@ -29,5 +29,3 @@
     vertical-align: baseline;
   }
 }
-
-

package/moj/components/add-another/_add-another.scss

@@ -4,10 +4,10 @@
 
 .moj-add-another {
   &__item {
+    position: relative;
     margin: 0;
     margin-top: govuk-spacing(6);
     padding: 0;
-    position: relative;
 
     &:first-of-type {
       margin-top: 0;
@@ -15,9 +15,9 @@
   }
 
   &__title {
-    float: left;
-    padding: 4px 100px 4px 0;
     width: 100%;
+    padding: 4px 100px 4px 0;
+    float: left;
 
     & + .govuk-form-group {
       clear: left;
@@ -26,8 +26,8 @@
 
   &__remove-button {
     position: absolute;
-    right: 0;
     top: 0;
+    right: 0;
     width: auto;
   }
 
@@ -37,8 +37,10 @@
 }
 
 .moj-add-another__heading: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;
 }

package/moj/components/add-another/add-another.js

@@ -1,83 +1,135 @@
-MOJFrontend.AddAnother = function(container) {
-	this.container = $(container);
+(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';
 
-	if (this.container.data('moj-add-another-initialised')) {
-		return
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 	}
 
-	this.container.data('moj-add-another-initialised', true);
+	var _global_window_jQuery = window.jQuery;
 
-	this.container.on('click', '.moj-add-another__remove-button', $.proxy(this, 'onRemoveButtonClick'));
-	this.container.on('click', '.moj-add-another__add-button', $.proxy(this, 'onAddButtonClick'));
-	this.container.find('.moj-add-another__add-button, moj-add-another__remove-button').prop('type', 'button');
-};
+	var addAnother$1;
+	var hasRequiredAddAnother;
 
-MOJFrontend.AddAnother.prototype.onAddButtonClick = function(e) {
-	var item = this.getNewItem();
-	this.updateAttributes(this.getItems().length, item);
-	this.resetItem(item);
-	var firstItem = this.getItems().first();
-	if(!this.hasRemoveButton(firstItem)) {
-		this.createRemoveButton(firstItem);
-	}
-	this.getItems().last().after(item);
-	item.find('input, textarea, select').first().focus();
-};
-
-MOJFrontend.AddAnother.prototype.hasRemoveButton = function(item) {
-	return item.find('.moj-add-another__remove-button').length;
-};
-
-MOJFrontend.AddAnother.prototype.getItems = function() {
-	return this.container.find('.moj-add-another__item');
-};
-
-MOJFrontend.AddAnother.prototype.getNewItem = function() {
-	var item = this.getItems().first().clone();
-	if(!this.hasRemoveButton(item)) {
-		this.createRemoveButton(item);
-	}
-	return item;
-};
-
-MOJFrontend.AddAnother.prototype.updateAttributes = function(index, item) {
-	item.find('[data-name]').each(function(i, el) {
-    var originalId = el.id
-
-		el.name = $(el).attr('data-name').replace(/%index%/, index);
-		el.id = $(el).attr('data-id').replace(/%index%/, index);
-
-    var label = $(el).siblings('label')[0] || $(el).parents('label')[0] || item.find('[for="' + originalId + '"]')[0];
-		label.htmlFor = el.id;
-	});
-};
-
-MOJFrontend.AddAnother.prototype.createRemoveButton = function(item) {
-	item.append('<button type="button" class="govuk-button govuk-button--secondary moj-add-another__remove-button">Remove</button>');
-};
-
-MOJFrontend.AddAnother.prototype.resetItem = function(item) {
-	item.find('[data-name], [data-id]').each(function(index, el) {
-		if(el.type == 'checkbox' || el.type == 'radio') {
-			el.checked = false;
-		} else {
-			el.value = '';
+	function requireAddAnother () {
+		if (hasRequiredAddAnother) return addAnother$1;
+		hasRequiredAddAnother = 1;
+		const $ = _global_window_jQuery;
+
+		function AddAnother(container) {
+		  this.container = $(container);
+
+		  if (this.container.data('moj-add-another-initialised')) {
+		    return
+		  }
+
+		  this.container.data('moj-add-another-initialised', true);
+
+		  this.container.on(
+		    'click',
+		    '.moj-add-another__remove-button',
+		    $.proxy(this, 'onRemoveButtonClick')
+		  );
+		  this.container.on(
+		    'click',
+		    '.moj-add-another__add-button',
+		    $.proxy(this, 'onAddButtonClick')
+		  );
+		  this.container
+		    .find('.moj-add-another__add-button, moj-add-another__remove-button')
+		    .prop('type', 'button');
 		}
-	});
-};
-
-MOJFrontend.AddAnother.prototype.onRemoveButtonClick = function(e) {
-	$(e.currentTarget).parents('.moj-add-another__item').remove();
-	var items = this.getItems();
-	if(items.length === 1) {
-		items.find('.moj-add-another__remove-button').remove();
+
+		AddAnother.prototype.onAddButtonClick = function (e) {
+		  const item = this.getNewItem();
+		  this.updateAttributes(this.getItems().length, item);
+		  this.resetItem(item);
+		  const firstItem = this.getItems().first();
+		  if (!this.hasRemoveButton(firstItem)) {
+		    this.createRemoveButton(firstItem);
+		  }
+		  this.getItems().last().after(item);
+		  item.find('input, textarea, select').first().focus();
+		};
+
+		AddAnother.prototype.hasRemoveButton = function (item) {
+		  return item.find('.moj-add-another__remove-button').length
+		};
+
+		AddAnother.prototype.getItems = function () {
+		  return this.container.find('.moj-add-another__item')
+		};
+
+		AddAnother.prototype.getNewItem = function () {
+		  const item = this.getItems().first().clone();
+		  if (!this.hasRemoveButton(item)) {
+		    this.createRemoveButton(item);
+		  }
+		  return item
+		};
+
+		AddAnother.prototype.updateAttributes = function (index, item) {
+		  item.find('[data-name]').each(function (i, el) {
+		    const originalId = el.id;
+
+		    el.name = $(el)
+		      .attr('data-name')
+		      .replace(/%index%/, index);
+		    el.id = $(el)
+		      .attr('data-id')
+		      .replace(/%index%/, index);
+
+		    const label =
+		      $(el).siblings('label')[0] ||
+		      $(el).parents('label')[0] ||
+		      item.find(`[for="${originalId}"]`)[0];
+		    label.htmlFor = el.id;
+		  });
+		};
+
+		AddAnother.prototype.createRemoveButton = function (item) {
+		  item.append(
+		    '<button type="button" class="govuk-button govuk-button--secondary moj-add-another__remove-button">Remove</button>'
+		  );
+		};
+
+		AddAnother.prototype.resetItem = function (item) {
+		  item.find('[data-name], [data-id]').each(function (index, el) {
+		    if (el.type === 'checkbox' || el.type === 'radio') {
+		      el.checked = false;
+		    } else {
+		      el.value = '';
+		    }
+		  });
+		};
+
+		AddAnother.prototype.onRemoveButtonClick = function (e) {
+		  $(e.currentTarget).parents('.moj-add-another__item').remove();
+		  const items = this.getItems();
+		  if (items.length === 1) {
+		    items.find('.moj-add-another__remove-button').remove();
+		  }
+		  items.each(
+		    $.proxy(function (index, el) {
+		      this.updateAttributes(index, $(el));
+		    }, this)
+		  );
+		  this.focusHeading();
+		};
+
+		AddAnother.prototype.focusHeading = function () {
+		  this.container.find('.moj-add-another__heading').get(0).focus();
+		};
+
+		addAnother$1 = { AddAnother };
+		return addAnother$1;
 	}
-	items.each($.proxy(function(index, el) {
-		this.updateAttributes(index, $(el));
-	}, this));
-	this.focusHeading();
-};
-
-MOJFrontend.AddAnother.prototype.focusHeading = function() {
-	this.container.find('.moj-add-another__heading').focus();
-};
+
+	var addAnotherExports = requireAddAnother();
+	var addAnother = /*@__PURE__*/getDefaultExportFromCjs(addAnotherExports);
+
+	return addAnother;
+
+}));

package/moj/components/alert/_alert.scss

@@ -0,0 +1,142 @@
+.moj-alert {
+  @include govuk-font($size: false);
+  display: -ms-grid;
+  display: grid;
+  margin-bottom: govuk-spacing(6);
+  padding: govuk-spacing(2);
+  border: 5px solid transparent;
+  background: govuk-colour("white");
+  -ms-grid-columns: min-content fit-content(960px);
+  grid-template-columns: min-content fit-content(960px);
+
+  gap: govuk-spacing(2);
+
+  &:focus {
+    outline: $govuk-focus-width solid $govuk-focus-colour;
+  }
+}
+
+.moj-alert[data-dismissible] {
+  @include govuk-media-query($from: tablet) {
+    grid-template-columns: min-content fit-content(920px) auto;
+  }
+}
+
+.moj-alert__icon {
+  display: block;
+  width: govuk-px-to-rem(30px);
+  height: govuk-px-to-rem(30px);
+  fill: currentcolor;
+}
+
+.moj-alert__content {
+  @include govuk-font-size($size: 19);
+  display: block;
+  // Padding to align text with icon
+  padding-top: govuk-px-to-rem(5px);
+  overflow: hidden;
+  color: govuk-colour("black");
+
+  @include govuk-media-query($from: tablet) {
+    padding-top: govuk-px-to-rem(2px);
+  }
+}
+
+.moj-alert__action {
+  grid-column-start: 2;
+  grid-column-end: -1;
+
+  @include govuk-media-query($from: tablet) {
+    grid-column-start: 3;
+    justify-self: right;
+  }
+}
+
+.moj-alert__dismiss {
+  // Give the button link styling
+  margin-bottom: 0;
+  padding: 0;
+  border: none;
+  color: unset;
+  background-color: transparent;
+  -webkit-appearance: none;
+  cursor: pointer;
+  appearance: none;
+  @include govuk-font-size($size: 19);
+  @include govuk-link-common;
+  @include govuk-link-style-default;
+  @include govuk-link-print-friendly;
+}
+
+.moj-alert__content h2,
+.moj-alert__content h3,
+.moj-alert__content h4 {
+  margin-bottom: 2px;
+  line-height: 30px;
+}
+
+.moj-alert--with-heading .moj-alert__content {
+  // No padding needed when there is a heading
+  padding-top: 0;
+
+  @include govuk-media-query($from: tablet) {
+    padding-top: 0;
+  }
+}
+
+.moj-alert__content *:last-child {
+  margin-bottom: 0;
+}
+
+/* Style variants
+   ========================================================================== */
+.moj-alert--information {
+  border-color: $govuk-brand-colour;
+  color: $govuk-brand-colour;
+
+  .moj-alert__dismiss,
+  .moj-alert__content a {
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+  }
+}
+
+.moj-alert--success {
+  border-color: govuk-colour("green");
+  color: govuk-colour("green");
+
+  .moj-alert__dismiss,
+  .moj-alert__content a,
+  .moj-alert__content .govuk-link {
+    @include govuk-link-common;
+    @include govuk-link-style-success;
+  }
+}
+
+.moj-alert--warning {
+  border-color: $moj-warning-colour;
+  color: $moj-warning-colour;
+
+  .moj-alert__dismiss {
+    color: $moj-warning-link-colour;
+  }
+
+  .moj-alert__dismiss,
+  .moj-alert__content a,
+  .moj-alert__content .govuk-link {
+    @include govuk-link-common;
+    @include moj-link-style-warning;
+  }
+}
+
+.moj-alert--error {
+  border-color: govuk-colour("red");
+  color: govuk-colour("red");
+
+  .moj-alert__dismiss,
+  .moj-alert__content a,
+  .moj-alert__content .govuk-link {
+    @include govuk-link-common;
+    @include govuk-link-style-error;
+  }
+}