govuk_publishing_components 21.63.0 → 21.65.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca5313136ffde496204e61ad0ff9ac47a3a7fb9bb4b24a04698be2e64acd392f
-  data.tar.gz: 6d5956d2c5d2dceb4c7386c966b61cd3bb0201acfc591c13b1908a5cdeb0b840
+  metadata.gz: c223c076bcecd87fb23721eba8271d89a681ad4a67a11103d14330a3fefd17ac
+  data.tar.gz: 69114b477b5b22856acf4378b875bcdb69ba05b4d127eb4c9b5d0dc465f00993
 SHA512:
-  metadata.gz: 3988ac7785d2cd680e5a15a8ee039150477d3aae4cf9cb9b8436eafc0a892e5052f07fdfc9a39628667b5a092a2639e019ac821c19893e1c366756ac82a17865
-  data.tar.gz: 75b96e067b7dadea877d8ee84437653cdfbb088cf90a3eed87ce7618c6635bc22f56c7996a021c8f33e89f49bb607adeae24351bd46bc32f5d59aed97f63639d
+  metadata.gz: 616fd5f93cdc4229bc187915bd2021a0ab9b6637aaed0532c0880b7ef12a76ad9f0264e274ca69635c07f84ec121497a3e32157373836f595a8b9159f57087af
+  data.tar.gz: 6ee53e65daf9887db6f6acc92bc0d53d6394fd8a9fa6994e51baf0581700679ed7897d32a68d151176b0a0ccedc7f64d37826448cacf69240d92cfe6894884a8

data/app/assets/images/govuk_publishing_components/action-link-arrow--transparent.svg

@@ -0,0 +1 @@
+<svg width="39" height="39" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.01 6.818l-2.828 2.828 7.853 7.854-22 .066L0 21.5h22.035l-7.853 7.854 2.828 2.828L29.69 19.5zM39 19.5C39 30.27 30.27 39 19.5 39 9.373 39 1.05 31.28.092 21.405A19.737 19.737 0 010 19.5C0 8.73 8.73 0 19.5 0S39 8.73 39 19.5z" fill="#fff500"/></svg>

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

@@ -2,25 +2,27 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function Govspeak () { }
 
-  Modules.Govspeak = function () {
-    this.start = function ($element) {
-      if (!$element.hasClass('disable-youtube')) {
-        this.embedYoutube($element)
-      }
+  Govspeak.prototype.start = function ($module) {
+    this.$module = $module[0]
 
-      this.createBarcharts($element)
+    if (this.$module.className.indexOf('disable-youtube') === -1) {
+      this.embedYoutube()
     }
 
-    this.embedYoutube = function ($jqElement) {
-      var enhancement = new window.GOVUK.GovspeakYoutubeLinkEnhancement($jqElement[0])
-      enhancement.init()
-    }
+    this.createBarcharts()
+  }
 
-    this.createBarcharts = function ($element) {
-      var enhancement = new window.GOVUK.GovspeakBarchartEnhancement($element)
-      enhancement.init()
-    }
+  Govspeak.prototype.embedYoutube = function () {
+    var enhancement = new window.GOVUK.GovspeakYoutubeLinkEnhancement(this.$module)
+    enhancement.init()
   }
+
+  Govspeak.prototype.createBarcharts = function () {
+    var enhancement = new window.GOVUK.GovspeakBarchartEnhancement(this.$module)
+    enhancement.init()
+  }
+
+  Modules.Govspeak = Govspeak
 })(window.GOVUK.Modules)

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

