govuk_publishing_components 24.10.0 → 24.11.1

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_stat-headline.scss

@@ -5,6 +5,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .stat-headline {
     margin-bottom: govuk-spacing(3);

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

@@ -1,21 +1,24 @@
-.gem-c-govspeak .steps {
-  padding-left: 0;
-  margin-left: 0;
-  overflow: hidden;
-
-  > li {
-    background-position: 0 .87em;
-    background-repeat: no-repeat;
-    list-style-type: decimal;
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
+.gem-c-govspeak {
+  .steps {
+    padding-left: 0;
     margin-left: 0;
-    padding: .75em 0 .75em 2.5em;
+    overflow: hidden;
+
+    > li {
+      background-position: 0 .87em;
+      background-repeat: no-repeat;
+      list-style-type: decimal;
+      margin-left: 0;
+      padding: .75em 0 .75em 2.5em;
 
-    @for $i from 1 through 30 {
-      &:nth-child(#{$i}) {
-        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
-        background-repeat: no-repeat;
-        background-position: .2em .7em;
-        background-size: 1.4em 1.4em;
+      @for $i from 1 through 30 {
+        &:nth-child(#{$i}) {
+          background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
+          background-repeat: no-repeat;
+          background-position: .2em .7em;
+          background-size: 1.4em 1.4em;
+        }
       }
     }
   }

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

@@ -1,24 +1,27 @@
-.gem-c-govspeak .summary {
-  margin: 0 0 2em;
-  padding: 0;
-  color: $govuk-text-colour;
-
-  p {
-    @include govuk-font($size: 19);
-  }
-
-  @include govuk-media-query($until: tablet) {
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
+.gem-c-govspeak {
+  .summary {
     margin: 0 0 2em;
     padding: 0;
-  }
+    color: $govuk-text-colour;
 
-  p,
-  h2 {
-    border: 0;
-    margin: 0 .75em 0 0;
-  }
+    p {
+      @include govuk-font($size: 19);
+    }
+
+    @include govuk-media-query($until: tablet) {
+      margin: 0 0 2em;
+      padding: 0;
+    }
+
+    p,
+    h2 {
+      border: 0;
+      margin: 0 .75em 0 0;
+    }
 
-  h2 {
-    line-height: 1.35em;
+    h2 {
+      line-height: 1.35em;
+    }
   }
 }

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

@@ -5,6 +5,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   table {
     border-collapse: collapse;

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

@@ -11,6 +11,7 @@
 
 // stylelint-disable max-nesting-depth
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   @include markdown-typography;
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -6,6 +6,7 @@
 // - alphagov/whitehall: ✔︎
 // - alphagov/govspeak: ✔︎
 
+.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .help-notice {
     $icon-size: 34px;

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

@@ -32,7 +32,7 @@
     )
   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",

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/_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("govuk_component.government_navigation.departments", default: "Departments") %>
+        <%= t("components.government_navigation.departments", default: "Departments") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'worldwide' %>" href="/government/world">
-        <%= t("govuk_component.government_navigation.worldwide", default: "Worldwide") %>
+        <%= t("components.government_navigation.worldwide", default: "Worldwide") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'how-government-works' %>" href="/government/how-government-works">
-        <%= t("govuk_component.government_navigation.how-government-works", default: "How government works") %>
+        <%= t("components.government_navigation.how-government-works", default: "How government works") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'get-involved' %>" href="/government/get-involved">
-        <%= t("govuk_component.government_navigation.get-involved", default: "Get involved") %>
+        <%= t("components.government_navigation.get-involved", default: "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("govuk_component.government_navigation.consultations", default: "Consultations") %>
+        <%= t("components.government_navigation.consultations", default: "Consultations") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'statistics' %>" href="/search/research-and-statistics">
-        <%= t("govuk_component.government_navigation.statistics", default: "Statistics") %>
+        <%= t("components.government_navigation.statistics", default: "Statistics") %>
       </a>
     </li>
     <li>
       <a class="<%= 'active' if active == 'announcements' %>" href="/news-and-communications">
-        <%= t("govuk_component.government_navigation.news_and_communications", default: "News and communications") %>
+        <%= t("components.government_navigation.news_and_communications", default: "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]
                         %>
@@ -58,7 +60,7 @@
       <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">
+          <ul class="govuk-footer__inline-list govuk-!-display-none-print">
             <% meta[:items].each do |item| %>
               <li class="govuk-footer__inline-list-item">
                 <%

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

@@ -1,7 +1,7 @@
 <%
   environment ||= nil
   full_width ||= false
-  navigation_aria_label ||= "Top level"
+  navigation_aria_label ||= t("components.layout_header.top_level")
   navigation_items ||= []
   product_name ||= nil
   remove_bottom_border ||= false

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

@@ -17,7 +17,7 @@
 <meta property="og:site_name" content="GOV.UK" />
 <meta property="og:type" content="article" />
 <meta property="og:url" content="<%= page.canonical_url %>" />
-<meta property="og:title" content="<%= page.title %>" />
+<meta property="og:title" content="<% if page.withdrawn? %>[Withdrawn] <% end %><%= page.title %>" />
 <meta property="og:description" content="<%= strip_tags(page.description) %>" />
 
 <% if page.has_image? %>

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

@@ -18,34 +18,35 @@
 <%= content_tag :div, class: classes, data: { module: "gem-toggle" } do %>
   <dl data-module="gem-track-click">
     <% if from.any? %>
-      <dt class="gem-c-metadata__term"><%= t("govuk_component.metadata.from", default: "From") %>:</dt>
+      <dt class="gem-c-metadata__term"><%= t("components.metadata.from", default: "From") %>:</dt>
       <dd class="gem-c-metadata__definition">
         <%= render 'govuk_publishing_components/components/metadata/sentence', items: from, toggle_id: "from-#{SecureRandom.hex(4)}" %>
       </dd>
     <% end %>
     <% if part_of.any? %>
-      <dt class="gem-c-metadata__term"><%= t("govuk_component.metadata.part_of", default: "Part of") %>:</dt>
+      <dt class="gem-c-metadata__term"><%= t("components.metadata.part_of", default: "Part of") %>:</dt>
       <dd class="gem-c-metadata__definition">
         <%= render 'govuk_publishing_components/components/metadata/sentence', items: part_of, toggle_id: "part-of-#{SecureRandom.hex(4)}" %>
       </dd>
     <% end %>
     <% if local_assigns.include?(:history) %>
-      <dt class="gem-c-metadata__term"><%= t("govuk_component.metadata.history", default: "History") %>:</dt>
+      <dt class="gem-c-metadata__term"><%= t("components.metadata.history", default: "History") %>:</dt>
       <dd class="gem-c-metadata__definition"><%= history %></dd>
     <% end %>
     <% if local_assigns.include?(:first_published) && first_published %>
-      <dt class="gem-c-metadata__term"><%= t("govuk_component.metadata.published", default: "Published") %>:</dt>
+      <dt class="gem-c-metadata__term"><%= t("components.metadata.published", default: "Published") %></dt>
       <dd class="gem-c-metadata__definition"><%= first_published %></dd>
     <% end %>
     <% if local_assigns.include?(:last_updated) && last_updated %>
-      <dt class="gem-c-metadata__term"><%= t("govuk_component.metadata.last_updated", default: "Last updated") %>:</dt>
+      <dt class="gem-c-metadata__term"><%= t("components.metadata.last_updated", default: "Last updated") %></dt>
       <dd class="gem-c-metadata__definition">
-        <%= last_updated %><% if local_assigns.include?(:see_updates_link) %>,
-          <a href="#history" class="gem-c-metadata__definition-link"
+        <%= last_updated %>
+        <% if local_assigns.include?(:see_updates_link) %>
+          &#8212; <a href="#history" class="gem-c-metadata__definition-link govuk-!-display-none-print"
                              data-track-category="content-history"
                              data-track-action="see-all-updates-link-clicked"
                              data-track-label="history">
-            <%= t("govuk_component.metadata.see_all_updates", default: "see all updates") %>
+            <%= t("components.metadata.see_all_updates", default: "see all updates") %>
           </a>
         <% end %>
       </dd>

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

@@ -4,10 +4,6 @@ phase ||= nil
 message ||= nil
 inverse ||= false
 
-unless phase.in?(%w[alpha beta])
-  raise ArgumentError, "The phase banner component expects a `phase` (`beta` or `alpha`), #{phase.inspect} given"
-end
-
 unless message.present?
   if phase == "beta"
     message = raw("This part of GOV.UK is being rebuilt &ndash; <a class=\"govuk-link\" href=\"/help/beta\">find out what beta means</a>")
@@ -23,7 +19,7 @@ container_css_classes << "gem-c-phase-banner--inverse" if inverse
 <%= tag.div class: container_css_classes do %>
   <%= tag.p class: "govuk-phase-banner__content" do %>
     <%= tag.strong app_name, class: "govuk-phase-banner__content__app-name" if app_name %>
-    <%= tag.strong phase, class: "govuk-tag govuk-phase-banner__content__tag" %>
+    <%= tag.strong phase, class: "govuk-tag govuk-phase-banner__content__tag" if phase %>
     <%= tag.span message, class: "govuk-phase-banner__text" if message %>
   <% end %>
 <% end %>

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

@@ -2,7 +2,7 @@
 <nav
   class="gem-c-pagination"
   role="navigation"
-  aria-label="<%= t("govuk_component.previous_and_next_navigation.pagination", default: "Pagination") %>"
+  aria-label="<%= t("components.previous_and_next_navigation.pagination", default: "Pagination") %>"
 >
   <ul class="gem-c-pagination__list" data-module="gem-track-click">
     <% if local_assigns.include?(:previous_page) %>

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

@@ -13,7 +13,7 @@
     margin_bottom: margin_bottom
   })
 
-  wrapper_classes = %w(gem-c-print-link)
+  wrapper_classes = %w(gem-c-print-link govuk-!-display-none-print)
   wrapper_classes << "gem-c-print-link--show-without-js" unless require_js
   wrapper_classes << (shared_helper.get_margin_top)
   wrapper_classes << (shared_helper.get_margin_bottom)