Use govuk frontend v5

Gemfile

@@ -11,7 +11,7 @@ gem "gds-api-adapters"
 gem "gds_zendesk"
 gem "govspeak"
 gem "govuk_app_config"
-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 "httparty"
 gem "json"
@@ -20,7 +20,7 @@ gem "parser"
 gem "plek"
 gem "rails-i18n"
 gem "railties"
-gem "slimmer"
+gem "slimmer", git: "https://github.com/alphagov/slimmer.git", branch: "update-body-classes-for-govuk-frontend-v5"
 gem "sprockets-rails"
 gem "terser"
 gem "tilt"

Gemfile.lock

@@ -1,3 +1,32 @@
+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
+
+GIT
+  remote: https://github.com/alphagov/slimmer.git
+  revision: 93b3bdd0ab07c54c6f95dfedb0e466d1e7328b47
+  branch: update-body-classes-for-govuk-frontend-v5
+  specs:
+    slimmer (18.4.0)
+      json
+      nokogiri (~> 1.7)
+      null_logger
+      plek (>= 1.1.0)
+      rack (>= 3.0)
+      rest-client
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -629,13 +658,6 @@ GEM
     simplecov-rcov (0.3.7)
       simplecov (>= 0.4.1)
     simplecov_json_formatter (0.1.4)
-    slimmer (18.4.0)
-      json
-      nokogiri (~> 1.7)
-      null_logger
-      plek (>= 1.1.0)
-      rack (>= 3.0)
-      rest-client
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
@@ -693,7 +715,7 @@ DEPENDENCIES
   gds_zendesk
   govspeak
   govuk_app_config
-  govuk_publishing_components
+  govuk_publishing_components!
   govuk_schemas
   govuk_test
   htmlentities
@@ -717,7 +739,7 @@ DEPENDENCIES
   shoulda
   simplecov
   simplecov-rcov
-  slimmer
+  slimmer!
   sprockets-rails
   terser
   tilt

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

app/assets/javascripts/application.js

@@ -1,10 +1,7 @@
 //= 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
 //= require modules/track-responses

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

app/assets/javascripts/modules/track-responses.js

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

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.

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";
 

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 %>

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

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} \
   ./bin/dev
 else
   echo "ERROR: other startup modes are not supported"