govuk_publishing_components 24.9.1 → 24.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed769524a5b5079bce70c275a1cb341e287f5575bdb669b389b045f3aa79e50c
-  data.tar.gz: bf256f385c94da52726c3685d92f42239f08347d9f6506930f5773839ea81b8e
+  metadata.gz: 5314a0b0efdfbb0c6f6c892958401165121c5350c5dacf5a74efbc42772702f3
+  data.tar.gz: 205e88be5a91f61d95fc5ad8ac741a5ad07c886372c415820776cbccb0dc52c7
 SHA512:
-  metadata.gz: b95c734d8d88b6193ce60fb522787b947b6cefd2d5d35dfa13eb681786155689714b1838f7d67aa6a3fcdf222388a72216a1ec9db78bdf854429356673225026
-  data.tar.gz: f94cb6822b42112e4bc47516a27ffdc302163da8b27c01f9be865f06bdaad146e6d346609bd570f6197993af8e9044aec51deb59042e1a33aa2b1ef0732169c2
+  metadata.gz: 8ffaca1d426b22f545f48123238214fcb6cebc6500d309b56cfadb7242acdca54557819c3382eab6bf77287fd24fb26f9e26912fc7b2210dbb0d38955cb60a60
+  data.tar.gz: ee07a7beae52e317747039ed002271f0526afdd126b7b8de58b2d624100bebf79967c2d0188d835c99021d70f3f3f6d19a8407185822cc16452a25cd8f886335

data/app/assets/javascripts/govuk_publishing_components/analytics/pii.js

@@ -5,7 +5,7 @@
 
   var GOVUK = global.GOVUK || {}
   var EMAIL_PATTERN = /[^\s=/?&]+(?:@|%40)[^\s=/?&]+/g
-  var POSTCODE_PATTERN = /[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9](?!refund)[ABD-HJLNPQ-Z]{2,3}/gi
+  var POSTCODE_PATTERN = /\b[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9](?!refund)[ABD-HJLNPQ-Z]{2,3}\b/gi
   var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
   var ESCAPE_REGEX_PATTERN = /[|\\{}()[\]^$+*?.]/g
 

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

@@ -433,6 +433,13 @@
       ['Percent', 60],
       ['Percent', 80],
       ['Percent', 100]
+    ],
+    '/get-coronavirus-test': [
+      ['Percent', 20],
+      ['Percent', 40],
+      ['Percent', 60],
+      ['Percent', 80],
+      ['Percent', 100]
     ]
   }
 

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

@@ -31,7 +31,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.upChevonIconClass = 'gem-c-accordion-nav__chevron'
     this.downChevonIconClass = 'gem-c-accordion-nav__chevron--down'
 
-    // Indicate that js has worked
+    // Translated component content and language attribute pulled from data attributes
+    this.$module.actions = {}
+    this.$module.actions.locale = this.$module.getAttribute('data-locale')
+    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')
+    this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden')
+
+    // Indicate that JavaScript has worked
     this.$module.classList.add('gem-c-accordion--active')
 
     this.initControls()
@@ -117,7 +126,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // Build additional copy for assistive technology
     var srAdditionalCopy = document.createElement('span')
     srAdditionalCopy.classList.add('govuk-visually-hidden')
-    srAdditionalCopy.innerHTML = ' this section'
+    srAdditionalCopy.innerHTML = this.$module.actions.thisSectionVisuallyHidden
+
+    if (this.$module.actions.locale) {
+      srAdditionalCopy.lang = this.filterLocale('this_section_visually_hidden')
+    }
 
     // Build additional wrapper for toggle text, place icon after wrapped text.
     var wrapperShowHideIcon = document.createElement('span')
@@ -178,12 +191,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var icon = section.querySelector('.' + this.upChevonIconClass)
     var showHideText = section.querySelector('.' + this.sectionShowHideTextClass)
     var button = section.querySelector('.' + this.sectionButtonClass)
