govuk_publishing_components 24.2.0 → 24.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9ce32a486835dfd2796501f4cf80d3403ad4074fa1a832678a221fb9b607f3d3
-  data.tar.gz: 3b67448789550b585b08a3aa96666ac4fdc7a18cd5c6c8621668aa8e5ed91506
+  metadata.gz: d3b0fa1ddc43a2e926edce2c1f0417db5cbb0b1924caa41f91b817f3fc0d5647
+  data.tar.gz: 9e165fe5648aa0d6be420b8a00517c5295b58d5c6050b4b55646c8924272338f
 SHA512:
-  metadata.gz: c3a19281a025aa4f0a0c51a14c06844d4ad67b2de6217fe57cf87bef328ed42a0bc7b959d0c07672d58e68b7e7995d7b2e02a47744723854ad7e3444ee3b748f
-  data.tar.gz: f866b24a0aa8c7cce2dfe1f3c4bab39aa977d1e40ded6abc218563c365fba0f743efe2a4d1ce47091beb5610b98f2c0acc367b18b11a533cfbe92f9eadb5ece9
+  metadata.gz: 75bb0f5311883c23c5b83cfb18cf619acc923fed727d174f4d72ea8cae9aacd99e1a701889b72779cc76d72b2596a2e0d4765fa8c11a150c01c7554f95e76719
+  data.tar.gz: 51c83f3aadc86d2ed048e34c739c4d2a976524855152890a392c1f633e8e371914bdf64525c6297c310b2855bd6062dddb80930923f994c61ca469dbbba88953

data/app/assets/javascripts/govuk_publishing_components/analytics/scroll-tracker.js

@@ -405,6 +405,34 @@
     ],
     '/eubusiness': [
       ['Heading', 'Additional help and support']
+    ],
+    '/coronavirus': [
+      ['Percent', 20],
+      ['Percent', 40],
+      ['Percent', 60],
+      ['Percent', 80],
+      ['Percent', 100]
+    ],
+    '/coronavirus/education-and-childcare': [
+      ['Percent', 20],
+      ['Percent', 40],
+      ['Percent', 60],
+      ['Percent', 80],
+      ['Percent', 100]
+    ],
+    '/coronavirus/worker-support': [
+      ['Percent', 20],
+      ['Percent', 40],
+      ['Percent', 60],
+      ['Percent', 80],
+      ['Percent', 100]
+    ],
+    '/coronavirus/business-support': [
+      ['Percent', 20],
+      ['Percent', 40],
+      ['Percent', 60],
+      ['Percent', 80],
+      ['Percent', 100]
     ]
   }
 

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

@@ -11,8 +11,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   GemAccordion.prototype.start = function ($module) {
     this.$module = $module[0]
+    this.sectionClass = 'gem-c-accordion__section'
     this.moduleId = this.$module.getAttribute('id')
-    this.sections = this.$module.querySelectorAll('.gem-c-accordion__section')
+    this.sections = this.$module.querySelectorAll('.' + this.sectionClass)
     this.openAllButton = ''
     this.browserSupportsSessionStorage = helper.checkForSessionStorage()
     this.controlsClass = 'gem-c-accordion__controls'
@@ -36,6 +37,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.initControls()
     this.initSectionHeaders()
 
+    // Feature flag for anchor tag navigation used on manuals
+    if (this.$module.getAttribute('data-anchor-navigation')) {
+      this.openByAnchorOnLoad()
+      this.addEventListenersForAnchors()
+    }
+
     // See if "Show all sections" button text should be updated
     var areAllSectionsOpen = this.checkIfAllSectionsOpen()
     this.updateOpenAllButton(areAllSectionsOpen)
@@ -59,7 +66,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     accordionControls.appendChild(this.openAllButton)
     this.$module.insertBefore(accordionControls, this.$module.firstChild)
 
-    // Build addtional wrapper for open all toggle text, place icon after wrapped text.
+    // 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)
@@ -74,6 +81,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     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)
 
@@ -106,12 +114,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     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 additional copy for assistive technology
+    var srAdditionalCopy = document.createElement('span')
+    srAdditionalCopy.classList.add('govuk-visually-hidden')
+    srAdditionalCopy.innerHTML = ' this section'
 
-    // Build addtional wrapper for toggle text, place icon after wrapped text.
+    // 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)
@@ -138,7 +146,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     button.appendChild(showIcons)
-    button.appendChild(srAddtionalCopy)
+    button.appendChild(srAdditionalCopy)
   }
 
   // When section toggled, set and store state
