Merge pull request #4160 from alphagov/govuk-frontend-upgrade-aug-2024

Upgrade to govuk-frontend v5.5.0

Author: AshGDS

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* **BREAKING:** Upgrade to govuk-frontend v5.5.0 ([PR #4115](https://github.com/alphagov/govuk_publishing_components/pull/4160))
+
 ## 42.1.0
 
 * Ensure that organisation logos always print ([PR #4162](https://github.com/alphagov/govuk_publishing_components/pull/4162))

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -5,7 +5,7 @@
 @import "govuk_publishing_components/component_support";
 
 // Include all govuk frontend components
-@import "govuk/components/all";
+@import "govuk/components/index";
 
 // components
 @import "components/accordion";

app/assets/stylesheets/govuk_publishing_components/component_support.scss

@@ -1,10 +1,10 @@
 // This file should be included in an application prior to specific components
 // It provides supporting gem component helpers and mixins
 // and everything else from govuk-frontend not included in govuk_frontend_support
-@import "govuk/core/all";
-@import "govuk/objects/all";
-@import "govuk/utilities/all";
-@import "govuk/overrides/all";
+@import "govuk/core/index";
+@import "govuk/objects/index";
+@import "govuk/utilities/index";
+@import "govuk/overrides/index";
 
 @import "govuk_publishing_components/components/helpers/brand-colours";
 @import "govuk_publishing_components/components/helpers/link";

app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -41,7 +41,7 @@
     }
 
     .govuk-breadcrumbs__list-item::before {
-      top: 18px;
+      top: 20px;
     }
 
     .govuk-breadcrumbs__link::after {

app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss

@@ -69,7 +69,8 @@
     table.financial-data {
       .numeric {
         text-align: right;
-        @include govuk-font(16, $weight: regular, $tabular: true);
+        @include govuk-font-tabular-numbers;
+        @include govuk-font(16, $weight: regular);
       }
 
       // make all elements inside thead look the same
@@ -82,10 +83,11 @@
 
       thead th,
       thead td {
-        @include govuk-font(16, $weight: bold, $tabular: true);
+        @include govuk-font-tabular-numbers;
+        @include govuk-font(16, $weight: bold);
 
         &.numeric {
-          @include govuk-font(16, $weight: bold, $tabular: true);
+          @include govuk-font(16, $weight: bold);
         }
       }
 

app/assets/stylesheets/govuk_publishing_components/components/_layout-for-admin.scss

@@ -1 +1 @@
-// uses govuk/all
+// uses govuk/index

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

@@ -73,8 +73,8 @@ $large-input-size: 50px;
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   margin: 0;
   width: 100%;
-  height: govuk-em(40, 16);
-  padding: govuk-em(6, 16);
+  height: govuk-em(40, 19);
+  padding: govuk-em(6, 19);
   border: $govuk-border-width-form-element solid $govuk-input-border-colour;
   background: govuk-colour("white");
   border-radius: 0; // otherwise iphones apply an automatic border radius
@@ -84,11 +84,6 @@ $large-input-size: 50px;
   appearance: none;
   @include govuk-font($size: 19, $line-height: calc(28 / 19));
 
-  @include govuk-media-query($from: tablet) {
-    height: govuk-em(40, 19);
-    padding: govuk-em(6, 19);
-  }
-
   // the .focus class is added by JS and ensures that the input remains above the label once clicked/filled in
   &:focus,
   &.focus {

app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss

@@ -20,7 +20,7 @@
       // element as required by the heading component, adds 2KB to the CSS
       &.brand__border-color,
       .brand__border-color {
-        border-color: govuk-organisation-colour($organisation, $websafe: false);
+        border-color: govuk-organisation-colour($organisation, $contrast-safe: false);
       }
     }
   }
@@ -49,7 +49,7 @@
 
   &.brand__border-color,
   .brand__border-color {
-    border-color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons", $websafe: false);
+    border-color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons", $contrast-safe: false);
   }
 }
 // colours for the prime ministers office are not included in the toolkit
@@ -120,3 +120,25 @@
     border-color: #00625e;
   }
 }
+
+.brand--department-for-business-and-trade {
+  .brand__color {
+    color: #cf102d;
+
+    &:link,
+    &:visited,
+    &:active {
+      color: #cf102d;
+    }
+
+    &:hover,
+    &:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+
+  &.brand__border-color,
+  .brand__border-color {
+    border-color: #cf102d;
+  }
+}

app/assets/stylesheets/govuk_publishing_components/components/helpers/_govuk-frontend-settings.scss

@@ -13,3 +13,5 @@
 
 $govuk-image-url-function: "app-image-url";
 $govuk-font-url-function: "app-font-url";
+$govuk-new-typography-scale: true;
+$govuk-new-organisation-colours: true;

app/views/govuk_publishing_components/components/_breadcrumbs.html.erb

@@ -15,14 +15,15 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class(classes.join(" "))
+  component_helper.add_aria_attribute({ label: "Breadcrumb" })
   component_helper.add_data_attribute({ module: "ga4-link-tracker" })
 %>
 
 <script type="application/ld+json">
   <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
 </script>
 
-<%= tag.div(**component_helper.all_attributes) do %>
+<%= tag.nav(**component_helper.all_attributes) do %>
   <ol class="govuk-breadcrumbs__list">
     <% breadcrumbs.each_with_index do |crumb, index| %>
       <% breadcrumb = GovukPublishingComponents::Presenters::Breadcrumb.new(crumb, index) %>