alphagov · patrickpatrickpatrick · Mar 15, 2024 · Nov 13, 2023 · Nov 13, 2023 · Nov 16, 2023
diff --git a/Gemfile b/Gemfile
@@ -12,7 +12,7 @@ gem "govspeak"
 gem "govuk_ab_testing"
 gem "govuk_app_config"
 gem "govuk_personalisation"
-gem "govuk_publishing_components"
+gem "govuk_publishing_components", git: "https://github.com/alphagov/govuk_publishing_components.git", branch: "deploy-try-to-update-govukfrontend"
 gem "htmlentities"
 gem "plek"
 gem "rails-controller-testing"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,3 +1,19 @@
+GIT
+  remote: https://github.com/alphagov/govuk_publishing_components.git
+  revision: 61640e75da1085b7847219517dc12e51bb65b7dd
+  branch: deploy-try-to-update-govukfrontend
+  specs:
+    govuk_publishing_components (37.8.1)
+      govuk_app_config
+      govuk_personalisation (>= 0.7.0)
+      kramdown
+      plek
+      rails (>= 6)
+      rouge
+      sprockets (>= 3)
+      sprockets-rails
+      terser
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -674,7 +690,7 @@ DEPENDENCIES
   govuk_ab_testing
   govuk_app_config
   govuk_personalisation
-  govuk_publishing_components
+  govuk_publishing_components!
   govuk_schemas
   govuk_test
   htmlentities

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,4 +1,5 @@
 //= link_tree ../images
 //= link application.js
+//= link es6-components.js
 //= link webchat.js
 //= link_tree ../builds
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,13 +1,10 @@
 //= require govuk_publishing_components/lib
-//= require govuk_publishing_components/components/accordion
 //= require govuk_publishing_components/components/details
-//= require govuk_publishing_components/components/error-summary
 //= require govuk_publishing_components/components/govspeak
 //= require govuk_publishing_components/components/image-card
 //= require govuk_publishing_components/components/intervention
 //= require govuk_publishing_components/components/metadata
 //= require govuk_publishing_components/components/print-link
-//= require govuk_publishing_components/components/radio
 //= require govuk_publishing_components/components/single-page-notification-button
 //= require govuk_publishing_components/components/step-by-step-nav
 

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/accordion
+//= require govuk_publishing_components/components/error-summary
+//= require govuk_publishing_components/components/radio
diff --git a/app/assets/javascripts/modules/hide-other-links.js b/app/assets/javascripts/modules/hide-other-links.js
@@ -10,6 +10,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.shownElements = []
     this.hiddenElements = []
     this.showLink = document.createElement('a')
