govuk_publishing_components 32.1.0 → 35.0.0

data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs

@@ -1,16 +1,23 @@
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-// addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Event.mjs'
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
+import { nodeListForEach } from '../../common/index.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
-import { nodeListForEach } from '../../common.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
+/**
+ * Checkboxes component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for checkboxes
+ */
 function Checkboxes ($module) {
   this.$module = $module
   this.$inputs = $module.querySelectorAll('input[type="checkbox"]')
 }
 
 /**
- * Initialise Checkboxes
+ * Initialise component
  *
  * Checkboxes can be associated with a 'conditionally revealed' content block –
  * for example, a checkbox for 'Phone' could reveal an additional form field for
@@ -28,17 +35,17 @@ Checkboxes.prototype.init = function () {
   var $inputs = this.$inputs
 
   nodeListForEach($inputs, function ($input) {
-    var target = $input.getAttribute('data-aria-controls')
+    var targetId = $input.getAttribute('data-aria-controls')
 
     // Skip checkboxes without data-aria-controls attributes, or where the
     // target element does not exist.
-    if (!target || !document.getElementById(target)) {
+    if (!targetId || !document.getElementById(targetId)) {
       return
     }
 
     // Promote the data-aria-controls attribute to a aria-controls attribute
     // so that the relationship is exposed in the AOM
-    $input.setAttribute('aria-controls', target)
+    $input.setAttribute('aria-controls', targetId)
     $input.removeAttribute('data-aria-controls')
   })
 
@@ -57,11 +64,12 @@ Checkboxes.prototype.init = function () {
   // for example if they are added to the page dynamically, so sync now too.
   this.syncAllConditionalReveals()
 
+  // Handle events
   $module.addEventListener('click', this.handleClick.bind(this))
 }
 
 /**
- * Sync the conditional reveal states for all inputs in this $module.
+ * Sync the conditional reveal states for all checkboxes in this $module.
  */
 Checkboxes.prototype.syncAllConditionalReveals = function () {
   nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
@@ -73,7 +81,7 @@ Checkboxes.prototype.syncAllConditionalReveals = function () {
  * Synchronise the visibility of the conditional reveal, and its accessible
  * state, with the input's checked state.
  *
- * @param {HTMLInputElement} $input Checkbox input
+ * @param {HTMLInputElement} $input - Checkbox input
  */
 Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
   var $target = document.getElementById($input.getAttribute('aria-controls'))
@@ -91,6 +99,8 @@ Checkboxes.prototype.syncConditionalRevealWithInputState = function ($input) {
  *
  * Find any other checkbox inputs with the same name value, and uncheck them.
  * This is useful for when a “None of these" checkbox is checked.
+ *
+ * @param {HTMLElement} $input - Checkbox input
  */
 Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
   var allInputsWithSameName = document.querySelectorAll('input[type="checkbox"][name="' + $input.name + '"]')
@@ -105,11 +115,13 @@ Checkboxes.prototype.unCheckAllInputsExcept = function ($input) {
 }
 
 /**
- * Uncheck exclusive inputs
+ * Uncheck exclusive checkboxes
  *
  * Find any checkbox inputs with the same name value and the 'exclusive' behaviour,
  * and uncheck them. This helps prevent someone checking both a regular checkbox and a
  * "None of these" checkbox in the same fieldset.
+ *
+ * @param {HTMLInputElement} $input - Checkbox input
  */
 Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
   var allInputsWithSameNameAndExclusiveBehaviour = document.querySelectorAll(
@@ -131,33 +143,33 @@ Checkboxes.prototype.unCheckExclusiveInputs = function ($input) {
  * Handle a click within the $module – if the click occurred on a checkbox, sync
  * the state of any associated conditional reveal with the checkbox state.
  *
- * @param {MouseEvent} event Click event
+ * @param {MouseEvent} event - Click event
  */
 Checkboxes.prototype.handleClick = function (event) {
-  var $target = event.target
+  var $clickedInput = event.target
 
   // Ignore clicks on things that aren't checkbox inputs
-  if ($target.type !== 'checkbox') {
+  if ($clickedInput.type !== 'checkbox') {
     return
   }
 
   // If the checkbox conditionally-reveals some content, sync the state
-  var hasAriaControls = $target.getAttribute('aria-controls')
+  var hasAriaControls = $clickedInput.getAttribute('aria-controls')
   if (hasAriaControls) {
-    this.syncConditionalRevealWithInputState($target)
+    this.syncConditionalRevealWithInputState($clickedInput)
   }
 
   // No further behaviour needed for unchecking
-  if (!$target.checked) {
+  if (!$clickedInput.checked) {
     return
   }
 
   // Handle 'exclusive' checkbox behaviour (ie "None of these")
-  var hasBehaviourExclusive = ($target.getAttribute('data-behaviour') === 'exclusive')
+  var hasBehaviourExclusive = ($clickedInput.getAttribute('data-behaviour') === 'exclusive')
   if (hasBehaviourExclusive) {
-    this.unCheckAllInputsExcept($target)
+    this.unCheckAllInputsExcept($clickedInput)
   } else {
-    this.unCheckExclusiveInputs($target)
+    this.unCheckExclusiveInputs($clickedInput)
   }
 }
 

data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs

@@ -1,20 +1,31 @@
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
 /**
  * JavaScript 'polyfill' for HTML5's <details> and <summary> elements
  * and 'shim' to add accessiblity enhancements for all browsers
  *
  * http://caniuse.com/#feat=details
  */
+import { generateUniqueID } from '../../common/index.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
 import '../../vendor/polyfills/Function/prototype/bind.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normaliziation
-import { generateUniqueID } from '../../common.mjs'
 
 var KEY_ENTER = 13
 var KEY_SPACE = 32
 
+/**
+ * Details component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for details
+ */
 function Details ($module) {
   this.$module = $module
 }
 
+/**
+ * Initialise component
+ */
 Details.prototype.init = function () {
   if (!this.$module) {
     return
@@ -30,6 +41,9 @@ Details.prototype.init = function () {
   this.polyfillDetails()
 }
 
+/**
+ * Polyfill component in older browsers
+ */
 Details.prototype.polyfillDetails = function () {
   var $module = this.$module
 
@@ -73,13 +87,14 @@ Details.prototype.polyfillDetails = function () {
   }
 
   // Bind an event to handle summary elements
-  this.polyfillHandleInputs($summary, this.polyfillSetAttributes.bind(this))
+  this.polyfillHandleInputs(this.polyfillSetAttributes.bind(this))
 }
 
 /**
-* Define a statechange function that updates aria-expanded and style.display
-* @param {object} summary element
-*/
+ * Define a statechange function that updates aria-expanded and style.display
+ *
+ * @returns {boolean} Returns true
+ */
 Details.prototype.polyfillSetAttributes = function () {
   if (this.$module.hasAttribute('open')) {
     this.$module.removeAttribute('open')
@@ -95,22 +110,22 @@ Details.prototype.polyfillSetAttributes = function () {
 }
 
 /**
-* Handle cross-modal click events
-* @param {object} node element
-* @param {function} callback function
-*/
-Details.prototype.polyfillHandleInputs = function (node, callback) {
-  node.addEventListener('keypress', function (event) {
-    var target = event.target
+ * Handle cross-modal click events
+ *
+ * @param {polyfillHandleInputsCallback} callback - function
+ */
+Details.prototype.polyfillHandleInputs = function (callback) {
+  this.$summary.addEventListener('keypress', function (event) {
+    var $target = event.target
     // When the key gets pressed - check if it is enter or space
     if (event.keyCode === KEY_ENTER || event.keyCode === KEY_SPACE) {
-      if (target.nodeName.toLowerCase() === 'summary') {
+      if ($target.nodeName.toLowerCase() === 'summary') {
         // Prevent space from scrolling the page
         // and enter from submitting a form
         event.preventDefault()
         // Click to let the click event do all the necessary action
-        if (target.click) {
-          target.click()
+        if ($target.click) {
+          $target.click()
         } else {
           // except Safari 5.1 and under don't support .click() here
           callback(event)
@@ -120,16 +135,22 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
   })
 
   // Prevent keyup to prevent clicking twice in Firefox when using space key
-  node.addEventListener('keyup', function (event) {
-    var target = event.target
+  this.$summary.addEventListener('keyup', function (event) {
+    var $target = event.target
     if (event.keyCode === KEY_SPACE) {
-      if (target.nodeName.toLowerCase() === 'summary') {
+      if ($target.nodeName.toLowerCase() === 'summary') {
         event.preventDefault()
       }
     }
   })
 
-  node.addEventListener('click', callback)
+  this.$summary.addEventListener('click', callback)
 }
 
 export default Details
+
+/**
+ * @callback polyfillHandleInputsCallback
+ * @param {UIEvent} event - Keyboard or mouse event
+ * @returns {void}
+ */

data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs

@@ -1,11 +1,49 @@
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
+import { mergeConfigs } from '../../common/index.mjs'
+import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 import '../../vendor/polyfills/Element/prototype/closest.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
+
+/**
+ * JavaScript enhancements for the ErrorSummary
+ *
+ * Takes focus on initialisation for accessible announcement, unless disabled in configuration.
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for error summary
+ * @param {ErrorSummaryConfig} [config] - Error summary config
+ */
+function ErrorSummary ($module, config) {
+  // Some consuming code may not be passing a module,
+  // for example if they initialise the component
+  // on their own by directly passing the result
+  // of `document.querySelector`.
+  // To avoid breaking further JavaScript initialisation
+  // we need to safeguard against this so things keep
+  // working the same now we read the elements data attributes
+  if (!$module) {
+    // Little safety in case code gets ported as-is
+    // into and ES6 class constructor, where the return value matters
+    return this
+  }
 
-function ErrorSummary ($module) {
   this.$module = $module
+
+  var defaultConfig = {
+    disableAutoFocus: false
+  }
+  this.config = mergeConfigs(
+    defaultConfig,
+    config || {},
+    normaliseDataset($module.dataset)
+  )
 }
 
+/**
+ * Initialise component
+ */
 ErrorSummary.prototype.init = function () {
   var $module = this.$module
   if (!$module) {
@@ -22,7 +60,7 @@ ErrorSummary.prototype.init = function () {
 ErrorSummary.prototype.setFocus = function () {
   var $module = this.$module
 
-  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+  if (this.config.disableAutoFocus) {
     return
   }
 
@@ -38,13 +76,13 @@ ErrorSummary.prototype.setFocus = function () {
 }
 
 /**
-* Click event handler
-*
-* @param {MouseEvent} event - Click event
-*/
+ * Click event handler
+ *
+ * @param {MouseEvent} event - Click event
+ */
 ErrorSummary.prototype.handleClick = function (event) {
-  var target = event.target
-  if (this.focusTarget(target)) {
+  var $target = event.target
+  if (this.focusTarget($target)) {
     event.preventDefault()
   }
 }
@@ -64,7 +102,7 @@ ErrorSummary.prototype.handleClick = function (event) {
  * NVDA (as tested in 2018.3.2) - without this only the field type is announced
  * (e.g. "Edit, has autocomplete").
  *
- * @param {HTMLElement} $target - Event target
+ * @param {EventTarget} $target - Event target
  * @returns {boolean} True if the target was able to be focussed
  */
 ErrorSummary.prototype.focusTarget = function ($target) {
@@ -129,10 +167,10 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
   var $fieldset = $input.closest('fieldset')
 
   if ($fieldset) {
-    var legends = $fieldset.getElementsByTagName('legend')
+    var $legends = $fieldset.getElementsByTagName('legend')
 
-    if (legends.length) {
-      var $candidateLegend = legends[0]
+    if ($legends.length) {
+      var $candidateLegend = $legends[0]
 
       // If the input type is radio or checkbox, always use the legend if there
       // is one.
@@ -166,3 +204,11 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
 }
 
 export default ErrorSummary
+
+/**
+ * Error summary config
+ *
+ * @typedef {object} ErrorSummaryConfig
+ * @property {boolean} [disableAutoFocus = false] -
+ *  If set to `true` the error summary will not be focussed when the page loads.
+ */

data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs

@@ -1,7 +1,14 @@
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
 import '../../vendor/polyfills/Event.mjs'
-import '../../vendor/polyfills/Element/prototype/classList.mjs'
 import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
+/**
+ * Header component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for header
+ */
 function Header ($module) {
   this.$module = $module
   this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle')
@@ -22,7 +29,7 @@ function Header ($module) {
 }
 
 /**
- * Initialise header
+ * Initialise component
  *
  * Check for the presence of the header, menu and menu button – if any are
  * missing then there's nothing to do so return early.

data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs

@@ -1,11 +1,29 @@
-import '../../vendor/polyfills/Event.mjs' // addEventListener
+import { mergeConfigs } from '../../common/index.mjs'
+import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
 
-function NotificationBanner ($module) {
+/**
+ * Notification Banner component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for notification banner
+ * @param {NotificationBannerConfig} [config] - Notification banner config
+ */
+function NotificationBanner ($module, config) {
   this.$module = $module
+
+  var defaultConfig = {
+    disableAutoFocus: false
+  }
+  this.config = mergeConfigs(
+    defaultConfig,
+    config || {},
+    normaliseDataset($module.dataset)
+  )
 }
 
 /**
- * Initialise the component
+ * Initialise component
  */
 NotificationBanner.prototype.init = function () {
   var $module = this.$module
@@ -30,7 +48,7 @@ NotificationBanner.prototype.init = function () {
 NotificationBanner.prototype.setFocus = function () {
   var $module = this.$module
 
-  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+  if (this.config.disableAutoFocus) {
     return
   }
 
@@ -53,3 +71,14 @@ NotificationBanner.prototype.setFocus = function () {
 }
 
 export default NotificationBanner
+
+/**
+ * Notification banner config
+ *
+ * @typedef {object} NotificationBannerConfig
+ * @property {boolean} [disableAutoFocus = false] -
+ *   If set to `true` the notification banner will not be focussed when the page
+ *   loads. This only applies if the component has a `role` of `alert` – in
+ *   other cases the component will not be focused on page load, regardless of
+ *   this option.
+ */

data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs

@@ -1,16 +1,23 @@
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
-// addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Event.mjs'
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
+import { nodeListForEach } from '../../common/index.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
-import { nodeListForEach } from '../../common.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
+/**
+ * Radios component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for radios
+ */
 function Radios ($module) {
   this.$module = $module
   this.$inputs = $module.querySelectorAll('input[type="radio"]')
 }
 
 /**
- * Initialise Radios
+ * Initialise component
  *
  * Radios can be associated with a 'conditionally revealed' content block – for
  * example, a radio for 'Phone' could reveal an additional form field for the
@@ -28,17 +35,17 @@ Radios.prototype.init = function () {
   var $inputs = this.$inputs
 
   nodeListForEach($inputs, function ($input) {
-    var target = $input.getAttribute('data-aria-controls')
+    var targetId = $input.getAttribute('data-aria-controls')
 
     // Skip radios without data-aria-controls attributes, or where the
     // target element does not exist.
-    if (!target || !document.getElementById(target)) {
+    if (!targetId || !document.getElementById(targetId)) {
       return
     }
 
     // Promote the data-aria-controls attribute to a aria-controls attribute
     // so that the relationship is exposed in the AOM
-    $input.setAttribute('aria-controls', target)
+    $input.setAttribute('aria-controls', targetId)
     $input.removeAttribute('data-aria-controls')
   })
 
@@ -62,7 +69,7 @@ Radios.prototype.init = function () {
 }
 
 /**
- * Sync the conditional reveal states for all inputs in this $module.
+ * Sync the conditional reveal states for all radio buttons in this $module.
  */
 Radios.prototype.syncAllConditionalReveals = function () {
   nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
@@ -74,7 +81,7 @@ Radios.prototype.syncAllConditionalReveals = function () {
  * Synchronise the visibility of the conditional reveal, and its accessible
  * state, with the input's checked state.
  *
- * @param {HTMLInputElement} $input Radio input
+ * @param {HTMLInputElement} $input - Radio input
  */
 Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
   var $target = document.getElementById($input.getAttribute('aria-controls'))
@@ -95,7 +102,7 @@ Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
  * with the same name (because checking one radio could have un-checked a radio
  * in another $module)
  *
- * @param {MouseEvent} event Click event
+ * @param {MouseEvent} event - Click event
  */
 Radios.prototype.handleClick = function (event) {
   var $clickedInput = event.target

data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs

@@ -1,7 +1,15 @@
-import '../../vendor/polyfills/Function/prototype/bind.mjs'
+/* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */
+
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
-import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normalization
+import '../../vendor/polyfills/Event.mjs' // addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
+/**
+ * Skip link component
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for skip link
+ */
 function SkipLink ($module) {
   this.$module = $module
   this.$linkedElement = null
@@ -9,7 +17,7 @@ function SkipLink ($module) {
 }
 
 /**
- * Initialise the component
+ * Initialise component
  */
 SkipLink.prototype.init = function () {
   // Check for module
@@ -27,10 +35,10 @@ SkipLink.prototype.init = function () {
 }
 
 /**
-* Get linked element
-*
-* @returns {HTMLElement} $linkedElement - DOM element linked to from the skip link
-*/
+ * Get linked element
+ *
+ * @returns {HTMLElement} $linkedElement - DOM element linked to from the skip link
+ */
 SkipLink.prototype.getLinkedElement = function () {
   var linkedElementId = this.getFragmentFromUrl()