@ministryofjustice/frontend 3.0.3 → 3.1.0

package/moj/all.js

@@ -567,7 +567,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 +730,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 +973,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 +986,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 +1432,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);
@@ -1932,71 +1938,6 @@ 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);
-
-  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.PasswordReveal = function(element) {
   this.el = element;
   var $el = $(this.el)
@@ -2170,6 +2111,71 @@ 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/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);