govuk_publishing_components 24.1.1 → 24.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 664f19b71a4b1ec65f49a7a14fa21d4a2a64465b2f593a3c75e2de132474417a
-  data.tar.gz: 8e734701d0d66817548de5855938a6cdad1f9b2ce2fa96437075e9058331785a
+  metadata.gz: 6b37372eea898cc35257f4c1eb22682eca8b7c52c3a33ad974d68ba708d0c1bb
+  data.tar.gz: 84f9e46d8224bc5a3bc1d472c965926a4bea81ce64a7a88b01be4a56c20ae171
 SHA512:
-  metadata.gz: 9073c4b0254a544f3a0f6da89889550786a3f0e7cc5611b6c89768be9c8d66ff27b8364d54525e677013c439e73acb7dd618289f2d72787d56b6f833d89df910
-  data.tar.gz: 2ed858269eee93ae2212110fd2aa4b4cee21106e5028a36508d3242982a8e60be387b1f31e8b7694f1b66b401707049865f4fda1338639d3b9ce5e702db99b05
+  metadata.gz: 75ff1497d81807ec11c3f7fd667835204de9db7a1efec78445e82a097d71406874687d6563d91667e5362578484892db688feefcbfa94968975033022c69d82f
+  data.tar.gz: 012e764ff160ecfa9527f2a20bc37ec33a956eb1644da5f66c93eb42b706134a8ae8fe722989027545741b36f28cb59afe4339b28a94169de2331b0f05165914

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/cookie-banner.js

@@ -9,10 +9,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.hideCookieMessage = this.hideCookieMessage.bind(this)
     this.$module.showConfirmationMessage = this.showConfirmationMessage.bind(this)
     this.$module.setCookieConsent = this.setCookieConsent.bind(this)
+    this.$module.rejectCookieConsent = this.rejectCookieConsent.bind(this)
 
     this.$module.cookieBanner = document.querySelector('.gem-c-cookie-banner')
     this.$module.cookieBannerConfirmationMessage = this.$module.querySelector('.gem-c-cookie-banner__confirmation')
-
+    this.$module.cookieBannerConfirmationMessageText = this.$module.querySelector('.gem-c-cookie-banner__confirmation-message')
     this.setupCookieMessage()
   }
 
@@ -24,9 +25,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       }
     }
 
