govuk_publishing_components 32.1.0 → 33.0.0

data/node_modules/govuk-frontend/govuk-esm/common/normalise-dataset.mjs

@@ -0,0 +1,58 @@
+import '../vendor/polyfills/Element/prototype/dataset.mjs'
+import '../vendor/polyfills/String/prototype/trim.mjs'
+
+/**
+ * Normalise string
+ *
+ * 'If it looks like a duck, and it quacks like a duck…' 🦆
+ *
+ * If the passed value looks like a boolean or a number, convert it to a boolean
+ * or number.
+ *
+ * Designed to be used to convert config passed via data attributes (which are
+ * always strings) into something sensible.
+ *
+ * @param {string} value - The value to normalise
+ * @returns {string | boolean | number | undefined} Normalised data
+ */
+export function normaliseString (value) {
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  var trimmedValue = value.trim()
+
+  if (trimmedValue === 'true') {
+    return true
+  }
+
+  if (trimmedValue === 'false') {
+    return false
+  }
+
+  // Empty / whitespace-only strings are considered finite so we need to check
+  // the length of the trimmed string as well
+  if (trimmedValue.length > 0 && isFinite(trimmedValue)) {
+    return Number(trimmedValue)
+  }
+
+  return value
+}
+
+/**
+ * Normalise dataset
+ *
+ * Loop over an object and normalise each value using normaliseData function
+ *
+ * @param {DOMStringMap} dataset - HTML element dataset
+ * @returns {Object<string, string | boolean | number | undefined>} Normalised dataset
+ */
+export function normaliseDataset (dataset) {
+  var out = {}
+
+  for (var key in dataset) {
+    out[key] = normaliseString(dataset[key])
+  }
+
+  return out
+}

data/node_modules/govuk-frontend/govuk-esm/common.mjs

@@ -1,28 +1,6 @@
-/**
- * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
- * This seems to fail in IE8, requires more investigation.
- * See: https://github.com/imagitama/nodelist-foreach-polyfill
- */
-export function nodeListForEach (nodes, callback) {
-  if (window.NodeList.prototype.forEach) {
-    return nodes.forEach(callback)
-  }
-  for (var i = 0; i < nodes.length; i++) {
-    callback.call(window, nodes[i], i, nodes)
-  }
-}
-
-// Used to generate a unique string, allows multiple instances of the component without
-// Them conflicting with each other.
-// https://stackoverflow.com/a/8809472
-export function generateUniqueID () {
-  var d = new Date().getTime()
-  if (typeof window.performance !== 'undefined' && typeof window.performance.now === 'function') {
-    d += window.performance.now() // use high-precision timer if available
-  }
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = (d + Math.random() * 16) % 16 | 0
-    d = Math.floor(d / 16)
-    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
-  })
-}
+// Implementation of common function is gathered in the `common` folder
+// as some are split in their own modules to limit impacts of the polyfills
+// they require.
+// This module exports the non polyfilled methods as they used to be
+// to avoid breaking changes
+export * from './common/index.mjs'

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

@@ -1,31 +1,56 @@
-
-/*
-  Accordion
-
-  This allows a collection of sections to be collapsed by default,
-  showing only their headers. Sections can be expanded or collapsed
-  individually by clicking their headers. An "Show all sections" button is
-  also added to the top of the accordion, which switches to "Hide all sections"
-  when all the sections are expanded.
-
-  The state of each section is saved to the DOM via the `aria-expanded`
-  attribute, which also provides accessibility.
-
-  A Chevron icon has been added for extra affordance that this is an interactive element.
-
-*/
-
-import { nodeListForEach } from '../../common.mjs'
+import { nodeListForEach, mergeConfigs, extractConfigByNamespace } from '../../common/index.mjs'
+import { I18n } from '../../i18n.mjs'
 import '../../vendor/polyfills/Function/prototype/bind.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import '../../vendor/polyfills/String/prototype/trim.mjs'
