govuk_publishing_components 24.9.1 → 24.9.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed769524a5b5079bce70c275a1cb341e287f5575bdb669b389b045f3aa79e50c
-  data.tar.gz: bf256f385c94da52726c3685d92f42239f08347d9f6506930f5773839ea81b8e
+  metadata.gz: 9ad726f2e544e7165c409104245f6b1e8e0c9bf97c4e10984db45411cc007892
+  data.tar.gz: 7aca349410d2615a5ba3810bdd90c4a355477dc017c7e72f9b626c35630139ba
 SHA512:
-  metadata.gz: b95c734d8d88b6193ce60fb522787b947b6cefd2d5d35dfa13eb681786155689714b1838f7d67aa6a3fcdf222388a72216a1ec9db78bdf854429356673225026
-  data.tar.gz: f94cb6822b42112e4bc47516a27ffdc302163da8b27c01f9be865f06bdaad146e6d346609bd570f6197993af8e9044aec51deb59042e1a33aa2b1ef0732169c2
+  metadata.gz: 850ab9d67ae304803e0060aa16c969cc621df866eca8ea15eff8617e68d0149e618d0cc946da6da4b5bce7549033b8d60f0fb93d0fd316fe60e0f0ce75df606d
+  data.tar.gz: 9cdda0e734f05dd8c89e3bebd17800401492977650cfa2016eb51abec02362f1faf3d0668b33b2ead3067386b1c8c278a5fda1a269fb40685c0d23f659dc5343

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

@@ -6,7 +6,6 @@ $transition-campaign-dark-blue: #1e1348;
 }
 
 .gem-c-contextual-sidebar__brexit-heading {
-  @extend %govuk-heading-s;
   margin-top: govuk-spacing(3);
   margin-bottom: govuk-spacing(2);
 }
@@ -24,7 +23,6 @@ $transition-campaign-dark-blue: #1e1348;
   }
 
   .gem-c-contextual-sidebar__brexit-text {
-    @extend %govuk-link;
     @include govuk-font(16);
 
     margin-top: 0;
@@ -38,6 +36,8 @@ $transition-campaign-dark-blue: #1e1348;
 }
 
 .gem-c-contextual-sidebar__brexit-cta:focus {
+  box-shadow: 0 $govuk-focus-width $govuk-focus-text-colour;
+
   .gem-c-contextual-sidebar__brexit-text {
     text-decoration: none;
   }

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/_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/_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" %>

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

@@ -24,7 +24,7 @@
           </div>
         </div>
       <% end %>
-      <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %></p>
+      <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %>.</p>
     </div>
   </div>
 

data/app/views/govuk_publishing_components/components/_accordion.html.erb

@@ -11,9 +11,34 @@
   accordion_classes << 'gem-c-accordion--condensed' if condensed
   accordion_classes << (shared_helper.get_margin_bottom)
 
+  translations = {
+    show_text: "components.accordion.show",
+    hide_text: "components.accordion.hide",
+    show_all_text: "components.accordion.show_all",
+    hide_all_text: "components.accordion.hide_all",
+    this_section_visually_hidden: "components.accordion.this_section_visually_hidden",
+  }
+
+  locales = {}
+
   data_attributes ||= {}
   data_attributes[:module] = 'gem-accordion'
   data_attributes[:anchor_navigation] = anchor_navigation
+
+  translations.each do |key, translation|
+    locales[key] = shared_helper.t_locale(translation)
+    data_attributes[key] = t(translation)
+  end
+
+  unique_locales = locales.values.uniq
+
+  if unique_locales.length > 1
+    data_attributes[:locale] = locales
+  else
+    if unique_locales[0] != I18n.locale
+      data_attributes[:locale] = unique_locales[0]
+    end
+  end
 %>
 <% if items.any? %>
   <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>

data/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb

@@ -17,7 +17,7 @@
           <%= link_to(
             content_item[:link].fetch(:text),
             content_item[:link].fetch(:path),
-            class: "gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
+            class: "govuk-link gem-c-highlight-boxes__title #{"gem-c-highlight-boxes__title--featured" if content_item[:link][:featured]}",
             data: content_item[:link][:data_attributes]
             )
           %>

data/app/views/govuk_publishing_components/components/_layout_header.html.erb

@@ -18,12 +18,12 @@
 <header class="<%= header_classes.join(' ') %>"  role="banner" data-module="govuk-header">
   <div class="govuk-header__container <%= width_class %>">
     <% if search_left %>
-      <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
+      <div class="govuk-grid-row">
         <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
           <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
       </div>
-      <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
+      <div class="govuk-grid-row">
         <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
           <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>

data/app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb

@@ -8,7 +8,7 @@
     <% if local_assigns.include?(:previous_page) %>
       <li class="gem-c-pagination__item gem-c-pagination__item--previous">
         <a href="<%= previous_page[:url] %>"
-          class="gem-c-pagination__link"
+          class="govuk-link gem-c-pagination__link"
           rel="prev"
           data-track-category="contentsClicked"
           data-track-action="previous"
@@ -34,7 +34,7 @@
     <% if local_assigns.include?(:next_page) %>
       <li class="gem-c-pagination__item gem-c-pagination__item--next">
         <a href="<%= next_page[:url] %>"
-          class="gem-c-pagination__link"
+          class="govuk-link gem-c-pagination__link"
           rel="next"
           data-track-category="contentsClicked"
           data-track-action="next"

data/app/views/govuk_publishing_components/components/_print_link.html.erb

@@ -18,8 +18,8 @@
   wrapper_classes << (shared_helper.get_margin_top)
   wrapper_classes << (shared_helper.get_margin_bottom)
 
-  classes = %w(govuk-link)
-  classes << "gem-c-print-link__button" if href.nil?
+  classes = %w[govuk-link]
+  classes << "govuk-body-s gem-c-print-link__button" if href.nil?
   classes << "gem-c-print-link__link govuk-link--no-visited-state" if href.present?
 %>
 

data/app/views/govuk_publishing_components/components/_share_links.html.erb

@@ -52,7 +52,7 @@
               'track-action': link[:icon],
               'track-options': track_options
             },
