govuk_publishing_components 28.4.0 → 28.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8d54dbd05dbbd81f32e589a912b1d606692599533e68b0ae4e0ff9dd44fbe45
-  data.tar.gz: e8fbb61474b105726f43d076accad977d0d43647e6877dc4f5f26968ae89de98
+  metadata.gz: 3ebad3c8838bc6fe453b4dbf3274f3289885e17c4ab87456140663f68ab48fbb
+  data.tar.gz: 3a74ffb39a677727ac02521fb63549c7dd62f995c67b20555f0e07a9b89c2da3
 SHA512:
-  metadata.gz: 90d5e091ae34ba4f083e9f051896e9e1a2bcbd17d2afd0969bdca2bf2505f40441f74d81496fd63881e0f61002d7884dc32f0ef4e01b74b0e981287d67975b2d
-  data.tar.gz: b2eec023c7640b917b5331d5166083fdf7a5189fd010c4d98199668857a78e9158bdde0f700c6a6e2a29e3556e17fefa635ef9fc684e4eabada7951286577697
+  metadata.gz: f50da8d0de71594b12f61e96b030dd956e5cfe6e71cd12ffdd02365720d3a33b1c981633415f805d09c357fddf69e90bb853662256c2ef21bcdab4b1497a24e0
+  data.tar.gz: 8320ccc0808090c48328b117d18c6241341ebdb50c84e157868386992278d41d431c9a2a853f22330b07e6df6f0871cd73172cb1f8d7f5a71542c9a1b0ff820e

data/README.md

@@ -27,12 +27,12 @@ bundle exec rake
 
 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/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

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -40,15 +40,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.$module.sessionStoreLink = this.$module.sessionStoreLink + '_' + this.$module.uniqueId
     }
 
-    this.$module.upChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">' +
-      '<path class="gem-c-step-nav__chevron-stroke" d="M19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499998 10C0.499999 4.7533 4.7533 0.500001 10 0.500002C15.2467 0.500003 19.5 4.7533 19.5 10Z" stroke="#1D70B8"/>' +
-      '<path class="gem-c-step-nav__chevron-stroke" d="M6.32617 12.3262L10 8.65234L13.6738 12.3262" stroke="#1D70B8" stroke-width="2"/>' +
-      '</svg>'
-    this.$module.downChevronSvg = '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">' +
-      '<path class="gem-c-step-nav__chevron-stroke" d="M0.499997 10C0.499998 4.75329 4.75329 0.499999 10 0.499999C15.2467 0.5 19.5 4.75329 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.75329 19.5 0.499997 15.2467 0.499997 10Z" stroke="#1D70B8"/>' +
-      '<path class="gem-c-step-nav__chevron-stroke" d="M13.6738 8.67383L10 12.3477L6.32617 8.67383" stroke="#1D70B8" stroke-width="2"/>' +
-      '</svg>'
-
     var stepNavTracker = new this.StepNavTracker(this.$module.uniqueId, this.$module.totalSteps, this.$module.totalLinks)
 
     this.getTextForInsertedElements()
@@ -73,16 +64,19 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Gemstepnav.prototype.addShowHideAllButton = function () {
-    var showall = document.createElement('div')
-    showall.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
-    showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
-      '<span class="gem-c-step-nav__button-text gem-c-step-nav__button-text--all js-step-controls-button-text">' + this.$module.actions.showAllText + '</span>' +
-      '<span class="gem-c-step-nav__chevron js-step-controls-button-icon">' + this.$module.downChevronSvg + '</span>' +
-      '</button>'
-
+    var showAll = document.createElement('div')
     var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
-    this.$module.insertBefore(showall, steps)
 
+    showAll.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
+    showAll.innerHTML =
+      '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
+        '<span class="gem-c-step-nav__chevron gem-c-step-nav__chevron--down js-step-controls-button-icon"></span>' +
+          '<span class="gem-c-step-nav__button-text gem-c-step-nav__button-text--all js-step-controls-button-text">' +
+            this.$module.actions.showAllText +
+          '</span>' +
+      '</button>'
+
+    this.$module.insertBefore(showAll, steps)
     this.$module.showOrHideAllButton = this.$module.querySelectorAll('.js-step-controls-button')[0]
   }
 