-    this.$acceptCookiesLink = this.$module.querySelector('button[data-accept-cookies]')
-    if (this.$acceptCookiesLink) {
-      this.$acceptCookiesLink.addEventListener('click', this.$module.setCookieConsent)
+    this.$acceptCookiesButton = this.$module.querySelector('button[data-accept-cookies]')
+    if (this.$acceptCookiesButton) {
+      this.$acceptCookiesButton.style.display = 'block'
+      this.$acceptCookiesButton.addEventListener('click', this.$module.setCookieConsent)
+    }
+
+    this.$rejectCookiesButton = this.$module.querySelector('button[data-reject-cookies]')
+    if (this.$rejectCookiesButton) {
+      this.$rejectCookiesButton.style.display = 'block'
+      this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
     }
 
     this.showCookieMessage()
@@ -56,6 +64,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
+      this.$module.hidden = true
       this.$module.style.display = 'none'
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
@@ -66,6 +75,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   CookieBanner.prototype.setCookieConsent = function () {
+    if (this.$acceptCookiesButton.getAttribute('data-cookie-types') === 'all') {
+      this.$module.cookieBannerConfirmationMessageText.insertAdjacentHTML('afterbegin', 'You have accepted additional cookies. ')
+    }
     window.GOVUK.approveAllCookieTypes()
     this.$module.showConfirmationMessage()
     this.$module.cookieBannerConfirmationMessage.focus()
@@ -78,11 +90,19 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  CookieBanner.prototype.rejectCookieConsent = function () {
+    this.$module.cookieBannerConfirmationMessageText.insertAdjacentHTML('afterbegin', 'You have rejected additional cookies. ')
+    this.$module.showConfirmationMessage()
+    this.$module.cookieBannerConfirmationMessage.focus()
+    window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+  }
+
   CookieBanner.prototype.showConfirmationMessage = function () {
-    this.$cookieBannerMainContent = document.querySelector('.gem-c-cookie-banner__wrapper')
+    this.$cookieBannerMainContent = document.querySelector('.js-banner-wrapper')
 
-    this.$cookieBannerMainContent.style.display = 'none'
+    this.$cookieBannerMainContent.hidden = true
     this.$module.cookieBannerConfirmationMessage.style.display = 'block'
+    this.$module.cookieBannerConfirmationMessage.hidden = false
   }
 
   CookieBanner.prototype.isInCookiesPage = function () {

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/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/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/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

@@ -1,3 +1,4 @@
+@import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
 .js-enabled {
@@ -7,50 +8,14 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 }
 
 .gem-c-cookie-banner {
-  @include govuk-font($size: 16);
-  padding: govuk-spacing(2) 0;
   background-color: $govuk-cookie-banner-background;
 }
 
-.gem-c-cookie-banner--services {
+// can't be used without js so implement there
+.gem-c-cookie-banner .gem-c-button {
   display: none;
 }
 
-.gem-c-cookie-banner__message {
-  display: inline-block;
-  padding-bottom: govuk-spacing(2);
-
-  @include govuk-font($size: 16);
-  @include govuk-media-query($from: desktop) {
-    padding-right: govuk-spacing(4);
-  }
-}
-
-.gem-c-cookie-banner__button {
-  &.govuk-grid-column-one-half-from-desktop {
-    padding: 0;
-  }
-
-  .govuk-button {
-    @include govuk-media-query($from: desktop) {
-      width: 90%;
-    }
-
-    @include govuk-media-query($until: desktop) {
-      margin-bottom: govuk-spacing(4);
-    }
-  }
-}
-
-// Only show accept button if users have js and can accept
-.gem-c-cookie-banner__button-accept {
-  display: none;
-}
-
-.js-enabled .gem-c-cookie-banner__button-accept {
-  display: inline-block;
-}
-
 .gem-c-cookie-banner__confirmation {
   display: none;
   position: relative;
@@ -81,51 +46,18 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
   }
 }
 
-.gem-c-cookie-banner__hide-button {
-  @include govuk-font($size: 19);
-  outline: 0;
-  border: 0;
-  background: none;
-  text-decoration: underline;
-  color: $govuk-link-colour;
-  padding: govuk-spacing(0);
-  margin-top: govuk-spacing(2);
+// Override style from design system so we can have consistent
+// padding on the the banner and the confirmation
 
-  &:hover {
-    color: $govuk-link-hover-colour;
-    cursor: pointer;
-  }
-
-  &:focus {
-    @include govuk-focused-text;
-  }
-
-  @include govuk-media-query($from: desktop) {
-    margin-top: govuk-spacing(0);
-    position: absolute;
-    right: govuk-spacing(1);
-  }
-}
-
-.gem-c-cookie-banner__buttons--flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-
-  .govuk-button,
-  .gem-c-cookie-banner__link {
-    flex-grow: 1;
-    flex-basis: 10rem;
-    margin-right: govuk-spacing(3);
-    margin-bottom: govuk-spacing(3);
-  }
+.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: govuk-spacing(4) 0;
+  padding: govuk-spacing(3) 0 0 0;
   box-sizing: border-box;
 
   .gem-c-cookie-banner__message,
@@ -135,18 +67,13 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
     @include govuk-font($size: 19);
   }
 
-  .gem-c-cookie-banner__message {
-    margin-bottom: 0;
-  }
-
   p {
     @include govuk-font($size: 19);
     margin: 0 0 govuk-spacing(2) 0;
   }
 
-  .gem-c-cookie-banner__confirmation-message {
-    @include govuk-media-query($from: desktop) {
-      margin-bottom: 0;
-    }
+  .gem-c-cookie-banner__message,
+  .gem-c-cookie-banner__confirmation {
+    margin-bottom: - govuk-spacing(2);
   }
 }

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

@@ -34,6 +34,21 @@ $large-input-size: 50px;
   }
 }
 
+%gem-c-search-input-focus {
+  outline: $govuk-focus-width solid $govuk-focus-colour;
+  // Ensure outline appears outside of the element
+  outline-offset: 0;
+  // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
+  // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
+  box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+  @include govuk-if-ie8 {
+    // IE8 doesn't support `box-shadow` so double the border with
+    // `border-width`.
+    border-width: $govuk-border-width-form-element * 2;
+  }
+}
+
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include govuk-font($size: 19, $line-height: (28 / 19));
   margin: 0;
@@ -59,25 +74,14 @@ $large-input-size: 50px;
   }
 
   &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    // Ensure outline appears outside of the element
-    outline-offset: 0;
-    // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width`
-    // Also, `outline` cannot be utilised here as it is already used for the yellow focus state.
-    box-shadow: inset 0 0 0 $govuk-border-width-form-element;
-
-    @include govuk-if-ie8 {
-      // IE8 doesn't support `box-shadow` so double the border with
-      // `border-width`.
-      border-width: $govuk-border-width-form-element * 2;
-    }
+    @extend %gem-c-search-input-focus;
   }
 }
 
 @include govuk-compatibility(govuk_template) {
   //  ultra specific rule overrides focus styling from govuk_template
   #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
-    @extend .gem-c-search__input[type="search"]:focus; // stylelint-disable scss/at-extend-no-missing-placeholder
+    @extend %gem-c-search-input-focus;
   }
 }