govuk_publishing_components 28.5.0 → 28.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 371db87e529f0df4c14d1dd53c23ebc9c5d7f7df9574359ed8d64da6c7302953
-  data.tar.gz: dc72630351ee918647581cfc58b7ca7c19282c50990c16bd72eec14222fbd375
+  metadata.gz: 5dbe5219da6d54a38c3909d40c427560378214263daa7701f83c7972c24509d4
+  data.tar.gz: 850ad5d021962d86f7d192ebe353d850c3041e21f200dfbbeceb12d5a3c83304
 SHA512:
-  metadata.gz: ca824e190545a628771d2ef3e632aa57b5144bec484a4538b0e9a53caee73421e13f67c6d50ff114720b3b810f6435892be1491afff41825cbc989970f1e73ed
-  data.tar.gz: ed1b7d8547fd264afc779a55adc347ff22ccf170cb1b003da362bc8ca9bbbf59964522387cba9059b0eb8038dc9487b0c5262a5e1e54e8e5245e23d5845edd6f
+  metadata.gz: de64be05c1cb2168c55c4ab9a7eea97c0e4861b9625edeb0cbec24b419f1f3b15c9d1908c5aa50a382946237052c5eb4312137df75ba87d21314b8e02bec661e
+  data.tar.gz: 71eecbbd72eba66a68b972e3f8020cd87b96bf076094f2bf1330271b012f95c735fb907d66e8d25ad5562ce72157a5e15921e51fe882eb593f6c84e3d7460cf3

data/README.md

@@ -29,10 +29,10 @@ To run JavaScript tests (only):
 
 ```sh
 # run JS tests in browser
-bin/rake app:jasmine
+yarn run jasmine:browser
 
 # run JS tests on command line
-bin/rake app:jasmine:ci
+yarn run jasmine:ci
 ```
 
 ### Further documentation

data/app/assets/javascripts/govuk_publishing_components/analytics/page-content.js

@@ -14,7 +14,7 @@
       case isDocumentCollectionPage():
         return document.querySelectorAll('.document-collection .group-title').length
       case isMainstreamBrowsePage():
-        return countVisible(document.querySelectorAll('#subsection ul')) || document.querySelectorAll('#section ul').length
+        return countVisible(document.querySelectorAll('#subsection ul')) || document.querySelectorAll('#section ul').length || document.querySelectorAll('#root ul').length
       case isTopicPage():
         return document.querySelectorAll('.topics-page nav.index-list').length
       case isPolicyAreaPage():
@@ -45,7 +45,7 @@
       case isDocumentCollectionPage():
         return document.querySelectorAll('.document-collection .group-document-list li a').length
       case isMainstreamBrowsePage():
-        return countVisible(document.querySelectorAll('#subsection ul a')) || document.querySelectorAll('#section ul a').length
+        return countVisible(document.querySelectorAll('#subsection ul a')) || document.querySelectorAll('#section ul a').length || document.querySelectorAll('#root ul a').length
       case isTopicPage():
         return document.querySelectorAll('.topics-page .index-list ul a').length ||
           document.querySelectorAll('.topics-page .topics ul a').length
