govuk_publishing_components 24.9.0 → 24.10.0

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/_step-by-step-nav.scss

@@ -15,12 +15,12 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 @mixin step-nav-line-position {
   left: 0;
-  margin-left: em(($number-circle-size / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(($number-circle-size / 2) - ($stroke-width / 2), 16);
 }
 
 @mixin step-nav-line-position-large {
   left: 0;
-  margin-left: em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
+  margin-left: govuk-em(($number-circle-size-large / 2) - ($stroke-width / 2), 16);
 }
 
 // custom mixin as govuk-font does undesirable things at different breakpoints
@@ -136,10 +136,10 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__chevron {
   display: inline-block;
   vertical-align: middle;
-  margin-left: em(5, 14);
+  margin-left: govuk-em(5, 14);
 
   .gem-c-step-nav--large & {
-    margin-left: em(5, 16);
+    margin-left: govuk-em(5, 16);
   }
 
   svg {
@@ -150,18 +150,18 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__button-text {
   display: inline-block;
   text-align: left;
-  min-width: em(35, 14);
+  min-width: govuk-em(35, 14);
 
   .gem-c-step-nav--large & {
-    min-width: em(40, 16);
+    min-width: govuk-em(40, 16);
   }
 }
 
 .gem-c-step-nav__button-text--all {
-  min-width: em(87, 14);
+  min-width: govuk-em(87, 14);
 
   .gem-c-step-nav--large & {
-    min-width: em(100, 16);
+    min-width: govuk-em(100, 16);
   }
 }
 
@@ -172,23 +172,23 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 
 .gem-c-step-nav__step {
   position: relative;
-  padding-left: em(govuk-spacing(6) + govuk-spacing(3), 16);
+  padding-left: govuk-em(govuk-spacing(6) + govuk-spacing(3), 16);
   list-style: none;
 
   // line down the side of a step
   &:after {
     @include step-nav-vertical-line;
     @include step-nav-line-position;
-    top: em(govuk-spacing(3), 16);
+    top: govuk-em(govuk-spacing(3), 16);
   }
 
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
-      padding-left: em(govuk-spacing(9), 16);
+      padding-left: govuk-em(govuk-spacing(9), 16);
 
       &:after { // stylelint-disable-line max-nesting-depth
         @include step-nav-line-position-large;
-        top: em(govuk-spacing(6), 16);
+        top: govuk-em(govuk-spacing(6), 16);
       }
     }
   }
@@ -246,8 +246,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   z-index: 5;
   top: 3px;
   left: 0;
-  width: em($number-circle-size, 16);
-  height: em($number-circle-size, 16);
+  width: govuk-em($number-circle-size, 16);
+  height: govuk-em($number-circle-size, 16);
   color: govuk-colour("black");
   background: govuk-colour("white");
   border-radius: 100px;
@@ -256,8 +256,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
   .gem-c-step-nav--large & {
     @include govuk-media-query($from: tablet) {
       top: 11px;
-      width: em($number-circle-size-large, 19);
-      height: em($number-circle-size-large, 19);
+      width: govuk-em($number-circle-size-large, 19);
+      height: govuk-em($number-circle-size-large, 19);
     }
   }
 }
@@ -283,15 +283,15 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
 .gem-c-step-nav__circle--logic {
   @include step-nav-font(19, $weight: bold, $line-height: 28px);
   left: 3px;
-  width: em($number-circle-size, 19);
-  height: em($number-circle-size, 19);
+  width: govuk-em($number-circle-size, 19);
+  height: govuk-em($number-circle-size, 19);
 
   .gem-c-step-nav--large & {
     @include step-nav-font(19, $tablet-size: 24, $weight: bold, $line-height: 28px, $tablet-line-height: 34px);
 
     @include govuk-media-query($from: tablet) {
-      width: em($number-circle-size-large, 24);
-      height: em($number-circle-size-large, 24);
+      width: govuk-em($number-circle-size-large, 24);
+      height: govuk-em($number-circle-size-large, 24);
     }
   }
 }

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/components/helpers/_px-to-em.scss

@@ -1,5 +1,7 @@
 // Convert pixels to em
 @function em($value, $gem-context-font-size) {
+  @warn "This function is deprecated and will be removed in the next major version release - use GOV.UK Frontend's `govuk-em()` instead.";
+
   @if (unitless($value)) {
     $value: $value * 1px;
   }

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/_notice.html.erb

@@ -10,7 +10,7 @@
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  css_classes = %w(gem-c-notice)
+  css_classes = %w[gem-c-notice]
   css_classes << (shared_helper.get_margin_bottom)
 
   aria_attributes = aria_live ? {label: 'Notice', live: 'polite'} : {label: 'Notice'}

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/_show_password.html.erb

@@ -9,6 +9,7 @@
   hint ||= nil
   error_message ||= nil
   error_items ||= nil
+  data ||= nil
 
   if !label
     raise ArgumentError, "This component requires a label"
@@ -37,6 +38,7 @@
         error_items: error_items,
         type: "password",
         autocomplete: autocomplete,
+        data: data,
       } %>
   <% end %>
 <% end %>

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

@@ -11,31 +11,13 @@
   "track-dimension-index": "29",
 } %>
 
-<%= link_to link_path,
-    class: "govuk-link gem-c-contextual-sidebar__brexit-cta",
-    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>
-  <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: "" %>
-      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
-        <%= t("components.related_navigation.take_action_list.red") %>
-      </span>
-    </li>
-    <li>
-      <%= image_tag 'govuk_publishing_components/take-action-amber.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
-      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
-        <%= t("components.related_navigation.take_action_list.amber") %>
-      </span>
-    </li>
-    <li>
-      <%= image_tag 'govuk_publishing_components/take-action-green.svg', class: "gem-c-contextual-sidebar__take-action-traffic-lists-icon", alt: "" %>
-      <span class="gem-c-contextual-sidebar__take-action-traffic-lists-text">
-        <%= t("components.related_navigation.take_action_list.green") %>
-      </span>
-    </li>
-  </ul>
-  <p class="gem-c-contextual-sidebar__brexit-text"><%= link_text %></p>
+<%= tag.div class: "gem-c-contextual-sidebar__brexit-cta" do %>
+  <%= tag.h2 t("components.related_navigation.transition.title"), class: "gem-c-contextual-sidebar__brexit-heading govuk-heading-s" %>
+  <%= tag.p class: "gem-c-contextual-sidebar__brexit-text govuk-body" do %>
+    <%= link_to link_text,
+      link_path,
+      class: "govuk-link",
+      data: data_attributes,
+      lang: shared_helper.t_locale("components.related_navigation.transition.title") %>
+  <% end %>
 <% end %>