govuk_publishing_components 24.9.1 → 24.10.1

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

@@ -22,10 +22,10 @@
     class="gem-c-step-nav js-hidden <% unless small %>gem-c-step-nav--large<% end %>"
     <%= "data-remember" if remember_last_step %>
     <%= "data-id=#{tracking_id}" if tracking_id %>
-    data-show-text="<%= t("govuk_component.step_by_step_nav.show", default: "show") %>"
-    data-hide-text="<%= t("govuk_component.step_by_step_nav.hide", default: "hide") %>"
-    data-show-all-text="<%= t("govuk_component.step_by_step_nav.show_all", default: "Show all steps") %>"
-    data-hide-all-text="<%= t("govuk_component.step_by_step_nav.hide_all", default: "Hide all steps") %>"
+    data-show-text="<%= t("components.step_by_step_nav.show", default: "show") %>"
+    data-hide-text="<%= t("components.step_by_step_nav.hide", default: "hide") %>"
+    data-show-all-text="<%= t("components.step_by_step_nav.show_all", default: "Show all steps") %>"
+    data-hide-all-text="<%= t("components.step_by_step_nav.hide_all", default: "Hide all steps") %>"
   >
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>

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

@@ -1,17 +1,17 @@
 <%
   links ||= []
-  pretitle ||= t("govuk_component.step_by_step_nav_related.part_of", default: "Part of")
+  pretitle ||= t("components.step_by_step_nav_related.part_of", default: "Part of")
   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

@@ -23,7 +23,7 @@
 <% if sl_helper.component_data_is_valid? %>
   <%= tag.section class: css_classes, data: data do %>
     <% unless hide_heading %>
-      <h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("govuk_component.subscription_links.subscriptions", default: "Subscriptions") %></h2>
+      <h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("components.subscription_links.subscriptions", default: "Subscriptions") %></h2>
     <% end %>
     <ul
       class="gem-c-subscription-links__list<%= ' gem-c-subscription-links__list--small' if local_assigns[:small_form] == true %>"
@@ -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/_success_alert.html.erb

@@ -13,7 +13,7 @@
     module: "initial-focus",
   } do %>
   <div class="govuk-notification-banner__header">
-    <%= tag.h2 t("govuk_component.success_alert.success", default: "Success"), class: "govuk-notification-banner__title", id: title_id %>
+    <%= tag.h2 t("components.success_alert.success", default: "Success"), class: "govuk-notification-banner__title", id: title_id %>
   </div>
   <div class="govuk-notification-banner__content">
     <% if description.present? %>

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 %>

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>'