Upgrade govuk-frontend to 5.0

DFE-Digital · Jan 31, 2024 · 9db3057 · 9db3057
1 parent 3ac577d
commit 9db3057
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 307 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -539,6 +539,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-21
+  arm64-darwin-23
   x86_64-darwin-21
   x86_64-linux
 

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,3 +1,7 @@
 //= link_tree ../builds/images
 //= link_tree ../builds
 //= link_tree ../../../vendor/javascript .js
+
+// govuk-frontend assets
+//= link_directory ../../../node_modules/govuk-frontend/dist/govuk/assets/images
+//= link_directory ../../../node_modules/govuk-frontend/dist/govuk/assets/fonts
diff --git a/app/assets/stylesheets/main.sass.scss b/app/assets/stylesheets/main.sass.scss
@@ -1,7 +1,10 @@
 $govuk-global-styles: true;
 $govuk-new-link-styles: true;
+$govuk-assets-path: "";
+$govuk-fonts-path: "";
+$govuk-images-path: "";
 
-@import "govuk-frontend/govuk/all";
+@import "govuk-frontend/dist/govuk/all";
 @import "_card";
 @import "_performance-table";
 @import "_app-govuk-summary-card";

diff --git a/app/javascript/main.js b/app/javascript/main.js
@@ -9,7 +9,7 @@ dfeAutocomplete({ autoselect: false });
 // being submitted.
 function disableIttProviderSelect() {
   var $ittProviderSelect = document.querySelector(
-    'select[name="itt_provider_form[itt_provider_name]"'
+    'select[name="itt_provider_form[itt_provider_name]"',
   );
   if (!$ittProviderSelect) return;
 

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -9,22 +9,22 @@
     <%= tag :meta, name: 'viewport', content: 'width=device-width, initial-scale=1' %>
     <%= tag :meta, name: 'theme-color', content: '#0b0c0c' %>
 
-    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="assets/images/favicon.ico" type="image/x-icon">
-    <link rel="mask-icon" href="assets/images/govuk-mask-icon.svg" color="#0b0c0c">
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/govuk-apple-touch-icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="167x167" href="assets/images/govuk-apple-touch-icon-167x167.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="assets/images/govuk-apple-touch-icon-152x152.png">
-    <link rel="apple-touch-icon" href="assets/images/govuk-apple-touch-icon.png">
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="favicon.ico" type="image/x-icon">
+    <link rel="mask-icon" href="govuk-mask-icon.svg" color="#0b0c0c">
+    <%= favicon_link_tag image_path('favicon.ico'), type: nil, sizes: "48x48" %>
+    <%= favicon_link_tag image_path('favicon.svg'), type: 'image/svg+xml', sizes: "any" %>
+    <%= favicon_link_tag image_path('govuk-icon-mask.svg'), rel: 'mask-icon', color: "#0b0c0c", type: nil %>
+    <%= favicon_link_tag image_path('govuk-icon-180.png'), rel: 'apple-touch-icon', type: nil %>
 
-    <meta property="og:image" content="assets/images/govuk-opengraph-image.png">
+    <%= tag :meta, property: 'og:image', content: image_path('govuk-opengraph-image.png') %>
 
     <%= stylesheet_link_tag "main" %>
     <%= javascript_include_tag "main", defer: true %>
   </head>
 
   <body class="govuk-template__body">
     <%= javascript_tag nonce: true do %>
-      document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+      document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
     <% end %>
 
     <%= govuk_skip_link %>

diff --git a/config/application.rb b/config/application.rb
@@ -43,6 +43,9 @@ class Application < Rails::Application
 
     config.active_record.encryption.store_key_references = true
 
+    config.assets.paths << Rails.root.join("node_modules/govuk-frontend/dist/govuk/assets/images")
+    config.assets.paths << Rails.root.join("node_modules/govuk-frontend/dist/govuk/assets/fonts")
+
     config.exceptions_app = routes
     config.console1984.ask_for_username_if_empty = true
     config.audits1984.auditor_class = "Staff"

diff --git a/package.json b/package.json
@@ -4,15 +4,13 @@
   "dependencies": {
     "dfe-autocomplete": "github:DFE-Digital/dfe-autocomplete",
     "esbuild": "^0.19.12",
-    "govuk-frontend": "^4.6.0",
+    "govuk-frontend": "^5.0.0",
     "sass": "^1.70.0"
   },
   "scripts": {
-    "build": "esbuild app/javascript/*.* --target=ie11 --bundle --sourcemap --outdir=app/assets/builds",
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
     "build:css": "sass ./app/assets/stylesheets/main.sass.scss ./app/assets/builds/main.css --no-source-map --quiet-deps --load-path=node_modules",
-    "lint": "eslint --ext .js,.ts,.tsx ./app/javascript",
-    "preinstall": "mkdir -p public/assets/fonts public/assets/images",
-    "postinstall": "cp -R node_modules/govuk-frontend/govuk/assets/fonts/. public/assets/fonts && cp -R node_modules/govuk-frontend/govuk/assets/images/. public/assets/images"
+    "lint": "eslint --ext .js,.ts,.tsx ./app/javascript"
   },
   "devDependencies": {
     "@prettier/plugin-ruby": "^4.0.4",

diff --git a/public/assets/fonts/.keep b/public/assets/fonts/.keep
diff --git a/public/assets/images/.keep b/public/assets/images/.keep
diff --git a/spec/system/support_interface/staff_spec.rb b/spec/system/support_interface/staff_spec.rb
@@ -96,12 +96,12 @@ def then_i_see_an_invitation_email
 
   def then_i_see_the_invited_staff_user
     expect(page).to have_content("test@example.com")
-    expect(page).to have_content("NOT ACCEPTED")
+    expect(page).to have_content("Not accepted")
   end
 
   def then_i_see_the_accepted_staff_user
     expect(page).to have_content("test@example.com")
-    expect(page).to have_content("ACCEPTED")
+    expect(page).to have_content("Accepted")
   end
 
   def and_i_fill_password

diff --git a/spec/system/support_interface/support_spec.rb b/spec/system/support_interface/support_spec.rb
@@ -89,18 +89,18 @@ def then_i_see_the_diff_with_zendesk
 
   def then_the_slack_alerts_flag_is_on
     expect(page).to have_content("Feature “Slack alerts” activated")
-    expect(page).to have_content("Slack alerts\n- Active")
+    expect(page).to have_content("Slack alerts\n - Active")
   end
 
   def then_the_slack_alerts_flag_is_off
     expect(page).to have_content("Feature “Slack alerts” deactivated")
-    expect(page).to have_content("Slack alerts\n- Inactive")
+    expect(page).to have_content("Slack alerts\n - Inactive")
   end
 
   def and_there_is_a_trn_request_in_progress
     trn_request = TrnRequest.last
     expect(page).to have_content("TRN Request ##{trn_request.id}")
     expect(page).to have_content(trn_request.name.to_s)
-    expect(page).to have_content("NOT YET SUBMITTED")
+    expect(page).to have_content("Not yet submitted")
   end
 end