-            class: "gem-c-share-links__link #{brand_helper.color_class}" do %>
+            class: "govuk-link gem-c-share-links__link #{brand_helper.color_class}" do %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>
                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" aria-hidden="true">

data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb

@@ -4,14 +4,14 @@
   always_display_as_list ||= false
 %>
 <% if links.any? %>
-  <div 
-    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>" 
+  <div
+    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
     data-module="gem-track-click">
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>
           <a href="<%= links[0][:href] %>"
-            class="gem-c-step-nav-related__link"
+            class="govuk-link"
             data-track-category="stepNavPartOfClicked"
             data-track-action="<%= pretitle %>"
             data-track-label="<%= links[0][:href] %>"
@@ -27,7 +27,7 @@
           <% links.each do |link| %>
             <li class="gem-c-step-nav-related__link-item">
               <a href="<%= link[:href] %>"
-                class="gem-c-step-nav-related__link"
+                class="govuk-link"
                 data-track-category="stepNavPartOfClicked"
                 data-track-action="<%= pretitle %>"
                 data-track-label="<%= link[:href] %>"

data/app/views/govuk_publishing_components/components/_subscription_links.html.erb

@@ -36,7 +36,7 @@
            <%= sl_helper.email_signup_link_text %>
           <% end %>
           <%= link_to email_link_text, sl_helper.email_signup_link, {
-            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
             data: sl_helper.email_signup_link_data_attributes,
             lang: email_signup_link_text_locale
           } %>
@@ -50,13 +50,13 @@
            <%= sl_helper.feed_link_text %>
           <% end %>
           <%= tag.button feed_link_text, {
-            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
+            class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
             data: sl_helper.feed_link_data_attributes,
             lang: feed_link_text_locale
           } if sl_helper.feed_link_box_value %>
           <%= link_to feed_link_text, sl_helper.feed_link,
             {
-              class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+              class: "govuk-link gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
               data: sl_helper.feed_link_data_attributes,
               lang: feed_link_text_locale
             } unless sl_helper.feed_link_box_value %>

data/app/views/govuk_publishing_components/components/_translation_nav.html.erb

@@ -19,7 +19,7 @@
               hreflang: translation[:locale],
               lang: translation[:locale],
               rel: "alternate",
-              class: "gem-c-translation-nav__link #{brand_helper.color_class}",
+              class: "govuk-link gem-c-translation-nav__link #{brand_helper.color_class}",
               data: translation[:data_attributes]
             %>
           <% end %>

data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb

@@ -16,7 +16,7 @@
     data: data_attributes,
     aria: { label: "#{t("components.related_navigation.take_action_list.aria_label")} #{link_text}" },
     lang: shared_helper.t_locale("components.related_navigation.transition.title") do %>
-  <h2 class="gem-c-contextual-sidebar__brexit-heading"><%= t("components.related_navigation.transition.title") %></h2>
+  <h2 class="gem-c-contextual-sidebar__brexit-heading govuk-heading-s"><%= t("components.related_navigation.transition.title") %></h2>
   <ul class="govuk-list gem-c-contextual-sidebar__take-action-traffic-lights">
     <li>
       <%= image_tag 'govuk_publishing_components/take-action-red.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>

data/app/views/govuk_publishing_components/components/docs/accordion.yml

@@ -40,21 +40,21 @@ examples:
     data:
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_supplied_identification:
     description: |
       An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
@@ -66,29 +66,29 @@ examples:
       id: with-supplied-id-thats-unique-across-the-domain
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_summary:
     description: Adds a subheading below each section heading.
     data:
       items:
         - heading:
