govuk_publishing_components 23.13.0 → 24.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d8c74adc692bb0b7466ea5eba32bd121b8bf4470b7cb78c71732f5de5143e35
-  data.tar.gz: c2ac6affcff44c35c9c47652945181cc59906db32e575ca25b937a120af59d0c
+  metadata.gz: 93a8bde02a39806e02cc9007a6b503aa3e65af3f1e7768b29f1d82c2c0ae66c4
+  data.tar.gz: b1e3bf6f8b98f5a4dcf2847fdca19aeed81b140491d43c230a5ea7074961d91b
 SHA512:
-  metadata.gz: d615bae60cc517e98114ebf4185fc9686d45b0860e3bf38988827a77e1338b84c2e3e13cc1b04a1841c99157d5bba8f4f751ab6046c6ff4eee7d87b9640952bf
-  data.tar.gz: 1ab8e32b4933e8de6642a5e30d48071d5590bfff81d72c6068d3b7093bf905b3025a6762f2c664171fc6e6b0e547ce1e10cf7e5fd439571e832080cd2f5eacd0
+  metadata.gz: 64cffb98c5dc002910a32ee736f21500ca921d5c3e5d165f66f87688d4e2a589da8e4aa69deba06b953924cf152aaac39e2f19752e80f7d7184285c9ce43bf8e
+  data.tar.gz: d1defc316e8d5e7171d903fa874ef1d8c93d416f1ce28e4c860aaed644b088e9621e24b2fb5a955768234a0d8d642193283509819348693b39c121e584aeeb5f

data/app/assets/images/govuk_publishing_components/take-action-amber.svg

@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#FF5800"/>
+<path d="M28.5 10L13.6739 24L6.5 17.2258" stroke="white" stroke-width="3"/>
+</svg>

data/app/assets/images/govuk_publishing_components/take-action-green.svg

@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#0EBA72"/>
+<path d="M28.5 10L13.6739 24L6.5 17.2258" stroke="white" stroke-width="3"/>
+</svg>

data/app/assets/images/govuk_publishing_components/take-action-red.svg

@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#FF003B"/>
+<path d="M28.5 10.5L13.6739 24.5L6.5 17.7258" stroke="white" stroke-width="3"/>
+</svg>

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

@@ -1,5 +1,287 @@
-// This component relies on JavaScript from GOV.UK Frontend
-// = require govuk/components/accordion/accordion.js
+/* global nodeListForEach */
+//  = require ../vendor/polyfills/closest.js
+//  = require ../vendor/polyfills/indexOf.js
+//  = require ../vendor/polyfills/common.js
+
 window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {}
-window.GOVUK.Modules.Accordion = window.GOVUKFrontend
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function GemAccordion () { }
+
+  GemAccordion.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.moduleId = this.$module.getAttribute('id')
+    this.sections = this.$module.querySelectorAll('.gem-c-accordion__section')
+    this.openAllButton = ''
+    this.browserSupportsSessionStorage = helper.checkForSessionStorage()
+    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'
+
+    // Indicate that js has worked
+    this.$module.classList.add('gem-c-accordion--active')
+
+    this.initControls()
+    this.initSectionHeaders()
+
+    // 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 addtional 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 addtional copy for assistive technology
+    var srAddtionalCopy = document.createElement('span')
+    srAddtionalCopy.classList.add('govuk-visually-hidden')
+    srAddtionalCopy.innerHTML = ' this section'
+
+    // Build addtional 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(srAddtionalCopy)
+  }
+
+  // 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 ? 'Hide' : 'Show'
+
+    showHideText.innerHTML = newButtonText
+    button.setAttribute('aria-expanded', expanded)
+    button.classList.add(this.toggleLinkClass)
+
+    // 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 ? 'Hide all sections' : 'Show all sections'
+    this.openAllButton.setAttribute('aria-expanded', expanded)
+    openAllCopy.innerHTML = newButtonText
+
+    // 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)
+        }
+      }
+    }
+  }
+
+  Modules.GemAccordion = GemAccordion
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -85,10 +85,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.cookieBannerConfirmationMessage.style.display = 'block'
   }
 
-  CookieBanner.prototype.listenForCrossOriginMessages = function () {
-    window.addEventListener('message', this.receiveMessage.bind(this), false)
-  }
-
   CookieBanner.prototype.isInCookiesPage = function () {
     return window.location.pathname === '/help/cookies'
   }

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

