Upgrade govuk frontend library to version 5.1.0 (#3863)

* work in progress... * work in progress * fix maps
DFE-Digital · Feb 26, 2024 · 7a7fc14 · 7a7fc14
1 parent c689f10
commit 7a7fc14
Show file tree

Hide file tree

Showing 37 changed files with 75 additions and 52 deletions.
diff --git a/app/components/header_component.html.erb b/app/components/header_component.html.erb
@@ -2,11 +2,11 @@
 
 <div id="skiplink-container">
   <div>
-    <a href="#main-content" class="skiplink">Skip to main content</a>
+    <a href="#main-content" class="skiplink" data-module="govuk-skip-link">Skip to main content</a>
   </div>
 </div>
 
-<header class="limit-content-width" data-controller="navigation" role="banner">
+<header class="limit-content-width" data-controller="navigation" role="banner" data-module="govuk-header">
   <%= render Header::ExtraNavigationComponent.new(search_input_id: "searchbox__input--desktop") %>
   <%= render Header::LogoComponent.new %>
   <div class="menu-button" id="mobile-navigation-menu-button">

diff --git a/app/helpers/maps_helper.rb b/app/helpers/maps_helper.rb
@@ -7,10 +7,9 @@ module MapsHelper
 
   def include_maps_in_head
     map_api_key = Rails.application.config.x.google_maps_key
-
     content_for :head do
       javascript_include_tag \
-        "https://maps.googleapis.com/maps/api/js?key=#{map_api_key}&callback=mapsLoadedCallback",
+        "https://maps.googleapis.com/maps/api/js?key=#{map_api_key}&loading=async&callback=mapsLoadedCallback",
         defer: true, async: true
     end
   end
@@ -56,7 +55,7 @@ def ajax_map(destination, mapsize:, title: nil, description: nil,
 
     tag.div class: "embedded-map", data: map_data, **aria_attributes do
       tag.div class: "embedded-map__inner-container",
-              data: { target: "map.container" } do
+              data: { "map-target": "container" } do
         image_tag static_url, class: "embedded-map__nojs-img", alt: "Map showing #{title}", **aria_attributes
       end
     end

diff --git a/app/views/event_steps/_personalised_updates.html.erb b/app/views/event_steps/_personalised_updates.html.erb
@@ -22,7 +22,7 @@
 
 <%= f.govuk_text_field :address_postcode, autocomplete: "postal-code" unless f.object.hide_postcode_field? %>
 
-<details class="govuk-details" data-module="govuk-details">
+<details class="govuk-details">
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       What if I do not have a UK postcode?

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new(breadcrumbs: true) %>
 
     <%= main_tag do %>

diff --git a/app/views/layouts/blog/index.html.erb b/app/views/layouts/blog/index.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new(breadcrumbs: true) %>
 
     <%= main_tag do %>

diff --git a/app/views/layouts/blog/post.html.erb b/app/views/layouts/blog/post.html.erb
@@ -6,6 +6,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new(breadcrumbs: true) %>
 
     <%= main_tag do %>

diff --git a/app/views/layouts/category.html.erb b/app/views/layouts/category.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new(breadcrumbs: true) %>
 
     <%= main_tag(class: "category") do %>

diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb
@@ -3,6 +3,7 @@
   <% @front_matter ||= {} %>
   <%= render "sections/head" %>
   <body>
-  <%= yield %>
+    <%= render "sections/govuk_javascript" %>
+    <%= yield %>
   </body>
 </html>
diff --git a/app/views/layouts/content.html.erb b/app/views/layouts/content.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
     <%= render "sections/head" %>
     <%= body_tag do %>
+      <%= render "sections/govuk_javascript" %>
       <%= render HeaderComponent.new(breadcrumbs: true) %>
 
       <%= main_tag do %>

diff --git a/app/views/layouts/disclaimer.html.erb b/app/views/layouts/disclaimer.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new(breadcrumbs: true) %>
 
     <%= main_tag do %>

diff --git a/app/views/layouts/events.html.erb b/app/views/layouts/events.html.erb
@@ -5,6 +5,7 @@
   <% end %>
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new(breadcrumbs: true) %>
 
     <%= main_tag do %>

diff --git a/app/views/layouts/feedback.html.erb b/app/views/layouts/feedback.html.erb
@@ -11,6 +11,7 @@
 
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new %>
 
     <%= main_tag(class: "main-section") do %>

diff --git a/app/views/layouts/home.html.erb b/app/views/layouts/home.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new %>
 
     <%= main_tag do %>

diff --git a/app/views/layouts/internal.html.erb b/app/views/layouts/internal.html.erb
@@ -9,9 +9,10 @@
 
 <%= render "sections/head" %>
 <%= body_tag data: { controller: "internal-events" } do %>
+  <%= render "sections/govuk_javascript" %>
   <div id="skiplink-container">
     <div>
-      <a href="#main-content" class="skiplink">Skip to main content</a>
+      <a href="#main-content" class="skiplink" data-module="govuk-skip-link">Skip to main content</a>
     </div>
   </div>
 

diff --git a/app/views/layouts/minimal.html.erb b/app/views/layouts/minimal.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render(partial: "sections/content_errors") %>
 
     <%= render HeaderComponent.new %>

diff --git a/app/views/layouts/registration.html.erb b/app/views/layouts/registration.html.erb
@@ -6,6 +6,7 @@
 
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new %>
 
     <section class="main-section">

diff --git a/app/views/layouts/registration_with_image_above.html.erb b/app/views/layouts/registration_with_image_above.html.erb
@@ -6,6 +6,7 @@
 
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new %>
     <%= yield(:back_link) %>
 

diff --git a/app/views/layouts/registration_with_side_images.html.erb b/app/views/layouts/registration_with_side_images.html.erb
@@ -6,6 +6,7 @@
 
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new %>
 
     <div class="main-section registration-with-side-images">

diff --git a/app/views/layouts/steps.html.erb b/app/views/layouts/steps.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
     <%= render "sections/head" %>
     <%= body_tag do %>
+      <%= render "sections/govuk_javascript" %>
       <%= render HeaderComponent.new(breadcrumbs: true) %>
 
       <%= main_tag do %>

diff --git a/app/views/layouts/teaching_event.html.erb b/app/views/layouts/teaching_event.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new(breadcrumbs: true) %>
 
     <%= main_tag do %>

diff --git a/app/views/layouts/teaching_events.html.erb b/app/views/layouts/teaching_events.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render HeaderComponent.new %>
 
     <%= main_tag do %>

diff --git a/app/views/layouts/welcome.html.erb b/app/views/layouts/welcome.html.erb
@@ -2,6 +2,7 @@
 <html lang="en" class="govuk-template">
   <%= render "sections/head" %>
   <%= body_tag do %>
+    <%= render "sections/govuk_javascript" %>
     <%= render(partial: "sections/content_errors") %>
 
     <%= render HeaderComponent.new %>

diff --git a/app/views/mailing_list/steps/_postcode.html.erb b/app/views/mailing_list/steps/_postcode.html.erb
@@ -9,7 +9,7 @@
   <p>If you give us your postcode, we'll let you know about events happening near you.</p>
 <% end %>
 
-<details class="govuk-details" data-module="govuk-details">
+<details class="govuk-details">
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       What if I do not have a UK postcode?

diff --git a/app/views/sections/_govuk_javascript.html.erb b/app/views/sections/_govuk_javascript.html.erb
@@ -0,0 +1 @@
+<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
diff --git a/app/views/sections/_head.html.erb b/app/views/sections/_head.html.erb
@@ -13,8 +13,9 @@
   <% if Rails.env.test? && params.key?(:fake_browser_time) %>
     <% js_packs.unshift('fake_browser_time') %>
   <% end %>
-  <%= javascript_pack_tag *js_packs, 'data-turbolinks-track': 'reload', data:
+  <%= javascript_pack_tag *js_packs, type: 'module', data:
   {
+    "turbolinks-track": 'reload',
     "sentry-dsn": sentry_dsn,
     "sentry-environment": Rails.env,
     "gtm-id": ENV["GTM_ID"],

diff --git a/app/views/teacher_training_adviser/steps/_gcse_maths_english.html.erb b/app/views/teacher_training_adviser/steps/_gcse_maths_english.html.erb
@@ -2,7 +2,7 @@
 
 <%= f.govuk_collection_radio_buttons :has_gcse_maths_and_english_id, f.object.class::OPTIONS, :last, nil, inline: true, legend: { tag: "h1" } %>
 
-<details class="govuk-details" data-module="govuk-details">
+<details class="govuk-details">
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       What is a GCSE?

diff --git a/app/views/teacher_training_adviser/steps/_has_teacher_id.html.erb b/app/views/teacher_training_adviser/steps/_has_teacher_id.html.erb
@@ -3,7 +3,7 @@
   <%= f.govuk_radio_button :has_id, false, label: { text: 'No' }, link_errors: true %>
 <% end %>
 
-<details class="govuk-details" data-module="govuk-details">
+<details class="govuk-details">
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       What is a teacher reference number (TRN)?

diff --git a/app/views/teacher_training_adviser/steps/_previous_teacher_id.html.erb b/app/views/teacher_training_adviser/steps/_previous_teacher_id.html.erb
@@ -2,7 +2,7 @@
   <%= f.govuk_text_field :teacher_id, width: 20 %>
 <% end %>
 
-<details class="govuk-details" data-module="govuk-details">
+<details class="govuk-details">
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       How do I find my teacher reference number (TRN)?

diff --git a/app/views/teacher_training_adviser/steps/_returning_teacher.html.erb b/app/views/teacher_training_adviser/steps/_returning_teacher.html.erb
@@ -2,7 +2,7 @@
 
 <%= f.govuk_collection_radio_buttons :type_id, f.object.class::OPTIONS, :last, nil, inline: true, legend: { tag: "h1" } %>
 
-<details class="govuk-details" data-module="govuk-details">
+<details class="govuk-details">
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       What is QTS?

diff --git a/app/webpacker/packs/clarity.js b/app/webpacker/packs/clarity.js
@@ -1,8 +1,8 @@
-import Clarity from '../javascript/clarity'
+import Clarity from '../javascript/clarity';
 
-const clarityId = document.querySelector("[data-clarity-id]").dataset.clarityId
+const clarityId = document.querySelector('[data-clarity-id]').dataset.clarityId;
 
 if (clarityId) {
-  const clarity = new Clarity(clarityId)
-  clarity.init()
+  const clarity = new Clarity(clarityId);
+  clarity.init();
 }
diff --git a/app/webpacker/packs/govuk_frontend.js b/app/webpacker/packs/govuk_frontend.js
@@ -1,11 +1,14 @@
-import { ErrorSummary, Radios } from 'govuk-frontend'
+import { ErrorSummary, Radios } from 'govuk-frontend';
 
 // Find first error summary module to enhance.
-var $errorSummary = document.querySelector('[data-module="govuk-error-summary"]');
-new ErrorSummary($errorSummary).init();
+var $errorSummary = document.querySelector(
+  '[data-module="govuk-error-summary"]'
+);
+if ($errorSummary) {
+  new ErrorSummary($errorSummary);
+}
 
 var $radios = [...document.querySelectorAll('[data-module="govuk-radios"]')];
 $radios.forEach(($radio) => {
-  new Radios($radio).init();
+  new Radios($radio);
 });
-
diff --git a/app/webpacker/packs/gtm.js b/app/webpacker/packs/gtm.js
@@ -1,8 +1,8 @@
-import Gtm from '../javascript/gtm'
+import Gtm from '../javascript/gtm';
 
-const gtmId = document.querySelector("[data-gtm-id]").dataset.gtmId
+const gtmId = document.querySelector('[data-gtm-id]').dataset.gtmId;
 
 if (gtmId) {
-  const gtm = new Gtm(gtmId)
-  gtm.init()
+  const gtm = new Gtm(gtmId);
+  gtm.init();
 }
diff --git a/app/webpacker/styles/application.scss b/app/webpacker/styles/application.scss
@@ -6,24 +6,24 @@ $govuk-font-family: $git-font-family;
 @import "./git";
 
 // Only import the used parts of the GOV.UK frontend.
-@import "~govuk-frontend/govuk/base";
-@import "~govuk-frontend/govuk/core/all";
-@import "~govuk-frontend/govuk/objects/all";
-@import "~govuk-frontend/govuk/utilities/all";
-@import "~govuk-frontend/govuk/overrides/all";
-@import "~govuk-frontend/govuk/components/back-link/index";
-@import "~govuk-frontend/govuk/components/button/index";
-@import "~govuk-frontend/govuk/components/checkboxes/index";
-@import "~govuk-frontend/govuk/components/error-message/index";
-@import "~govuk-frontend/govuk/components/error-summary/index";
-@import "~govuk-frontend/govuk/components/fieldset/index";
-@import "~govuk-frontend/govuk/components/hint/index";
-@import "~govuk-frontend/govuk/components/input/index";
-@import "~govuk-frontend/govuk/components/label/index";
-@import "~govuk-frontend/govuk/components/notification-banner/index";
-@import "~govuk-frontend/govuk/components/panel/index";
-@import "~govuk-frontend/govuk/components/radios/index";
-@import "~govuk-frontend/govuk/components/table/index";
+@import "~govuk-frontend/dist/govuk/base";
+@import "~govuk-frontend/dist/govuk/core/all";
+@import "~govuk-frontend/dist/govuk/objects/all";
+@import "~govuk-frontend/dist/govuk/utilities/all";
+@import "~govuk-frontend/dist/govuk/overrides/all";
+@import "~govuk-frontend/dist/govuk/components/back-link/index";
+@import "~govuk-frontend/dist/govuk/components/button/index";
+@import "~govuk-frontend/dist/govuk/components/checkboxes/index";
+@import "~govuk-frontend/dist/govuk/components/error-message/index";
+@import "~govuk-frontend/dist/govuk/components/error-summary/index";
+@import "~govuk-frontend/dist/govuk/components/fieldset/index";
+@import "~govuk-frontend/dist/govuk/components/hint/index";
+@import "~govuk-frontend/dist/govuk/components/input/index";
+@import "~govuk-frontend/dist/govuk/components/label/index";
+@import "~govuk-frontend/dist/govuk/components/notification-banner/index";
+@import "~govuk-frontend/dist/govuk/components/panel/index";
+@import "~govuk-frontend/dist/govuk/components/radios/index";
+@import "~govuk-frontend/dist/govuk/components/table/index";
 
 @import "./govuk-reset";
 

diff --git a/app/webpacker/styles/internal.scss b/app/webpacker/styles/internal.scss
@@ -11,7 +11,7 @@ $govuk-include-default-font-face: false;
 $govuk-font-url-function: frontend-font-url;
 $govuk-image-url-function: frontend-image-url;
 
-@import "~govuk-frontend/govuk/all";
+@import "~govuk-frontend/dist/govuk/all";
 @import "~trix";
 @import "~flatpickr";
 @import "colours";

diff --git a/config/shakapacker.yml b/config/shakapacker.yml
@@ -28,7 +28,7 @@ default: &default
 
   # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
-  additional_paths: ['node_modules/govuk-frontend/govuk']
+  additional_paths: ['node_modules/govuk-frontend/dist/govuk']
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false

diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "dayjs": "^1.11.10",
     "file-loader": "^6.2.0",
     "flatpickr": "^4.6.13",
-    "govuk-frontend": "^3.14.0",
+    "govuk-frontend": "^5.1.0",
     "is-touch-device": "^1.0.1",
     "js-cookie": "^3.0.5",
     "lazysizes": "^5.3.2",

diff --git a/yarn.lock b/yarn.lock
@@ -4157,10 +4157,10 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-govuk-frontend@^3.14.0:
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-3.14.0.tgz#d3a9c54437c08f5188f87b1f4480ba60e95c8eb6"
-  integrity sha512-y7FTuihCSA8Hty+e9h0uPhCoNanCAN+CLioNFlPmlbeHXpbi09VMyxTcH+XfnMPY4Cp++7096v0rLwwdapTXnA==
+govuk-frontend@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/govuk-frontend/-/govuk-frontend-5.1.0.tgz#55e520940b587ddd023e96251efaa076acc9bd5f"
+  integrity sha512-Dc3J+uOI4i2VR3BVyfxbf6qVjTT4n4bBqbD0/Io6feP8pt/4IfKdP1vWimZf+BwMKKMXacw10hmdy5UcD6Cr8w==
 
 graceful-fs@^4.1.2, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.10"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>