govuk_publishing_components 23.12.0 → 23.13.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e893228b7aeae4913a2e99436d0d892e32200a65162d7965bcc0f15771bc7ee7
-  data.tar.gz: c9b253d4e6ed92190ef52f2e625e9e495a7ab643ba8027d2f1f2988806fe369a
+  metadata.gz: b8e84f4736eb11902079ff68c2a4a2acb1c328126a4024664414adb2aa8a67fd
+  data.tar.gz: 693fabe38ddd9b79740a918e42bd1321a2f61b6abaca88e0b06e4360dcbb27fe
 SHA512:
-  metadata.gz: fd695dffba2fdb7868f4fb20cbfcea406020f83f86bb616d1cb52dec78ab39204675224d0027fd96215140269b8fc28397f62067a7bf778bd6052631b4a5b9ec
-  data.tar.gz: 48679f3a6272a937d4097c1f6269c180646a4cf7a4e9c975f5952b434a7302da98c0f350d4206da3ff6a9f38dd10d61392aa8c0bb52f5a63d895102a7e2aa9c4
+  metadata.gz: 1b833ced5ea9b6a0ca211eb846b0018fd51920edf04babb7d38126ddb5d85df400600558f73e066e21634346045c7d9819983648ddf3664976ee4ba2a3cd4ae5
+  data.tar.gz: 07132c1756b1ca69c9b674f39c393120679a61b62ee20c6e8c3ade957b4189cee7e9801b76f5c083d8f554d9c5360369dd6681e7f8724020576d3b084811b6cf

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

@@ -1,3 +1,6 @@
+// DO NOT MAKE CHANGES TO THIS FILE
+// It is a temporary copy of layout-header.js and will be deleted shortly
+
 // This component relies on JavaScript from GOV.UK Frontend
 // = require govuk/components/header/header.js
 window.GOVUK = window.GOVUK || {}

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

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

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" class="gem-c-step-nav__chevron">' +
+      '<path 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 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" class="gem-c-step-nav__chevron">' +
+      '<path 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 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">' +
+      this.$module.downChevronSvg +
+      this.$module.actions.showAllText +
+      '</button>'
 
     var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
     this.$module.insertBefore(showall, steps)
@@ -114,7 +126,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 +148,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 +177,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 +189,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 +333,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
@@ -359,21 +353,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     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
+      this.$module.showOrHideAllButton.innerHTML = this.$module.upChevronSvg + this.$module.actions.hideAllText
     } else {
-      this.$module.showOrHideAllButton.textContent = this.$module.actions.showAllText
+      this.$module.showOrHideAllButton.innerHTML = this.$module.downChevronSvg + this.$module.actions.showAllText
     }
   }
 
-  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 +394,7 @@ 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.innerHTML = isShown ? this.upChevronSvg + this.hideText : this.downChevronSvg + this.showText
     }
 
     this.isShown = function () {

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -11,9 +11,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.options = {
       outOf: 65,
       applyOnInit: true,
-      toggleText: 'Toggle between chart and table',
       autoOutdent: false,
       outdentAll: false,
+      chartVisibleText: 'Change to table and accessible view',
+      tableVisibleText: 'Change to chart view',
+      chartAlertText: 'Chart visible',
+      tableAlertText: 'Table visible',
       toggleAfter: false, // BOOL set TRUE to append the toggle link
       returnReference: false // for testing purposes
     }
@@ -27,6 +30,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // store a reference to the table in the object
     this.$table = $module
 
+    // a container around the graph element so that it can be targeted by screen readers, allowing us to inform screen reader users that the graph isn't accessible
+    this.$graphContainer = document.createElement('div')
+    this.$graphContainer.className = 'mc-chart-container'
+
     // lets make what will become the new graph
     this.$graph = document.createElement('div')
 
@@ -39,6 +46,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$graph.setAttribute('class', this.$table.className)
     this.$graph.classList.add('mc-chart')
 
+    // get the id of the current chart within the page so that it can be used during the generation of the toggleLink
+    this.chartId = this.getChartId($module)
+
     // set the stacked option based on
     // giving the table a class of mc-stacked
     this.options.stacked = this.$table.classList.contains('mc-stacked')
@@ -102,7 +112,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.addClassesToHeader()
       this.applyWidths()
       this.insert()
-      this.$table.classList.add('visually-hidden')
+      this.$table.classList.add('mc-hidden')
       this.applyOutdent()
     }
   }
