govuk_publishing_components 24.10.1 → 24.12.0

data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js

@@ -98,7 +98,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       event = new window.CustomEvent(eventName, params)
     } else {
       event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable, null)
     }
 
     element.dispatchEvent(event)

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -74,7 +74,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.addShowHideAllButton = function () {
     var showall = document.createElement('div')
-    showall.className = 'gem-c-step-nav__controls'
+    showall.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
     showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
       '<span class="gem-c-step-nav__button-text gem-c-step-nav__button-text--all js-step-controls-button-text">' + this.$module.actions.showAllText + '</span>' +
       '<span class="gem-c-step-nav__chevron js-step-controls-button-icon">' + this.$module.downChevronSvg + '</span>' +
@@ -98,7 +98,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var commaSpan = document.createElement('span')
         var thisSectionSpan = document.createElement('span')
 
-        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link'
+        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link govuk-!-display-none-print'
         showHideSpanText.className = 'gem-c-step-nav__button-text js-toggle-link-text'
         showHideSpanIcon.className = 'gem-c-step-nav__chevron js-toggle-link-icon'
         commaSpan.className = 'govuk-visually-hidden'

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -0,0 +1,18 @@
+(function (root) {
+  'use strict'
+  window.GOVUK = window.GOVUK || {}
+
+  window.GOVUK.triggerEvent = function (element, eventName) {
+    var params = { bubbles: true, cancelable: true }
+    var event
+
+    if (typeof window.CustomEvent === 'function') {
+      event = new window.CustomEvent(eventName, params)
+    } else {
+      event = document.createEvent('CustomEvent')
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable, null)
+    }
+
+    element.dispatchEvent(event)
+  }
+}(window))

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

@@ -4,22 +4,11 @@
 @import "govuk_frontend_support";
 
 @import "components/print/accordion";
-@import "components/print/attachment";
-@import "components/print/back-link";
 @import "components/print/button";
 @import "components/print/contents-list";
-@import "components/print/feedback";
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
-@import "components/print/layout-header";
-@import "components/print/layout-footer";
-@import "components/print/metadata";
-@import "components/print/search";
-@import "components/print/share-links";
-@import "components/print/skip-link";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
-@import "components/print/subscription-links";
 @import "components/print/textarea";
 @import "components/print/title";
-@import "components/print/translation-nav";

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

@@ -7,6 +7,11 @@
   a {
     @include govuk-link-common;
     @include govuk-link-style-default;
+    font-weight: bold;
+  }
+
+  .gem-c-metadata__definition-link {
+    font-weight: normal;
   }
 }
 
@@ -29,17 +34,19 @@
   }
 }
 
+.gem-c-metadata__term,
+.gem-c-metadata__definition {
+  line-height: 1.4;
+}
+
 .gem-c-metadata__term {
   margin-top: .5em;
-  line-height: 1.4;
 
   @include govuk-media-query($from: tablet) {
     box-sizing: border-box;
     float: left;
     clear: left;
-    width: 30%;
-    max-width: 11em;
-    padding-right: govuk-spacing(2);
+    padding-right: govuk-spacing(1);
     margin-top: 0;
   }
 }
@@ -49,31 +56,21 @@
   clear: right;
 
   @include govuk-media-query($from: tablet) {
-    padding-left: govuk-spacing(2);
+    padding-left: govuk-spacing(1);
     padding-right: 0;
   }
 }
 
 .gem-c-metadata__definition {
   margin: 0;
-  line-height: 1.4;
 
   @include govuk-media-query($from: tablet) {
-    float: left;
-    width: 70%;
+    &:not(:last-of-type) {
+      margin-bottom: govuk-spacing(1);
+    }
   }
 }
 