@@ -91,30 +85,26 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var thisel = this.$module.stepHeaders[i]
 
       if (!thisel.querySelectorAll('.js-toggle-link').length) {
-        var span = document.createElement('span')
         var showHideSpan = document.createElement('span')
         var showHideSpanText = document.createElement('span')
         var showHideSpanIcon = document.createElement('span')
-        var commaSpan = document.createElement('span')
+        var showHideSpanFocus = document.createElement('span')
         var thisSectionSpan = document.createElement('span')
 
         showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link govuk-!-display-none-print'
         showHideSpanText.className = 'gem-c-step-nav__button-text js-toggle-link-text'
         showHideSpanIcon.className = 'gem-c-step-nav__chevron js-toggle-link-icon'
-        commaSpan.className = 'govuk-visually-hidden'
+        showHideSpanFocus.className = 'gem-c-step-nav__toggle-link-focus'
         thisSectionSpan.className = 'govuk-visually-hidden'
 
-        showHideSpan.appendChild(showHideSpanText)
-        showHideSpan.appendChild(showHideSpanIcon)
+        showHideSpan.appendChild(showHideSpanFocus)
+        showHideSpanFocus.appendChild(showHideSpanIcon)
+        showHideSpanFocus.appendChild(showHideSpanText)
 
-        commaSpan.innerHTML = ', '
         thisSectionSpan.innerHTML = ' this section'
+        showHideSpan.appendChild(thisSectionSpan)
 
-        span.appendChild(commaSpan)
-        span.appendChild(showHideSpan)
-        span.appendChild(thisSectionSpan)
-
-        thisel.querySelectorAll('.js-step-title-button')[0].appendChild(span)
+        thisel.querySelectorAll('.js-step-title-button')[0].appendChild(showHideSpan)
       }
     }
   }
@@ -125,6 +115,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.addAriaControlsAttrForShowHideAllButton = function () {
     var ariaControlsValue = this.$module.querySelectorAll('.js-panel')[0].getAttribute('id')
+
     this.$module.showOrHideAllButton.setAttribute('aria-controls', ariaControlsValue)
   }
 
@@ -184,7 +175,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           '<button ' +
             'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
             'aria-expanded="false" aria-controls="' + contentId + '">' +
-              '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
+              '<span class="gem-c-step-nav____title-text-focus">' +
+                  '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
+                  '<span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>' +
+              '</span>' +
           '</button>' +
         '</span>'
     }
@@ -358,12 +352,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.setShowHideAllText = function () {
     var shownSteps = this.$module.querySelectorAll('.step-is-shown').length
-
+    var showAllChevon = this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-icon')
+    var showAllButtonText = this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-text')
     // Find out if the number of is-opens == total number of steps
     var shownStepsIsTotalSteps = shownSteps === this.$module.totalSteps
 
-    this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-text').innerHTML = shownStepsIsTotalSteps ? this.$module.actions.hideAllText : this.$module.actions.showAllText
-    this.$module.showOrHideAllButton.querySelector('.js-step-controls-button-icon').innerHTML = shownStepsIsTotalSteps ? this.$module.upChevronSvg : this.$module.downChevronSvg
+    if (shownStepsIsTotalSteps) {
+      showAllButtonText.innerHTML = this.$module.actions.hideAllText
+      showAllChevon.classList.remove('gem-c-step-nav__chevron--down')
+    } else {
+      showAllButtonText.innerHTML = this.$module.actions.showAllText
+      showAllChevon.classList.add('gem-c-step-nav__chevron--down')
+    }
   }
 
   Gemstepnav.prototype.StepView = function (stepElement, $module) {
@@ -391,19 +391,22 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     this.setIsShown = function (isShown) {
+      var toggleLink = this.stepElement.querySelectorAll('.js-toggle-link')[0]
+      var toggleLinkText = toggleLink.querySelector('.js-toggle-link-text')
+      var stepChevron = toggleLink.querySelector('.js-toggle-link-icon')
+
       if (isShown) {
         this.stepElement.classList.add('step-is-shown')
         this.stepContent.classList.remove('js-hidden')
+        toggleLinkText.innerHTML = this.hideText
+        stepChevron.classList.remove('gem-c-step-nav__chevron--down')
       } else {
         this.stepElement.classList.remove('step-is-shown')
         this.stepContent.classList.add('js-hidden')
+        toggleLinkText.innerHTML = this.showText
+        stepChevron.classList.add('gem-c-step-nav__chevron--down')
       }
-
       this.titleButton.setAttribute('aria-expanded', isShown)
-      var showHideText = this.stepElement.querySelectorAll('.js-toggle-link')[0]
-
-      showHideText.querySelector('.js-toggle-link-text').innerHTML = isShown ? this.hideText : this.showText
-      showHideText.querySelector('.js-toggle-link-icon').innerHTML = isShown ? this.upChevronSvg : this.downChevronSvg
     }
 
     this.isShown = function () {

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

@@ -2,4 +2,4 @@
 // = require govuk/components/tabs/tabs.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.GovukTabs = window.GOVUKFrontend
+window.GOVUK.Modules.GovukTabs = window.GOVUKFrontend.Tabs