-    var newButtonText = expanded ? 'Hide' : 'Show'
+    var newButtonText = expanded ? this.$module.actions.hideText : this.$module.actions.showText
 
     showHideText.innerHTML = newButtonText
     button.setAttribute('aria-expanded', expanded)
     button.classList.add(this.toggleLinkClass)
 
+    if (this.$module.actions.locale) {
+      showHideText.lang = this.filterLocale(expanded ? 'hide_text' : 'show_text')
+    }
+
     // Swap icon, change class
     if (expanded) {
       section.classList.add(this.sectionExpandedClass)
@@ -218,10 +235,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   GemAccordion.prototype.updateOpenAllButton = function (expanded) {
     var icon = this.openAllButton.querySelector('.' + this.upChevonIconClass)
     var openAllCopy = this.openAllButton.querySelector('.' + this.openAllTextClass)
-    var newButtonText = expanded ? 'Hide all sections' : 'Show all sections'
+    var newButtonText = expanded ? this.$module.actions.hideAllText : this.$module.actions.showAllText
+
     this.openAllButton.setAttribute('aria-expanded', expanded)
     openAllCopy.innerHTML = newButtonText
 
+    if (this.$module.actions.locale) {
+      openAllCopy.lang = this.filterLocale(expanded ? 'hide_all_text' : 'show_all_text')
+    }
+
     // Swap icon, toggle class
     if (expanded) {
       icon.classList.remove(this.downChevonIconClass)
@@ -304,8 +326,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   // 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) {
+    nodeListForEach(links, function (link) {
       if (link.pathname === window.location.pathname) {
         link.addEventListener('click', this.openForAnchor.bind(this, link.hash.split('#')[1]))
       }
@@ -329,5 +350,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     return target
   }
 
+  GemAccordion.prototype.filterLocale = function (key) {
+    if (this.$module.actions.locale && this.$module.actions.locale.indexOf('{') !== -1) {
+      var locales = JSON.parse(this.$module.actions.locale)
+      return locales[key]
+    } else if (this.$module.actions.locale) {
+      return this.$module.actions.locale
+    }
+  }
+
   Modules.GemAccordion = GemAccordion
 })(window.GOVUK.Modules)

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

@@ -41,6 +41,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.wrapper.insertBefore(this.statusText, this.showHide.nextSibling)
 
     this.showHide.addEventListener('click', this.$module.togglePassword)
+    this.moveDataAttributesToButton()
 
     this.parentForm = this.input.form
     var disableFormSubmitCheck = this.$module.getAttribute('data-disable-form-submit-check')
@@ -65,5 +66,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.input.setAttribute('type', 'password')
   }
 
+  ShowPassword.prototype.moveDataAttributesToButton = function () {
+    var attrs = this.input.attributes
+    for (var i = attrs.length; i >= 0; i--) {
+      var attr = attrs[i]
+      if (attr && /^data-button/.test(attr.name)) {
+        this.showHide.setAttribute(attr.name.replace('-button', ''), attr.value)
+        this.input.removeAttribute(attr.name)
+      }
+    }
+  }
+
   Modules.ShowPassword = ShowPassword
 })(window.GOVUK.Modules)

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

@@ -188,7 +188,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status')
     toggleStatus.setAttribute('role', 'alert')
 
-    link.classList.add('mc-toggle-button')
+    link.classList.add('govuk-body-s', 'mc-toggle-button')
     link.appendChild(toggleText)
     link.appendChild(toggleStatus)
 

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

@@ -68,17 +68,17 @@ $gem-c-accordion-bottom-border-width: 1px;
     display: inline-block;
     box-sizing: border-box;
     position: relative;
