Upgrade to GOV.UK Frontend 6.0.0

Gemfile

@@ -45,8 +45,8 @@ gem "activeresource"
 gem "pg", "~> 1.6"
 
 # For GOV.UK branding
-gem "govuk-components"
-gem "govuk_design_system_formbuilder"
+gem "govuk-components", "~> 6"
+gem "govuk_design_system_formbuilder", "~> 6"
 
 # Our own custom markdown renderer
 gem "govuk-forms-markdown", github: "alphagov/govuk-forms-markdown", tag: "0.8.0"

Gemfile.lock

@@ -234,11 +234,11 @@ GEM
       rake (>= 13)
     googleapis-common-protos-types (1.22.0)
       google-protobuf (~> 4.26)
-    govuk-components (5.13.1)
+    govuk-components (6.0.0)
       html-attributes-utils (~> 1.0.0, >= 1.0.0)
       pagy (>= 6, < 10)
-      view_component (>= 4.0, < 4.2)
-    govuk_design_system_formbuilder (5.13.0)
+      view_component (>= 4.0, < 4.3)
+    govuk_design_system_formbuilder (6.0.0)
       actionview (>= 6.1)
       activemodel (>= 6.1)
       activesupport (>= 6.1)
@@ -699,9 +699,9 @@ GEM
     uri (1.1.1)
     uri-idna (0.3.1)
     useragent (0.16.11)
-    view_component (4.1.1)
-      actionview (>= 7.1.0, < 8.2)
-      activesupport (>= 7.1.0, < 8.2)
+    view_component (4.2.0)
+      actionview (>= 7.1.0)
+      activesupport (>= 7.1.0)
       concurrent-ruby (~> 1)
     virtus (2.0.0)
       axiom-types (~> 0.1)
@@ -756,9 +756,9 @@ DEPENDENCIES
   dfe-autocomplete!
   factory_bot_rails
   faker
-  govuk-components
+  govuk-components (~> 6)
   govuk-forms-markdown!
-  govuk_design_system_formbuilder
+  govuk_design_system_formbuilder (~> 6)
   govuk_notify_rails
   i18n-tasks (~> 1.1.2)
   json_schemer
@@ -858,9 +858,9 @@ CHECKSUMS
   google-protobuf (4.33.2-x86_64-linux-gnu) sha256=73cba041477afcac92ff383fcbdec195ea28d96b994876d1deaa944d18f91786
   google-protobuf (4.33.2-x86_64-linux-musl) sha256=97cdf4f772c5540f9274603b00f1474ed5e6e2238b1d8b1585e77f941a36bd2c
   googleapis-common-protos-types (1.22.0) sha256=f97492b77bd6da0018c860d5004f512fe7cd165554d7019a8f4df6a56fbfc4c7
-  govuk-components (5.13.1) sha256=74808d8188a7de2c5e83e5a829c5f8ac3851df27f82410a4a2444cf53c24cfe5
+  govuk-components (6.0.0) sha256=38feaed165ea2afe4c6f9f68bfcdfdb56426be133d2402912817e21830cbce81
   govuk-forms-markdown (0.8.0)
-  govuk_design_system_formbuilder (5.13.0) sha256=126ff4af70b36f06395e8f4f09d399944bcc10e9a41c2ff7d7773e81e92ca885
+  govuk_design_system_formbuilder (6.0.0) sha256=30025c64e05b71018a48b8618e6e9501efe4bf049d5e127d90e2fd48c0b60ea8
   govuk_notify_rails (3.0.0) sha256=e0e1b8b0a7c47f90963034f290fb2982652aa8051a733c25c178680d44f2d7aa
   hana (1.3.7) sha256=5425db42d651fea08859811c29d20446f16af196308162894db208cac5ce9b0d
   highline (3.1.2) sha256=67cbd34d19f6ef11a7ee1d82ffab5d36dfd5b3be861f450fc1716c7125f4bb4a
@@ -1033,7 +1033,7 @@ CHECKSUMS
   uri (1.1.1) sha256=379fa58d27ffb1387eaada68c749d1426738bd0f654d812fcc07e7568f5c57c6
   uri-idna (0.3.1) sha256=c8601a9ca545670a763f5a7c56c99d7072bc2b1f6d83df63e6f35c264b609823
   useragent (0.16.11) sha256=700e6413ad4bb954bb63547fa098dddf7b0ebe75b40cc6f93b8d54255b173844
-  view_component (4.1.1) sha256=179f63b0db1d1a8f6af635dd684456b2bcdf6b6f4da2ef276bbe0579c17b377e
+  view_component (4.2.0) sha256=f250a3397a794336354f73c229b3b7549af0b24906551b99a03492b54cb5233d
   virtus (2.0.0) sha256=8841dae4eb7fcc097320ba5ea516bf1839e5d056c61ee27138aa4bddd6e3d1c2
   vite_rails (3.0.20) sha256=582bf9aa3bc3b4d9b0a48c17862b4fa9bd17384ac597a57b7a38d2f95d96e682
   vite_ruby (3.9.3) sha256=560afb7dc01eb1fb2349c21b02e206f016ef7d59075daf00510caaf459b04a13

app/components/form_header_component/_index.scss