@@ -283,5 +291,41 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  // Navigate to and open accordions with anchored content on page load if a hash is present
+  GemAccordion.prototype.openByAnchorOnLoad = function () {
+    if (window.location.hash && this.$module.querySelector(window.location.hash)) {
+      this.openForAnchor(window.location.hash)
+    }
+  }
+
+  // Add event listeners for links to open accordion sections when navigated to using said anchor links on the page
+  // 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*="#"]')
+
+    links.forEach(function (link) {
+      if (link.pathname === window.location.pathname) {
+        link.addEventListener('click', this.openForAnchor.bind(this, link.hash))
+      }
+    }.bind(this))
+  }
+
+  // Find the parent accordion section for the given id and open it
+  GemAccordion.prototype.openForAnchor = function (hash) {
+    var target = document.querySelector(hash)
+    var section = this.getContainingSection(target)
+
+    this.setExpanded(true, section)
+  }
+
+  // Loop through the given ids ancestors until the parent section class is found
+  GemAccordion.prototype.getContainingSection = function (target) {
+    while (!target.classList.contains(this.sectionClass)) {
+      target = target.parentElement
+    }
+
+    return target
+  }
+
   Modules.GemAccordion = GemAccordion
 })(window.GOVUK.Modules)

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

@@ -13,7 +13,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     // If a custom label has been provided, we can simply call the tracking module
     if (customTrackLabel) {
-      var trackDetails = new window.GOVUK.Modules.TrackClick()
+      var trackDetails = new window.GOVUK.Modules.GemTrackClick()
       trackDetails.start($module)
     } else {
       // If no custom label is set, we use the open/close status as the label

data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js

@@ -0,0 +1,108 @@
+//= require sortablejs/Sortable.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ReorderableList () { }
+
+  ReorderableList.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$upButtons = this.$module.querySelectorAll('.js-reorderable-list-up')
+    this.$downButtons = this.$module.querySelectorAll('.js-reorderable-list-down')
+
+    this.sortable = window.Sortable.create(this.$module, { // eslint-disable-line new-cap
+      chosenClass: 'gem-c-reorderable-list__item--chosen',
+      dragClass: 'gem-c-reorderable-list__item--drag',
+      onSort: function () {
+        this.updateOrderIndexes()
+        this.triggerEvent(this.$module, 'reorder-drag')
+      }.bind(this)
+    })
+
+    if (typeof window.matchMedia === 'function') {
+      this.setupResponsiveChecks()
+    } else {
+      this.sortable.option('disabled', true)
+    }
+
+    var boundOnClickUpButton = this.onClickUpButton.bind(this)
+    this.$upButtons.forEach(function (button) {
+      button.addEventListener('click', boundOnClickUpButton)
+    })
+
+    var boundOnClickDownButton = this.onClickDownButton.bind(this)
+    this.$downButtons.forEach(function (button) {
+      button.addEventListener('click', boundOnClickDownButton)
+    })
+  }
+
+  ReorderableList.prototype.setupResponsiveChecks = function () {
+    var tabletBreakpoint = '40.0625em' // ~640px
+    this.mediaQueryList = window.matchMedia('(min-width: ' + tabletBreakpoint + ')')
+    this.mediaQueryList.addListener(this.checkMode.bind(this))
+    this.checkMode()
+  }
+
+  ReorderableList.prototype.checkMode = function () {
+    this.sortable.option('disabled', !this.mediaQueryList.matches)
+  }
+
+  ReorderableList.prototype.onClickUpButton = function (e) {
+    var item = e.target.closest('.gem-c-reorderable-list__item')
+    var previousItem = item.previousElementSibling
+    if (item && previousItem) {
+      item.parentNode.insertBefore(item, previousItem)
+      this.updateOrderIndexes()
+    }
+    // if triggered by keyboard preserve focus on button
+    if (e.detail === 0) {
+      if (item !== item.parentNode.firstElementChild) {
+        e.target.focus()
+      } else {
+        e.target.nextElementSibling.focus()
+      }
+    }
+    this.triggerEvent(e.target, 'reorder-move-up')
+  }
+
+  ReorderableList.prototype.onClickDownButton = function (e) {
+    var item = e.target.closest('.gem-c-reorderable-list__item')
+    var nextItem = item.nextElementSibling
+    if (item && nextItem) {
+      item.parentNode.insertBefore(item, nextItem.nextElementSibling)
+      this.updateOrderIndexes()
+    }
+    // if triggered by keyboard preserve focus on button
+    if (e.detail === 0) {
+      if (item !== item.parentNode.lastElementChild) {
+        e.target.focus()
+      } else {
+        e.target.previousElementSibling.focus()
+      }
+    }
+    this.triggerEvent(e.target, 'reorder-move-down')
+  }
+
+  ReorderableList.prototype.updateOrderIndexes = function () {
+    var $orderInputs = this.$module.querySelectorAll('.gem-c-reorderable-list__actions input')
+    $orderInputs.forEach(function (input, index) {
+      input.setAttribute('value', index + 1)
+    })
+  }
+
+  ReorderableList.prototype.triggerEvent = function (element, eventName) {
+    var params = { bubbles: true, cancelable: true }
+    var event
+
+    if (typeof window.CustomEvent === 'function') {
+      event = new window.CustomEvent(eventName, params)
+    } else {
+      event = document.createEvent('CustomEvent')
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+    }
+
+    element.dispatchEvent(event)
+  }
+
+  Modules.ReorderableList = ReorderableList
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/components/show-password.js

