govuk_publishing_components 24.9.0 → 24.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d79929a27b4001f7a46caed7050ee5c3d04eda5137c21e8a28bef4cd12b8ce54
-  data.tar.gz: 957d3905b7989a6eda0c9bb54e262b197fee924df5cd7edc56d983018f650577
+  metadata.gz: da7ab3cbd89ef8a20000b0a9d6ffad43c92532e787106e6821cccd7c8d9f90b2
+  data.tar.gz: 1362df93036bb10322e881d5136a0303be0d96a745541afc122ad79949d36820
 SHA512:
-  metadata.gz: b3f25112299f7b0c198c884293a3932176bb299bc0d7477434f1124facb36b03fe365ecfca09a249844e5701c881e64a359e3be2fb71995daf74bfd0f56ee38c
-  data.tar.gz: cbacbec44192f78e41925a071ef9e0b854e0690b4d999d8515e7828071cd8a620044ee3182ac7eb3e50069f3e077ea4d8cd560bce8c4d89da9d0b41b7104c3b2
+  metadata.gz: a50d991265471b7c0025b59f50c2a51f4599c6fc5e629ad8c0f64158af0570812224938e08ad36193587b46c03a8bf37200def0167d47537868d1a9b31839305
+  data.tar.gz: a3104340ed6d431791b48ebf1fc9c8b2d89563c608cbe050082efdafc68a949d13bf5f198be9c39b7ad7b1e1d2b18de1556a9f21c9a9c89e65c1b52db02942ba

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

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

@@ -53,8 +53,8 @@ $large-input-size: 50px;
   @include govuk-font($size: 19, $line-height: (28 / 19));
   margin: 0;
   width: 100%;
-  height: em(40, 16);
-  padding: em(6, 16);
+  height: govuk-em(40, 16);
+  padding: govuk-em(6, 16);
   border: $govuk-border-width-form-element solid $govuk-input-border-colour;
   background: govuk-colour("white");
   border-radius: 0; //otherwise iphones apply an automatic border radius
@@ -63,8 +63,8 @@ $large-input-size: 50px;
   -moz-appearance: none;
   appearance: none;
   @include govuk-media-query($from: tablet) {
-    height: em(40, 19);
-    padding: em(6, 19);
+    height: govuk-em(40, 19);
+    padding: govuk-em(6, 19);
   }
 
   // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in