-.gem-c-metadata__definition-link {
-  text-decoration: none;
-}
-
-.gem-c-metadata__definition-link:focus,
-.gem-c-metadata__definition-link:active,
-.gem-c-metadata__definition-link:hover {
-  text-decoration: underline;
-}
-
 .gem-c-metadata.direction-rtl .gem-c-metadata__definition {
   float: right;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/print/_attachment.scss

@@ -1,3 +1,2 @@
-.gem-c-attachment__thumbnail-image {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/government-frontend/blob/7a0b068a0faa1da07f58acf0b1d3a0aa3e1daf56/app/assets/stylesheets/print.scss#L2

data/app/assets/stylesheets/govuk_publishing_components/components/print/_back-link.scss

@@ -1,3 +1,2 @@
-.gem-c-back-link {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/govuk-account-manager-prototype/blob/7858b55afcddc2f855d909abd051838d95f21f13/app/assets/stylesheets/print.scss#L2

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

@@ -6,7 +6,3 @@
   color: $govuk-text-colour;
   text-decoration: none;
 }
-
-.govuk-button__start-icon {
-  display: none;
-}

data/app/assets/stylesheets/govuk_publishing_components/components/print/_feedback.scss

@@ -1,3 +1,2 @@
-.gem-c-feedback {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/government-frontend/blob/7a0b068a0faa1da07f58acf0b1d3a0aa3e1daf56/app/assets/stylesheets/print.scss#L6

data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-footer.scss

@@ -1,6 +1,2 @@
-.gem-c-layout-footer {
-  .govuk-footer__inline-list,
-  .govuk-footer__section {
-    display: none;
-  }
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/govuk-account-manager-prototype/blob/7858b55afcddc2f855d909abd051838d95f21f13/app/assets/stylesheets/print.scss#L5

data/app/assets/stylesheets/govuk_publishing_components/components/print/_layout-header.scss

@@ -1,3 +1,2 @@
-.gem-c-header__menu-button {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/govuk-account-manager-prototype/blob/7858b55afcddc2f855d909abd051838d95f21f13/app/assets/stylesheets/print.scss#L6

data/app/assets/stylesheets/govuk_publishing_components/components/print/_metadata.scss

@@ -1,6 +1,2 @@
-.gem-c-metadata {
-  .gem-c-metadata__definition-link,
-  .gem-c-metadata__toggle-wrap {
-    display: none;
-  }
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/manuals-frontend/blob/466b4c7a6507a3d76818e26612f174616f5cdf94/app/assets/stylesheets/print.scss#L15

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

@@ -1,3 +1,2 @@
-.gem-c-search {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/govuk-account-manager-prototype/blob/7858b55afcddc2f855d909abd051838d95f21f13/app/assets/stylesheets/print.scss#L7

data/app/assets/stylesheets/govuk_publishing_components/components/print/_share-links.scss

@@ -1,3 +1,2 @@
-.gem-c-share-links {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/collections/blob/fc9db4ef6d87ad52d0ac795d1dd05d5fa116dde1/app/assets/stylesheets/print.scss#L9

data/app/assets/stylesheets/govuk_publishing_components/components/print/_skip-link.scss

@@ -1,3 +1,2 @@
-.gem-c-skip-link {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/govuk-account-manager-prototype/blob/7858b55afcddc2f855d909abd051838d95f21f13/app/assets/stylesheets/print.scss#L8

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

@@ -5,7 +5,3 @@
 .gem-c-step-nav-header__title {
   @include govuk-font(24, $weight: bold);
 }
-
-.gem-c-step-nav-header__skip-link {
-  display: none;
-}

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

@@ -1,3 +1,2 @@
-.gem-c-subscription-links {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/frontend/blob/34e84c7d6dc22bd4b06ce4c18a3d00b29fdcee83/app/assets/stylesheets/print.scss#L12

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

@@ -1,3 +1,2 @@
-.gem-c-translation-nav {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/government-frontend/blob/7a0b068a0faa1da07f58acf0b1d3a0aa3e1daf56/app/assets/stylesheets/print.scss#L16

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

@@ -27,12 +27,12 @@
 
   if attachment.number_of_pages
     attributes << tag.span(
-      pluralize(attachment.number_of_pages, "page"),
+      t("components.attachment.page", count: attachment.number_of_pages),
       class: "gem-c-attachment__attribute",
     )
   end
 %>
-<%= tag.section class: "gem-c-attachment" do %>
+<%= tag.section class: "gem-c-attachment govuk-!-display-none-print" do %>
   <%= tag.div class: "gem-c-attachment__thumbnail" do %>
     <%= link_to attachment.url,
                 class: "govuk-link",
@@ -59,7 +59,7 @@
     <% end %>
 
     <% if attachment.reference.present? %>
-      <%= tag.p "Ref: #{attachment.reference}", class: "gem-c-attachment__metadata gem-c-attachment__metadata--compact" %>
+      <%= tag.p t("components.attachment.reference", reference: attachment.reference), class: "gem-c-attachment__metadata gem-c-attachment__metadata--compact" %>
     <% end %>
 
     <% if attachment.unnumbered_reference.present? %>
@@ -71,7 +71,7 @@
     <% end %>
 
     <% if attachment.is_official_document && !hide_order_copy_link %>
-      <%= tag.p link_to("Order a copy", "https://www.gov.uk/guidance/how-to-buy-printed-copies-of-official-documents", class: "govuk-link govuk-link--no-visited-state", target: "_blank"),
+      <%= tag.p link_to(t("components.attachment.order_a_copy"), "https://www.gov.uk/guidance/how-to-buy-printed-copies-of-official-documents", class: "govuk-link govuk-link--no-visited-state", target: "_blank"),
         class: "gem-c-attachment__metadata" %>
     <% end %>
 

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

@@ -24,7 +24,7 @@
 
   if attachment.number_of_pages
     attributes << tag.span(
-      pluralize(attachment.number_of_pages, "page"),
+      I18n.t("components.attachment.page", count: attachment.number_of_pages),
       class: "gem-c-attachment-link__attribute",
     )
   end

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

@@ -5,6 +5,6 @@
 <%= link_to(
   text,
   href,
-  class: %w(gem-c-back-link govuk-back-link),
+  class: %w(gem-c-back-link govuk-back-link govuk-!-display-none-print),
   data: data_attributes
 ) %>

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

@@ -7,7 +7,7 @@
 
 <% start_button_text = capture do %>
   <%= button.text %>
-  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
+  <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
     <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
   </svg>
 <% end %>

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

@@ -18,7 +18,7 @@
     <%= render "govuk_publishing_components/components/textarea", { id: id, character_count: true }.merge(textarea.symbolize_keys) %>
 
     <span id="<%= id %>-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
-      You can enter up to <%= maxlength || maxwords %> <%= maxwords ? 'words' : 'characters' %>
+      <%= t("components.character_count", number: maxlength || maxwords, type: maxwords ? t("components.character_count.type.words") : t("components.character_count.type.characters")) %>
     </span>
   <% end %>
 <% end %>

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

@@ -18,7 +18,7 @@
   <% if navigation.content_tagged_to_other_step_by_steps? %>
     <%# Rendering step by step related items because there are a few but not too many of them %>
     <%= render 'govuk_publishing_components/components/step_by_step_nav_related', {
-      pretitle: "Also part of",
+      pretitle: t("components.contextual_sidebar.pretitle"),
       links: navigation.step_nav_helper.also_part_of_step_nav,
       always_display_as_list: true
     } %>

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

@@ -1,7 +1,7 @@
 <%
   id ||= 'global-cookie-message'
-  title ||= "Cookies on GOV.UK"
-  text ||= ["We use some essential cookies to make this website work.", "We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.", "We also use cookies set by other sites to help us deliver content from their services."]
+  title ||= t("components.cookie_banner.title")
+  text ||= t("components.cookie_banner.text")
   if text.kind_of?(Array)
     newtext = ""
     text.each do |t|
@@ -14,7 +14,17 @@
   text = raw(text)
 
   cookie_preferences_href ||= "/help/cookies"
-  confirmation_message ||= raw("You can <a class='govuk-link' href='#{cookie_preferences_href}' data-module='gem-track-click' data-track-category='cookieBanner' data-track-action='Cookie banner settings clicked from confirmation'>change your cookie settings</a> at any time.")
+  confirmation_message ||= raw(t("components.cookie_banner.confirmation_message",
+                                link: link_to(
+                                  t("components.cookie_banner.confirmation_message_link"),
+                                  cookie_preferences_href,
+                                  class: "govuk-link",
+                                  data: {
+                                    module: "gem-track-click",
+                                    'track-category': "cookieBanner",
+                                    'track-action': "Cookie banner settings clicked from confirmation",
+                                  },
+                                )))
   services_cookies ||= nil
   css_classes = %w(gem-c-cookie-banner govuk-clearfix)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
@@ -50,7 +60,7 @@
           <div class="govuk-button-group">
             <%= render "govuk_publishing_components/components/button", {
                 name: "cookies",
-                text: "Accept additional cookies",
+                text: t("components.cookie_banner.buttons.accept_cookies"),
                 data_attributes: {
                   module: "gem-track-click",
                   "accept-cookies": "true",
@@ -61,7 +71,7 @@
             } %>
             <%= render "govuk_publishing_components/components/button", {
                 name: "cookies",
-                text: "Reject additional cookies",
+                text: t("components.cookie_banner.buttons.reject_cookies"),
                 data_attributes: {
                   module: "gem-track-click",
                   "reject-cookies": "true",
@@ -77,7 +87,7 @@
   <div class="gem-c-cookie-banner__confirmation govuk-width-container" tabindex="-1" hidden>
     <p class="gem-c-cookie-banner__confirmation-message" role="alert"><%= confirmation_message %></p>
     <div class="govuk-button-group">
-      <button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner">Hide this message</button>
+      <button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner"><%= t("components.cookie_banner.hide") %></button>
     </div>
   </div>
 </div>

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

@@ -8,7 +8,7 @@
   path_without_pii = utf_encode(request.fullpath.gsub(email_regex, '[email]'))
 %>
 
-<div class="gem-c-feedback" data-module="feedback">
+<div class="gem-c-feedback govuk-!-display-none-print" data-module="feedback">
   <%= render "govuk_publishing_components/components/feedback/yes_no_banner" %>
   <%= render "govuk_publishing_components/components/feedback/problem_form", url_without_pii: url_without_pii %>
   <%= render "govuk_publishing_components/components/feedback/survey_signup_form", path_without_pii: path_without_pii %>

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

@@ -6,37 +6,37 @@
   <ul id="proposition-links">
     <li>
       <a class="<%= 'active' if active == 'departments' %>" href="/government/organisations">
-        <%= t("components.government_navigation.departments", default: "Departments") %>
+        <%= t("components.government_navigation.departments") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'worldwide' %>" href="/government/world">
-        <%= t("components.government_navigation.worldwide", default: "Worldwide") %>
+        <%= t("components.government_navigation.worldwide") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'how-government-works' %>" href="/government/how-government-works">
-        <%= t("components.government_navigation.how-government-works", default: "How government works") %>
+        <%= t("components.government_navigation.how-government-works") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'get-involved' %>" href="/government/get-involved">
-        <%= t("components.government_navigation.get-involved", default: "Get involved") %>
+        <%= t("components.government_navigation.get-involved") %>
       </a>
     </li>
     <li class="clear-child">
       <a class="<%= 'active' if active == 'consultations' %>" href="<%= CGI::escapeHTML('/search/policy-papers-and-consultations?content_store_document_type[]=open_consultations&content_store_document_type[]=closed_consultations') %>">
-        <%= t("components.government_navigation.consultations", default: "Consultations") %>
+        <%= t("components.government_navigation.consultations") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'statistics' %>" href="/search/research-and-statistics">
-        <%= t("components.government_navigation.statistics", default: "Statistics") %>
+        <%= t("components.government_navigation.statistics") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'announcements' %>" href="/news-and-communications">
-        <%= t("components.government_navigation.news_and_communications", default: "News and communications") %>
+        <%= t("components.government_navigation.news_and_communications") %>
       </a>
     </li>
   </ul>

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

@@ -29,7 +29,7 @@
               list_classes = %w[govuk-footer__list]
               list_classes << "govuk-footer__list--columns-#{item[:columns]}" if item[:columns] unless single_item_list
             %>
-            <div class="<%= width_class %>">
+            <div class="<%= width_class %> govuk-!-display-none-print">
               <h2 class="govuk-footer__heading govuk-heading-m"><%= item[:title] %></h2>
                 <ul class="<%= list_classes.join(' ') %>">
                   <% item[:items].each do |item| %>
@@ -38,7 +38,9 @@
                         <%
                           attributes = {
                             class: "govuk-footer__link",
-                            "data-track-category": "footerClicked"
+                            data: {
+                              "track-category": "footerClicked"
+                            }
                           }.merge(item.fetch(:attributes, {}))
                           attributes[:rel] = "noopener" if attributes[:target] == "_blank" && !attributes[:rel]
                         %>
@@ -57,8 +59,8 @@
     <div class="govuk-footer__meta">
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
         <% if meta.any? %>
-          <h2 class="govuk-visually-hidden">Support links</h2>
-          <ul class="govuk-footer__inline-list">
+          <h2 class="govuk-visually-hidden"><%= t("components.layout_footer.support_links") %></h2>
+          <ul class="govuk-footer__inline-list govuk-!-display-none-print">
             <% meta[:items].each do |item| %>
               <li class="govuk-footer__inline-list-item">
                 <%
@@ -77,16 +79,11 @@
           />
         </svg>
         <span class="govuk-footer__licence-description">
-          All content is available under the
-          <a
-            class="govuk-footer__link"
-            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
-            rel="license"
-          >Open Government Licence v3.0</a>, except where otherwise stated
+          <%= t("components.layout_footer.licence_html") %>
         </span>
       </div>
       <div class="govuk-footer__meta-item">
-        <a class="govuk-footer__link govuk-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
+        <%= t("components.layout_footer.copyright_html") %>
       </div>
     </div>
   </div>