@@ -40,6 +40,15 @@ 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()
@@ -66,7 +75,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   Gemstepnav.prototype.addShowHideAllButton = function () {
     var showall = document.createElement('div')
     showall.className = 'gem-c-step-nav__controls'
-    showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' + this.$module.actions.showAllText + '</button>'
+    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 steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
     this.$module.insertBefore(showall, steps)
@@ -81,13 +93,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       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 thisSectionSpan = document.createElement('span')
 
         showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link'
+        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'
         thisSectionSpan.className = 'govuk-visually-hidden'
 
+        showHideSpan.appendChild(showHideSpanText)
+        showHideSpan.appendChild(showHideSpanIcon)
+
         commaSpan.innerHTML = ', '
         thisSectionSpan.innerHTML = ' this section'
 
@@ -114,7 +133,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var data = []
 
     for (var i = 0; i < this.$module.steps.length; i++) {
-      var stepView = new this.StepView(this.$module.steps[i], this.$module.actions.showText, this.$module.actions.hideText)
+      var stepView = new this.StepView(this.$module.steps[i], this.$module)
       stepView.setIsShown(isShown)
 
       if (isShown) {
@@ -136,7 +155,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     for (var i = 0; i < this.$module.steps.length; i++) {
       var thisel = this.$module.steps[i]
       var id = thisel.getAttribute('id')
-      var stepView = new this.StepView(thisel, this.$module.actions.showText, this.$module.actions.hideText)
+      var stepView = new this.StepView(thisel, this.$module)
       var shouldBeShown = thisel.hasAttribute('data-show')
 
       // show the step if it has been remembered or if it has the 'data-show' attribute
@@ -165,7 +184,7 @@ 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="js-step-title-text">' + titleText + '</span>' +
+              '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
           '</button>' +
         '</span>'
     }
@@ -177,7 +196,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     for (var i = 0; i < togglePanels.length; i++) {
       togglePanels[i].addEventListener('click', function (event) {
-        var stepView = new that.StepView(this.parentNode, that.$module.actions.showText, that.$module.actions.hideText)
+        var stepView = new that.StepView(this.parentNode, that.$module)
         stepView.toggle()
 
         var stepIsOptional = this.parentNode.hasAttribute('data-optional')
@@ -321,34 +340,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var that = this
 
     this.$module.showOrHideAllButton.addEventListener('click', function (event) {
-      var shouldshowAll
-      var showHideTexts = that.$module.querySelectorAll('.js-toggle-link')
       var textContent = this.textContent || this.innerText
+      var shouldShowAll = textContent === that.$module.actions.showAllText
 
-      if (textContent === that.$module.actions.showAllText) {
-        that.$module.showOrHideAllButton.textContent = that.$module.actions.hideAllText
-        for (var i = 0; i < showHideTexts.length; i++) {
-          showHideTexts[i].innerHTML = that.$module.actions.hideText
-        }
-        shouldshowAll = true
-
-        stepNavTracker.trackClick('pageElementInteraction', 'stepNavAllShown', {
-          label: that.$module.actions.showAllText + ': ' + that.$module.stepNavSize
-        })
-      } else {
-        that.$module.showOrHideAllButton.textContent = that.$module.actions.showAllText
-        for (var j = 0; j < showHideTexts.length; j++) {
-          showHideTexts[j].innerHTML = that.$module.actions.showText
-        }
-        shouldshowAll = false
-
-        stepNavTracker.trackClick('pageElementInteraction', 'stepNavAllHidden', {
-          label: that.$module.actions.hideAllText + ': ' + that.$module.stepNavSize
-        })
-      }
+      // Fire GA click tracking
+      stepNavTracker.trackClick('pageElementInteraction', (shouldShowAll ? 'stepNavAllShown' : 'stepNavAllHidden'), {
+        label: (shouldShowAll ? that.$module.actions.showAllText : that.$module.actions.hideAllText) + ': ' + that.$module.stepNavSize
+      })
 
-      that.setAllStepsShownState(shouldshowAll)
-      that.$module.showOrHideAllButton.setAttribute('aria-expanded', shouldshowAll)
+      that.setAllStepsShownState(shouldShowAll)
+      that.$module.showOrHideAllButton.setAttribute('aria-expanded', shouldShowAll)
       that.setShowHideAllText()
 
       return false
@@ -357,23 +358,25 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.setShowHideAllText = function () {
     var shownSteps = this.$module.querySelectorAll('.step-is-shown').length
+
     // Find out if the number of is-opens == total number of steps
-    if (shownSteps === this.$module.totalSteps) {
-      this.$module.showOrHideAllButton.textContent = this.$module.actions.hideAllText
-    } else {
-      this.$module.showOrHideAllButton.textContent = this.$module.actions.showAllText
-    }
+    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
   }
 
-  Gemstepnav.prototype.StepView = function (stepElement, showText, hideText) {
+  Gemstepnav.prototype.StepView = function (stepElement, $module) {
     this.stepElement = stepElement
     this.stepContent = this.stepElement.querySelectorAll('.js-panel')[0]
     this.titleButton = this.stepElement.querySelectorAll('.js-step-title-button')[0]
     var textElement = this.stepElement.querySelectorAll('.js-step-title-text')[0]
     this.title = textElement.textContent || textElement.innerText
     this.title = this.title.replace(/^\s+|\s+$/g, '') // this is 'trim' but supporting IE8
-    this.showText = showText
-    this.hideText = hideText
+    this.showText = $module.actions.showText
+    this.hideText = $module.actions.hideText
+    this.upChevronSvg = $module.upChevronSvg
+    this.downChevronSvg = $module.downChevronSvg
 
     this.show = function () {
       this.setIsShown(true)
@@ -398,7 +401,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       this.titleButton.setAttribute('aria-expanded', isShown)
       var showHideText = this.stepElement.querySelectorAll('.js-toggle-link')[0]
-      showHideText.innerHTML = isShown ? this.hideText : this.showText
+
+      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 () {