govuk_publishing_components 24.9.3 → 24.10.3

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.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 {
   .call-to-action {
     margin: 2em 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.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 {
   // DEFAULT CHART STYLES
 

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

@@ -7,6 +7,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 {
   // .address is used by the `$A` markdown pattern
   .address,

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_example.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 {
   .example {
     border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3");

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_footnotes.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 {
   .footnotes {
     border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_form-download.scss

@@ -1,21 +1,24 @@
-.gem-c-govspeak .form-download {
-  padding: .25em 0;
+.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 {
+  .form-download {
+    padding: .25em 0;
 
-  @include govuk-media-query($until: tablet) {
-    margin: 1em 0 1.5em;
-  }
+    @include govuk-media-query($until: tablet) {
+      margin: 1em 0 1.5em;
+    }
 
-  p {
-    padding-right: 3em;
-  }
+    p {
+      padding-right: 3em;
+    }
 
-  a {
-    display: block;
-    font-weight: 600;
-    background-image: image-url("govuk_publishing_components/icon-file-download.svg");
-    background-repeat: no-repeat;
-    background-size: 40px 40px;
-    min-height: 2.5em;
-    padding: 0 0 0 50px;
+    a {
+      display: block;
+      font-weight: 600;
+      background-image: image-url("govuk_publishing_components/icon-file-download.svg");
+      background-repeat: no-repeat;
+      background-size: 40px 40px;
+      min-height: 2.5em;
+      padding: 0 0 0 50px;
+    }
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_fraction.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 {
   .fraction {
     sup,

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -3,41 +3,44 @@
 $highlight-answer-bg-color: govuk-colour("green");
 $highlight-answer-color: govuk-colour("white");
 
-.gem-c-govspeak .highlight-answer {
-  background-color: $highlight-answer-bg-color;
-  color: $highlight-answer-color;
-  text-align: center;
-  padding: 1.75em .75em 1.25em;
-  margin: 0 -1em 1em;
-
-  p {
-    @include govuk-font($size: 24, $weight: bold);
+.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 {
+  .highlight-answer {
+    background-color: $highlight-answer-bg-color;
     color: $highlight-answer-color;
+    text-align: center;
+    padding: 1.75em .75em 1.25em;
+    margin: 0 -1em 1em;
 
-    em {
-      @include govuk-font($size: 80, $weight: bold);
-      display: block;
-      padding-top: .1em;
+    p {
+      @include govuk-font($size: 24, $weight: bold);
       color: $highlight-answer-color;
-    }
-  }
 
-  p:last-child {
-    margin-bottom: 0;
-  }
+      em {
+        @include govuk-font($size: 80, $weight: bold);
+        display: block;
+        padding-top: .1em;
+        color: $highlight-answer-color;
+      }
+    }
 
-  @include govuk-media-query($until: tablet) {
-    margin: 0 0 1em;
-    @include govuk-font($size: 48);
+    p:last-child {
+      margin-bottom: 0;
+    }
 
-    p {
-      font-size: 1em;
-      line-height: inherit;
+    @include govuk-media-query($until: tablet) {
+      margin: 0 0 1em;
+      @include govuk-font($size: 48);
 
-      em {
+      p {
         font-size: 1em;
-        padding-top: 0;
-        display: inline;
+        line-height: inherit;
+
+        em {
+          font-size: 1em;
+          padding-top: 0;
+          display: inline;
+        }
       }
     }
   }

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

@@ -4,6 +4,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 {
   img {
     width: auto;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_information-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 {
   .info-notice {
     border-left: 10px solid govuk-colour("mid-grey", $legacy: "grey-3");

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_legislative-list.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 {
   .legislative-list {
     list-style: none;

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

@@ -1,29 +1,34 @@
-.gem-c-govspeak .place {
-  margin: 1.5em 0;
-  border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
-  padding-bottom: 1.5em;
+// 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 {
+  .place {
+    margin: 1.5em 0;
+    border-bottom: solid 1px govuk-colour("mid-grey", $legacy: "grey-2");
+    padding-bottom: 1.5em;
 
-  .address {
-    margin: 0;
-    padding: 0;
-    width: auto;
-    display: block;
-  }
+    .address {
+      margin: 0;
+      padding: 0;
+      width: auto;
+      display: block;
+    }
 
-  .url {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+    .url {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-  .additional-information {
-    @include govuk-font($size: 16);
+    .additional-information {
+      @include govuk-font($size: 16);
 
-    p {
-      margin: .25em 0;
+      p {
+        margin: .25em 0;
+      }
     }
-  }
 
-  @include govuk-media-query($until: tablet) {
-    margin: .75em 0;
+    @include govuk-media-query($until: tablet) {
+      margin: .75em 0;
+    }
   }
 }
+// stylelint-enable max-nesting-depth

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