@ministryofjustice/frontend 3.0.3 → 3.2.0

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'),
     });
   });
 
@@ -567,7 +568,7 @@ MOJFrontend.ButtonMenu.prototype.mergeConfigs = function (...configObjects) {
  * @param {DatepickerConfig} config - config object
  * @constructor
  */
-function Datepicker($module, config) {
+function Datepicker($module, config = {}) {
   if (!$module) {
     return this;
   }
@@ -730,7 +731,7 @@ Datepicker.prototype.initControls = function () {
   );
 
   this.$dialog.addEventListener("keydown", (event) => {
-    if (event.key == "Escape") {
+    if (event.key === "Escape") {
       this.closeDialog();
       event.preventDefault();
       event.stopPropagation();
@@ -973,8 +974,7 @@ Datepicker.prototype.setWeekStartDay = function () {
     this.config.weekStartDay = "sunday";
     // Rotate dayLabels array to put Sunday as the first item
     this.dayLabels.unshift(this.dayLabels.pop());
-  }
-  if (weekStartDayParam?.toLowerCase() === "monday") {
+  } else {
     this.config.weekStartDay = "monday";
   }
 };
@@ -987,10 +987,13 @@ Datepicker.prototype.setWeekStartDay = function () {
  *
  */
 Datepicker.prototype.isExcludedDate = function (date) {
+  // This comparison does not work correctly - it will exclude the mindate itself
+  // see: https://github.com/ministryofjustice/moj-frontend/issues/923
   if (this.minDate && this.minDate > date) {
     return true;
   }
 
+  // This comparison works as expected - the maxdate will not be excluded
   if (this.maxDate && this.maxDate < date) {
     return true;
   }
@@ -1430,6 +1433,10 @@ DSCalendarDay.prototype.update = function (day, hidden, disabled) {
   } else {
     this.button.style.display = "block";
   }
+  this.button.setAttribute(
+    "data-testid",
+    this.picker.formattedDateFromDate(day),
+  );
 
   this.button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
   this.date = new Date(day);
@@ -1941,7 +1948,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);
@@ -1950,11 +1963,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>';

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/date-picker/date-picker.js

@@ -15,7 +15,7 @@
  * @param {DatepickerConfig} config - config object
  * @constructor
  */
-function Datepicker($module, config) {
+function Datepicker($module, config = {}) {
   if (!$module) {
     return this;
   }
@@ -178,7 +178,7 @@ Datepicker.prototype.initControls = function () {
   );
 
   this.$dialog.addEventListener("keydown", (event) => {
-    if (event.key == "Escape") {
+    if (event.key === "Escape") {
       this.closeDialog();
       event.preventDefault();
       event.stopPropagation();
@@ -421,8 +421,7 @@ Datepicker.prototype.setWeekStartDay = function () {
     this.config.weekStartDay = "sunday";
     // Rotate dayLabels array to put Sunday as the first item
     this.dayLabels.unshift(this.dayLabels.pop());
-  }
-  if (weekStartDayParam?.toLowerCase() === "monday") {
+  } else {
     this.config.weekStartDay = "monday";
   }
 };
@@ -435,10 +434,13 @@ Datepicker.prototype.setWeekStartDay = function () {
  *
  */
 Datepicker.prototype.isExcludedDate = function (date) {
+  // This comparison does not work correctly - it will exclude the mindate itself
+  // see: https://github.com/ministryofjustice/moj-frontend/issues/923
   if (this.minDate && this.minDate > date) {
     return true;
   }
 
+  // This comparison works as expected - the maxdate will not be excluded
   if (this.maxDate && this.maxDate < date) {
     return true;
   }
@@ -878,6 +880,10 @@ DSCalendarDay.prototype.update = function (day, hidden, disabled) {
   } else {
     this.button.style.display = "block";
   }
+  this.button.setAttribute(
+    "data-testid",
+    this.picker.formattedDateFromDate(day),
+  );
 
   this.button.innerHTML = `<span class="govuk-visually-hidden">${accessibleLabel}</span><span aria-hidden="true">${label}</span>`;
   this.date = new Date(day);