@@ -71,7 +71,7 @@
   function getMetaAttribute (selector) {
     var element = document.querySelector(selector)
     if (element) {
-      return element.getAttribute('content')
+      return element.getAttribute('content').toLowerCase()
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/analytics/track-select-change.js

@@ -2,10 +2,11 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function TrackSelectChange () { }
+  function TrackSelectChange ($module) {
+    this.$module = $module
+  }
 
-  TrackSelectChange.prototype.start = function ($module) {
-    this.$module = $module[0]
+  TrackSelectChange.prototype.init = function ($module) {
     this.$module.trackChange = this.trackChange.bind(this)
     this.$module.fireTrackingChange = this.fireTrackingChange.bind(this)
     this.$module.addEventListener('change', this.trackChange)

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -1,32 +1,18 @@
 /* global nodeListForEach */
-//  = require ../vendor/polyfills/closest.js
-//  = require ../vendor/polyfills/indexOf.js
 //  = require ../vendor/polyfills/common.js
-
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/accordion/accordion.js
 window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {};
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
 (function (Modules) {
   function GemAccordion ($module) {
     this.$module = $module
-    this.sectionClass = 'gem-c-accordion__section'
-    this.moduleId = this.$module.getAttribute('id')
-    this.sections = this.$module.querySelectorAll('.' + this.sectionClass)
-    this.openAllButton = ''
-    this.controlsClass = 'gem-c-accordion__controls'
-    this.openAllClass = 'gem-c-accordion__open-all'
-    this.openAllTextClass = 'gem-c-accordion__open-all-text'
-    this.sectionHeaderClass = 'gem-c-accordion__section-header'
-    this.sectionHeadingClass = 'gem-c-accordion__section-heading'
-    this.sectionSummaryClass = 'gem-c-accordion__section-summary'
-    this.sectionButtonClass = 'gem-c-accordion__section-button'
-    this.sectionExpandedClass = 'gem-c-accordion__section--expanded'
-    this.sectionInnerContent = 'gem-c-accordion__section-content'
-    this.toggleLinkClass = 'js-toggle-link'
-    this.sectionShowHideIconClass = 'gem-c-accordion__toggle-link'
-    this.sectionShowHideTextClass = 'gem-c-accordion__toggle-text'
-    this.upChevonIconClass = 'gem-c-accordion-nav__chevron'
-    this.downChevonIconClass = 'gem-c-accordion-nav__chevron--down'
+    this.sectionClass = 'govuk-accordion__section'
+    this.sectionClassExpanded = 'govuk-accordion__section--expanded'
+    this.sectionHeaderClass = 'govuk-accordion__section-header'
+    this.sectionInnerContent = 'govuk-accordion__section-content'
 
     // Translated component content and language attribute pulled from data attributes
     this.$module.actions = {}
@@ -39,279 +25,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   GemAccordion.prototype.init = function () {
-    this.browserSupportsSessionStorage = helper.checkForSessionStorage()
-
     // Indicate that JavaScript has worked
     this.$module.classList.add('gem-c-accordion--active')
 
-    this.initControls()
-    this.initSectionHeaders()
-
     // Feature flag for anchor tag navigation used on manuals
     if (this.$module.getAttribute('data-anchor-navigation') === 'true') {
       this.openByAnchorOnLoad()
       this.addEventListenersForAnchors()
     }
-
-    // See if "Show all sections" button text should be updated
-    var areAllSectionsOpen = this.checkIfAllSectionsOpen()
-    this.updateOpenAllButton(areAllSectionsOpen)
-  }
-
-  // Initialise controls and set attributes
-  GemAccordion.prototype.initControls = function () {
-    // Create "Show all" button and set attributes
-    this.openAllButton = document.createElement('button')
-    this.openAllButton.setAttribute('class', this.openAllClass)
-    this.openAllButton.setAttribute('aria-expanded', 'false')
-
-    // Create icon, add to element
-    var icon = document.createElement('span')
-    icon.classList.add(this.upChevonIconClass)
-    this.openAllButton.appendChild(icon)
-
-    // Create control wrapper and add controls to it
-    var accordionControls = document.createElement('div')
-    accordionControls.setAttribute('class', this.controlsClass)
-    accordionControls.appendChild(this.openAllButton)
-    this.$module.insertBefore(accordionControls, this.$module.firstChild)
-
-    // Build additional wrapper for open all toggle text, place icon after wrapped text.
-    var wrapperOpenAllText = document.createElement('span')
-    wrapperOpenAllText.classList.add(this.openAllTextClass)
-    this.openAllButton.insertBefore(wrapperOpenAllText, this.openAllButton.childNodes[0] || null)
-
-    // Handle events for the controls
-    this.openAllButton.addEventListener('click', this.onOpenOrCloseAllToggle.bind(this))
-  }
-
-  // Initialise section headers
-  GemAccordion.prototype.initSectionHeaders = function () {
-    // Loop through section headers
-    nodeListForEach(this.sections, function (section, i) {
-      // Set header attributes
-      var header = section.querySelector('.' + this.sectionHeaderClass)
-
-      this.initHeaderAttributes(header, i)
-      this.setExpanded(this.isExpanded(section), section)
-
-      // Handle events
-      header.addEventListener('click', this.onSectionToggle.bind(this, section))
-
-      // See if there is any state stored in sessionStorage and set the sections to
-      // open or closed.
-      this.setInitialState(section)
-    }.bind(this))
-  }
-
-  // Set individual header attributes
-  GemAccordion.prototype.initHeaderAttributes = function (headerWrapper, index) {
-    var span = headerWrapper.querySelector('.' + this.sectionButtonClass)
-    var heading = headerWrapper.querySelector('.' + this.sectionHeadingClass)
-    var summary = headerWrapper.querySelector('.' + this.sectionSummaryClass)
-
-    // Copy existing span element to an actual button element, for improved accessibility.
-    var button = document.createElement('button')
-    button.setAttribute('id', this.moduleId + '-heading-' + (index + 1))
-    button.setAttribute('aria-controls', this.moduleId + '-content-' + (index + 1))
-
-    // Create show / hide arrow icons with text.
-    var showIcons = document.createElement('span')
-    showIcons.classList.add(this.sectionShowHideIconClass, this.toggleLinkClass)
-
-    // Add pause after heading for assistive technology.
-    var srPause = document.createElement('span')
-    srPause.classList.add('govuk-visually-hidden')
-    srPause.innerHTML = ', '
-
-    // Build additional copy for assistive technology
-    var srAdditionalCopy = document.createElement('span')
-    srAdditionalCopy.classList.add('govuk-visually-hidden')
-    srAdditionalCopy.innerHTML = this.$module.actions.thisSectionVisuallyHidden
-
-    if (this.$module.actions.locale) {
-      srAdditionalCopy.lang = this.filterLocale('this_section_visually_hidden')
-    }
-
-    // Build additional wrapper for toggle text, place icon after wrapped text.
-    var wrapperShowHideIcon = document.createElement('span')
-    var icon = document.createElement('span')
-    icon.classList.add(this.upChevonIconClass)
-    showIcons.appendChild(icon)
-    wrapperShowHideIcon.classList.add(this.sectionShowHideTextClass)
-    showIcons.insertBefore(wrapperShowHideIcon, showIcons.childNodes[0] || null)
-
-    // 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++) {
-      var attr = span.attributes.item(i)
-      button.setAttribute(attr.nodeName, attr.nodeValue)
-    }
-
-    // span could contain HTML elements (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
-    button.innerHTML = span.innerHTML
-    heading.removeChild(span)
-    heading.appendChild(button)
-    button.appendChild(srPause)
-
-    // If summary content exists add to DOM in correct order
-    if (typeof (summary) !== 'undefined' && summary !== null) {
-      button.setAttribute('aria-describedby', this.moduleId + '-summary-' + (index + 1))
-      button.appendChild(summary)
-    }
-
-    button.appendChild(showIcons)
-    button.appendChild(srAdditionalCopy)
-  }
-
-  // When section toggled, set and store state
-  GemAccordion.prototype.onSectionToggle = function (section) {
-    var expanded = this.isExpanded(section)
-    this.setExpanded(!expanded, section)
-
-    // Store the state in sessionStorage when a change is triggered
-    this.storeState(section)
-  }
-
-  // When Open/Close All toggled, set and store state
-  GemAccordion.prototype.onOpenOrCloseAllToggle = function () {
-    var module = this
-    var sections = this.sections
-    var nowExpanded = !this.checkIfAllSectionsOpen()
-
-    nodeListForEach(sections, function (section) {
-      module.setExpanded(nowExpanded, section)
-      // Store the state in sessionStorage when a change is triggered
-      module.storeState(section)
-    })
-
-    module.updateOpenAllButton(nowExpanded)
-  }
-
-  // Set section attributes when opened/closed
-  GemAccordion.prototype.setExpanded = function (expanded, section) {
-    var icon = section.querySelector('.' + this.upChevonIconClass)
-    var showHideText = section.querySelector('.' + this.sectionShowHideTextClass)
-    var button = section.querySelector('.' + this.sectionButtonClass)
-    var newButtonText = expanded ? this.$module.actions.hideText : this.$module.actions.showText
-
-    showHideText.innerHTML = newButtonText
-    button.setAttribute('aria-expanded', expanded)
-    button.classList.add(this.toggleLinkClass)
-
-    if (this.$module.actions.locale) {
-      showHideText.lang = this.filterLocale(expanded ? 'hide_text' : 'show_text')
-    }
-
-    // Swap icon, change class
-    if (expanded) {
-      section.classList.add(this.sectionExpandedClass)
-      icon.classList.remove(this.downChevonIconClass)
-    } else {
-      section.classList.remove(this.sectionExpandedClass)
-      icon.classList.add(this.downChevonIconClass)
-    }
-
-    // See if "Show all sections" button text should be updated
-    var areAllSectionsOpen = this.checkIfAllSectionsOpen()
-    this.updateOpenAllButton(areAllSectionsOpen)
-  }
-
-  // Get state of section
-  GemAccordion.prototype.isExpanded = function (section) {
-    return section.classList.contains(this.sectionExpandedClass)
-  }
-
-  // Check if all sections are open
-  GemAccordion.prototype.checkIfAllSectionsOpen = function () {
-    // Get a count of all the Accordion sections
-    var sectionsCount = this.sections.length
-    // Get a count of all Accordion sections that are expanded
-    var expandedSectionCount = this.$module.querySelectorAll('.' + this.sectionExpandedClass).length
-    var areAllSectionsOpen = sectionsCount === expandedSectionCount
-
-    return areAllSectionsOpen
-  }
-
-  // Update "Show all sections" button
-  GemAccordion.prototype.updateOpenAllButton = function (expanded) {
-    var icon = this.openAllButton.querySelector('.' + this.upChevonIconClass)
-    var openAllCopy = this.openAllButton.querySelector('.' + this.openAllTextClass)
-    var newButtonText = expanded ? this.$module.actions.hideAllText : this.$module.actions.showAllText
-
-    this.openAllButton.setAttribute('aria-expanded', expanded)
-    openAllCopy.innerHTML = newButtonText
-
-    if (this.$module.actions.locale) {
-      openAllCopy.lang = this.filterLocale(expanded ? 'hide_all_text' : 'show_all_text')
-    }
-
-    // Swap icon, toggle class
-    if (expanded) {
-      icon.classList.remove(this.downChevonIconClass)
-    } else {
-      icon.classList.add(this.downChevonIconClass)
-    }
-  }
-
-  var helper = {
-    checkForSessionStorage: function () {
-      var testString = 'this is the test string'
-      var result
-      try {
-        window.sessionStorage.setItem(testString, testString)
-        result = window.sessionStorage.getItem(testString) === testString.toString()
-        window.sessionStorage.removeItem(testString)
-        return result
-      } catch (exception) {
-        if ((typeof console === 'undefined' || typeof console.log === 'undefined')) {
-          console.log('Notice: sessionStorage not available.')
-        }
-      }
-    }
-  }
-
-  // Set the state of the accordions in sessionStorage
-  GemAccordion.prototype.storeState = function (section) {
-    if (this.browserSupportsSessionStorage) {
-      // We need a unique way of identifying each content in the GemAccordion. Since
-      // an `#id` should be unique and an `id` is required for `aria-` attributes
-      // `id` can be safely used.
-      var button = section.querySelector('.' + this.sectionButtonClass)
-
-      if (button) {
-        var contentId = button.getAttribute('aria-controls')
-        var contentState = button.getAttribute('aria-expanded')
-
-        if (typeof contentId === 'undefined' && (typeof console === 'undefined' || typeof console.log === 'undefined')) {
-          console.error(new Error('No aria controls present in accordion section heading.'))
-        }
-
-        if (typeof contentState === 'undefined' && (typeof console === 'undefined' || typeof console.log === 'undefined')) {
-          console.error(new Error('No aria expanded present in accordion section heading.'))
-        }
-
-        // Only set the state when both `contentId` and `contentState` are taken from the DOM.
-        if (contentId && contentState) {
-          window.sessionStorage.setItem(contentId, contentState)
-        }
-      }
-    }
-  }
-
-  // Read the state of the accordions from sessionStorage
-  GemAccordion.prototype.setInitialState = function (section) {
-    if (this.browserSupportsSessionStorage) {
-      var button = section.querySelector('.' + this.sectionButtonClass)
-
-      if (button) {
-        var contentId = button.getAttribute('aria-controls')
-        var contentState = contentId ? window.sessionStorage.getItem(contentId) : null
-
-        if (contentState !== null) {
-          this.setExpanded(contentState === 'true', section)
-        }
-      }
-    }
   }
 
   // Navigate to and open accordions with anchored content on page load if a hash is present
@@ -327,6 +48,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   // Adding an event listener to all anchor link a tags in an accordion is risky but we circumvent this risk partially by only being a layer of accordion behaviour instead of any sort of change to link behaviour
   GemAccordion.prototype.addEventListenersForAnchors = function () {
     var links = this.$module.querySelectorAll('.' + this.sectionInnerContent + ' a[href*="#"]')
+
     nodeListForEach(links, function (link) {
       if (link.pathname === window.location.pathname) {
         link.addEventListener('click', this.openForAnchor.bind(this, link.hash.split('#')[1]))
@@ -337,9 +59,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   // Find the parent accordion section for the given id and open it
   GemAccordion.prototype.openForAnchor = function (hash) {
     var target = document.getElementById(hash)
-    var section = this.getContainingSection(target)
-
-    this.setExpanded(true, section)
+    var $section = this.getContainingSection(target)
+    var $header = $section.querySelector('.' + this.sectionHeaderClass)
+    var $expanded = this.getContainingSection($section)
+    var $parent = $header.parentElement
+
+    // manuals-frontend features:
+    // Should the target anchor link be within the same page, open section - navigate normally
+    // Should the target anchor link be within a different, closed section, open this section
+    // Should the target anchor link be within a different page and different, closed section open this section
+    if ($expanded && (!$parent.classList.contains(this.sectionClassExpanded))) {
+      $header.click()
+    }
   }
 
   // Loop through the given id's ancestors until the parent section class is found
@@ -347,7 +78,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     while (!target.classList.contains(this.sectionClass)) {
       target = target.parentElement
     }
-
     return target
   }
 

data/app/assets/javascripts/govuk_publishing_components/components/button.js

@@ -2,4 +2,4 @@
 // = require govuk/components/button/button.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukButton = window.GOVUKFrontend
+window.GOVUK.Modules.GovukButton = window.GOVUKFrontend.Button

data/app/assets/javascripts/govuk_publishing_components/components/character-count.js

@@ -2,4 +2,4 @@
 // = require govuk/components/character-count/character-count.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukCharacterCount = window.GOVUKFrontend
+window.GOVUK.Modules.GovukCharacterCount = window.GOVUKFrontend.CharacterCount

data/app/assets/javascripts/govuk_publishing_components/components/checkboxes.js

@@ -2,7 +2,7 @@
 // = require govuk/components/checkboxes/checkboxes.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukCheckboxes = window.GOVUKFrontend;
+window.GOVUK.Modules.GovukCheckboxes = window.GOVUKFrontend.Checkboxes;
 
 (function (Modules) {
   function GemCheckboxes ($module) {

data/app/assets/javascripts/govuk_publishing_components/components/details.js

@@ -1,7 +1,7 @@
 // = require govuk/components/details/details.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukDetails = window.GOVUKFrontend;
+window.GOVUK.Modules.GovukDetails = window.GOVUKFrontend.Details;
 
 (function (Modules) {
   function GemDetails ($module) {

data/app/assets/javascripts/govuk_publishing_components/components/error-summary.js

@@ -2,4 +2,4 @@
 // = require govuk/components/error-summary/error-summary.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukErrorSummary = window.GOVUKFrontend
+window.GOVUK.Modules.GovukErrorSummary = window.GOVUKFrontend.ErrorSummary

data/app/assets/javascripts/govuk_publishing_components/components/feedback.js

@@ -87,22 +87,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           var params = new FormData($form)
           params = new URLSearchParams(params).toString()
 
-          xhr.open('POST', url, true)
-          xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
-
-          xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4 && xhr.status === 200) {
+          this.done = function () {
+            if (xhr.status === 200) {
               this.trackEvent(this.getTrackEventParams($form))
               this.showFormSuccess(xhr.message)
               this.revealInitialPrompt()
               this.setInitialAriaAttributes()
-              this.activeForm.hidden ? this.activeForm.hidden = false : this.activeForm.hidden = true
+              this.activeForm.hidden = true
             } else {
               this.showError(xhr)
               this.enableSubmitFormButton($form)
             }
           }.bind(this)
 
+          xhr.addEventListener('loadend', this.done)
+          xhr.open('POST', url, true)
+          xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
+
           this.disableSubmitFormButton($form)
           xhr.send(params)
         }.bind(this))

data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js

@@ -2,4 +2,4 @@
 // = require govuk/components/header/header.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukHeader = window.GOVUKFrontend
+window.GOVUK.Modules.GovukHeader = window.GOVUKFrontend.Header

data/app/assets/javascripts/govuk_publishing_components/components/radio.js

@@ -2,4 +2,4 @@
 // = require govuk/components/radios/radios.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukRadios = window.GOVUKFrontend
+window.GOVUK.Modules.GovukRadios = window.GOVUKFrontend.Radios

data/app/assets/javascripts/govuk_publishing_components/components/skip-link.js

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/skip-link/skip-link.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.GovukSkipLink = window.GOVUKFrontend.SkipLink