Merge pull request #6806 from alphagov/upgrade-to-govuk-frontend-5.1.0

Upgrade to govuk frontend 5.1.0
alphagov · Jul 15, 2024 · 0ba8f1f · 0ba8f1f
2 parents adb278b + f09d757
commit 0ba8f1f
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 33 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -172,7 +172,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

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -2,6 +2,7 @@
 
 //= link joint.css
 //= link application.js
+//= link es6-components.js
 //= link dagre.js
 //= link joint.layout.DirectedGraph.js
 //= link joint.js

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,9 +1,6 @@
 //= 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/print-link
-//= require govuk_publishing_components/components/radio
 //= require govuk_publishing_components/components/step-by-step-nav
 //= require govuk_publishing_components/components/table
diff --git a/app/assets/javascripts/es6-components.js 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/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,7 +1,3 @@
-$govuk-compatibility-govuktemplate: false;
-$govuk-use-legacy-palette: false;
-$govuk-new-link-styles: true;
-
 // 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.

diff --git a/app/assets/stylesheets/visualise.scss b/app/assets/stylesheets/visualise.scss
@@ -1,6 +1,3 @@
-$govuk-compatibility-govuktemplate: true;
-$govuk-use-legacy-palette: false;
-
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -27,6 +27,7 @@
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "application", :media => "all" %>
     <%= javascript_include_tag "test-dependencies" if Rails.env.test? %>
+    <%= javascript_include_tag "es6-components", type: "module" %>
     <%= javascript_include_tag "application", defer: true %>
     <%= yield :head %>
     <% if content_item %>

diff --git a/test/integration/engine/changing_answer_test.rb b/test/integration/engine/changing_answer_test.rb
@@ -101,15 +101,15 @@ class ChangingAnswerTest < EngineIntegrationTest
       click_on "Continue"
 
       within("#current-question") { assert_page_has_content "What...is your quest?" }
-      choose("To seek the Holy Grail", visible: false)
+      choose("To seek the Holy Grail", visible: false, allow_label_click: true)
       click_on "Continue"
 
       within("#current-question") { assert_page_has_content "Do you want to select any of these?" }
-      choose("Yes", visible: false)
+      choose("Yes", visible: false, allow_label_click: true)
       click_on "Continue"
 
       within("#current-question") { assert_page_has_content "What...is your favorite colour?" }
-      choose("Blue", visible: false)
+      choose("Blue", visible: false, allow_label_click: true)
       click_on "Continue"
 
       within("#result-info") { assert_page_has_content "Right, off you go." }
@@ -123,15 +123,15 @@ class ChangingAnswerTest < EngineIntegrationTest
       assert_current_url "/bridge-of-death/y/Bors"
 
       within("#current-question") { assert_page_has_content "What...is your quest?" }
-      choose("To seek the Holy Grail", visible: false)
+      choose("To seek the Holy Grail", visible: false, allow_label_click: true)
       click_on "Continue"
 
       within("#current-question") { assert_page_has_content "Do you want to select any of these?" }
-      choose("Yes", visible: false)
+      choose("Yes", visible: false, allow_label_click: true)
       click_on "Continue"
 
       within("#current-question") { assert_page_has_content "What...is your favorite colour?" }
-      choose("Blue", visible: false)
+      choose("Blue", visible: false, allow_label_click: true)
       click_on "Continue"
 
       within("#result-info") { assert_page_has_content "Right, off you go." }
@@ -143,15 +143,15 @@ class ChangingAnswerTest < EngineIntegrationTest
         assert page.has_unchecked_field?("I dunno", visible: false)
       end
 
-      choose("To rescue the princess", visible: false)
+      choose("To rescue the princess", visible: false, allow_label_click: true)
       click_on "Continue"
 
       assert_current_url "/bridge-of-death/y/Bors/to_rescue_the_princess"
 
-      choose("Yes", visible: false)
+      choose("Yes", visible: false, allow_label_click: true)
       click_on "Continue"
 
-      choose("Blue", visible: false)
+      choose("Blue", visible: false, allow_label_click: true)
       click_on "Continue"
 
       within("#result-info") { assert_page_has_content "Right, off you go." }
@@ -163,7 +163,7 @@ class ChangingAnswerTest < EngineIntegrationTest
         assert page.has_unchecked_field?("Red", visible: false)
       end
 