@@ -1,432 +1,494 @@
-/* eslint-env jquery */
+//= require govuk/vendor/polyfills/Element/prototype/classList.js
+//= require ../vendor/polyfills/closest.js
+//= require ../vendor/polyfills/indexOf.js
 
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
-
-  Modules.Gemstepnav = function () {
-    var actions = {} // stores text for JS appended elements 'show' and 'hide' on steps, and 'show/hide all' button
-    var rememberShownStep = false
-    var stepNavSize
-    var sessionStoreLink = 'govuk-step-nav-active-link'
-    var activeLinkClass = 'gem-c-step-nav__list-item--active'
-    var activeStepClass = 'gem-c-step-nav__step--active'
-    var activeLinkHref = '#content'
-    var uniqueId
-
-    this.start = function ($element) {
-      // Indicate that js has worked
-      $element.addClass('gem-c-step-nav--active')
-
-      // Prevent FOUC, remove class hiding content
-      $element.removeClass('js-hidden')
-
-      stepNavSize = $element.hasClass('gem-c-step-nav--large') ? 'Big' : 'Small'
-      rememberShownStep = !!$element.filter('[data-remember]').length && stepNavSize === 'Big'
-      var $steps = $element.find('.js-step')
-      var $stepHeaders = $element.find('.js-toggle-panel')
-      var totalSteps = $element.find('.js-panel').length
-      var totalLinks = $element.find('.gem-c-step-nav__link').length
-      var $showOrHideAllButton
-
-      uniqueId = $element.data('id') || false
-
-      if (uniqueId) {
-        sessionStoreLink = sessionStoreLink + '_' + uniqueId
-      }
+  function Gemstepnav () { }
+
+  Gemstepnav.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$module.actions = {} // stores text for JS appended elements 'show' and 'hide' on steps, and 'show/hide all' button
+    this.$module.rememberShownStep = false
+    this.$module.stepNavSize = false
+    this.$module.sessionStoreLink = 'govuk-step-nav-active-link'
+    this.$module.activeLinkClass = 'gem-c-step-nav__list-item--active'
+    this.$module.activeStepClass = 'gem-c-step-nav__step--active'
+    this.$module.activeLinkHref = '#content'
+    this.$module.uniqueId = false
+
+    // Indicate that js has worked
+    this.$module.classList.add('gem-c-step-nav--active')
+
+    // Prevent FOUC, remove class hiding content
+    this.$module.classList.remove('js-hidden')
+
+    this.$module.stepNavSize = this.$module.classList.contains('gem-c-step-nav--large') ? 'Big' : 'Small'
+    this.$module.rememberShownStep = !!this.$module.hasAttribute('data-remember') && this.$module.stepNavSize === 'Big'
+
+    this.$module.steps = this.$module.querySelectorAll('.js-step')
+    this.$module.stepHeaders = this.$module.querySelectorAll('.js-toggle-panel')
+    this.$module.totalSteps = this.$module.querySelectorAll('.js-panel').length
+    this.$module.totalLinks = this.$module.querySelectorAll('.gem-c-step-nav__link').length
+    this.$module.showOrHideAllButton = false
+
+    this.$module.uniqueId = this.$module.getAttribute('data-id') || false
+
+    if (this.$module.uniqueId) {
+      this.$module.sessionStoreLink = this.$module.sessionStoreLink + '_' + this.$module.uniqueId
+    }
 
-      var stepNavTracker = new StepNavTracker(totalSteps, totalLinks, uniqueId)
+    var stepNavTracker = new this.StepNavTracker(this.$module.uniqueId, this.$module.totalSteps, this.$module.totalLinks)
 
-      getTextForInsertedElements()
-      addButtonstoSteps()
-      addShowHideAllButton()
-      addShowHideToggle()
-      addAriaControlsAttrForShowHideAllButton()
+    this.getTextForInsertedElements()
+    this.addButtonstoSteps()
+    this.addShowHideAllButton()
+    this.addShowHideToggle()
+    this.addAriaControlsAttrForShowHideAllButton()
 
-      ensureOnlyOneActiveLink()
-      showPreviouslyOpenedSteps()
+    this.ensureOnlyOneActiveLink()
+    this.showPreviouslyOpenedSteps()
 
-      bindToggleForSteps(stepNavTracker)
-      bindToggleShowHideAllButton(stepNavTracker)
-      bindComponentLinkClicks(stepNavTracker)
+    this.bindToggleForSteps(stepNavTracker)
+    this.bindToggleShowHideAllButton(stepNavTracker)
+    this.bindComponentLinkClicks(stepNavTracker)
+  }
 
-      function getTextForInsertedElements () {
-        actions.showText = $element.attr('data-show-text')
-        actions.hideText = $element.attr('data-hide-text')
-        actions.showAllText = $element.attr('data-show-all-text')
-        actions.hideAllText = $element.attr('data-hide-all-text')
-      }
+  Gemstepnav.prototype.getTextForInsertedElements = function () {
+    this.$module.actions.showText = this.$module.getAttribute('data-show-text')
+    this.$module.actions.hideText = this.$module.getAttribute('data-hide-text')
+    this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text')
+    this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text')
+  }
 
-      function addShowHideAllButton () {
-        $element.prepend('<div class="gem-c-step-nav__controls"><button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' + actions.showAllText + '</button></div>')
-      }
+  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>'
 
-      function addShowHideToggle () {
-        $stepHeaders.each(function () {
-          var linkText = actions.showText // eslint-disable-line no-unused-vars
+    var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
+    this.$module.insertBefore(showall, steps)
 
-          if (headerIsOpen($(this))) {
-            linkText = actions.hideText
-          }
+    this.$module.showOrHideAllButton = this.$module.querySelectorAll('.js-step-controls-button')[0]
+  }
 
-          if (!$(this).find('.js-toggle-link').length) {
-            $(this).find('.js-step-title-button').append(
-              '<span class="gem-c-step-nav__toggle-link js-toggle-link" aria-hidden="true" hidden></span>'
-            )
-          }
-        })
-      }
+  Gemstepnav.prototype.addShowHideToggle = function () {
+    for (var i = 0; i < this.$module.stepHeaders.length; i++) {
+      var thisel = this.$module.stepHeaders[i]
 
-      function headerIsOpen ($stepHeader) {
-        return (typeof $stepHeader.closest('.js-step').data('show') !== 'undefined')
+      if (!thisel.querySelectorAll('.js-toggle-link').length) {
+        var span = document.createElement('span')
+        span.className = 'gem-c-step-nav__toggle-link js-toggle-link'
+        span.setAttribute('aria-hidden', true)
+        span.setAttribute('hidden', 'hidden')
+        thisel.querySelectorAll('.js-step-title-button')[0].appendChild(span)
       }
+    }
+  }
 
-      function addAriaControlsAttrForShowHideAllButton () {
-        var ariaControlsValue = $element.find('.js-panel').first().attr('id')
+  Gemstepnav.prototype.headerIsOpen = function (stepHeader) {
+    return (typeof stepHeader.parentNode.getAttribute('show') !== 'undefined')
+  }
 
-        $showOrHideAllButton = $element.find('.js-step-controls-button')
-        $showOrHideAllButton.attr('aria-controls', ariaControlsValue)
-      }
+  Gemstepnav.prototype.addAriaControlsAttrForShowHideAllButton = function () {
+    var ariaControlsValue = this.$module.querySelectorAll('.js-panel')[0].getAttribute('id')
+    this.$module.showOrHideAllButton.setAttribute('aria-controls', ariaControlsValue)
+  }
 
-      // called by show all/hide all, sets all steps accordingly
-      function setAllStepsShownState (isShown) {
-        var data = []
+  // called by show all/hide all, sets all steps accordingly
+  Gemstepnav.prototype.setAllStepsShownState = function (isShown) {
+    var data = []
 
-        $.each($steps, function () {
-          var stepView = new StepView($(this))
-          stepView.setIsShown(isShown)
+    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)
+      stepView.setIsShown(isShown)
 
-          if (isShown) {
-            data.push($(this).attr('id'))
-          }
-        })
-
-        if (isShown) {
-          saveToSessionStorage(uniqueId, JSON.stringify(data))
-        } else {
-          removeFromSessionStorage(uniqueId)
-        }
+      if (isShown) {
+        data.push(this.$module.steps[i].getAttribute('id'))
       }
+    }
 
-      // called on load, determines whether each step should be open or closed
-      function showPreviouslyOpenedSteps () {
-        var data = loadFromSessionStorage(uniqueId) || []
+    if (isShown) {
+      this.saveToSessionStorage(this.$module.uniqueId, JSON.stringify(data))
+    } else {
+      this.removeFromSessionStorage(this.$module.uniqueId)
+    }
+  }
 
-        $.each($steps, function () {
-          var id = $(this).attr('id')
-          var stepView = new StepView($(this))
+  // called on load, determines whether each step should be open or closed
+  Gemstepnav.prototype.showPreviouslyOpenedSteps = function () {
+    var data = this.loadFromSessionStorage(this.$module.uniqueId) || []
 
-          // show the step if it has been remembered or if it has the 'data-show' attribute
-          if ((rememberShownStep && data.indexOf(id) > -1) || typeof $(this).attr('data-show') !== 'undefined') {
-            stepView.setIsShown(true)
-          } else {
-            stepView.setIsShown(false)
-          }
-        })
+    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 shouldBeShown = thisel.hasAttribute('data-show')
 
-        if (data.length > 0) {
-          $showOrHideAllButton.attr('aria-expanded', true)
-          setShowHideAllText()
-        }
+      // show the step if it has been remembered or if it has the 'data-show' attribute
+      if ((this.$module.rememberShownStep && data.indexOf(id) > -1) || (shouldBeShown && shouldBeShown !== 'undefined')) {
+        stepView.setIsShown(true)
+      } else {
+        stepView.setIsShown(false)
       }
+    }
 
-      function addButtonstoSteps () {
-        $.each($steps, function () {
-          var $step = $(this)
-          var $title = $step.find('.js-step-title')
-          var contentId = $step.find('.js-panel').first().attr('id')
+    if (data.length > 0) {
+      this.$module.showOrHideAllButton.setAttribute('aria-expanded', true)
+      this.setShowHideAllText()
+    }
+  }
 
-          $title.wrapInner(
-            '<span class="js-step-title-text"></span>'
-          )
+  Gemstepnav.prototype.addButtonstoSteps = function () {
+    for (var i = 0; i < this.$module.steps.length; i++) {
+      var thisel = this.$module.steps[i]
+      var title = thisel.querySelectorAll('.js-step-title')[0]
+      var contentId = thisel.querySelectorAll('.js-panel')[0].getAttribute('id')
+      var titleText = title.textContent || title.innerText // IE8 fallback
 
-          $title.wrapInner(
-            '<button ' +
+      title.outerHTML =
+        '<span class="js-step-title">' +
+          '<button ' +
             'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
             'aria-expanded="false" aria-controls="' + contentId + '">' +
-            '</button>'
-          )
-        })
-      }
+              '<span class="js-step-title-text">' + titleText + '</span>' +
+          '</button>' +
+        '</span>'
+    }
+  }
 
