@ministryofjustice/frontend 3.4.0 → 3.6.0

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

@@ -1,91 +1,101 @@
-MOJFrontend.FilterToggleButton = function (options) {
-  this.options = options
-  this.container = $(this.options.toggleButton.container)
-  this.filterContainer = $(this.options.filter.container)
-
-  this.createToggleButton()
-  this.setupResponsiveChecks()
-  this.filterContainer.attr('tabindex', '-1')
-  if (this.options.startHidden) {
-    this.hideMenu()
-  }
-}
-
-MOJFrontend.FilterToggleButton.prototype.setupResponsiveChecks = function () {
-  this.mq = window.matchMedia(this.options.bigModeMediaQuery)
-  this.mq.addListener($.proxy(this, 'checkMode'))
-  this.checkMode(this.mq)
-}
-
-MOJFrontend.FilterToggleButton.prototype.createToggleButton = function () {
-  this.menuButton = $(
-    `<button class="govuk-button ${this.options.toggleButton.classes}" type="button" aria-haspopup="true" aria-expanded="false">${this.options.toggleButton.showText}</button>`
-  )
-  this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'))
-  this.container.append(this.menuButton)
-}
-
-MOJFrontend.FilterToggleButton.prototype.checkMode = function (mq) {
-  if (mq.matches) {
-    this.enableBigMode()
-  } else {
-    this.enableSmallMode()
-  }
-}
-
-MOJFrontend.FilterToggleButton.prototype.enableBigMode = function () {
-  this.showMenu()
-  this.removeCloseButton()
-}
-
-MOJFrontend.FilterToggleButton.prototype.enableSmallMode = function () {
-  this.hideMenu()
-  this.addCloseButton()
-}
-
-MOJFrontend.FilterToggleButton.prototype.addCloseButton = function () {
-  if (this.options.closeButton) {
-    this.closeButton = $(
-      `<button class="moj-filter__close" type="button">${this.options.closeButton.text}</button>`
-    )
-    this.closeButton.on('click', $.proxy(this, 'onCloseClick'))
-    $(this.options.closeButton.container).append(this.closeButton)
-  }
-}
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
 
-MOJFrontend.FilterToggleButton.prototype.onCloseClick = function () {
-  this.hideMenu()
-  this.menuButton.focus()
-}
+  function FilterToggleButton(options) {
+    this.options = options;
+    this.container = window.jQuery(this.options.toggleButton.container);
+    this.filterContainer = window.jQuery(this.options.filter.container);
 
-MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function () {
-  if (this.closeButton) {
-    this.closeButton.remove()
-    this.closeButton = null
+    this.createToggleButton();
+    this.setupResponsiveChecks();
+    this.filterContainer.attr('tabindex', '-1');
+    if (this.options.startHidden) {
+      this.hideMenu();
+    }
   }
-}
-
-MOJFrontend.FilterToggleButton.prototype.hideMenu = function () {
-  this.menuButton.attr('aria-expanded', 'false')
-  this.filterContainer.addClass('moj-js-hidden')
-  this.menuButton.text(this.options.toggleButton.showText)
-}
-
-MOJFrontend.FilterToggleButton.prototype.showMenu = function () {
-  this.menuButton.attr('aria-expanded', 'true')
-  this.filterContainer.removeClass('moj-js-hidden')
-  this.menuButton.text(this.options.toggleButton.hideText)
-}
-
-MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function () {
-  this.toggle()
-}
-
-MOJFrontend.FilterToggleButton.prototype.toggle = function () {
-  if (this.menuButton.attr('aria-expanded') === 'false') {
-    this.showMenu()
-    this.filterContainer.get(0).focus()
-  } else {
-    this.hideMenu()
-  }
-}
+
+  FilterToggleButton.prototype.setupResponsiveChecks = function () {
+    this.mq = window.matchMedia(this.options.bigModeMediaQuery);
+    this.mq.addListener(window.jQuery.proxy(this, 'checkMode'));
+    this.checkMode(this.mq);
+  };
+
+  FilterToggleButton.prototype.createToggleButton = function () {
+    this.menuButton = window.jQuery(
+      `<button class="govuk-button ${this.options.toggleButton.classes}" type="button" aria-haspopup="true" aria-expanded="false">${this.options.toggleButton.showText}</button>`
+    );
+    this.menuButton.on('click', window.jQuery.proxy(this, 'onMenuButtonClick'));
+    this.container.append(this.menuButton);
+  };
+
+  FilterToggleButton.prototype.checkMode = function (mq) {
+    if (mq.matches) {
+      this.enableBigMode();
+    } else {
+      this.enableSmallMode();
+    }
+  };
+
+  FilterToggleButton.prototype.enableBigMode = function () {
+    this.showMenu();
+    this.removeCloseButton();
+  };
+
+  FilterToggleButton.prototype.enableSmallMode = function () {
+    this.hideMenu();
+    this.addCloseButton();
+  };
+
+  FilterToggleButton.prototype.addCloseButton = function () {
+    if (this.options.closeButton) {
+      this.closeButton = window.jQuery(
+        `<button class="moj-filter__close" type="button">${this.options.closeButton.text}</button>`
+      );
+      this.closeButton.on('click', window.jQuery.proxy(this, 'onCloseClick'));
+      window.jQuery(this.options.closeButton.container).append(this.closeButton);
+    }
+  };
+
+  FilterToggleButton.prototype.onCloseClick = function () {
+    this.hideMenu();
+    this.menuButton.focus();
+  };
+
+  FilterToggleButton.prototype.removeCloseButton = function () {
+    if (this.closeButton) {
+      this.closeButton.remove();
+      this.closeButton = null;
+    }
+  };
+
+  FilterToggleButton.prototype.hideMenu = function () {
+    this.menuButton.attr('aria-expanded', 'false');
+    this.filterContainer.addClass('moj-js-hidden');
+    this.menuButton.text(this.options.toggleButton.showText);
+  };
+
+  FilterToggleButton.prototype.showMenu = function () {
+    this.menuButton.attr('aria-expanded', 'true');
+    this.filterContainer.removeClass('moj-js-hidden');
+    this.menuButton.text(this.options.toggleButton.hideText);
+  };
+
+  FilterToggleButton.prototype.onMenuButtonClick = function () {
+    this.toggle();
+  };
+
+  FilterToggleButton.prototype.toggle = function () {
+    if (this.menuButton.attr('aria-expanded') === 'false') {
+      this.showMenu();
+      this.filterContainer.get(0).focus();
+    } else {
+      this.hideMenu();
+    }
+  };
+
+  exports.FilterToggleButton = FilterToggleButton;
+
+}));

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