-    width: em(20, 14);
-    height: em(20, 14);
-    margin-left: em(5, 14);
-    border: em(1, 14) solid;
-    border-radius: em(100, 14);
+    width: govuk-em(20, 14);
+    height: govuk-em(20, 14);
+    margin-left: govuk-em(5, 14);
+    border: govuk-em(1, 14) solid;
+    border-radius: govuk-em(100, 14);
     // Main icon size across views, yet keep responsive for zoom
     @include govuk-media-query($from: tablet) {
-      width: em(20, 16);
-      height: em(20, 16);
-      margin-left: em(5, 16);
-      border: em(1, 16) solid;
+      width: govuk-em(20, 16);
+      height: govuk-em(20, 16);
+      margin-left: govuk-em(5, 16);
+      border: govuk-em(1, 16) solid;
     }
 
     &:after {
@@ -87,20 +87,20 @@ $gem-c-accordion-bottom-border-width: 1px;
       box-sizing: border-box;
       position: absolute;
       overflow: visible;
-      width: em(6, 14);
-      height: em(6, 14);
-      border-top: em(2, 14) solid;
-      border-right: em(2, 14) solid;
+      width: govuk-em(6, 14);
+      height: govuk-em(6, 14);
+      border-top: govuk-em(2, 14) solid;
+      border-right: govuk-em(2, 14) solid;
       transform: rotate(-45deg);
-      left: em(6, 14);
-      bottom: em(5, 14);
+      left: govuk-em(6, 14);
+      bottom: govuk-em(5, 14);
       @include govuk-media-query($from: tablet) {
-        width: em(6, 16);
-        height: em(6, 16);
-        border-top: em(2, 16) solid;
-        border-right: em(2, 16) solid;
-        left: em(6, 16);
-        bottom: em(5, 16);
+        width: govuk-em(6, 16);
+        height: govuk-em(6, 16);
+        border-top: govuk-em(2, 16) solid;
+        border-right: govuk-em(2, 16) solid;
+        left: govuk-em(6, 16);
+        bottom: govuk-em(5, 16);
       }
     }
   }
@@ -227,12 +227,12 @@ $gem-c-accordion-bottom-border-width: 1px;
 
   // Setting width of the text, so the icon doesn't shift (left / right) when toggled
   .gem-c-accordion__toggle-text {
-    min-width: em(40, 16);
+    min-width: govuk-em(40, 16);
     display: inline-block;
   }
 
   .gem-c-accordion__open-all-text {
-    min-width: em(120, 16);
+    min-width: govuk-em(120, 16);
     display: inline-block;
     text-align: left;
   }
@@ -277,20 +277,20 @@ $gem-c-accordion-bottom-border-width: 1px;
 
     // Reduce Chevron size
     .gem-c-accordion-nav__chevron {
-      width: em(20, 14);
-      height: em(20, 14);
-      margin-left: em(5, 14);
-      border: em(1, 14) solid;
-      border-radius: em(100, 14);
+      width: govuk-em(20, 14);
+      height: govuk-em(20, 14);
+      margin-left: govuk-em(5, 14);
+      border: govuk-em(1, 14) solid;
+      border-radius: govuk-em(100, 14);
       transform: scale(.875);
 
       &:after {
-        width: em(6, 14);
-        height: em(6, 14);
-        border-top: em(2, 14) solid;
-        border-right: em(2, 14) solid;
-        left: em(6, 14);
-        bottom: em(5, 14);
+        width: govuk-em(6, 14);
+        height: govuk-em(6, 14);
+        border-top: govuk-em(2, 14) solid;
+        border-right: govuk-em(2, 14) solid;
+        left: govuk-em(6, 14);
+        bottom: govuk-em(5, 14);
       }
     }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -1,5 +1,3 @@
-$gem-hover-dark-background: #dddcdb;
-
 .gem-c-action-link {
   display: table;
 

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

@@ -1,13 +1,5 @@
 @import "govuk/components/button/button";
 
-$gem-secondary-button-colour: #00823b;
-$gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
-$gem-secondary-button-background-colour: govuk-colour("white");
-$gem-secondary-button-hover-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
-
-$gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
-$gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
-
 // Because govuk-frontend adds a responsive bottom margin by default for each component
 // we reset it to zero so we can set it separately using `gem-c-button--bottom-margin`
 // If we decide to use responsive margins consistently across components we can remove this

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -1,12 +1,10 @@
 $transition-campaign-red: #ff003b;
-$transition-campaign-dark-blue: #1e1348;
 
 .gem-c-contextual-sidebar__brexit-related-links {
   border-top: 2px solid $govuk-brand-colour;
 }
 
 .gem-c-contextual-sidebar__brexit-heading {
-  @extend %govuk-heading-s;
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
 }
@@ -24,45 +22,10 @@ $transition-campaign-dark-blue: #1e1348;
   }
 
   .gem-c-contextual-sidebar__brexit-text {
-    @extend %govuk-link;
     @include govuk-font(16);
-
-    margin-top: 0;
     margin-bottom: govuk-spacing(1);
-    text-decoration: underline;
-
     @include govuk-media-query($from: tablet) {
       margin-bottom: govuk-spacing(2);
     }
   }
 }
