govuk_publishing_components 24.8.0 → 24.9.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0970bb03929bfc783d477b903ce46f8f8fa47ad800b74303f61c4f2e473a914e'
-  data.tar.gz: e1bc0b5d89be175278b988b30b85269b7128fc9fa5fbb3286b582bf66c91b7f0
+  metadata.gz: 2bd078802da71df0c44ec962126f7ee3df520df0dd8a656d48ee356b993dcb02
+  data.tar.gz: 7a418d59b3d7ee4663cf711c01dfffe9af817f38c67d5c5e4a3d4c037a652eb9
 SHA512:
-  metadata.gz: 7dfb6d556b81cc890eec0fa6884a7738d2c47b0b5bba80d0f8b35788682ba8cd0c4d9528370f7175c3b2361f47592fa405ebb43e8b5fa43954fc57bc23960dcc
-  data.tar.gz: 3e58e5f9b229c8c85e734b74fd2ba98db39cd9f66ba80bab12cf8ac6acc8a482a059f200d9b721e530c190a6dff73915c9641377a77afaef5506eef8d4ca9aaf
+  metadata.gz: bed7da741ac9e3b4542179b46e5a63a1ca18b82c2a17bd24b29943c112f7f6a8bb6d0d1c93ee9adb2461c8e62cf182ff1527178d0b9a064eb1b061c6b0bb01be
+  data.tar.gz: 41ed5cf47472133919e3f995e989b9b137ee76465b2ec7e5626fd627f74b4113febb664ea76065faac782dcfd202721d0f7468be0ced18303d532d25e2636036

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)
@@ -329,5 +351,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/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/_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/_image-card.scss

@@ -59,12 +59,10 @@
 }
 
 .gem-c-image-card__title {
-  @include govuk-font(19, $weight: bold);
   margin: 0;
 }
 
 .gem-c-image-card__title-link {
-  @extend %govuk-link;
   text-decoration: none;
 
   &:hover {
@@ -136,7 +134,6 @@
   }
 
   .gem-c-image-card__list-item-link {
-    @extend %govuk-link;
     line-height: 1.35em;
   }
 
@@ -193,7 +190,6 @@
   }
 
   .gem-c-image-card__title {
-    @include govuk-font(24, $weight: bold);
     padding-bottom: govuk-spacing(2);
   }
 

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/_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/_share-links.scss

@@ -20,7 +20,6 @@ $share-button-height: 32px;
 }
 
 .gem-c-share-links__link {
-  @extend %govuk-link;
   @include govuk-font(16, $weight: bold);
   margin-right: govuk-spacing(6);
   text-decoration: none;

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

@@ -46,7 +46,3 @@
 .gem-c-step-nav-related__link-item {
   margin-top: govuk-spacing(3);
 }
-
-.gem-c-step-nav-related__link {
-  @extend %govuk-link;
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss

@@ -44,7 +44,6 @@
 }
 
 .gem-c-subscription-links__item {
-  @extend %govuk-link;
   display: inline-block;
   text-decoration: none;
   background-repeat: no-repeat;

data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss

@@ -1,36 +1,5 @@
-.gem-c-success-alert {
-  color: $govuk-text-colour;
-  padding: govuk-spacing(3);
-  border: $govuk-border-width-narrow solid $govuk-success-colour;
-  @include govuk-responsive-margin(8, "bottom");
-
-  @include govuk-media-query($from: tablet) {
-    padding: govuk-spacing(4);
-    border-width: $govuk-border-width;
-  }
-}
+@import "govuk/components/notification-banner/notification-banner";
 
 .gem-c-success-alert__message {
   @include govuk-font(19, $weight: bold);
-  margin: 0;
-}
-
-.gem-c-success-summary__title {
-  margin-top: 0;
-  margin-bottom: govuk-spacing(3);
-
-  @include govuk-media-query($from: tablet) {
-    margin-bottom: govuk-spacing(4);
-  }
-
-  @include govuk-font(24, $weight: bold);
-}
-
-.gem-c-success-summary__body {
-  @include govuk-font(19);
-  margin: 0;
-}
-
-.gem-c-success-alert:focus {
-  outline: $govuk-focus-width solid $govuk-focus-colour;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss

@@ -30,10 +30,6 @@
   }
 }
 
-.gem-c-translation-nav__link {
-  @extend %govuk-link;
-}
-
 .gem-c-translation-nav--inverse {
   border-color: govuk-colour("white");
 

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

@@ -1,7 +1,21 @@
-@import "govuk/components/button/button";
-
 // stylelint-disable scss/at-extend-no-missing-placeholder
 .gem-c-govspeak {
+  @import "govuk/components/button/button";
+
+  // Some links in Govspeak should look like buttons[1] when using:
+  // ```
+  //    {button}[Random page](https://gov.uk/random){/button}
+  // ```.
+  //
+  // To make sure that the link styles don't override the button styles this
+  // needs more specificity.
+  //
+  // Govspeak targets link by using element selectors; so the selector
+  // `.gem-c-govspeak a:link` will override `.govuk-button`. Extending
+  // `govuk-button` here gives `gem-c-govspeak .gem-c-button` and prevents the
+  // link-that-looks-like-a-button from being overriden.
+
+  // [1]: https://github.com/alphagov/govspeak#button
   .gem-c-button {
     @extend .govuk-button;
   }

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

@@ -271,7 +271,6 @@
   }
 
   .mc-toggle-button {
-    @extend %govuk-body-s;
     border: 1px solid $govuk-border-colour;
     color: $govuk-link-colour;
     cursor: pointer;

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

@@ -2,3 +2,18 @@
 // It provides govuk-frontend but adds no weight to the compiled CSS
 @import "components/helpers/govuk-frontend-settings";
 @import "govuk/base";
+
+@import 'components/mixins/margins';
+// TODO: remove this focus override when govuk_template is no longer used
+@import 'components/mixins/govuk-template-link-focus-override';
+@import 'components/mixins/css3';
+
+$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%);
+
+$gem-hover-dark-background: #dddcdb;

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -79,7 +79,7 @@
 
 <% unless ENV["MAIN_COMPONENT_GUIDE"] %>
   <h2 class="component-doc-h2">Components in this application (<%= @component_docs.length %>)</h2>
-  <ul class="component-list">
+  <ul class="component-list" id="list-components-in-this-application">
     <% @component_docs.each do |component_doc| %>
       <li>
         <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>
@@ -93,7 +93,7 @@
   <h2 class="component-doc-h2">All gem components (<%= @gem_component_docs.length %>)</h2>
 <% end %>
 
-<ul class="component-list">
+<ul class="component-list" id="list-all-components-in-the-gem">
   <% @gem_component_docs.each do |component_doc| %>
     <li>
       <%= link_to component_doc.name, component_doc_path(component_doc.id), class: "govuk-link" %>