-      choose("Red", visible: false)
+      choose("Red", visible: false, allow_label_click: true)
       click_on "Continue"
 
       assert_current_url "/bridge-of-death/y/Bors/to_rescue_the_princess/yes/red"
@@ -174,8 +174,8 @@ class ChangingAnswerTest < EngineIntegrationTest
 
       visit "/checkbox-sample/y"
 
-      check("Peppers", visible: false)
-      check("Pepperoni", visible: false)
+      check("Peppers", visible: false, allow_label_click: true)
+      check("Pepperoni", visible: false, allow_label_click: true)
       click_on "Continue"
 
       assert_current_url "/checkbox-sample/y/pepperoni,peppers"
@@ -189,7 +189,7 @@ class ChangingAnswerTest < EngineIntegrationTest
         assert page.has_checked_field?("Pepperoni", visible: false)
       end
 
-      check("Ham", visible: false)
+      check("Ham", visible: false, allow_label_click: true)
       click_on "Continue"
 
       assert_current_url "/checkbox-sample/y/ham,pepperoni,peppers"

diff --git a/test/integration/engine/checkbox_questions_test.rb b/test/integration/engine/checkbox_questions_test.rb
@@ -24,8 +24,8 @@ class CheckboxQuestionsTest < EngineIntegrationTest
         assert_equal ["Ham", "Peppers", "Ice Cream!!!", "Pepperoni"], options
       end
 
-      check("Ham", visible: false)
-      check("Pepperoni", visible: false)
+      check("Ham", visible: false, allow_label_click: true)
+      check("Pepperoni", visible: false, allow_label_click: true)
       click_on "Continue"
 
       assert_current_url "/checkbox-sample/y/ham,pepperoni"
@@ -61,7 +61,7 @@ class CheckboxQuestionsTest < EngineIntegrationTest
 
       assert_page_has_content "Are you sure you don't want any toppings?"
 
-      check("Definitely no toppings", visible: false)
+      check("Definitely no toppings", visible: false, allow_label_click: true)
 
       click_on "Continue"
 
@@ -95,11 +95,11 @@ class CheckboxQuestionsTest < EngineIntegrationTest
     should "toggle options when none option is present" do
       visit "/checkbox-sample/y/none"
 
-      check("Definitely no toppings", visible: false)
-      check("Hmm I'm not sure, ask me again please", visible: false)
+      check("Definitely no toppings", visible: false, allow_label_click: true)
+      check("Hmm I'm not sure, ask me again please", visible: false, allow_label_click: true)
       assert_not page.has_checked_field?("Definitely no toppings")
 
-      check("Definitely no toppings", visible: false)
+      check("Definitely no toppings", visible: false, allow_label_click: true)
       assert_not page.has_checked_field?("Hmm I'm not sure, ask me again please")
       click_on "Continue"
 

diff --git a/test/integration/engine/radio_and_value_questions_test.rb b/test/integration/engine/radio_and_value_questions_test.rb
@@ -72,7 +72,7 @@ class RadioAndValueQuestionsTest < EngineIntegrationTest
         assert_equal ["To seek the Holy Grail", "To rescue the princess", "I dunno"], options
       end
 
-      choose("To seek the Holy Grail", visible: false)
+      choose("To seek the Holy Grail", visible: false, allow_label_click: true)
       click_on "Continue"
 
       assert_current_url "/bridge-of-death/y/Lancelot/to_seek_the_holy_grail"
@@ -108,7 +108,7 @@ class RadioAndValueQuestionsTest < EngineIntegrationTest
         assert_equal %w[Yes No], options
       end
 
-      choose("Yes", visible: false)
+      choose("Yes", visible: false, allow_label_click: true)
       click_on "Continue"
 
       within "#current-question" do
@@ -124,7 +124,7 @@ class RadioAndValueQuestionsTest < EngineIntegrationTest
         assert_equal ["Blue", "Blue... NO! YELLOOOOOOOOOOOOOOOOWWW!!!!", "Red"], options
       end
 
-      choose("Blue", visible: false)
+      choose("Blue", visible: false, allow_label_click: true)
       click_on "Continue"
 
       assert_current_url "/bridge-of-death/y/Lancelot/to_seek_the_holy_grail/yes/blue"