@@ -164,24 +174,42 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   // construct a link to allow the user to toggle between chart and table
-  MagnaCharta.prototype.construct.toggleLink = function (toggleText) {
-    var link = document.createElement('a')
-    link.setAttribute('href', '#')
-    link.classList.add('mc-toggle-link')
-    link.innerHTML = toggleText
-    link.setAttribute('aria-hidden', 'true')
+  MagnaCharta.prototype.construct.toggleLink = function (chartVisibleText) {
+    var link = document.createElement('button')
+
+    // These spans are for managing the content within the button
+    // toggleText is the public facing content whilst toggleStatus is visually hidden content that we use to let screen reader users know that the toggle link has been clicked
+    var toggleText = document.createElement('span')
+    var toggleStatus = document.createElement('span')
+
+    toggleText.classList.add('mc-toggle-text')
+    toggleText.innerHTML = chartVisibleText
+
+    toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status')
+    toggleStatus.setAttribute('role', 'alert')
+
+    link.classList.add('mc-toggle-button')
+    link.appendChild(toggleText)
+    link.appendChild(toggleStatus)
 
     return link
   }
 
   // toggles between showing the table and showing the chart
-  MagnaCharta.prototype.addToggleClick = function () {
+  MagnaCharta.prototype.addToggleClick = function (chartVisible, tableVisible, chartAlert, tableAlert) {
     var that = this
 
     this.toggleLink.addEventListener('click', function (e) {
       e.preventDefault()
-      that.$graph.classList.toggle('visually-hidden')
-      that.$table.classList.toggle('visually-hidden')
+
+      var toggleText = that.toggleLink.querySelector('.mc-toggle-text')
+      var toggleStatus = that.toggleLink.querySelector('.mc-toggle-status')
+
+      that.$graphContainer.classList.toggle('mc-hidden')
+      that.$table.classList.toggle('mc-hidden')
+
+      toggleText.innerHTML = toggleText.innerHTML === tableVisible ? chartVisible : tableVisible
+      toggleStatus.innerHTML = toggleStatus.innerHTML === tableAlert ? chartAlert : tableAlert
     })
   }
 
@@ -191,8 +219,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // get at options and properties
     var thead = this.construct.thead.call(this)
     var tbody = this.construct.tbody.call(this)
-    this.toggleLink = this.construct.toggleLink(this.options.toggleText)
-    this.addToggleClick(this.toggleLink)
+    this.toggleLink = this.construct.toggleLink(this.options.chartVisibleText)
+    this.addToggleClick(this.options.chartVisibleText, this.options.tableVisibleText, this.options.chartAlertText, this.options.tableAlertText)
 
     if (this.options.hasCaption) {
       var caption = this.construct.caption.call(this)
@@ -379,7 +407,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   MagnaCharta.prototype.insert = function () {
-    this.$table.insertAdjacentElement('afterend', this.$graph)
+    var label = document.createElement('span')
+    var labelId = 'mc-chart-not-accessible-' + this.chartId
+
+    label.innerHTML = 'This content is not accessible - switch to table'
+    label.className = 'mc-hidden'
+    label.id = labelId
+
+    this.$graphContainer.setAttribute('aria-labelledby', labelId)
+    this.$graphContainer.appendChild(this.$graph)
+    this.$graphContainer.appendChild(label)
+
+    this.$table.insertAdjacentElement('afterend', this.$graphContainer)
   }
 
   MagnaCharta.prototype.applyOutdent = function () {
@@ -419,5 +458,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  MagnaCharta.prototype.getChartId = function (module) {
+    var allCharts = document.querySelectorAll('table.js-barchart-table')
+    var id = null
+
+    allCharts.forEach(function (chart, i) {
+      if (chart === module) {
+        id = i
+      }
+    })
+
+    return id
+  }
+
   Modules.MagnaCharta = MagnaCharta
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/modules.js

@@ -7,7 +7,7 @@
 
   GOVUK.modules = {
     find: function (container) {
-      container = container || $('body')
+      container = container || $(document)
 
       var modules
       var moduleSelector = '[data-module]'

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -74,5 +74,4 @@
 @import "components/textarea";
 @import "components/title";
 @import "components/translation-nav";
-@import "components/transition-countdown";
 @import "components/warning-text";

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -4,6 +4,11 @@
   border-top: govuk-spacing(2) solid govuk-colour("blue");
 }
 
+.govuk-footer__list-item {
+  display: inline-block;
+  width: 99%;
+}
+
 .gem-c-layout-footer .govuk-footer__list {
   padding-bottom: govuk-spacing(7);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss

@@ -14,6 +14,10 @@
     &:focus {
       z-index: 1;
     }
+
+    &::-ms-reveal {
+      display: none;
+    }
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -56,7 +56,6 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__controls {
   padding: 3px 3px 0 0;
-  text-align: right;
 }
 
 .gem-c-step-nav__button {
@@ -93,14 +92,27 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   @include step-nav-font(14, $line-height: 1);
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
-  padding: .5em 0;
-  text-decoration: underline;
+  padding: .5em 0 1.5em;
+
+  &:hover {
+    text-decoration: underline;
+  }
 
   .gem-c-step-nav--large & {
     @include step-nav-font(14, $tablet-size: 16, $line-height: 1);
   }
 }
 
+.gem-c-step-nav__title-text {
+  display: block;
+  margin-bottom: govuk-spacing(1);
+}
+
+.gem-c-step-nav__chevron {
+  vertical-align: text-top;
+  margin-right: govuk-spacing(1);
+}
+
 .gem-c-step-nav__steps {
   padding: 0;
   margin: 0;
@@ -181,7 +193,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
   box-sizing: border-box;
   position: absolute;
   z-index: 5;
-  top: govuk-spacing(3);
+  top: govuk-spacing(1);
   left: 0;
   width: $number-circle-size;
   height: $number-circle-size;
@@ -192,7 +204,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      top: govuk-spacing(6);
+      top: govuk-spacing(3);
       width: $number-circle-size-large;
       height: $number-circle-size-large;
     }
@@ -240,7 +252,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 }
 
 .gem-c-step-nav__header {
-  padding: govuk-spacing(3) 0;
+  padding: govuk-spacing(1) 0 govuk-spacing(3);
   border-top: $top-border;
 
   .gem-c-step-nav--active & {
@@ -270,7 +282,7 @@ $top-border: solid 2px govuk-colour("mid-grey", $legacy: "grey-3");
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      padding: govuk-spacing(6) 0;
+      padding: govuk-spacing(2) 0 govuk-spacing(6);
     }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -270,15 +270,26 @@
     text-align: left;
   }
 
-  .mc-toggle-link {
-    display: block;
-    margin-top: 30px;
+  .mc-toggle-button {
+    @extend %govuk-body-s;
+    border: 1px solid $govuk-border-colour;
+    color: $govuk-link-colour;
+    cursor: pointer;
+    margin: govuk-spacing(0);
+    padding: govuk-spacing(2);
+    background-color: govuk-colour("white");
+
+    &:focus {
+      @include govuk-focused-text;
+      background-color: $govuk-focus-colour;
+      border-color: transparent;
+    }
   }
 
   // Hides the original table
-  .visually-hidden,
-  .visually-hidden caption {
-    @include govuk-visually-hidden;
+  .mc-hidden,
+  .mc-hidden caption {
+    display: none;
 
     // It's reapplied to captions because Firefox can't hide
     // table captions unless it's applied directly to it. Go figure.