Update GOV.UK Frontend to v6 and CCS Frontend v3

tim-s-ccs · tim-s-ccs · commit f8f3097188f7 · 2026-03-17T09:38:07.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Update GOV.UK Frontend and CCS Frontend ([PR 1335](https://github.com/Crown-Commercial-Service/pmp-idam/pull/1335))
 - Updated content that references CCS to now reference GCA ([PR 1357](https://github.com/Crown-Commercial-Service/pmp-idam/pull/1357))
+- Update GOV.UK Frontend to v6 and CCS Frontend v3 ([PR 1393](https://github.com/Crown-Commercial-Service/pmp-idam/pull/1393))
 
 ## [3.2.1] - 2026-01-05
 
diff --git a/Gemfile b/Gemfile
@@ -58,7 +58,7 @@ gem 'aws-sdk-ssm', '~> 1.211.0'
 gem 'rack-attack', '~> 6.8.0'
 
 # GOV.UK Frontend helpers
-gem 'ccs-frontend_helpers', '~> 3.5.0'
+gem 'ccs-frontend_helpers', '~> 4.0.0'
 
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -121,7 +121,7 @@ GEM
     builder (3.3.0)
     byebug (13.0.0)
       reline (>= 0.6.0)
-    ccs-frontend_helpers (3.5.0)
+    ccs-frontend_helpers (4.0.0)
       rails (>= 7.2)
     concurrent-ruby (1.3.6)
     connection_pool (3.0.2)
@@ -453,7 +453,7 @@ DEPENDENCIES
   brakeman (~> 8.0.4)
   byebug (~> 13.0.0)
   canonical-rails!
-  ccs-frontend_helpers (~> 3.5.0)
+  ccs-frontend_helpers (~> 4.0.0)
   cssbundling-rails (~> 1.4)
   csv (~> 3.3.5)
   dotenv-rails (~> 3.2.0)
diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
@@ -2,7 +2,7 @@
 @import "settings/all";
 
 // Import the ccs-frontend and govuk-frontend assets
-@import "ccs-frontend/dist/ccs/all";
+@import "ccs-frontend/dist/ccs/index";
 
 // Import the accessible autocomplete styles
 @import "accessible-autocomplete/dist/accessible-autocomplete.min";
diff --git a/app/assets/stylesheets/ccs/_ccs.scss b/app/assets/stylesheets/ccs/_ccs.scss
@@ -30,7 +30,7 @@ abbr[title] {
 
 // Notification banner
 .govuk-notification-banner--error {
-  border-color: $govuk-error-colour;
+  border-color: govuk-functional-colour(error);
 
-  background-color: $govuk-error-colour;
+  background-color: govuk-functional-colour(error);
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -37,19 +37,24 @@
   <% end -%>
 
   <div id="wrapper">
+    <%= render partial: '/layouts/cookie-banner' unless cookie_preferences_settings['settings_viewed'] || controller.action_name == 'cookie_settings' %>
+
     <%= govuk_skip_link('Skip to main content', '#main-content') %>
 
-    <%= render partial: '/layouts/cookie-banner' unless cookie_preferences_settings['settings_viewed'] || controller.action_name == 'cookie_settings' %>
-    <%= render partial: '/layouts/header' %>
-    <%= render partial: '/layouts/service-navigation' %>
+    <header class="govuk-template__header">
+      <%= render partial: '/layouts/header' %>
+      <%= render partial: '/layouts/service-navigation' %>
+    </header>
 
     <div class="govuk-width-container">
       <main id="main-content" class="govuk-main-wrapper" role="main">
         <%= yield %>
       </main>
     </div>
 
-    <%= render partial: '/layouts/footer' %>
+    <footer class="govuk-template__footer">
+      <%= render partial: '/layouts/footer' %>
+    </footer>
   </div>
 </body>
 
diff --git a/app/views/layouts/error.html.erb b/app/views/layouts/error.html.erb
@@ -37,11 +37,14 @@
   <% end -%>
 
   <div class="error-content">
+    <%= render partial: '/layouts/cookie-banner' unless cookie_preferences_settings['settings_viewed'] || controller.action_name == 'cookie_settings' %>
+
     <%= govuk_skip_link('Skip to main content', '#main-content') %>
 
-    <%= render partial: '/layouts/cookie-banner' unless cookie_preferences_settings['settings_viewed'] || controller.action_name == 'cookie_settings' %>
-    <%= render partial: '/layouts/header' %>
-    <%= render partial: '/layouts/service-navigation' %>
+    <header class="govuk-template__header">
+      <%= render partial: '/layouts/header' %>
+      <%= render partial: '/layouts/service-navigation' %>
+    </header>
 
     <div class="govuk-width-container">
       <main id="main-content" class="govuk-main-wrapper" role="main">
@@ -50,7 +53,9 @@
     </div>
   </div>
 
-  <%= render partial: '/layouts/footer' %>
+  <footer class="govuk-template__footer">
+    <%= render partial: '/layouts/footer' %>
+  </footer>
 </body>
 
 </html>
diff --git a/bin/dev b/bin/dev
@@ -1,2 +1,11 @@
-#!/usr/bin/env ruby
-exec "./bin/rails", "server", *ARGV
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "@types/node": "^25.5.0",
     "@types/rails__request.js": "^0.0.1",
     "accessible-autocomplete": "^3.0.1",
-    "ccs-frontend": "^2.5.0",
-    "govuk-frontend": "^5.14.0",
+    "ccs-frontend": "^3.1.1",
+    "govuk-frontend": "^6.1.0",
     "jquery": "^4.0.0",
     "js-cookie": "^3.0.5",
     "sass": "^1.98.0",

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ abbr[title] {`
`30`	`30`
`31`	`31`	`// Notification banner`
`32`	`32`	`.govuk-notification-banner--error {`
`33`		`- border-color: $govuk-error-colour;`
	`33`	`+ border-color: govuk-functional-colour(error);`
`34`	`34`
`35`		`- background-color: $govuk-error-colour;`
	`35`	`+ background-color: govuk-functional-colour(error);`
`36`	`36`	`}`