-
-.gem-c-contextual-sidebar__brexit-cta:focus {
-  .gem-c-contextual-sidebar__brexit-text {
-    text-decoration: none;
-  }
-}
-
-.gem-c-contextual-sidebar__take-action-traffic-lights {
-  text-align: left;
-  margin-bottom: govuk-spacing(2);
-}
-
-.gem-c-contextual-sidebar__take-action-traffic-lights > li {
-  white-space: nowrap;
-  display: inline;
-  margin-right: 7px;
-  margin-bottom: govuk-spacing(1);
-}
-
-.gem-c-contextual-sidebar__take-action-traffic-lists-icon {
-  vertical-align: middle;
-  margin-top: -2px;
-  width: 22px;
-  margin-right: 2px;
-}
-
-.gem-c-contextual-sidebar__take-action-traffic-lists-text {
-  @include govuk-font($size: 19, $weight: bold, $line-height: 2);
-  vertical-align: middle;
-}

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

@@ -21,6 +21,7 @@
 @import "govspeak/typography";
 @import "govspeak/warning-callout";
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   &.direction-rtl {
     direction: rtl;

data/app/assets/stylesheets/govuk_publishing_components/components/_highlight-boxes.scss

@@ -50,11 +50,10 @@
 }
 
 .gem-c-highlight-boxes__title {
-  @extend %govuk-link;
   @include govuk-font(19, $weight: bold);
   display: block;
   text-decoration: underline;
-  margin-bottom: 5px;
+  margin-bottom: govuk-spacing(1);
 }
 
 .gem-c-highlight-boxes--inverse .gem-c-highlight-boxes__title {

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

@@ -33,7 +33,7 @@
 .gem-c-layout-header--search-left {
   .gem-c-header__menu-button.govuk-header__menu-button {
     margin-top: - govuk-spacing(7);
-    left: 0;
+    left: govuk-spacing(3);
   }
 
   .gem-c-header__nav-wrapper {
@@ -78,16 +78,6 @@
   }
 }
 
-@include govuk-compatibility(govuk_template) {
-  .gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
-  .gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
-  .gem-c-layout-header__search.govuk-grid-column-one-third,
-  .gem-c-layout-header__logo.govuk-grid-column-two-thirds {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
 .gem-c-layout-header__logo,
 .gem-c-layout-header__search {
   @include govuk-media-query($until: "tablet") {

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

@@ -6,7 +6,7 @@
   clear: both;
   border: $govuk-border-width solid govuk-colour("blue");
 
-  .govuk-govspeak, {
+  .govuk-govspeak {
     p:last-child {
       margin-bottom: 0;
     }
@@ -27,7 +27,9 @@
   }
 
   a {
-    @extend %govuk-link;
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+    @include govuk-link-print-friendly;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -18,7 +18,6 @@
 }
 
 .gem-c-pagination__link {
-  @extend %govuk-link;
   display: block;
   text-decoration: none;
   padding-bottom: govuk-spacing(4);

data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss

@@ -41,7 +41,6 @@ $gem-c-print-link-background-height: 18px;
 }
 
 .gem-c-print-link__button {
-  @extend %govuk-body-s;
   border: 1px solid $govuk-border-colour;
   color: $govuk-link-colour;
   cursor: pointer;

data/app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss

@@ -66,7 +66,6 @@
 }
 
 .gem-c-related-navigation__section-link {
-  @extend %govuk-link;
   font-weight: bold;
 
   @include govuk-template-link-focus-override;