@ministryofjustice/frontend 3.3.0 → 3.4.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/all.spec.js

@@ -1,22 +1,24 @@
-const { getByText, getByTestId } = require("@testing-library/dom");
+/* eslint-disable no-new */
 
-require("./helpers");
-require("./all.js");
+const { getByTestId } = require('@testing-library/dom')
 
-describe("initAll", () => {
-  test("initialises container", () => {
-    MOJFrontend.PasswordReveal = jest.fn();
+require('./helpers')
+require('./all.js')
 
-    const container = document.createElement("div");
+describe('initAll', () => {
+  test('initialises container', () => {
+    MOJFrontend.PasswordReveal = jest.fn()
+
+    const container = document.createElement('div')
 
     container.innerHTML = `
       <input data-module="moj-password-reveal" data-testid="password-reveal" type="password" />
-    `;
+    `
 
-    new MOJFrontend.initAll({ scope: container });
+    MOJFrontend.initAll({ scope: container })
 
     expect(MOJFrontend.PasswordReveal).toHaveBeenCalledWith(
-      getByTestId(container, "password-reveal"),
-    );
-  });
-});
+      getByTestId(container, 'password-reveal')
+    )
+  })
+})

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,104 @@
-MOJFrontend.AddAnother = function(container) {
-	this.container = $(container);
+MOJFrontend.AddAnother = function (container) {
+  this.container = $(container)
 
-	if (this.container.data('moj-add-another-initialised')) {
-		return
-	}
+  if (this.container.data('moj-add-another-initialised')) {
+    return
+  }
 
-	this.container.data('moj-add-another-initialised', true);
+  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');
-};
+  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.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.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()
+}
 
-MOJFrontend.AddAnother.prototype.hasRemoveButton = function(item) {
-	return item.find('.moj-add-another__remove-button').length;
-};
+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.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.getNewItem = function () {
+  const 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
+MOJFrontend.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);
+    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;
-	});
-};
+    const 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.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 = '';
-		}
-	});
-};
+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 = ''
+    }
+  })
+}
 
-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();
-	}
-	items.each($.proxy(function(index, el) {
-		this.updateAttributes(index, $(el));
-	}, this));
-	this.focusHeading();
-};
+MOJFrontend.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()
+}
 
-MOJFrontend.AddAnother.prototype.focusHeading = function() {
-	this.container.find('.moj-add-another__heading').focus();
-};
+MOJFrontend.AddAnother.prototype.focusHeading = function () {
+  this.container.find('.moj-add-another__heading').get(0).focus()
+}

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

@@ -0,0 +1,165 @@
+/* eslint-disable no-new */
+
+const {
+  getByLabelText,
+  getByRole,
+  queryByRole
+} = require('@testing-library/dom')
+const { userEvent } = require('@testing-library/user-event')
+
+require('./add-another.js')
+
+const user = userEvent.setup()
+
+const createComponent = () => {
+  const html = `
+    <div data-module="moj-add-another">
+      <h2 class="govuk-heading-l moj-add-another__heading" tabindex="-1">Add a person</h2>
+      <form>
+        <fieldset class="govuk-fieldset moj-add-another__item">
+          <legend>Person</legend>
+          <div class="govuk-form-group">
+            <label for="person[0][first_name]">First name</label>
+            <input class="govuk-input" id="person[0][first_name]" name="person[0][first_name]" type="text" data-name="person[%index%][first_name]" data-id="person[%index%][first_name]">
+          </div>
+          <div class="govuk-form-group">
+            <label for="person[0][last_name]">Last name</label>
+            <input class="govuk-input" id="person[0][last_name]" name="person[0][last_name]" type="text" data-name="person[%index%][last_name]" data-id="person[%index%][last_name]">
+          </div>
+        </fieldset>
+        <button type="button" class="govuk-button moj-add-another__add-button">Add another person</button>
+      </form>
+    </div>`
+  document.body.innerHTML = html
+  const component = document.querySelector('[data-module="moj-add-another"]')
+  return component
+}
+
+describe('Add Another component', () => {
+  let component
+  let addButton
+
+  beforeEach(() => {
+    component = createComponent()
+    new MOJFrontend.AddAnother(component)
+    addButton = getByRole(component, 'button', { name: 'Add another person' })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('adds a new item when "Add another person" is clicked', async () => {
+    const initialItems = component.querySelectorAll('.moj-add-another__item')
+    expect(initialItems).toHaveLength(1)
+
+    await user.click(addButton)
+
+    const updatedItems = component.querySelectorAll('.moj-add-another__item')
+    expect(updatedItems).toHaveLength(2)
+
+    const secondItemFirstName = updatedItems[1].querySelector(
+      '[name="person[1][first_name]"]'
+    )
+    expect(secondItemFirstName).toBeInTheDocument()
+    expect(secondItemFirstName.value).toBe('')
+  })
+
+  test('adds a remove button to new items', async () => {
+    await user.click(addButton)
+
+    const firstItem = component.querySelectorAll('.moj-add-another__item')[0]
+    const secondItem = component.querySelectorAll('.moj-add-another__item')[1]
+    const firstItemRemoveButton = getByRole(firstItem, 'button', {
+      name: 'Remove'
+    })
+    const secondItemRemoveButton = getByRole(secondItem, 'button', {
+      name: 'Remove'
+    })
+
+    expect(firstItemRemoveButton).toBeInTheDocument()
+    expect(secondItemRemoveButton).toBeInTheDocument()
+  })
+
+  test('removes an item when the "Remove" button is clicked', async () => {
+    await user.click(addButton)
+
+    const secondItem = component.querySelectorAll('.moj-add-another__item')[1]
+    const removeButton = getByRole(secondItem, 'button', { name: 'Remove' })
+
+    await user.click(removeButton)
+
+    const remainingItems = component.querySelectorAll('.moj-add-another__item')
+
+    expect(remainingItems).toHaveLength(1)
+    expect(
+      queryByRole(component, 'button', { name: 'Remove' })
+    ).not.toBeInTheDocument()
+  })
+
+  test('new item inputs have no value', async () => {
+    await user.click(addButton)
+
+    const secondItem = component.querySelectorAll('.moj-add-another__item')[1]
+    const firstNameInput = getByLabelText(secondItem, 'First name')
+    const lastNameInput = getByLabelText(secondItem, 'Last name')
+
+    expect(firstNameInput.value).toBe('')
+    expect(lastNameInput.value).toBe('')
+  })
+
+  test('resets form values in a new item', async () => {
+    await user.click(addButton)
+
+    const firstItem = component.querySelectorAll('.moj-add-another__item')[0]
+    const firstItemFirstNameInput = getByLabelText(firstItem, 'First name')
+    const firstItemLastNameInput = getByLabelText(firstItem, 'Last name')
+
+    await user.type(firstItemFirstNameInput, 'Steve')
+    await user.type(firstItemLastNameInput, 'Jobs')
+
+    expect(firstItemFirstNameInput.value).toBe('Steve')
+    expect(firstItemLastNameInput.value).toBe('Jobs')
+
+    const secondItem = component.querySelectorAll('.moj-add-another__item')[1]
+    const secondItemFirstNameInput = getByLabelText(secondItem, 'First name')
+    const secondItemLastNameInput = getByLabelText(secondItem, 'Last name')
+
+    expect(secondItemFirstNameInput.value).toBe('')
+    expect(secondItemLastNameInput.value).toBe('')
+  })
+
+  test('focuses the heading after removing an item', async () => {
+    await user.click(addButton)
+
+    const heading = queryByRole(component, 'heading', { level: 2 })
+    const secondItem = component.querySelectorAll('.moj-add-another__item')[1]
+    const removeButton = getByRole(secondItem, 'button', { name: 'Remove' })
+
+    await user.click(removeButton)
+
+    expect(heading).toHaveFocus()
+  })
+
+  test('updates attributes correctly after removing an item', async () => {
+    await user.click(addButton)
+    await user.click(addButton)
+
+    const secondItem = component.querySelectorAll('.moj-add-another__item')[1]
+    const removeButton = getByRole(secondItem, 'button', { name: 'Remove' })
+
+    await user.click(removeButton)
+
+    const remainingItems = component.querySelectorAll('.moj-add-another__item')
+    remainingItems.forEach((item, index) => {
+      const firstNameInput = item.querySelector(
+        `[name="person[${index}][first_name]"]`
+      )
+      const lastNameInput = item.querySelector(
+        `[name="person[${index}][last_name]"]`
+      )
+      expect(firstNameInput).toBeInTheDocument()
+      expect(lastNameInput).toBeInTheDocument()
+    })
+  })
+})

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