-      function bindToggleForSteps (stepNavTracker) {
-        $element.find('.js-toggle-panel').click(function (event) {
-          var $step = $(this).closest('.js-step')
+  Gemstepnav.prototype.bindToggleForSteps = function (stepNavTracker) {
+    var that = this
+    var togglePanels = this.$module.querySelectorAll('.js-toggle-panel')
 
-          var stepView = new StepView($step)
-          stepView.toggle()
+    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)
+        stepView.toggle()
 
-          var stepIsOptional = typeof $step.data('optional') !== 'undefined'
-          var toggleClick = new StepToggleClick(event, stepView, $steps, stepNavTracker, stepIsOptional)
-          toggleClick.track()
+        var stepIsOptional = this.parentNode.hasAttribute('data-optional')
+        var toggleClick = new that.StepToggleClick(event, stepView, stepNavTracker, stepIsOptional, that.$module.stepNavSize)
+        toggleClick.trackClick()
 
-          setShowHideAllText()
-          rememberStepState($step)
-        })
-      }
+        that.setShowHideAllText()
+        that.rememberStepState(this.parentNode)
+      })
+    }
+  }
 
-      // if the step is open, store its id in session store
-      // if the step is closed, remove its id from session store
-      function rememberStepState ($step) {
-        if (rememberShownStep) {
-          var data = JSON.parse(loadFromSessionStorage(uniqueId)) || []
-          var thisstep = $step.attr('id')
-          var shown = $step.hasClass('step-is-shown')
-
-          if (shown) {
-            data.push(thisstep)
-          } else {
-            var i = data.indexOf(thisstep)
-            if (i > -1) {
-              data.splice(i, 1)
-            }
-          }
-          saveToSessionStorage(uniqueId, JSON.stringify(data))
+  // if the step is open, store its id in session store
+  // if the step is closed, remove its id from session store
+  Gemstepnav.prototype.rememberStepState = function (step) {
+    if (this.$module.rememberShownStep) {
+      var data = JSON.parse(this.loadFromSessionStorage(this.$module.uniqueId)) || []
+      var thisstep = step.getAttribute('id')
+      var shown = step.classList.contains('step-is-shown')
+
+      if (shown) {
+        data.push(thisstep)
+      } else {
+        var i = data.indexOf(thisstep)
+        if (i > -1) {
+          data.splice(i, 1)
         }
       }
+      this.saveToSessionStorage(this.$module.uniqueId, JSON.stringify(data))
+    }
+  }
 
-      // tracking click events on links in step content
-      function bindComponentLinkClicks (stepNavTracker) {
-        $element.find('.js-link').click(function (event) {
-          var linkClick = new componentLinkClick(event, stepNavTracker, $(this).attr('data-position')) // eslint-disable-line no-new, new-cap
-          linkClick.track()
-          var thisLinkHref = $(this).attr('href')
-
-          if ($(this).attr('rel') !== 'external') {
-            saveToSessionStorage(sessionStoreLink, $(this).attr('data-position'))
-          }
-
-          if (thisLinkHref === activeLinkHref) {
-            setOnlyThisLinkActive($(this))
-            setActiveStepClass()
-          }
-        })
-      }
+  // tracking click events on links in step content
+  Gemstepnav.prototype.bindComponentLinkClicks = function (stepNavTracker) {
+    var jsLinks = this.$module.querySelectorAll('.js-link')
+    var that = this
 
-      function saveToSessionStorage (key, value) {
-        window.sessionStorage.setItem(key, value)
-      }
+    for (var i = 0; i < jsLinks.length; i++) {
+      jsLinks[i].addEventListener('click', function (event) {
+        var dataPosition = this.getAttribute('data-position')
+        var linkClick = new that.ComponentLinkClick(event, stepNavTracker, dataPosition, that.$module.stepNavSize)
+        linkClick.trackClick()
 
-      function loadFromSessionStorage (key) {
-        return window.sessionStorage.getItem(key)
-      }
+        if (this.getAttribute('rel') !== 'external') {
+          that.saveToSessionStorage(that.$module.sessionStoreLink, dataPosition)
+        }
 
-      function removeFromSessionStorage (key) {
-        window.sessionStorage.removeItem(key)
-      }
+        if (this.getAttribute('href') === that.$module.activeLinkHref) {
+          that.setOnlyThisLinkActive(this)
+          that.setActiveStepClass()
+        }
+      })
+    }
+  }
 
-      function setOnlyThisLinkActive (clicked) {
-        $element.find('.' + activeLinkClass).removeClass(activeLinkClass)
-        clicked.parent().addClass(activeLinkClass)
-      }
+  Gemstepnav.prototype.saveToSessionStorage = function (key, value) {
+    window.sessionStorage.setItem(key, value)
+  }
 
-      // if a link occurs more than once in a step nav, the backend doesn't know which one to highlight
-      // so it gives all those links the 'active' attribute and highlights the last step containing that link
-      // if the user clicked on one of those links previously, it will be in the session store
-      // this code ensures only that link and its corresponding step have the highlighting
-      // otherwise it accepts what the backend has already passed to the component
-      function ensureOnlyOneActiveLink () {
-        var $activeLinks = $element.find('.js-list-item.' + activeLinkClass)
+  Gemstepnav.prototype.loadFromSessionStorage = function (key, value) {
+    return window.sessionStorage.getItem(key)
+  }
 
-        if ($activeLinks.length <= 1) {
-          return
-        }
+  Gemstepnav.prototype.removeFromSessionStorage = function (key) {
+    window.sessionStorage.removeItem(key)
+  }
 
-        var lastClicked = loadFromSessionStorage(sessionStoreLink) || $element.find('.' + activeLinkClass).first().attr('data-position')
+  Gemstepnav.prototype.setOnlyThisLinkActive = function (clicked) {
+    var allActiveLinks = this.$module.querySelectorAll('.' + this.$module.activeLinkClass)
+    for (var i = 0; i < allActiveLinks.length; i++) {
+      allActiveLinks[i].classList.remove(this.$module.activeLinkClass)
+    }
+    clicked.parentNode.classList.add(this.$module.activeLinkClass)
+  }
 
-        // it's possible for the saved link position value to not match any of the currently duplicate highlighted links
-        // so check this otherwise it'll take the highlighting off all of them
-        if (!$element.find('.js-link[data-position="' + lastClicked + '"]').parent().hasClass(activeLinkClass)) {
-          lastClicked = $element.find('.' + activeLinkClass).first().find('.js-link').attr('data-position')
-        }
-        removeActiveStateFromAllButCurrent($activeLinks, lastClicked)
-        setActiveStepClass()
-      }
+  // if a link occurs more than once in a step nav, the backend doesn't know which one to highlight
+  // so it gives all those links the 'active' attribute and highlights the last step containing that link
+  // if the user clicked on one of those links previously, it will be in the session store
+  // this code ensures only that link and its corresponding step have the highlighting
+  // otherwise it accepts what the backend has already passed to the component
+  Gemstepnav.prototype.ensureOnlyOneActiveLink = function () {
+    var activeLinks = this.$module.querySelectorAll('.js-list-item.' + this.$module.activeLinkClass)
 
-      function removeActiveStateFromAllButCurrent ($activeLinks, current) {
-        $activeLinks.each(function () {
-          if ($(this).find('.js-link').attr('data-position').toString() !== current.toString()) {
-            $(this).removeClass(activeLinkClass)
-            $(this).find('.visuallyhidden').remove()
-          }
-        })
-      }
+    if (activeLinks.length <= 1) {
+      return
+    }
 
-      function setActiveStepClass () {
-        $element.find('.' + activeStepClass).removeClass(activeStepClass).removeAttr('data-show')
-        $element.find('.' + activeLinkClass).closest('.gem-c-step-nav__step').addClass(activeStepClass).attr('data-show', '')
-      }
+    var loaded = this.loadFromSessionStorage(this.$module.sessionStoreLink)
+    var activeParent = this.$module.querySelectorAll('.' + this.$module.activeLinkClass)[0]
+    var activeChild = activeParent.firstChild
+    var foundLink = activeChild.getAttribute('data-position')
+    var lastClicked = loaded || foundLink // the value saved has priority
 
-      function bindToggleShowHideAllButton (stepNavTracker) {
-        $showOrHideAllButton = $element.find('.js-step-controls-button')
-        $showOrHideAllButton.on('click', function () {
-          var shouldshowAll
-
-          if ($showOrHideAllButton.text() === actions.showAllText) {
-            $showOrHideAllButton.text(actions.hideAllText)
-            $element.find('.js-toggle-link').html(actions.hideText)
-            shouldshowAll = true
-
-            stepNavTracker.track('pageElementInteraction', 'stepNavAllShown', {
-              label: actions.showAllText + ': ' + stepNavSize
-            })
-          } else {
-            $showOrHideAllButton.text(actions.showAllText)
-            $element.find('.js-toggle-link').html(actions.showText)
-            shouldshowAll = false
-
-            stepNavTracker.track('pageElementInteraction', 'stepNavAllHidden', {
-              label: actions.hideAllText + ': ' + stepNavSize
-            })
-          }
-
-          setAllStepsShownState(shouldshowAll)
-          $showOrHideAllButton.attr('aria-expanded', shouldshowAll)
-          setShowHideAllText()
-
-          return false
-        })
+    // it's possible for the saved link position value to not match any of the currently duplicate highlighted links
+    // so check this otherwise it'll take the highlighting off all of them
+    var checkLink = this.$module.querySelectorAll('[data-position="' + lastClicked + '"]')[0]
+
+    if (checkLink) {
+      if (!checkLink.parentNode.classList.contains(this.$module.activeLinkClass)) {
+        lastClicked = checkLink
       }
+    } else {
+      lastClicked = foundLink
+    }
+
+    this.removeActiveStateFromAllButCurrent(activeLinks, lastClicked)
+    this.setActiveStepClass()
+  }
 
-      function setShowHideAllText () {
-        var shownSteps = $element.find('.step-is-shown').length
-        // Find out if the number of is-opens == total number of steps
-        if (shownSteps === totalSteps) {
-          $showOrHideAllButton.text(actions.hideAllText)
-        } else {
-          $showOrHideAllButton.text(actions.showAllText)
+  Gemstepnav.prototype.removeActiveStateFromAllButCurrent = function (activeLinks, current) {
+    for (var i = 0; i < activeLinks.length; i++) {
+      var thisel = activeLinks[i]
+      if (thisel.querySelectorAll('.js-link')[0].getAttribute('data-position').toString() !== current.toString()) {
+        thisel.classList.remove(this.$module.activeLinkClass)
+        var visuallyHidden = thisel.querySelectorAll('.visuallyhidden')
+        if (visuallyHidden.length) {
+          visuallyHidden[0].parentNode.removeChild(visuallyHidden[0])
         }
       }
     }
+  }
 
-    function StepView ($stepElement) {
-      var $titleLink = $stepElement.find('.js-step-title-button')
-      var $stepContent = $stepElement.find('.js-panel')
+  Gemstepnav.prototype.setActiveStepClass = function () {
+    // remove the 'active/open' state from all steps
+    var allActiveSteps = this.$module.querySelectorAll('.' + this.$module.activeStepClass)
+    for (var i = 0; i < allActiveSteps.length; i++) {
+      allActiveSteps[i].classList.remove(this.$module.activeStepClass)
+      allActiveSteps[i].removeAttribute('data-show')
+    }
 
-      this.title = $stepElement.find('.js-step-title-text').text().trim()
-      this.element = $stepElement
+    // find the current page link and apply 'active/open' state to parent step
+    var activeLink = this.$module.querySelectorAll('.' + this.$module.activeLinkClass)[0]
+    if (activeLink) {
+      var activeStep = activeLink.closest('.gem-c-step-nav__step')
+      activeStep.classList.add(this.$module.activeStepClass)
+      activeStep.setAttribute('data-show', '')
+    }
+  }
 
-      this.show = show
-      this.hide = hide
-      this.toggle = toggle
-      this.setIsShown = setIsShown
-      this.isShown = isShown
-      this.isHidden = isHidden
-      this.numberOfContentItems = numberOfContentItems
+  Gemstepnav.prototype.bindToggleShowHideAllButton = function (stepNavTracker) {
+    var that = this
 
-      function show () {
-        setIsShown(true)
-      }
+    this.$module.showOrHideAllButton.addEventListener('click', function (event) {
+      var shouldshowAll
+      var showHideTexts = that.$module.querySelectorAll('.js-toggle-link')
+      var textContent = this.textContent || this.innerText
 
-      function hide () {
-        setIsShown(false)
-      }
+      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
 
-      function toggle () {
-        setIsShown(isHidden())
-      }
+        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
 
-      function setIsShown (isShown) {
-        $stepElement.toggleClass('step-is-shown', isShown)
-        $stepContent.toggleClass('js-hidden', !isShown)
-        $titleLink.attr('aria-expanded', isShown)
-        $stepElement.find('.js-toggle-link').html(isShown ? actions.hideText : actions.showText)
+        stepNavTracker.trackClick('pageElementInteraction', 'stepNavAllHidden', {
+          label: that.$module.actions.hideAllText + ': ' + that.$module.stepNavSize
+        })
       }
 
-      function isShown () {
-        return $stepElement.hasClass('step-is-shown')
-      }
+      that.setAllStepsShownState(shouldshowAll)
+      that.$module.showOrHideAllButton.setAttribute('aria-expanded', shouldshowAll)
+      that.setShowHideAllText()
 
-      function isHidden () {
-        return !isShown()
-      }
+      return false
+    })
+  }
 
-      function numberOfContentItems () {
-        return $stepContent.find('.js-link').length
-      }
+  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
     }
+  }
 
-    function StepToggleClick (event, stepView, $steps, stepNavTracker, stepIsOptional) {
-      this.track = trackClick
-      var $target = $(event.target)
+  Gemstepnav.prototype.StepView = function (stepElement, showText, hideText) {
+    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.show = function () {
+      this.setIsShown(true)
+    }
 
-      function trackClick () {
-        var trackingOptions = { label: trackingLabel(), dimension28: stepView.numberOfContentItems().toString() }
-        stepNavTracker.track('pageElementInteraction', trackingAction(), trackingOptions)
-      }
+    this.hide = function () {
+      this.setIsShown(false)
+    }
 
-      function trackingLabel () {
-        return $target.closest('.js-toggle-panel').attr('data-position') + ' - ' + stepView.title + ' - ' + locateClickElement() + ': ' + stepNavSize + isOptional()
-      }
+    this.toggle = function () {
+      this.setIsShown(this.isHidden())
+    }
 
-      // returns index of the clicked step in the overall number of steps
-      function stepIndex () { // eslint-disable-line no-unused-vars
-        return $steps.index(stepView.element) + 1
+    this.setIsShown = function (isShown) {
+      if (isShown) {
+        this.stepElement.classList.add('step-is-shown')
+        this.stepContent.classList.remove('js-hidden')
+      } else {
+        this.stepElement.classList.remove('step-is-shown')
+        this.stepContent.classList.add('js-hidden')
       }
 
-      function trackingAction () {
-        return (stepView.isHidden() ? 'stepNavHidden' : 'stepNavShown')
-      }
+      this.titleButton.setAttribute('aria-expanded', isShown)
+      var showHideText = this.stepElement.querySelectorAll('.js-toggle-link')[0]
+      showHideText.innerHTML = isShown ? this.hideText : this.showText
+    }
 
-      function locateClickElement () {
-        if (clickedOnIcon()) {
-          return iconType() + ' click'
-        } else if (clickedOnHeading()) {
-          return 'Heading click'
-        } else {
-          return 'Elsewhere click'
-        }
-      }
+    this.isShown = function () {
+      return this.stepElement.classList.contains('step-is-shown')
+    }
 
-      function clickedOnIcon () {
-        return $target.hasClass('js-toggle-link')
-      }
+    this.isHidden = function () {
+      return !this.isShown()
+    }
 
-      function clickedOnHeading () {
-        return $target.hasClass('js-step-title-text')
-      }
+    this.numberOfContentItems = function () {
+      return this.stepContent.querySelectorAll('.js-link').length
+    }
+  }
 
-      function iconType () {
-        return (stepView.isHidden() ? 'Minus' : 'Plus')
-      }
+  Gemstepnav.prototype.StepToggleClick = function (event, stepView, stepNavTracker, stepIsOptional, stepNavSize) {
+    this.target = event.target
+    this.stepIsOptional = stepIsOptional
+    this.stepNavSize = stepNavSize
+
+    this.trackClick = function () {
+      var trackingOptions = { label: this.trackingLabel(), dimension28: stepView.numberOfContentItems().toString() }
+      stepNavTracker.trackClick('pageElementInteraction', this.trackingAction(), trackingOptions)
+    }
+
+    this.trackingLabel = function () {
+      var clickedNearbyToggle = this.target.closest('.js-step').querySelectorAll('.js-toggle-panel')[0]
+      return clickedNearbyToggle.getAttribute('data-position') + ' - ' + stepView.title + ' - ' + this.locateClickElement() + ': ' + this.stepNavSize + this.isOptional()
+    }
+
+    // returns index of the clicked step in the overall number of steps
+    this.stepIndex = function () { // eslint-disable-line no-unused-vars
+      return this.$module.steps.index(stepView.element) + 1
+    }
+
+    this.trackingAction = function () {
+      return (stepView.isHidden() ? 'stepNavHidden' : 'stepNavShown')
+    }
 
-      function isOptional () {
-        return (stepIsOptional ? ' ; optional' : '')
+    this.locateClickElement = function () {
+      if (this.clickedOnIcon()) {
+        return this.iconType() + ' click'
+      } else if (this.clickedOnHeading()) {
+        return 'Heading click'
+      } else {
+        return 'Elsewhere click'
       }
     }
 
-    function componentLinkClick (event, stepNavTracker, linkPosition) {
-      this.track = trackClick
+    this.clickedOnIcon = function () {
+      return this.target.classList.contains('js-toggle-link')
+    }
 
-      function trackClick () {
-        var trackingOptions = { label: $(event.target).attr('href') + ' : ' + stepNavSize }
-        var dimension28 = $(event.target).closest('.gem-c-step-nav__list').attr('data-length')
+    this.clickedOnHeading = function () {
+      return this.target.classList.contains('js-step-title-text')
+    }
 
-        if (dimension28) {
-          trackingOptions.dimension28 = dimension28
-        }
+    this.iconType = function () {
+      return (stepView.isHidden() ? 'Minus' : 'Plus')
+    }
+
+    this.isOptional = function () {
+      return (this.stepIsOptional ? ' ; optional' : '')
+    }
+  }
+
+  Gemstepnav.prototype.ComponentLinkClick = function (event, stepNavTracker, linkPosition, size) {
+    this.size = size
+    this.target = event.target
 
-        stepNavTracker.track('stepNavLinkClicked', linkPosition, trackingOptions)
+    this.trackClick = function () {
+      var trackingOptions = { label: this.target.getAttribute('href') + ' : ' + this.size }
+      var dimension28 = this.target.closest('.gem-c-step-nav__list').getAttribute('data-length')
+
+      if (dimension28) {
+        trackingOptions.dimension28 = dimension28
       }
+
+      stepNavTracker.trackClick('stepNavLinkClicked', linkPosition, trackingOptions)
     }
+  }
 
-    // A helper that sends a custom event request to Google Analytics if
-    // the GOVUK module is setup
-    function StepNavTracker (totalSteps, totalLinks, uniqueId) {
-      this.track = function (category, action, options) {
-        // dimension26 records the total number of expand/collapse steps in this step nav
-        // dimension27 records the total number of links in this step nav
-        // dimension28 records the number of links in the step that was shown/hidden (handled in click event)
-        if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-          options = options || {}
-          options.dimension26 = options.dimension26 || totalSteps.toString()
-          options.dimension27 = options.dimension27 || totalLinks.toString()
-          options.dimension96 = options.dimension96 || uniqueId
-          window.GOVUK.analytics.trackEvent(category, action, options)
-        }
+  // A helper that sends a custom event request to Google Analytics if
+  // the GOVUK module is setup
+  Gemstepnav.prototype.StepNavTracker = function (uniqueId, totalSteps, totalLinks) {
+    this.totalSteps = totalSteps
+    this.totalLinks = totalLinks
+    this.uniqueId = uniqueId
+
+    this.trackClick = function (category, action, options) {
+      // dimension26 records the total number of expand/collapse steps in this step nav
+      // dimension27 records the total number of links in this step nav
+      // dimension28 records the number of links in the step that was shown/hidden (handled in click event)
+      if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+        options = options || {}
+        options.dimension26 = options.dimension26 || this.totalSteps.toString()
+        options.dimension27 = options.dimension27 || this.totalLinks.toString()
+        options.dimension96 = options.dimension96 || this.uniqueId
+        window.GOVUK.analytics.trackEvent(category, action, options)
       }
     }
   }
+
+  Modules.Gemstepnav = Gemstepnav
 })(window.GOVUK.Modules)