@@ -7,7 +7,7 @@
 }
 
 .app-header--preview-live {
-  border-bottom-color: govuk-colour("turquoise");
+  border-bottom-color: govuk-colour("teal");
 }
 
 .app-header .govuk-header__link--homepage {

app/components/form_header_component/view.rb

@@ -44,7 +44,7 @@ def environment_name
     def colour_for_environment
       case environment_name
       when "Local"
-        "pink"
+        "magenta"
       when "Development"
         "green"
       when "Staging"

app/components/language_switcher_component/_index.scss

@@ -16,7 +16,7 @@ $app-language-switcher-list-gap: 0.25em;
   @include govuk-font($size: 16);
   margin: 0;
   padding-right: $app-language-switcher-list-gap;
-  border-right: 1px solid $govuk-border-colour;
+  border-right: 1px solid govuk-functional-colour(border);
 }
 
 .app-language-switcher__list-item:last-child {

app/components/preview_component/view.rb

@@ -21,7 +21,7 @@ def phase_banner_colour
       elsif @mode.preview_archived?
         "orange"
       else
-        "turquoise"
+        "teal"
       end
     end
 

app/frontend/entrypoints/application.scss

@@ -1,6 +1,5 @@
 $govuk-assets-path: "@govuk/assets/";
 $govuk-global-styles: true;
-$govuk-new-typography-scale: true;
 
 @import "pkg:govuk-frontend";
 @import "pkg:dfe-autocomplete";

app/views/layouts/base.html.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="<%= locale %>" class="govuk-template govuk-template--rebranded">
+<html lang="<%= locale %>" class="govuk-template">
   <head>
     <meta charset="utf-8">
     <title><%= yield(:title) + " – GOV.UK" %></title>
@@ -9,14 +9,14 @@
     <%= csp_meta_tag %>
 
     <meta name="theme-color" content="#1d70b8">
-    <link rel="icon" sizes="48x48" href="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/favicon.ico" %>">
-    <link rel="icon" sizes="any" href="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/favicon.svg" %>" type="image/svg+xml">
-    <link rel="mask-icon" href="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/govuk-icon-mask.svg" %>" color="#1d70b8">
-    <link rel="apple-touch-icon" href="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/govuk-icon-180.png"%>">
+    <link rel="icon" sizes="48x48" href="<%= vite_asset_path "#{govuk_assets_path}/images/favicon.ico" %>">
+    <link rel="icon" sizes="any" href="<%= vite_asset_path "#{govuk_assets_path}/images/favicon.svg" %>" type="image/svg+xml">
+    <link rel="mask-icon" href="<%= vite_asset_path "#{govuk_assets_path}/images/govuk-icon-mask.svg" %>" color="#1d70b8">
+    <link rel="apple-touch-icon" href="<%= vite_asset_path "#{govuk_assets_path}/images/govuk-icon-180.png"%>">
     <%# This manifest file and the icons it references are currently being served from the `public` folder. %>
     <%# TODO: update the build to either generate the manifest with references to fingerprinted assets, or automatically copy the manifest and its dependencies to `public`. %>
-    <link rel="manifest" href="/rebrand/manifest.json">
-    <meta property="og:image" content="<%= vite_asset_path "#{govuk_assets_path}/rebrand/images/govuk-opengraph-image.png" %>">
+    <link rel="manifest" href="/manifest.json">
+    <meta property="og:image" content="<%= vite_asset_path "#{govuk_assets_path}/images/govuk-opengraph-image.png" %>">
 
     <%= vite_stylesheet_tag 'application.scss' %>
 

package.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "dfe-autocomplete": "github:DFE-Digital/dfe-autocomplete#1d4cc65039e11cc3ba9e7217a719b8128d0e4d53",
-    "govuk-frontend": "^5.14.0"
+    "govuk-frontend": "^6.0.0"
   },
   "standard": {
     "globals": [

spec/components/form_header_component/view_spec.rb

@@ -15,7 +15,7 @@
   it "links to the GOV.UK homepage" do
     render_inline(described_class.new(current_context:, mode:))
 
-    expect(page.find("a.govuk-header__link--homepage")[:href]).to eq "https://www.gov.uk/"
+    expect(page.find("a.govuk-header__homepage-link")[:href]).to eq "https://www.gov.uk/"
   end
 
   it "links to the form start page" do
@@ -55,7 +55,7 @@
 
       render_inline(described_class.new(current_context:, mode:))
 
-      expect(page.find(".govuk-header__link--homepage")[:href]).to eq "http://forms-admin/"
+      expect(page.find(".govuk-header__homepage-link")[:href]).to eq "http://forms-admin/"
     end
   end
 
@@ -75,7 +75,7 @@
 
       render_inline(described_class.new(current_context:, mode:))
 
-      expect(page.find(".govuk-header__link--homepage")[:href]).to eq "http://forms-admin/"
+      expect(page.find(".govuk-header__homepage-link")[:href]).to eq "http://forms-admin/"
     end
   end
 
@@ -111,7 +111,7 @@
   end
 
   [
-    { name: "Local", colour: "pink" },
+    { name: "Local", colour: "magenta" },
     { name: "Development", colour: "green" },
     { name: "User research", colour: "blue" },
     { name: "Staging", colour: "yellow" },

spec/components/preview_component/view_spec.rb

@@ -22,7 +22,7 @@
     mode = Mode.new("preview-live")
     render_inline(described_class.new(mode:))
     expect(page).to have_selector(".govuk-phase-banner")
-    expect(page).to have_selector(".govuk-tag--turquoise", text: I18n.t("mode.phase_banner_tag_preview-live"))
+    expect(page).to have_selector(".govuk-tag--teal", text: I18n.t("mode.phase_banner_tag_preview-live"))
     expect(page).to have_content(I18n.t("mode.phase_banner_text_preview-live"))
   end