@@ -0,0 +1,93 @@
+function FilterToggleButton(options) {
+  this.options = options;
+  this.container = window.jQuery(this.options.toggleButton.container);
+  this.filterContainer = window.jQuery(this.options.filter.container);
+
+  this.createToggleButton();
+  this.setupResponsiveChecks();
+  this.filterContainer.attr('tabindex', '-1');
+  if (this.options.startHidden) {
+    this.hideMenu();
+  }
+}
+
+FilterToggleButton.prototype.setupResponsiveChecks = function () {
+  this.mq = window.matchMedia(this.options.bigModeMediaQuery);
+  this.mq.addListener(window.jQuery.proxy(this, 'checkMode'));
+  this.checkMode(this.mq);
+};
+
+FilterToggleButton.prototype.createToggleButton = function () {
+  this.menuButton = window.jQuery(
+    `<button class="govuk-button ${this.options.toggleButton.classes}" type="button" aria-haspopup="true" aria-expanded="false">${this.options.toggleButton.showText}</button>`
+  );
+  this.menuButton.on('click', window.jQuery.proxy(this, 'onMenuButtonClick'));
+  this.container.append(this.menuButton);
+};
+
+FilterToggleButton.prototype.checkMode = function (mq) {
+  if (mq.matches) {
+    this.enableBigMode();
+  } else {
+    this.enableSmallMode();
+  }
+};
+
+FilterToggleButton.prototype.enableBigMode = function () {
+  this.showMenu();
+  this.removeCloseButton();
+};
+
+FilterToggleButton.prototype.enableSmallMode = function () {
+  this.hideMenu();
+  this.addCloseButton();
+};
+
+FilterToggleButton.prototype.addCloseButton = function () {
+  if (this.options.closeButton) {
+    this.closeButton = window.jQuery(
+      `<button class="moj-filter__close" type="button">${this.options.closeButton.text}</button>`
+    );
+    this.closeButton.on('click', window.jQuery.proxy(this, 'onCloseClick'));
+    window.jQuery(this.options.closeButton.container).append(this.closeButton);
+  }
+};
+
+FilterToggleButton.prototype.onCloseClick = function () {
+  this.hideMenu();
+  this.menuButton.focus();
+};
+
+FilterToggleButton.prototype.removeCloseButton = function () {
+  if (this.closeButton) {
+    this.closeButton.remove();
+    this.closeButton = null;
+  }
+};
+
+FilterToggleButton.prototype.hideMenu = function () {
+  this.menuButton.attr('aria-expanded', 'false');
+  this.filterContainer.addClass('moj-js-hidden');
+  this.menuButton.text(this.options.toggleButton.showText);
+};
+
+FilterToggleButton.prototype.showMenu = function () {
+  this.menuButton.attr('aria-expanded', 'true');
+  this.filterContainer.removeClass('moj-js-hidden');
+  this.menuButton.text(this.options.toggleButton.hideText);
+};
+
+FilterToggleButton.prototype.onMenuButtonClick = function () {
+  this.toggle();
+};
+
+FilterToggleButton.prototype.toggle = function () {
+  if (this.menuButton.attr('aria-expanded') === 'false') {
+    this.showMenu();
+    this.filterContainer.get(0).focus();
+  } else {
+    this.hideMenu();
+  }
+};
+
+export { FilterToggleButton };

