@ministryofjustice/frontend 3.1.0 → 3.2.1

package/moj/all.js

@@ -77,7 +77,8 @@ MOJFrontend.initAll = function (options) {
   MOJFrontend.nodeListForEach($multiSelects, function ($multiSelect) {
     new MOJFrontend.MultiSelect({
       container: $multiSelect.querySelector($multiSelect.getAttribute('data-multi-select-checkbox')),
-      checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input')
+      checkboxes: $multiSelect.querySelectorAll('tbody .govuk-checkboxes__input'),
+      id_prefix: $multiSelect.getAttribute('data-multi-select-idprefix'),
     });
   });
 
@@ -1592,7 +1593,7 @@ MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() {
 MOJFrontend.FilterToggleButton.prototype.toggle = function() {
   if(this.menuButton.attr('aria-expanded') == 'false') {
     this.showMenu();
-    this.filterContainer.focus();
+    this.filterContainer.get(0).focus();
   } else {
     this.hideMenu();
   }
@@ -1938,6 +1939,77 @@ if(MOJFrontend.dragAndDropSupported() && MOJFrontend.formDataSupported() && MOJF
   };
 }
 
+MOJFrontend.MultiSelect = function(options) {
+  this.container = $(options.container);
+
+  if (this.container.data('moj-multi-select-initialised')) {
+    return
+  }
+
+  this.container.data('moj-multi-select-initialised', true);
+
+  const idPrefix = options.id_prefix;
+  let allId = 'checkboxes-all';
+  if (typeof idPrefix !== 'undefined') {
+    allId = idPrefix + 'checkboxes-all';
+  }
+
+  this.toggle = $(this.getToggleHtml(allId));
+  this.toggleButton = this.toggle.find('input');
+  this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
+  this.container.append(this.toggle);
+  this.checkboxes = $(options.checkboxes);
+  this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
+  this.checked = options.checked || false;
+};
+
+MOJFrontend.MultiSelect.prototype.getToggleHtml = function (allId) {
+  let html = '';
+  html += '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
+  html += `  <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`;
+  html += `  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`;
+  html += '    <span class="govuk-visually-hidden">Select all</span>';
+  html += '  </label>';
+  html += '</div>';
+  return html;
+};
+
+MOJFrontend.MultiSelect.prototype.onButtonClick = function(e) {
+  if(this.checked) {
+    this.uncheckAll();
+    this.toggleButton[0].checked = false;
+  } else {
+    this.checkAll();
+    this.toggleButton[0].checked = true;
+  }
+};
+
+MOJFrontend.MultiSelect.prototype.checkAll = function() {
+  this.checkboxes.each($.proxy(function(index, el) {
+    el.checked = true;
+  }, this));
+  this.checked = true;
+};
+
+MOJFrontend.MultiSelect.prototype.uncheckAll = function() {
+  this.checkboxes.each($.proxy(function(index, el) {
+    el.checked = false;
+  }, this));
+  this.checked = false;
+};
+
+MOJFrontend.MultiSelect.prototype.onCheckboxClick = function(e) {
+  if(!e.target.checked) {
+    this.toggleButton[0].checked = false;
+    this.checked = false;
+  } else {
+    if(this.checkboxes.filter(':checked').length === this.checkboxes.length) {
+      this.toggleButton[0].checked = true;
+      this.checked = true;
+    }
+  }
+};
+
 MOJFrontend.PasswordReveal = function(element) {
   this.el = element;
   var $el = $(this.el)
@@ -2111,71 +2183,6 @@ if('contentEditable' in document.documentElement) {
 
 }
 
-MOJFrontend.MultiSelect = function(options) {
-  this.container = $(options.container);
-
-  if (this.container.data('moj-multi-select-initialised')) {
-    return
-  }
-
-  this.container.data('moj-multi-select-initialised', true);
-
-  this.toggle = $(this.getToggleHtml());
-  this.toggleButton = this.toggle.find('input');
-  this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
-  this.container.append(this.toggle);
-  this.checkboxes = $(options.checkboxes);
-  this.checkboxes.on('click', $.proxy(this, 'onCheckboxClick'));
-  this.checked = options.checked || false;
-};
-
-MOJFrontend.MultiSelect.prototype.getToggleHtml = function() {
-  var html = '';
-  html += '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
-  html += '  <input type="checkbox" class="govuk-checkboxes__input" id="checkboxes-all">';
-  html += '  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="checkboxes-all">';
-  html += '    <span class="govuk-visually-hidden">Select all</span>';
-  html += '  </label>';
-  html += '</div>';
-  return html;
-};
-
-MOJFrontend.MultiSelect.prototype.onButtonClick = function(e) {
-  if(this.checked) {
-    this.uncheckAll();
-    this.toggleButton[0].checked = false;
-  } else {
-    this.checkAll();
-    this.toggleButton[0].checked = true;
-  }
-};
-
-MOJFrontend.MultiSelect.prototype.checkAll = function() {
-  this.checkboxes.each($.proxy(function(index, el) {
-    el.checked = true;
-  }, this));
-  this.checked = true;
-};
-
-MOJFrontend.MultiSelect.prototype.uncheckAll = function() {
-  this.checkboxes.each($.proxy(function(index, el) {
-    el.checked = false;
-  }, this));
-  this.checked = false;
-};
-
-MOJFrontend.MultiSelect.prototype.onCheckboxClick = function(e) {
-  if(!e.target.checked) {
-    this.toggleButton[0].checked = false;
-    this.checked = false;
-  } else {
-    if(this.checkboxes.filter(':checked').length === this.checkboxes.length) {
-      this.toggleButton[0].checked = true;
-      this.checked = true;
-    }
-  }
-};
-
 MOJFrontend.SearchToggle = function (options) {
   this.options = options;
   this.container = $(this.options.search.container);

package/moj/components/_all.scss

@@ -9,6 +9,7 @@
 @import "filter/filter";
 @import "header/header";
 @import "identity-bar/identity-bar";
+@import "interruption-card/interruption-card";
 @import "messages/messages";
 @import "multi-file-upload/multi-file-upload";
 @import "multi-select/multi-select";

package/moj/components/button-menu/button-menu.spec.js

@@ -1,9 +1,7 @@
 const { queryByRole, screen } = require("@testing-library/dom");
 const { userEvent } = require("@testing-library/user-event");
-const { configureAxe, toHaveNoViolations } = require("jest-axe");
-expect.extend(toHaveNoViolations);
+const { configureAxe } = require("jest-axe");
 
-require("../../../../jest.setup.js");
 require("./button-menu.js");
 
 const user = userEvent.setup();

package/moj/components/date-picker/date-picker.spec.js

@@ -1,6 +1,3 @@
-/*
- * @jest-environment jsdom
- */
 const {
   getAllByRole,
   getByText,
@@ -10,11 +7,9 @@ const {
   screen,
 } = require("@testing-library/dom");
 const { userEvent } = require("@testing-library/user-event");
+const { configureAxe } = require("jest-axe");
 const dayjs = require("dayjs");
-const { configureAxe, toHaveNoViolations } = require("jest-axe");
-expect.extend(toHaveNoViolations);
 
-require("../../../../jest.setup.js");
 require("./date-picker.js");
 
 const user = userEvent.setup();
@@ -199,18 +194,13 @@ describe("Date picker with defaults", () => {
   });
 
   test("can navigate back in time", async () => {
-    const today = new Date();
-    const currentMonthName = today.toLocaleString("default", { month: "long" });
-    const currentYear = today.getFullYear();
-    const currentMonth = today.getMonth();
-    const previousMonthName = new Date(
-      today.setMonth(currentMonth - 1),
-    ).toLocaleString("default", { month: "long" });
-    const previousYear = currentYear - 1;
+    const today = dayjs();
+    const previousMonth = dayjs().subtract(1, 'month')
+    const previousYear = previousMonth.subtract(1, 'year')
 
-    const currentTitle = `${currentMonthName} ${currentYear}`;
-    const previousMonthTitle = `${previousMonthName} ${currentYear}`;
-    const previousYearTitle = `${previousMonthName} ${previousYear}`;
+    const currentTitle = `${today.format('MMMM YYYY')}`;
+    const previousMonthTitle = `${previousMonth.format('MMMM YYYY')}`;
+    const previousYearTitle = `${previousYear.format('MMMM YYYY')}`;
 
     await user.click(calendarButton);
     let prevMonthButton = getByText(dialog, "Previous month");
@@ -224,18 +214,13 @@ describe("Date picker with defaults", () => {
   });
 
   test("can navigate forward in time", async () => {
-    const today = new Date();
-    const currentMonthName = today.toLocaleString("default", { month: "long" });
-    const currentYear = today.getFullYear();
-    const currentMonth = today.getMonth();
-    const nextMonthName = new Date(
-      today.setMonth(currentMonth + 1),
-    ).toLocaleString("default", { month: "long" });
-    const nextYear = currentYear + 1;
-
-    const currentTitle = `${currentMonthName} ${currentYear}`;
-    const nextMonthTitle = `${nextMonthName} ${currentYear}`;
-    const nextYearTitle = `${nextMonthName} ${nextYear}`;
+    const today = dayjs();
+    const nextMonth = dayjs().add(1, 'month')
+    const nextYear = nextMonth.add(1, 'year')
+
+    const currentTitle = `${today.format('MMMM YYYY')}`;
+    const nextMonthTitle = `${nextMonth.format('MMMM YYYY')}`;
+    const nextYearTitle = `${nextYear.format('MMMM YYYY')}`;
 
     await user.click(calendarButton);
     let nextMonthButton = getByText(dialog, "Next month");

package/moj/components/filter-toggle-button/filter-toggle-button.js

@@ -80,7 +80,7 @@ MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() {
 MOJFrontend.FilterToggleButton.prototype.toggle = function() {
   if(this.menuButton.attr('aria-expanded') == 'false') {
     this.showMenu();
-    this.filterContainer.focus();
+    this.filterContainer.get(0).focus();
   } else {
     this.hideMenu();
   }

package/moj/components/filter-toggle-button/filter-toggle-button.spec.js

@@ -0,0 +1,304 @@
+const {
+  queryByRole,
+} = require("@testing-library/dom");
+const { userEvent } = require("@testing-library/user-event");
+const { configureAxe } = require("jest-axe");
+const merge = require("lodash.merge");
+const { setMedia } = require("mock-match-media");
+
+require("./filter-toggle-button.js");
+
+const user = userEvent.setup();
+const axe = configureAxe({
+  rules: {
+    // disable landmark rules when testing isolated components.
+    region: { enabled: false },
+  },
+});
+
+const createTemplate = () => {
+  html = `
+      <div class="moj-filter">
+        <div class="moj-filter__header">
+          <div class="moj-filter__header-title">
+            <h2 class="govuk-heading-m">Filter</h2>
+          </div>
+          <div class="moj-filter__header-action"></div>
+        </div>
+      </div>
+      <div class="moj-action-bar">
+        <div class="moj-action-bar__filter"></div>
+      </div>`;
+  document.body.insertAdjacentHTML("afterbegin", html);
+
+  const buttonContainer = document.querySelector(".moj-action-bar__filter");
+  const closeButtonContainer = document.querySelector(
+    ".moj-filter__header-action",
+  );
+  const filterContainer = document.querySelector(".moj-filter");
+
+  return {
+    buttonContainer: buttonContainer,
+    closeButtonContainer: closeButtonContainer,
+    filterContainer: filterContainer,
+  };
+};
+
+let baseConfig;
+
+beforeEach(() => {
+  baseConfig = {
+    bigModeMediaQuery: "(min-width: 600px)",
+    startHidden: true,
+    toggleButton: {
+      container: document.querySelector(".moj-action-bar__filter"),
+      showText: "Show filter",
+      hideText: "Hide filter",
+      classes: "govuk-button--secondary",
+    },
+    closeButton: {
+      container: document.querySelector(".moj-filter__header-action"),
+      text: "Close",
+    },
+    filter: {
+      container: document.querySelector(".moj-filter"),
+    },
+  };
+});
+
+describe("Filter toggle in big mode", () => {
+  let defaultConfig, buttonContainer, closeButtonContainer, filterContainer;
+
+  beforeEach(() => {
+    setMedia({
+      width: "800px",
+    });
+
+    ({ buttonContainer, closeButtonContainer, filterContainer } = createTemplate());
+
+    defaultConfig = merge(baseConfig, {
+      toggleButton: {
+        container: document.querySelector(".moj-action-bar__filter"),
+      },
+      closeButton: {
+        container: document.querySelector(".moj-filter__header-action"),
+      },
+      filter: { container: document.querySelector(".moj-filter") },
+    });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("creates toggle button", () => {
+    new MOJFrontend.FilterToggleButton(defaultConfig);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton).not.toBeNull();
+    expect(toggleButton.innerHTML).toBe("Show filter");
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(toggleButton).toHaveClass("govuk-button--secondary");
+
+    expect(filterContainer).toHaveAttribute("tabindex", "-1");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+  });
+
+  test("toggle button reveals filters", async () => {
+    new MOJFrontend.FilterToggleButton(defaultConfig);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(filterContainer).toHaveAttribute("tabindex", "-1");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+
+    await user.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+    expect(toggleButton.innerHTML).toBe("Hide filter");
+    expect(filterContainer).not.toHaveClass("moj-js-hidden");
+    expect(filterContainer).toHaveFocus();
+
+    await user.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(toggleButton.innerHTML).toBe("Show filter");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+
+    expect(toggleButton).toHaveFocus();
+  });
+
+  test("start visible", () => {
+    const config = merge(defaultConfig, { startHidden: false });
+    new MOJFrontend.FilterToggleButton(config);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton.innerHTML).toBe("Hide filter");
+    expect(filterContainer).not.toHaveClass("moj-js-hidden");
+  });
+
+  test("custom button text", async () => {
+    const config = merge(defaultConfig, {
+      toggleButton: { showText: "Custom label", hideText: "Hide me" },
+    });
+    new MOJFrontend.FilterToggleButton(config);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton.innerHTML).toBe("Custom label");
+    await user.click(toggleButton);
+    expect(toggleButton.innerHTML).toBe("Hide me");
+  });
+
+  test("custom toggle button classes", () => {
+    const config = merge(defaultConfig, {
+      toggleButton: { classes: "classname-1 classname-2" },
+    });
+    new MOJFrontend.FilterToggleButton(config);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton).toHaveClass("classname-1 classname-2");
+  });
+
+  describe("accessibility", () => {
+    test("component has no wcag violations", async () => {
+      new MOJFrontend.FilterToggleButton(defaultConfig);
+      const toggleButton = queryByRole(buttonContainer, "button");
+      expect(await axe(document.body)).toHaveNoViolations();
+      await user.click(toggleButton);
+      expect(await axe(document.body)).toHaveNoViolations();
+    });
+  });
+});
+
+describe("Filter toggle in small mode", () => {
+  let defaultConfig, buttonContainer, closeButtonContainer, filterContainer;
+
+  beforeEach(() => {
+    setMedia({
+      width: "500px",
+    });
+
+    ({ buttonContainer, closeButtonContainer, filterContainer } = createTemplate()),
+
+    defaultConfig = merge(baseConfig, {
+      toggleButton: {
+        container: document.querySelector(".moj-action-bar__filter"),
+      },
+      closeButton: {
+        container: document.querySelector(".moj-filter__header-action"),
+      },
+      filter: { container: document.querySelector(".moj-filter") },
+    });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("creates toggle button", () => {
+    new MOJFrontend.FilterToggleButton(defaultConfig);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton).not.toBeNull();
+    expect(toggleButton.innerHTML).toBe("Show filter");
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(toggleButton).toHaveClass("govuk-button--secondary");
+
+    expect(filterContainer).toHaveAttribute("tabindex", "-1");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+  });
+
+  test("toggle button reveals filters", async () => {
+    new MOJFrontend.FilterToggleButton(defaultConfig);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(filterContainer).toHaveAttribute("tabindex", "-1");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+
+    await user.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
+    expect(toggleButton.innerHTML).toBe("Hide filter");
+    expect(filterContainer).not.toHaveClass("moj-js-hidden");
+    expect(filterContainer).toHaveFocus();
+
+    await user.click(toggleButton);
+
+    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
+    expect(toggleButton.innerHTML).toBe("Show filter");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+
+    expect(toggleButton).toHaveFocus();
+  });
+
+  test("start visible is ignored", () => {
+    const config = merge(defaultConfig, { startHidden: false });
+    new MOJFrontend.FilterToggleButton(config);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton.innerHTML).toBe("Show filter");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+  });
+
+  test("adds a close button", async () => {
+    const config = merge(defaultConfig, { startHidden: false });
+    new MOJFrontend.FilterToggleButton(config);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    await user.click(toggleButton);
+
+    const closeButton = queryByRole(closeButtonContainer, "button");
+
+    expect(closeButton).not.toBeNull();
+    expect(closeButton.innerHTML).toBe("Close");
+  });
+
+  test("hides on resize from big to small", async () => {
+    setMedia({
+      width: "800px",
+    });
+
+    const config = merge(defaultConfig, { startHidden: false });
+    new MOJFrontend.FilterToggleButton(config);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton.innerHTML).toBe("Hide filter");
+    expect(filterContainer).not.toHaveClass("moj-js-hidden");
+
+    setMedia({
+      width: "500px",
+    });
+
+    expect(toggleButton.innerHTML).toBe("Show filter");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+  });
+
+  test("shows on resize from small to big", async () => {
+    setMedia({
+      width: "500px",
+    });
+
+    const config = merge(defaultConfig);
+    new MOJFrontend.FilterToggleButton(config);
+    const toggleButton = queryByRole(buttonContainer, "button");
+
+    expect(toggleButton.innerHTML).toBe("Show filter");
+    expect(filterContainer).toHaveClass("moj-js-hidden");
+
+    setMedia({
+      width: "800px",
+    });
+
+    expect(toggleButton.innerHTML).toBe("Hide filter");
+    expect(filterContainer).not.toHaveClass("moj-js-hidden");
+  });
+
+  describe("accessibility", () => {
+    test("component has no wcag violations", async () => {
+      new MOJFrontend.FilterToggleButton(defaultConfig);
+      const toggleButton = queryByRole(buttonContainer, "button");
+      expect(await axe(document.body)).toHaveNoViolations();
+      await user.click(toggleButton);
+      expect(await axe(document.body)).toHaveNoViolations();
+    });
+  });
+});

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

@@ -0,0 +1,35 @@
+.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;
+}
+
+.moj-interruption-card__content {
+  max-width: 960px;
+}
+
+.moj-interruption-card__heading,
+.moj-interruption-card__body {
+  color: govuk-colour("white");
+}
+
+.moj-interruption-card__body:last-child {
+  margin-bottom: 0;
+}
+
+.moj-interruption-card__actions:last-child {
+  margin-bottom: 0;
+
+  .govuk-button:last-child,
+  .govuk-link:last-child {
+    margin-bottom: 0;
+  }
+
+  @include govuk-media-query($from: tablet) {
+    .govuk-button,
+    .govuk-link {
+      margin-bottom: 0;
+    }
+  }
+}

package/moj/components/interruption-card/macro.njk

@@ -0,0 +1,3 @@
+{% macro interruptionCard(params) %}
+    {%- include "./template.njk" %}
+{% endmacro %}

package/moj/components/interruption-card/template.njk

@@ -0,0 +1,35 @@
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<div class="moj-interruption-card" data-test="{{ params.id }}">
+    <div class="moj-interruption-card__content">
+        <h1 class="govuk-heading-l moj-interruption-card__heading">{{- params.heading -}}</h1>
+        <div class="govuk-body-l moj-interruption-card__body">{{ caller() }}</div>
+        <div class="govuk-button-group moj-interruption-card__actions">
+            {% if params.primaryAction.style == "link" %}
+                <a class="govuk-link govuk-link--inverse"
+                   href="{{ params.primaryAction.href }}">{{- params.primaryAction.text -}}</a>
+            {% else %}
+                {{ govukButton({
+                                text: params.primaryAction.text,
+                                classes: "govuk-button--inverse",
+                                href: params.primaryAction.href,
+                                preventDoubleClick: true,
+                                attributes: params.primaryAction.attributes
+                                }) }}
+            {% endif %}
+            {% if params.secondaryAction %}
+                {% if params.secondaryAction.style == "button" %}
+                    {{ govukButton({
+                                        text: params.secondaryAction.text,
+                                        classes: "govuk-button--inverse",
+                                        href: params.secondaryAction.href,
+                                        preventDoubleClick: true,
+                                        attributes: params.secondaryAction.attributes
+                                        }) }}
+                {% else %}
+                    <a class="govuk-link govuk-link--inverse"
+                       href="{{ params.secondaryAction.href }}">{{- params.secondaryAction.text -}}</a>
+                {% endif %}
+            {% endif %}
+        </div>
+    </div>
+</div>

package/moj/components/multi-select/README.md

@@ -1,3 +1,3 @@
 # Table multi-select
 
-- [Guidance](https://design-patterns.service.justice.gov.uk/components/table-multi-select)
+- [Guidance](https://design-patterns.service.justice.gov.uk/components/multi-select/)

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

@@ -7,7 +7,13 @@ MOJFrontend.MultiSelect = function(options) {
 
   this.container.data('moj-multi-select-initialised', true);
 
-  this.toggle = $(this.getToggleHtml());
+  const idPrefix = options.id_prefix;
+  let allId = 'checkboxes-all';
+  if (typeof idPrefix !== 'undefined') {
+    allId = idPrefix + 'checkboxes-all';
+  }
+
+  this.toggle = $(this.getToggleHtml(allId));
   this.toggleButton = this.toggle.find('input');
   this.toggleButton.on('click', $.proxy(this, 'onButtonClick'));
   this.container.append(this.toggle);
@@ -16,11 +22,11 @@ MOJFrontend.MultiSelect = function(options) {
   this.checked = options.checked || false;
 };
 
-MOJFrontend.MultiSelect.prototype.getToggleHtml = function() {
-  var html = '';
+MOJFrontend.MultiSelect.prototype.getToggleHtml = function (allId) {
+  let html = '';
   html += '<div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">';
-  html += '  <input type="checkbox" class="govuk-checkboxes__input" id="checkboxes-all">';
-  html += '  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="checkboxes-all">';
+  html += `  <input type="checkbox" class="govuk-checkboxes__input" id="${allId}">`;
+  html += `  <label class="govuk-label govuk-checkboxes__label moj-multi-select__toggle-label" for="${allId}">`;
   html += '    <span class="govuk-visually-hidden">Select all</span>';
   html += '  </label>';
   html += '</div>';