Use govuk-frontend v5

Gemfile

@@ -13,14 +13,14 @@ gem "govspeak"
 gem "govuk_ab_testing"
 gem "govuk_app_config"
 gem "govuk_document_types"
-gem "govuk_publishing_components"
+gem "govuk_publishing_components", git: "https://github.com/alphagov/govuk_publishing_components.git", branch: "deploy-try-to-update-govukfrontend"
 gem "plek"
 gem "rails-i18n"
 gem "rails_translation_manager"
 gem "rinku", require: "rails_rinku"
 gem "slimmer"
 gem "sprockets-rails"
-gem "uglifier"
+gem "terser"
 
 group :test do
   gem "cucumber-rails", require: false

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:
@@ -165,7 +181,7 @@ GEM
       rubocop
       smart_properties
     erubi (1.12.0)
-    execjs (2.8.1)
+    execjs (2.9.1)
     expgen (0.1.1)
       parslet
     faraday (2.9.0)
@@ -213,15 +229,6 @@ GEM
     govuk_personalisation (0.16.0)
       plek (>= 1.9.0)
       rails (>= 6, < 8)
-    govuk_publishing_components (37.10.0)
-      govuk_app_config
-      govuk_personalisation (>= 0.7.0)
-      kramdown
-      plek
-      rails (>= 6)
-      rouge
-      sprockets (>= 3)
-      sprockets-rails
     govuk_schemas (4.7.0)
       json-schema (>= 2.8, < 4.2)
     govuk_test (4.0.2)
@@ -690,7 +697,6 @@ GEM
       nokogiri (>= 1.12.0)
     sass-embedded (1.69.7)
       google-protobuf (~> 3.25)
-      rake (>= 13.0.0)
     selenium-webdriver (4.16.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -734,15 +740,15 @@ GEM
       tins (~> 1.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
+    terser (1.2.0)
+      execjs (>= 0.3.0, < 3)
     thor (1.3.1)
     timecop (0.9.8)
     timeout (0.4.1)
     tins (1.32.1)
       sync
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    uglifier (4.2.0)
-      execjs (>= 0.3.0, < 3)
     unicode-display_width (2.5.0)
     unparser (0.6.13)
       diff-lcs (~> 1.3)
@@ -779,7 +785,7 @@ DEPENDENCIES
   govuk_ab_testing
   govuk_app_config
   govuk_document_types
-  govuk_publishing_components
+  govuk_publishing_components!
   govuk_schemas
   govuk_test
   i18n-coverage
@@ -799,8 +805,8 @@ DEPENDENCIES
   simplecov-rcov
   slimmer
   sprockets-rails
+  terser
   timecop
-  uglifier
   unparser
   webmock
 

app/assets/config/manifest.js

@@ -1,5 +1,6 @@
 //= link_tree ../images
 //= link application.js
+//= link es6-components.js
 //= link test-dependencies.js
 
 //= link_tree ../builds

app/assets/javascripts/application.js

@@ -1,7 +1,4 @@
-//= require govuk-frontend/govuk/vendor/polyfills/Function/prototype/bind
-
 //= require govuk_publishing_components/lib
-//= require govuk_publishing_components/components/accordion
 //= require govuk_publishing_components/components/details
 //= require govuk_publishing_components/components/govspeak
 //= require govuk_publishing_components/components/image-card

app/assets/javascripts/es6-components.js

@@ -0,0 +1 @@
+//= require govuk_publishing_components/components/accordion

app/assets/javascripts/modules/coronavirus-landing-page.js

@@ -6,6 +6,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   function CoronavirusLandingPage ($module) {
     this.module = $module
+    this.init()
   }
 
   CoronavirusLandingPage.prototype.init = function () {

app/assets/javascripts/modules/list-filter.js

@@ -10,6 +10,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.filterTimeout = null
     this.form = this.$module.querySelector('[data-filter="form"]')
     this.searchResults = this.$module.querySelector('#search_results')
+    this.init()
   }
 
   ListFilter.prototype.init = function () {

app/assets/javascripts/modules/toggle-attribute.js

@@ -4,6 +4,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   function ToggleAttribute ($module) {
     this.$module = $module
+    this.init()
   }
 
   ToggleAttribute.prototype.init = function () {

app/assets/stylesheets/views/_bunting.scss

@@ -13,7 +13,7 @@
   left: 0;
   width: 100%;
   overflow: visible;
-  border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
+  border-top: 1px solid govuk-colour("mid-grey");
   @extend %responsive-bunting-height;
 }
 

app/views/layouts/application.html.erb

@@ -35,6 +35,7 @@
 <html>
 <head>
   <title><%= yield :title %> - <%= t('application.title.suffix')%></title>
+  <%= javascript_include_tag 'es6-components', type: "module" %>
   <%= javascript_include_tag "test-dependencies" if Rails.env.test? %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>

config/environments/production.rb

@@ -25,7 +25,7 @@
   config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
 
   # Compress JavaScript.
-  config.assets.js_compressor = :uglifier
+  config.assets.js_compressor = :terser
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.
   config.assets.compile = false

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

spec/javascripts/modules/list-filter_spec.js

@@ -76,7 +76,8 @@ describe('list-filter.js', function () {
     wrapper.append(items)
     $(document.body).append(wrapper)
 
-    new GOVUK.Modules.ListFilter(wrapper[0]).init()
+    /* eslint-disable no-new */
+    new GOVUK.Modules.ListFilter(wrapper[0])
   })
 
   afterAll(function () {

spec/javascripts/modules/toggle-attribute_spec.js

@@ -10,8 +10,8 @@ describe('A toggle attribute module', function () {
       '<div id="nested-click" data-toggle-attribute="data-state" data-when-closed-text="closed" data-when-open-text="open" data-state="closed">' +
         '<button type="button"><span>Toggler</span></button>' +
       '</div>'
-    var toggle = new GOVUK.Modules.ToggleAttribute(element)
-    toggle.init()
+    /* eslint-disable no-new */
+    new GOVUK.Modules.ToggleAttribute(element)
   })
 
   it('sets the state to open when clicked and back again', function () {

startup.sh

@@ -7,7 +7,7 @@ if [[ $1 == "--live" ]] ; then
   GOVUK_WEBSITE_ROOT=https://www.gov.uk \
   GOVUK_PROXY_STATIC_ENABLED=true \
   PLEK_SERVICE_CONTENT_STORE_URI=${PLEK_SERVICE_CONTENT_STORE_URI-https://www.gov.uk/api} \
-  PLEK_SERVICE_STATIC_URI=${PLEK_SERVICE_STATIC_URI-https://assets.publishing.service.gov.uk} \
+  PLEK_SERVICE_STATIC_URI=${PLEK_SERVICE_STATIC_URI-http://static.dev.gov.uk} \
   PLEK_SERVICE_SEARCH_API_URI=${PLEK_SERVICE_SEARCH_API_URI-https://www.gov.uk/api} \
   ./bin/dev
 else