+    this.init()
   }
 
   HideOtherLinks.prototype.init = function () {

diff --git a/app/assets/javascripts/modules/set-ga-client-id-on-form.js b/app/assets/javascripts/modules/set-ga-client-id-on-form.js
@@ -4,6 +4,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   function SetGaClientIdOnForm ($module) {
     this.$module = $module
+    this.init()
   }
 
   SetGaClientIdOnForm.prototype.init = function () {

diff --git a/app/assets/javascripts/modules/sticky-element-container.js b/app/assets/javascripts/modules/sticky-element-container.js
@@ -21,6 +21,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.windowVerticalPosition = 1
     this.startPosition = 0
     this.stopPosition = 0
+    this.init()
   }
 
   StickyElementContainer.prototype.init = function () {

diff --git a/app/assets/javascripts/modules/track-radio-group.js b/app/assets/javascripts/modules/track-radio-group.js
@@ -4,6 +4,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   function TrackRadioGroup (element) {
     this.element = element
+    this.init()
   }
 
   TrackRadioGroup.prototype.init = function () {

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,8 +1,4 @@
 // The main application stylesheet
-$govuk-compatibility-govuktemplate: false;
-$govuk-typography-use-rem: 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

diff --git a/app/assets/stylesheets/components/_contents-list-with-body.scss b/app/assets/stylesheets/components/_contents-list-with-body.scss
@@ -23,7 +23,7 @@
 }
 
 .app-c-contents-list-with-body__link-wrapper.sticky-element--stuck-to-window {
-  background-color: govuk-colour("light-grey", $legacy: "grey-3");
+  background-color: govuk-colour("light-grey");
   bottom: -1px; // 'Fix' for anomalous 1px margin which sporadically appears below this element.
   left: 0;
   margin: 0;

diff --git a/app/assets/stylesheets/helpers/_parts.scss b/app/assets/stylesheets/helpers/_parts.scss
@@ -9,7 +9,7 @@
       margin-bottom: 0;
     }
 
-    border-bottom: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
+    border-bottom: 1px solid govuk-colour("mid-grey");
   }
 
   .part-navigation {

diff --git a/app/assets/stylesheets/views/_manual.scss b/app/assets/stylesheets/views/_manual.scss
@@ -61,7 +61,7 @@
   list-style: none;
 
   &:hover {
-    background-color: govuk-colour("light-grey", $legacy: "grey-4");
+    background-color: govuk-colour("light-grey");
   }
 
   &:last-child {

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -48,6 +48,7 @@
   <% end %>
 
   <%= stylesheet_link_tag "application", :media => "all", integrity: false %>
+  <%= javascript_include_tag 'es6-components', type: "module" %>
   <%= javascript_include_tag "application", integrity: false %>
   <%= csrf_meta_tags %>
   <%= render 'govuk_publishing_components/components/meta_tags', content_item: @content_item.content_item %>

diff --git a/config/initializers/sprockets.rb b/config/initializers/sprockets.rb
@@ -0,0 +1,17 @@
+# This adds terser as a recognised compressor
+# to Sprockets. Without this patch, Sprockets
+# will not be able to run terser.
+#
+# Code originates from:
+# https://stackoverflow.com/a/70086366
+
+require "terser"
+
+module Sprockets
+  class Environment < Base
+    def js_compressor=(compressor)
+      register_compressor "application/javascript", :terser, Terser::Compressor
+      super
+    end
+  end
+end
diff --git a/spec/javascripts/modules/hide-other-links.spec.js b/spec/javascripts/modules/hide-other-links.spec.js
@@ -4,8 +4,8 @@ describe('A hide-other-links module', function () {
 
   function subject () {
     $('body').append(list)
-    var instance = new GOVUK.Modules.HideOtherLinks(list[0])
-    instance.init()
+    /* eslint-disable no-new */
+    new GOVUK.Modules.HideOtherLinks(list[0])
   }
 
   afterEach(function () {

diff --git a/spec/javascripts/modules/sticky-element-container.spec.js b/spec/javascripts/modules/sticky-element-container.spec.js
@@ -29,42 +29,33 @@ describe('A sticky-element-container module', function () {
     })
 
     it('hides the element, when scrolled at the top', function () {
-      instance.getWindowPositions = function () {
-        return {
-          scrollTop: 0
-        }
-      }
-
       instance.checkResize()
-      instance.checkScroll()
+
+      instance.windowVerticalPosition = 0
+      instance.updateVisibility()
+      instance.updatePosition()
 
       expect($footer.hasClass('sticky-element--hidden')).toBe(true)
       expect($footer.hasClass('sticky-element--stuck-to-window')).toBe(true)
     })
 
     it('shows the element, stuck to the window, when scrolled in the middle', function () {
-      instance.getWindowPositions = function () {
-        return {
-          scrollTop: 5000
-        }
-      }
-
       instance.checkResize()
-      instance.checkScroll()
+
+      instance.windowVerticalPosition = 5000
+      instance.updateVisibility()
+      instance.updatePosition()
 
       expect($footer.hasClass('sticky-element--hidden')).toBe(false)
       expect($footer.hasClass('sticky-element--stuck-to-window')).toBe(true)
     })
 
     it('shows the element, stuck to the parent, when scrolled at the bottom', function () {
-      instance.getWindowPositions = function () {
-        return {
-          scrollTop: 9800
-        }
-      }
-
       instance.checkResize()
-      instance.checkScroll()
+
+      instance.windowVerticalPosition = 9800
+      instance.updateVisibility()
+      instance.updatePosition()
 
       expect($footer.hasClass('sticky-element--hidden')).toBe(false)
       expect($footer.hasClass('sticky-element--stuck-to-window')).toBe(false)

diff --git a/spec/javascripts/set-ga-client-id-on-form.spec.js b/spec/javascripts/set-ga-client-id-on-form.spec.js
@@ -9,8 +9,8 @@ describe('SetGaClientIdOnForm', function () {
 
   beforeEach(function () {
     form = $('<form action="/endpoint"></form>')
-    var setId = new GOVUK.Modules.SetGaClientIdOnForm(form[0])
-    setId.init()
+    /* eslint-disable no-new */
+    new GOVUK.Modules.SetGaClientIdOnForm(form[0])
   })
 
   it('sets the _ga client id as a query param on the form action', function () {

diff --git a/spec/javascripts/track-radio-group.spec.js b/spec/javascripts/track-radio-group.spec.js
@@ -2,7 +2,6 @@ var $ = window.jQuery
 
 describe('A radio group tracker', function () {
   var GOVUK = window.GOVUK
-  var tracker
   var element
 
   GOVUK.analytics = GOVUK.analytics || {}
@@ -23,8 +22,8 @@ describe('A radio group tracker', function () {
 
     $('body').append(element)
 
-    tracker = new GOVUK.Modules.TrackRadioGroup(element[0])
-    tracker.init()
+    /* eslint-disable no-new */
+    new GOVUK.Modules.TrackRadioGroup(element[0])
   })
 
   afterEach(function () {
@@ -65,8 +64,8 @@ describe('A radio group tracker', function () {
       element.attr('data-tracking-domain', 'test.service.gov.uk')
       element.attr('data-tracking-name', 'testTracker')
 
-      tracker = new GOVUK.Modules.TrackRadioGroup(element[0])
-      tracker.init()
+      /* eslint-disable no-new */
+      new GOVUK.Modules.TrackRadioGroup(element[0])
     })
 
     it('adds a linked tracker as the module is started', function () {

diff --git a/startup.sh b/startup.sh
@@ -12,7 +12,7 @@ function set_env() {
 if [[ $1 == "--live" ]] ; then
   set_env "gov.uk"
   export GOVUK_PROXY_STATIC_ENABLED=true
-  export PLEK_SERVICE_STATIC_URI=${PLEK_SERVICE_STATIC_URI-https://assets.publishing.service.gov.uk}
+  export PLEK_SERVICE_STATIC_URI=${PLEK_SERVICE_STATIC_URI-http://static.dev.gov.uk}
   ./bin/dev
 else
   echo "ERROR: other startup modes are not supported"

diff --git a/test/integration/service_manual_phase_label_test.rb b/test/integration/service_manual_phase_label_test.rb
@@ -29,7 +29,7 @@ class ServiceManualPhaseLabelTest < ActionDispatch::IntegrationTest
     stub_content_store_has_item(guide["base_path"], guide)
     visit guide["base_path"]
 
-    assert_text("ALPHA")
+    assert_text("Alpha")
   end
 
   test "No phase label is displayed for a guide without a phase field" do