package/moj/components/form-validator/form-validator.js

@@ -1,164 +1,204 @@
-MOJFrontend.FormValidator = function (form, options) {
-  this.form = form
-  this.errors = []
-  this.validators = []
-  $(this.form).on('submit', $.proxy(this, 'onSubmit'))
-  this.summary =
-    options && options.summary ? $(options.summary) : $('.govuk-error-summary')
-  this.originalTitle = document.title
-}
-
-MOJFrontend.FormValidator.entityMap = {
-  '&': '&',
-  '<': '&lt;',
-  '>': '&gt;',
-  '"': '&quot;',
-  "'": '&#39;',
-  '/': '&#x2F;',
-  '`': '&#x60;',
-  '=': '&#x3D;'
-}
-
-MOJFrontend.FormValidator.prototype.escapeHtml = function (string) {
-  return String(string).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
-    return MOJFrontend.FormValidator.entityMap[s]
-  })
-}
-
-MOJFrontend.FormValidator.prototype.resetTitle = function () {
-  document.title = this.originalTitle
-}
-
-MOJFrontend.FormValidator.prototype.updateTitle = function () {
-  document.title = `${this.errors.length} errors - ${document.title}`
-}
-
-MOJFrontend.FormValidator.prototype.showSummary = function () {
-  this.summary.html(this.getSummaryHtml())
-  this.summary.removeClass('moj-hidden')
-  this.summary.attr('aria-labelledby', 'errorSummary-heading')
-  this.summary.focus()
-}
-
-MOJFrontend.FormValidator.prototype.getSummaryHtml = function () {
-  let html =
-    '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>'
-  html += '<div class="govuk-error-summary__body">'
-  html += '<ul class="govuk-list govuk-error-summary__list">'
-  for (let i = 0, j = this.errors.length; i < j; i++) {
-    const error = this.errors[i]
-    html += '<li>'
-    html += `<a href="#${this.escapeHtml(error.fieldName)}">`
-    html += this.escapeHtml(error.message)
-    html += '</a>'
-    html += '</li>'
-  }
-  html += '</ul>'
-  html += '</div>'
-  return html
-}
-
-MOJFrontend.FormValidator.prototype.hideSummary = function () {
-  this.summary.addClass('moj-hidden')
-  this.summary.removeAttr('aria-labelledby')
-}
-
-MOJFrontend.FormValidator.prototype.onSubmit = function (e) {
-  this.removeInlineErrors()
-  this.hideSummary()
-  this.resetTitle()
-  if (!this.validate()) {
-    e.preventDefault()
-    this.updateTitle()
-    this.showSummary()
-    this.showInlineErrors()
-  }
-}
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MOJFrontend = global.MOJFrontend || {}));
+})(this, (function (exports) { 'use strict';
 
-MOJFrontend.FormValidator.prototype.showInlineErrors = function () {
-  for (let i = 0, j = this.errors.length; i < j; i++) {
-    this.showInlineError(this.errors[i])
+  function removeAttributeValue(el, attr, value) {
+    let re, m;
+    if (el.getAttribute(attr)) {
+      if (el.getAttribute(attr) === value) {
+        el.removeAttribute(attr);
+      } else {
+        re = new RegExp(`(^|\\s)${value}(\\s|$)`);
+        m = el.getAttribute(attr).match(re);
+        if (m && m.length === 3) {
+          el.setAttribute(
+            attr,
+            el.getAttribute(attr).replace(re, m[1] && m[2] ? ' ' : '')
+          );
+        }
+      }
+    }
   }
-}
 
-MOJFrontend.FormValidator.prototype.showInlineError = function (error) {
-  const errorSpanId = `${error.fieldName}-error`
-  const errorSpan = `<span class="govuk-error-message" id="${
-    errorSpanId
-  }">${this.escapeHtml(error.message)}</span>`
-  const control = $(`#${error.fieldName}`)
-  const fieldContainer = control.parents('.govuk-form-group')
-  const label = fieldContainer.find('label')
-  const legend = fieldContainer.find('legend')
-  const fieldset = fieldContainer.find('fieldset')
-  fieldContainer.addClass('govuk-form-group--error')
-  if (legend.length) {
-    legend.after(errorSpan)
-    fieldContainer.attr('aria-invalid', 'true')
-    MOJFrontend.addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId)
-  } else {
-    label.after(errorSpan)
-    control.attr('aria-invalid', 'true')
-    MOJFrontend.addAttributeValue(control[0], 'aria-describedby', errorSpanId)
+  function addAttributeValue(el, attr, value) {
+    let re;
+    if (!el.getAttribute(attr)) {
+      el.setAttribute(attr, value);
+    } else {
+      re = new RegExp(`(^|\\s)${value}(\\s|$)`);
+      if (!re.test(el.getAttribute(attr))) {
+        el.setAttribute(attr, `${el.getAttribute(attr)} ${value}`);
+      }
+    }
   }
-}
 
-MOJFrontend.FormValidator.prototype.removeInlineErrors = function () {
-  for (let i = 0; i < this.errors.length; i++) {
-    this.removeInlineError(this.errors[i])
+  function FormValidator(form, options) {
+    this.form = form;
+    this.errors = [];
+    this.validators = [];
+    window.jQuery(this.form).on('submit', window.jQuery.proxy(this, 'onSubmit'));
+    this.summary =
+      options && options.summary ? window.jQuery(options.summary) : window.jQuery('.govuk-error-summary');
+    this.originalTitle = document.title;
   }
-}
-
-MOJFrontend.FormValidator.prototype.removeInlineError = function (error) {
-  const control = $(`#${error.fieldName}`)
-  const fieldContainer = control.parents('.govuk-form-group')
-  fieldContainer.find('.govuk-error-message').remove()
-  fieldContainer.removeClass('govuk-form-group--error')
-  fieldContainer.find('[aria-invalid]').attr('aria-invalid', 'false')
-  const errorSpanId = `${error.fieldName}-error`
-  MOJFrontend.removeAttributeValue(
-    fieldContainer.find('[aria-describedby]')[0],
-    'aria-describedby',
+
+  FormValidator.entityMap = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+    '/': '&#x2F;',
+    '`': '&#x60;',
+    '=': '&#x3D;'
+  };
+
+  FormValidator.prototype.escapeHtml = function (string) {
+    return String(string).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
+      return FormValidator.entityMap[s]
+    })
+  };
+
+  FormValidator.prototype.resetTitle = function () {
+    document.title = this.originalTitle;
+  };
+
+  FormValidator.prototype.updateTitle = function () {
+    document.title = `${this.errors.length} errors - ${document.title}`;
+  };
+
+  FormValidator.prototype.showSummary = function () {
+    this.summary.html(this.getSummaryHtml());
+    this.summary.removeClass('moj-hidden');
+    this.summary.attr('aria-labelledby', 'errorSummary-heading');
+    this.summary.focus();
+  };
+
+  FormValidator.prototype.getSummaryHtml = function () {
+    let html =
+      '<h2 id="error-summary-title" class="govuk-error-summary__title">There is a problem</h2>';
+    html += '<div class="govuk-error-summary__body">';
+    html += '<ul class="govuk-list govuk-error-summary__list">';
+    for (let i = 0, j = this.errors.length; i < j; i++) {
+      const error = this.errors[i];
+      html += '<li>';
+      html += `<a href="#${this.escapeHtml(error.fieldName)}">`;
+      html += this.escapeHtml(error.message);
+      html += '</a>';
+      html += '</li>';
+    }
+    html += '</ul>';
+    html += '</div>';
+    return html
+  };
+
+  FormValidator.prototype.hideSummary = function () {
+    this.summary.addClass('moj-hidden');
+    this.summary.removeAttr('aria-labelledby');
+  };
+
+  FormValidator.prototype.onSubmit = function (e) {
+    this.removeInlineErrors();
+    this.hideSummary();
+    this.resetTitle();
+    if (!this.validate()) {
+      e.preventDefault();
+      this.updateTitle();
+      this.showSummary();
+      this.showInlineErrors();
+    }
+  };
+
+  FormValidator.prototype.showInlineErrors = function () {
+    for (let i = 0, j = this.errors.length; i < j; i++) {
+      this.showInlineError(this.errors[i]);
+    }
+  };
+
+  FormValidator.prototype.showInlineError = function (error) {
+    const errorSpanId = `${error.fieldName}-error`;
+    const errorSpan = `<span class="govuk-error-message" id="${
     errorSpanId
-  )
-}
-
-MOJFrontend.FormValidator.prototype.addValidator = function (fieldName, rules) {
-  this.validators.push({
-    fieldName,
-    rules,
-    field: this.form.elements[fieldName]
-  })
-}
-
-MOJFrontend.FormValidator.prototype.validate = function () {
-  this.errors = []
-  let validator = null
-  let validatorReturnValue = true
-  let i
-  let j
-  for (i = 0; i < this.validators.length; i++) {
-    validator = this.validators[i]
-    for (j = 0; j < validator.rules.length; j++) {
-      validatorReturnValue = validator.rules[j].method(
-        validator.field,
-        validator.rules[j].params
-      )
-
-      if (typeof validatorReturnValue === 'boolean' && !validatorReturnValue) {
-        this.errors.push({
-          fieldName: validator.fieldName,
-          message: validator.rules[j].message
-        })
-        break
-      } else if (typeof validatorReturnValue === 'string') {
-        this.errors.push({
-          fieldName: validatorReturnValue,
-          message: validator.rules[j].message
-        })
-        break
+  }">${this.escapeHtml(error.message)}</span>`;
+    const control = window.jQuery(`#${error.fieldName}`);
+    const fieldContainer = control.parents('.govuk-form-group');
+    const label = fieldContainer.find('label');
+    const legend = fieldContainer.find('legend');
+    const fieldset = fieldContainer.find('fieldset');
+    fieldContainer.addClass('govuk-form-group--error');
+    if (legend.length) {
+      legend.after(errorSpan);
+      fieldContainer.attr('aria-invalid', 'true');
+      addAttributeValue(fieldset[0], 'aria-describedby', errorSpanId);
+    } else {
+      label.after(errorSpan);
+      control.attr('aria-invalid', 'true');
+      addAttributeValue(control[0], 'aria-describedby', errorSpanId);
+    }
+  };
+
+  FormValidator.prototype.removeInlineErrors = function () {
+    for (let i = 0; i < this.errors.length; i++) {
+      this.removeInlineError(this.errors[i]);
+    }
+  };
+
+  FormValidator.prototype.removeInlineError = function (error) {
+    const control = window.jQuery(`#${error.fieldName}`);
+    const fieldContainer = control.parents('.govuk-form-group');
+    fieldContainer.find('.govuk-error-message').remove();
+    fieldContainer.removeClass('govuk-form-group--error');
+    fieldContainer.find('[aria-invalid]').attr('aria-invalid', 'false');
+    const errorSpanId = `${error.fieldName}-error`;
+    removeAttributeValue(
+      fieldContainer.find('[aria-describedby]')[0],
+      'aria-describedby',
+      errorSpanId
+    );
+  };
+
+  FormValidator.prototype.addValidator = function (fieldName, rules) {
+    this.validators.push({
+      fieldName,
+      rules,
+      field: this.form.elements[fieldName]
+    });
+  };
+
+  FormValidator.prototype.validate = function () {
+    this.errors = [];
+    let validator = null;
+    let validatorReturnValue = true;
+    let i;
+    let j;
+    for (i = 0; i < this.validators.length; i++) {
+      validator = this.validators[i];
+      for (j = 0; j < validator.rules.length; j++) {
+        validatorReturnValue = validator.rules[j].method(
+          validator.field,
+          validator.rules[j].params
+        );
+
+        if (typeof validatorReturnValue === 'boolean' && !validatorReturnValue) {
+          this.errors.push({
+            fieldName: validator.fieldName,
+            message: validator.rules[j].message
+          });
+          break
+        } else if (typeof validatorReturnValue === 'string') {
+          this.errors.push({
+            fieldName: validatorReturnValue,
+            message: validator.rules[j].message
+          });
+          break
+        }
       }
     }
-  }
-  return this.errors.length === 0
-}
+    return this.errors.length === 0
+  };
+
+  exports.FormValidator = FormValidator;
+
+}));