+import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 
-function Accordion ($module) {
+/**
+ * @constant
+ * @type {AccordionTranslations}
+ * @see Default value for {@link AccordionConfig.i18n}
+ * @default
+ */
+var ACCORDION_TRANSLATIONS = {
+  hideAllSections: 'Hide all sections',
+  hideSection: 'Hide',
+  hideSectionAriaLabel: 'Hide this section',
+  showAllSections: 'Show all sections',
+  showSection: 'Show',
+  showSectionAriaLabel: 'Show this section'
+}
+
+/**
+ * Accordion component
+ *
+ * This allows a collection of sections to be collapsed by default, showing only
+ * their headers. Sections can be expanded or collapsed individually by clicking
+ * their headers. A "Show all sections" button is also added to the top of the
+ * accordion, which switches to "Hide all sections" when all the sections are
+ * expanded.
+ *
+ * The state of each section is saved to the DOM via the `aria-expanded`
+ * attribute, which also provides accessibility.
+ *
+ * @class
+ * @param {HTMLElement} $module - HTML element to use for accordion
+ * @param {AccordionConfig} [config] - Accordion config
+ */
+function Accordion ($module, config) {
   this.$module = $module
-  this.moduleId = $module.getAttribute('id')
   this.$sections = $module.querySelectorAll('.govuk-accordion__section')
-  this.$showAllButton = ''
   this.browserSupportsSessionStorage = helper.checkForSessionStorage()
 
+  var defaultConfig = {
+    i18n: ACCORDION_TRANSLATIONS
+  }
+  this.config = mergeConfigs(
+    defaultConfig,
+    config || {},
+    normaliseDataset($module.dataset)
+  )
+  this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'))
+
   this.controlsClass = 'govuk-accordion__controls'
   this.showAllClass = 'govuk-accordion__show-all'
   this.showAllTextClass = 'govuk-accordion__show-all-text'
@@ -116,7 +141,7 @@ Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
   // Create a button element that will replace the '.govuk-accordion__section-button' span
   var $button = document.createElement('button')
   $button.setAttribute('type', 'button')
-  $button.setAttribute('aria-controls', this.moduleId + '-content-' + (index + 1))
+  $button.setAttribute('aria-controls', this.$module.id + '-content-' + (index + 1))
 
   // Copy all attributes (https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes) from $span to $button
   for (var i = 0; i < $span.attributes.length; i++) {
@@ -233,17 +258,34 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
   var $icon = $section.querySelector('.' + this.upChevronIconClass)
   var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass)
   var $button = $section.querySelector('.' + this.sectionButtonClass)
-  var newButtonText = expanded ? 'Hide' : 'Show'
-
-  // Build additional copy of "this section" for assistive technology and place inside toggle link
-  var $visuallyHiddenText = document.createElement('span')
-  $visuallyHiddenText.classList.add('govuk-visually-hidden')
-  $visuallyHiddenText.innerHTML = ' this section'
+  var newButtonText = expanded
+    ? this.i18n.t('hideSection')
+    : this.i18n.t('showSection')
 
-  $showHideText.innerHTML = newButtonText
-  $showHideText.appendChild($visuallyHiddenText)
+  $showHideText.innerText = newButtonText
   $button.setAttribute('aria-expanded', expanded)
 
+  // Update aria-label combining
+  var $header = $section.querySelector('.' + this.sectionHeadingTextClass)
+  var ariaLabelParts = [$header.innerText.trim()]
+
+  var $summary = $section.querySelector('.' + this.sectionSummaryClass)
+  if ($summary) {
+    ariaLabelParts.push($summary.innerText.trim())
+  }
+
+  var ariaLabelMessage = expanded
+    ? this.i18n.t('hideSectionAriaLabel')
+    : this.i18n.t('showSectionAriaLabel')
+  ariaLabelParts.push(ariaLabelMessage)
+
+  /*
+   * Join with a comma to add pause for assistive technology.
+   * Example: [heading]Section A ,[pause] Show this section.
+   * https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/
+   */
+  $button.setAttribute('aria-label', ariaLabelParts.join(' , '))
+
   // Swap icon, change class
   if (expanded) {
     $section.classList.add(this.sectionExpandedClass)
@@ -278,9 +320,11 @@ Accordion.prototype.checkIfAllSectionsOpen = function () {
 Accordion.prototype.updateShowAllButton = function (expanded) {
   var $showAllIcon = this.$showAllButton.querySelector('.' + this.upChevronIconClass)
   var $showAllText = this.$showAllButton.querySelector('.' + this.showAllTextClass)
-  var newButtonText = expanded ? 'Hide all sections' : 'Show all sections'
+  var newButtonText = expanded
+    ? this.i18n.t('hideAllSections')
+    : this.i18n.t('showAllSections')
   this.$showAllButton.setAttribute('aria-expanded', expanded)
-  $showAllText.innerHTML = newButtonText
+  $showAllText.innerText = newButtonText
 
   // Swap icon, toggle class
   if (expanded) {
@@ -343,17 +387,14 @@ Accordion.prototype.setInitialState = function ($section) {
 }
 
 /**
-* Create an element to improve semantics of the section button with punctuation
-* @return {object} DOM element
-*
-* Used to add pause (with a comma) for assistive technology.
-* Example: [heading]Section A ,[pause] Show this section.
-* https://accessibility.blog.gov.uk/2017/12/18/what-working-on-gov-uk-navigation-taught-us-about-accessibility/
-*
-* Adding punctuation to the button can also improve its general semantics by dividing its contents
-* into thematic chunks.
-* See https://github.com/alphagov/govuk-frontend/issues/2327#issuecomment-922957442
-*/
+ * Create an element to improve semantics of the section button with punctuation
+ *
+ * @returns {HTMLSpanElement} DOM element
+ *
+ * Adding punctuation to the button can also improve its general semantics by dividing its contents
+ * into thematic chunks.
+ * See https://github.com/alphagov/govuk-frontend/issues/2327#issuecomment-922957442
+ */
 Accordion.prototype.getButtonPunctuationEl = function () {
   var $punctuationEl = document.createElement('span')
   $punctuationEl.classList.add('govuk-visually-hidden', 'govuk-accordion__section-heading-divider')
@@ -362,3 +403,32 @@ Accordion.prototype.getButtonPunctuationEl = function () {
 }
 
 export default Accordion
+
+/**
+ * Accordion config
+ *
+ * @typedef {object} AccordionConfig
+ * @property {AccordionTranslations} [i18n = ACCORDION_TRANSLATIONS] - See constant {@link ACCORDION_TRANSLATIONS}
+ */
+
+/**
+ * Accordion translations
+ *
+ * @typedef {object} AccordionTranslations
+ *
+ * Messages used by the component for the labels of its buttons. This includes
+ * the visible text shown on screen, and text to help assistive technology users
+ * for the buttons toggling each section.
+ * @property {string} [hideAllSections] - The text content for the 'Hide all
+ * sections' button, used when at least one section is expanded.
+ * @property {string} [hideSection] - The text content for the 'Hide'
+ * button, used when a section is expanded.
+ * @property {string} [hideSectionAriaLabel] - The text content appended to the
+ * 'Hide' button's accessible name when a section is expanded.
+ * @property {string} [showAllSections] - The text content for the 'Show all
+ * sections' button, used when all sections are collapsed.
+ * @property {string} [showSection] - The text content for the 'Show'
+ * button, used when a section is collapsed.
+ * @property {string} [showSectionAriaLabel] - The text content appended to the
+ * 'Show' button's accessible name when a section is expanded.
+ */

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

@@ -1,47 +1,84 @@
+import { mergeConfigs } from '../../common/index.mjs'
+import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normaliziation
 import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 var KEY_SPACE = 32
 var DEBOUNCE_TIMEOUT_IN_SECONDS = 1
 
-function Button ($module) {
+/**
+ * JavaScript enhancements for the Button component
+ *
+ * @class
+ * @param {HTMLElement} $module - The element this component controls
+ * @param {ButtonConfig} config - Button config
+ */
+function Button ($module, config) {
+  if (!$module) {
+    return this
+  }
+
   this.$module = $module
   this.debounceFormSubmitTimer = null
+
+  var defaultConfig = {
+    preventDoubleClick: false
+  }
+  this.config = mergeConfigs(
+    defaultConfig,
+    config || {},
+    normaliseDataset($module.dataset)
+  )
 }
 
 /**
-* JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
-*
-* Created since some Assistive Technologies (for example some Screenreaders)
-* will tell a user to press space on a 'button', so this functionality needs to be shimmed
-* See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
-*
-* @param {object} event event
-*/
+ * Initialise component
+ */
+Button.prototype.init = function () {
+  if (!this.$module) {
+    return
+  }
+
+  this.$module.addEventListener('keydown', this.handleKeyDown)
+  this.$module.addEventListener('click', this.debounce.bind(this))
+}
+
+/**
+ * Trigger a click event when the space key is pressed
+ *
+ * Some screen readers tell users they can activate things with the 'button'
+ * role, so we need to match the functionality of native HTML buttons
+ *
+ * See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
+ *
+ * @param {KeyboardEvent} event
+ */
 Button.prototype.handleKeyDown = function (event) {
-  // get the target element
   var target = event.target
-  // if the element has a role='button' and the pressed key is a space, we'll simulate a click
+
   if (target.getAttribute('role') === 'button' && event.keyCode === KEY_SPACE) {
-    event.preventDefault()
-    // trigger the target's click event
+    event.preventDefault() // prevent the page from scrolling
     target.click()
   }
 }
 
 /**
-* If the click quickly succeeds a previous click then nothing will happen.
-* This stops people accidentally causing multiple form submissions by
-* double clicking buttons.
-*/
+ * Debounce double-clicks
+ *
+ * If the click quickly succeeds a previous click then nothing will happen. This
+ * stops people accidentally causing multiple form submissions by double
+ * clicking buttons.
+ *
+ * @param {MouseEvent} event
+ * @returns {undefined | false} - Returns undefined, or false when debounced
+ */
 Button.prototype.debounce = function (event) {
-  var target = event.target
-  // Check the button that is clicked on has the preventDoubleClick feature enabled
-  if (target.getAttribute('data-prevent-double-click') !== 'true') {
+  // Check the button that was clicked has preventDoubleClick enabled
+  if (!this.config.preventDoubleClick) {
     return
   }
 
-  // If the timer is still running then we want to prevent the click from submitting the form
+  // If the timer is still running, prevent the click from submitting the form
   if (this.debounceFormSubmitTimer) {
     event.preventDefault()
     return false
@@ -52,13 +89,13 @@ Button.prototype.debounce = function (event) {
   }.bind(this), DEBOUNCE_TIMEOUT_IN_SECONDS * 1000)
 }
 
-/**
-* Initialise an event listener for keydown at document level
-* this will help listening for later inserted elements with a role="button"
-*/
-Button.prototype.init = function () {
-  this.$module.addEventListener('keydown', this.handleKeyDown)
-  this.$module.addEventListener('click', this.debounce)
-}
-
 export default Button
+
+/**
+ * Button config
+ *
+ * @typedef {object} ButtonConfig
+ * @property {boolean} [preventDoubleClick = false] -
+ *  Prevent accidental double clicks on submit buttons from submitting forms
+ *  multiple times.
+ */