From dc0de297b2475c38522769449e457c0344c7aa78 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Mon, 10 Jun 2024 12:14:43 +0100 Subject: [PATCH 1/4] Move Javascript modules to es6-components To prevent browsers evaluating JS that isn't supported, components that contain code from govuk-frontend have been moved to a separate file `es6-components.js` which is included in `application.html.erb` as a script tag with `type="module"`. --- app/assets/config/manifest.js | 3 ++- app/assets/javascripts/application.js | 3 --- app/assets/javascripts/es6-components.js | 12 ++++++++++++ app/views/layouts/development_layout.html.erb | 1 + app/views/layouts/finder_layout.html.erb | 1 + app/views/layouts/search_layout.html.erb | 1 + 6 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 app/assets/javascripts/es6-components.js diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index fdc647a58..62c0e8e60 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,6 +1,7 @@ //= link_tree ../images //= link application.js //= link test-dependencies.js +//= link es6-components.js //= link live_search.js -//= link_tree ../builds \ No newline at end of file +//= link_tree ../builds diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 62576ed46..1201c0825 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -10,13 +10,10 @@ // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details // about supported directives. //= require govuk_publishing_components/lib -//= require govuk_publishing_components/components/checkboxes -//= require govuk_publishing_components/components/error-summary //= require govuk_publishing_components/components/govspeak //= require govuk_publishing_components/components/intervention //= require govuk_publishing_components/components/metadata //= require govuk_publishing_components/components/option-select -//= require govuk_publishing_components/components/radio //= require govuk_publishing_components/analytics/explicit-cross-domain-links // //= require support diff --git a/app/assets/javascripts/es6-components.js b/app/assets/javascripts/es6-components.js new file mode 100644 index 000000000..3154e236e --- /dev/null +++ b/app/assets/javascripts/es6-components.js @@ -0,0 +1,12 @@ +// These modules from govuk_publishing_components +// depend on govuk-frontend modules. govuk-frontend +// now targets browsers that support `type="module"`. +// +// To gracefully prevent execution of these scripts +// on browsers that don't support ES6, this script +// should be included in a `type="module"` script tag +// which will ensure they are never loaded. + +//= require govuk_publishing_components/components/checkboxes +//= require govuk_publishing_components/components/error-summary +//= require govuk_publishing_components/components/radio diff --git a/app/views/layouts/development_layout.html.erb b/app/views/layouts/development_layout.html.erb index 6a44b2866..c68dff19f 100644 --- a/app/views/layouts/development_layout.html.erb +++ b/app/views/layouts/development_layout.html.erb @@ -16,6 +16,7 @@ render_component_stylesheets %> <%= javascript_include_tag "application", integrity: false %> + <%= javascript_include_tag 'es6-components', integrity: false, type: "module" %> diff --git a/app/views/layouts/finder_layout.html.erb b/app/views/layouts/finder_layout.html.erb index c4fbc89ad..9f9313f9a 100644 --- a/app/views/layouts/finder_layout.html.erb +++ b/app/views/layouts/finder_layout.html.erb @@ -17,6 +17,7 @@ %> <%= javascript_include_tag 'test-dependencies.js' if Rails.env.test? %> <%= javascript_include_tag 'application', integrity: false %> + <%= javascript_include_tag 'es6-components', integrity: false, type: "module" %> <%= csrf_meta_tags %> <%= yield :head %> diff --git a/app/views/layouts/search_layout.html.erb b/app/views/layouts/search_layout.html.erb index cef008d67..c9566c82a 100644 --- a/app/views/layouts/search_layout.html.erb +++ b/app/views/layouts/search_layout.html.erb @@ -7,6 +7,7 @@ <%= yield :title %> - GOV.UK <%= stylesheet_link_tag "application", media: "all", integrity: false %> + <%= javascript_include_tag 'es6-components', integrity: false, type: "module" %> <%= render_component_stylesheets %> From eecad898c2ab319cf5a6645829afa0e79e173ead Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Mon, 10 Jun 2024 12:14:55 +0100 Subject: [PATCH 2/4] Remove deprecated SCSS variables - $govuk-new-link-styles is now set to true by default - The other SCSS variables are deprecated from v5 of govuk-frontend --- app/assets/stylesheets/application.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 043fb597a..d1ffb5ade 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,8 +1,3 @@ -$govuk-compatibility-govuktemplate: false; -$govuk-use-legacy-palette: false; -$govuk-new-link-styles: true; -$govuk-use-legacy-font: false; - // This flag stops the font from being included in this application's // stylesheet - the font is being served by Static across all of GOV.UK, so is // not needed here. From f8d4668dff60713b2d24bac03ad44ae15636fc1f Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Mon, 10 Jun 2024 12:15:24 +0100 Subject: [PATCH 3/4] Update path for closest.js polyfill Updated to continue to use the closest Polyfill from v4 of govuk-frontend which is now included in the publishing_components_gem --- app/assets/javascripts/analytics-ga4/ga4-finder-tracker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/analytics-ga4/ga4-finder-tracker.js b/app/assets/javascripts/analytics-ga4/ga4-finder-tracker.js index 789242922..55717af23 100644 --- a/app/assets/javascripts/analytics-ga4/ga4-finder-tracker.js +++ b/app/assets/javascripts/analytics-ga4/ga4-finder-tracker.js @@ -1,4 +1,4 @@ -//= require govuk/vendor/polyfills/Element/prototype/closest.js +//= require govuk_publishing_components/vendor/polyfills-govuk-frontend-v4/Element/prototype/closest.js ;(function (global) { 'use strict' From ab152347d753413a42535aee02b86fff974fd35c Mon Sep 17 00:00:00 2001 From: AshGDS <8880610+AshGDS@users.noreply.github.com> Date: Mon, 15 Jul 2024 10:42:56 +0100 Subject: [PATCH 4/4] Upgrade govuk-publishing-components to v40.0.0 --- Gemfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gemfile.lock b/Gemfile.lock index f111ce212..6cb7ab612 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -189,7 +189,7 @@ GEM govuk_personalisation (0.16.0) plek (>= 1.9.0) rails (>= 6, < 8) - govuk_publishing_components (39.2.5) + govuk_publishing_components (40.0.0) govuk_app_config govuk_personalisation (>= 0.7.0) kramdown