@@ -11,8 +11,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.revertToPasswordOnFormSubmit = this.revertToPasswordOnFormSubmit.bind(this)
     this.input.classList.add('gem-c-input--with-password')
 
-    this.showPasswordText = this.$module.getAttribute('data-show')
-    this.hidePasswordText = this.$module.getAttribute('data-hide')
+    this.showPasswordText = this.$module.getAttribute('data-show-text')
+    this.hidePasswordText = this.$module.getAttribute('data-hide-text')
+    this.showPasswordFullText = this.$module.getAttribute('data-show-full-text')
+    this.hidePasswordFullText = this.$module.getAttribute('data-hide-full-text')
     this.shownPassword = this.$module.getAttribute('data-announce-show')
     this.hiddenPassword = this.$module.getAttribute('data-announce-hide')
 
@@ -27,6 +29,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.showHide.className = 'gem-c-show-password__toggle'
     this.showHide.setAttribute('aria-controls', this.input.getAttribute('id'))
     this.showHide.setAttribute('type', 'button')
+    this.showHide.setAttribute('aria-label', this.showPasswordFullText)
     this.showHide.innerHTML = this.showPasswordText
     this.wrapper.insertBefore(this.showHide, this.input.nextSibling)
 
@@ -50,12 +53,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   ShowPassword.prototype.togglePassword = function (event) {
     event.preventDefault()
     this.showHide.innerHTML = this.showHide.innerHTML === this.showPasswordText ? this.hidePasswordText : this.showPasswordText
+    this.showHide.setAttribute('aria-label', this.showHide.getAttribute('aria-label') === this.showPasswordFullText ? this.hidePasswordFullText : this.showPasswordFullText)
     this.statusText.innerHTML = this.statusText.innerHTML === this.shownPassword ? this.hiddenPassword : this.shownPassword
     this.input.setAttribute('type', this.input.getAttribute('type') === 'text' ? 'password' : 'text')
   }
 
   ShowPassword.prototype.revertToPasswordOnFormSubmit = function (event) {
     this.showHide.innerHTML = this.showPasswordText
+    this.showHide.setAttribute('aria-label', this.showPasswordFullText)
     this.statusText.innerHTML = this.hiddenPassword
     this.input.setAttribute('type', 'password')
   }

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+
 // used by the header navigation from govuk_template
 
 (function () {
@@ -14,6 +16,8 @@
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
         var isSearchToggle = sourceClass.match('search-toggle')
+        var showText = this.getAttribute('data-show-text') || 'Show search'
+        var hideText = this.getAttribute('data-hide-text') || 'Hide search'
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
@@ -23,12 +27,12 @@
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
           if (isSearchToggle) {
-            this.innerText = 'Show search'
+            this.innerText = showText
           }
         } else {
           this.setAttribute('class', sourceClass + ' js-visible')
           if (isSearchToggle) {
-            this.innerText = 'Hide search'
+            this.innerText = hideText
           }
         }
         this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')

data/app/assets/stylesheets/component_guide/application.scss

@@ -262,14 +262,6 @@ html {
   }
 }
 
-// Hide survey banner
-// stylelint-disable selector-max-id
-#user-satisfaction-survey-container,
-#global-cookie-message {
-  display: none;
-}
-// stylelint-enable selector-max-id
-
 // Rouge syntax highlighting
 // Based on https://github.com/alphagov/tech-docs-template/blob/master/template/source/stylesheets/palette/_syntax-highlighting.scss
 

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

@@ -56,6 +56,7 @@
 @import "components/print-link";
 @import "components/radio";
 @import "components/related-navigation";