-            text: "Understanding agile project management"
+            text: Understanding agile project management
           summary:
-            text: "Introductions, methods, core features."
+            text: Introductions, methods, core features.
           content:
             html:
               '<ul class="govuk-list">
@@ -103,9 +103,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Working with agile methods"
+            text: Working with agile methods
           summary:
-            text: "Workspaces, tools and techniques, user stories, planning."
+            text: Workspaces, tools and techniques, user stories, planning.
           content:
             html:
               '<ul class="govuk-list">
@@ -132,9 +132,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Governing agile services"
+            text: Governing agile services
           summary:
-            text: "Principles, measuring progress, spending money."
+            text: Principles, measuring progress, spending money.
           content:
             html:
               '<ul class="govuk-list">
@@ -158,9 +158,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Phases of an agile project"
+            text: Phases of an agile project
           summary:
-            text: "Discovery, alpha, beta, live and retirement."
+            text: Discovery, alpha, beta, live and retirement.
           content:
             html:
               '<ul class="govuk-list">
@@ -190,54 +190,54 @@ examples:
 
     data:
       data_attributes:
-          gtm: 'gtm-accordion'
-          ga: 'ga-accordion'
+          gtm: gtm-accordion
+          ga: ga-accordion
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-1'
+            gtm: gtm-accordion-item-1
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-2'
+            gtm: gtm-accordion-item-2
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-3'
+            gtm: gtm-accordion-item-3
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-4'
+            gtm: gtm-accordion-item-4
   different_heading_level:
     description: This will alter the level of the heading, not the appearance of the heading.
     data:
       heading_level: 3
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_margin_bottom:
     description: |
       The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 30px.
@@ -245,35 +245,35 @@ examples:
       margin_bottom: 0
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
   with_section_open:
     description: |
       Adding `expanded: true` to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section's default.
     data:
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
           expanded: true
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_the_anchor_link_navigation:
     description: |
       Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
@@ -287,22 +287,22 @@ examples:
       anchor_navigation: true
       items:
         - heading:
-            text: "Writing well for the web"
-            id: "writing-well-for-the-web"
+            text: Writing well for the web
+            id: writing-well-for-the-web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   condensed_layout:
     description: |
       This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
@@ -310,7 +310,7 @@ examples:
       condensed: true
       items:
         - heading:
-            text: "Understanding agile project management"
+            text: Understanding agile project management
           content:
             html:
               '<ul class="govuk-list">
@@ -325,9 +325,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Working with agile methods"
+            text: Working with agile methods
           summary:
-            text: "Workspaces, tools and techniques, user stories, planning."
+            text: Workspaces, tools and techniques, user stories, planning.
           content:
             html:
               '<ul class="govuk-list">
@@ -354,7 +354,7 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Governing agile services"
+            text: Governing agile services
           content:
             html:
               '<ul class="govuk-list">
@@ -378,7 +378,7 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Phases of an agile project"
+            text: Phases of an agile project
           content:
             html:
               '<ul class="govuk-list">
@@ -397,4 +397,4 @@ examples:
                   <li>
                     <a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
                   </li>
-              </ul>'
+              </ul>'

data/config/locales/en.yml

@@ -23,6 +23,12 @@ en:
   common:
     translations: "Translations"
   components:
+    accordion:
+      show: "Show"
+      hide: "Hide"
+      show_all: "Show all sections"
+      hide_all: "Hide all sections"
+      this_section_visually_hidden: " this section"
     attachment:
       opendocument_html: "This file is in an <a href='https://www.gov.uk/guidance/using-open-document-formats-odf-in-your-organisation' target=%{target} class='govuk-link'>OpenDocument</a> format"
       request_format_text: "This file may not be suitable for users of assistive technology."
@@ -58,6 +64,9 @@ en:
       search_button: "Search GOV.UK"
       show_button: "Show search"
       hide_button: "Hide search"
+      top_level: "Top level"
+      nav_items_aria_label: "Show or hide Top Level Navigation"
+      menu: "Menu"
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:

data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb

@@ -67,6 +67,7 @@ module GovukPublishingComponents
 
       def section_css_class(css_class, section_title, link: {}, link_is_inline: false)
         css_classes = [css_class]
+        css_classes << "govuk-link"
         css_classes << "#{css_class}--#{@context}" unless @context.nil?
         css_classes << "#{css_class}--inline" if link_is_inline
 

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.9.1".freeze
+  VERSION = "24.9.2".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.9.1
+  version: 24.9.2
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-09 00:00:00.000000000 Z
+date: 2021-04-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -192,6 +192,26 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 3.0.0
+- !ruby/object:Gem::Dependency
+  name: percy-capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.2
 - !ruby/object:Gem::Dependency
   name: pry-byebug
   requirement: !ruby/object:Gem::Requirement