+@import "components/reorderable-list";
 @import "components/search";
 @import "components/select";
 @import "components/share-links";

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

@@ -1,7 +1,7 @@
 // This is the file that the application needs to include in order to use
 // the components.
 
-@import "components/helpers/govuk-frontend-settings";
+@import "govuk_frontend_support";
 
 @import "components/print/accordion";
 @import "components/print/attachment";

data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -21,6 +21,17 @@
   border-color: govuk-colour("white");
 }
 
+.gem-c-breadcrumbs--border-bottom {
+  border-bottom: 1px solid $govuk-border-colour;
+  padding-bottom: govuk-spacing(1);
+
+  &.govuk-breadcrumbs--collapse-on-mobile {
+    @include govuk-media-query($until: tablet) {
+      padding-bottom: 0;
+    }
+  }
+}
+
 .govuk-breadcrumbs--collapse-on-mobile {
   @include govuk-media-query($until: tablet) {
     .govuk-breadcrumbs__list-item {

data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -46,11 +46,18 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
   }
 }
 
+// Override style from design system so we can have consistent
+// padding on the the banner and the confirmation
+
+.govuk-cookie-banner {
+  padding-top: 0;
+}
+
 // Override the styles from govuk_template
 // stylelint-disable selector-max-id
 .gem-c-cookie-banner#global-cookie-message {
   background-color: $govuk-cookie-banner-background;
-  padding: 0;
+  padding: govuk-spacing(3) 0 0 0;
   box-sizing: border-box;
 
   .gem-c-cookie-banner__message,

data/app/assets/stylesheets/govuk_publishing_components/components/_reorderable-list.scss

@@ -0,0 +1,117 @@
+.gem-c-reorderable-list {
+  @include govuk-font(19, bold);
+
+  list-style-type: none;
+  margin-bottom: govuk-spacing(6);
+  margin-top: 0;
+  padding-left: 0;
+  position: relative;
+
+  .govuk-form-group {
+    margin-bottom: 0;
+  }
+}
+
+.gem-c-reorderable-list__item {
+  margin-bottom: govuk-spacing(3);
+  border: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(3);
+}
+
+.gem-c-reorderable-list__item--chosen {
+  background-color: govuk-colour('light-grey');
+  outline: 2px dotted $govuk-border-colour;
+}
+
+.gem-c-reorderable-list__item--drag {
+  background-color: govuk-colour('white');
+  list-style-type: none;
+
+  .gem-c-reorderable-list__actions {
+    visibility: hidden;
+  }
+}
+
+.gem-c-reorderable-list__wrapper {
+  display: block;
+
+  @include govuk-media-query($from: desktop) {
+    display: inline-flex;
+    width: 100%;
+  }
+}
+
+.gem-c-reorderable-list__content {
+  margin-bottom: govuk-spacing(2);
+  @include govuk-media-query($from: desktop) {
+    margin-bottom: 0;
+    flex: 0 1 auto;
+    min-width: 65%;
+  }
+}
+
+.gem-c-reorderable-list__title {
+  margin: 0;
+}
+
+.gem-c-reorderable-list__description {
+  @include govuk-font(16, regular);
+  margin: 0;
+}
+
+.gem-c-reorderable-list__actions {
+  display: block;
+
+  @include govuk-media-query($from: desktop) {
+    flex: 1 0 auto;
+    text-align: right;
+  }
+
+  .gem-c-button {
+    display: none;
+  }
+}
+
+.js-enabled {
+  .gem-c-reorderable-list__item {
+    @include govuk-media-query($from: desktop) {
+      cursor: move;
+    }
+  }
+
+  .gem-c-reorderable-list__actions .govuk-form-group {
+    display: none;
+  }
+
+  .gem-c-reorderable-list__actions .gem-c-button {
+    display: inline-block;
+    margin-left: govuk-spacing(3);
+    width: 80px;
+  }
+
+  .gem-c-reorderable-list__actions .gem-c-button:first-of-type {
+    margin-left: 0;
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(3);
+    }
+  }
+
+  .gem-c-reorderable-list__item:first-child .gem-c-button:first-of-type,
+  .gem-c-reorderable-list__item:last-child .gem-c-button:last-of-type {
+    display: none;
+
+    @include govuk-media-query($from: desktop) {
+      display: inline-block;
+      visibility: hidden;
+    }
+  }
+
+  .gem-c-reorderable-list__item:first-child .gem-c-button:last-of-type {
+    margin-left: 0;
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(3);
+    }
+  }
+}