Merge pull request #363 from alphagov/use-govuk-frontend-v5

Upgrade to use govuk-frontend v5

Author: huwd

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
 ## Unreleased
+- Upgrade to govuk-frontend v5.6.0 and introduce new Javascript entry point
+  BREAKING: drop support for IE8
+
+You need to
+  - create a `govuk_frontend.js` file your project’s `source/assets/javascripts` directory
+  - add `//= require govuk_frontend_all` into it
 
 - BREAKING: drop support for end-of-life Ruby versions 2.7 and 3.0. The minimum Ruby version is now 3.1.
 - Update gem dependencies.

example/source/javascripts/govuk_frontend.js

@@ -0,0 +1 @@
+//= require govuk_frontend_all

govuk_tech_docs.gemspec

@@ -7,7 +7,7 @@ require "govuk_tech_docs/version"
 `npm install`
 abort "npm install failed" unless $CHILD_STATUS.success?
 
-unless File.exist?("node_modules/govuk-frontend/govuk/all.scss")
+unless File.exist?("node_modules/govuk-frontend/dist/govuk/all.scss")
   abort "govuk-frontend npm package not installed"
 end
 
@@ -25,7 +25,7 @@ Gem::Specification.new do |spec|
   files_in_git = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
 
   # Include assets from GOV.UK Frontend library in the distributed gem
-  govuk_frontend_assets = Dir["node_modules/govuk-frontend/**/*.{scss,js,woff,woff2,png,svg,ico}"]
+  govuk_frontend_assets = Dir["node_modules/govuk-frontend/**/*.{scss,js,mjs,woff,woff2,png,svg,ico}"]
 
   spec.files         = files_in_git + govuk_frontend_assets
 
@@ -52,6 +52,8 @@ Gem::Specification.new do |spec|
   spec.add_dependency "nokogiri"
   spec.add_dependency "openapi3_parser", "~> 0.9.0"
   spec.add_dependency "redcarpet", "~> 3.6"
+  spec.add_dependency "terser", "~> 1.2.3"
+  spec.add_dependency "sassc-embedded", "~> 1.78.0"
 
   spec.add_development_dependency "byebug"
   spec.add_development_dependency "capybara", "~> 3.32"

lib/assets/javascripts/_modules/table-of-contents.js

@@ -10,7 +10,7 @@
     this.isMonitoring = false
   }
   StickyOverlapMonitors.prototype.run = function () {
-    var stickyIsVisible = this.$sticky.is(':visible')
+    var stickyIsVisible = this.$sticky.length > 0 && this.$sticky.is(':visible')
     if (stickyIsVisible && !this.isMonitoring) {
       document.addEventListener('focus', this.onFocus, true)
       this.isMonitoring = true
@@ -26,11 +26,13 @@
 
     if (!applicable) { return }
 
-    var stickyEdge = this.$sticky.get(0).getBoundingClientRect().bottom + this.offset
-    var diff = focused.getBoundingClientRect().top - stickyEdge
+    if (this.$sticky && this.$sticky.is(':visible') && this.$sticky.get(0)) {
+      var stickyEdge = this.$sticky.get(0).getBoundingClientRect().bottom + this.offset
+      var diff = focused.getBoundingClientRect().top - stickyEdge
 
-    if (diff < 0) {
-      $(window).scrollTop($(window).scrollTop() + diff)
+      if (diff < 0) {
+        $(window).scrollTop($(window).scrollTop() + diff)
+      }
     }
   }
 

lib/assets/javascripts/govuk_frontend_all.js

@@ -0,0 +1,3 @@
+//= require govuk/all.bundle.js
+const { initAll } = window.GOVUKFrontend
+initAll()

lib/assets/javascripts/govuk_tech_docs.js

@@ -4,9 +4,7 @@
 //= require _vendor/lodash
 //= require _analytics
 //= require _start-modules
-//= require govuk/all.js
 
 $(function () {
   $('.fixedsticky').fixedsticky()
-  GOVUKFrontend.initAll()
 })

lib/assets/stylesheets/_govuk_tech_docs.scss

@@ -11,8 +11,8 @@ $govuk-assets-path: "/assets/govuk/assets/" !default;
 $govuk-new-link-styles: true;
 @import "govuk/base";
 
-@import "govuk/core/all";
-@import "govuk/objects/all";
+@import "govuk/core/index";
+@import "govuk/objects/index";
 
 @import "govuk/components/footer/index";
 @import "govuk/components/header/index";
@@ -22,14 +22,8 @@ $govuk-new-link-styles: true;
 @import "govuk/components/skip-link/index";
 @import "govuk/components/warning-text/index";
 
-@import "govuk/utilities/all";
-@import "govuk/overrides/all";
+@import "govuk/utilities/index";
+@import "govuk/overrides/index";
 
 @import "core";
 @import "vendor/fixedsticky";
-
-// manual Tudor Crown spacing adjustment from govuk-frontend 4.8
-.govuk-header__logotype-crown[width="32"] {
-  top: -3px;
-  margin-right: 2px;
-}

lib/assets/stylesheets/modules/_search.scss

@@ -45,10 +45,6 @@ $input-size: 40px;
     outline: $govuk-focus-width solid $govuk-focus-colour;
     outline-offset: 0;
     box-shadow: inset 0 0 0 $govuk-border-width-form-element * 2 govuk-colour("black");
-
-    @include govuk-if-ie8 {
-      border-width: $govuk-border-width-form-element * 2;
-    }
   }
 }
 

lib/govuk_tech_docs.rb

@@ -10,6 +10,8 @@
 require "nokogiri"
 require "chronic"
 require "active_support/all"
+require "terser"
+require "sassc-embedded"
 
 require "govuk_tech_docs/redirects"
 require "govuk_tech_docs/table_of_contents/helpers"
@@ -23,6 +25,18 @@
 require "govuk_tech_docs/warning_text_extension"
 require "govuk_tech_docs/api_reference/api_reference_extension"
 
+module SassWarningSupressor
+  def warn(message)
+    if message.to_s.match?(/Sass|dart-sass/i)
+      # suppress dart sass warnings
+    else
+      super
+    end
+  end
+end
+
+Warning.extend(SassWarningSupressor)
+
 module GovukTechDocs
   # Configure the tech docs template
   #
@@ -32,7 +46,7 @@ module GovukTechDocs
   def self.configure(context, options = {})
     context.activate :sprockets
 
-    context.sprockets.append_path File.join(__dir__, "../node_modules/govuk-frontend/")
+    context.sprockets.append_path File.join(__dir__, "../node_modules/govuk-frontend/dist")
     context.sprockets.append_path File.join(__dir__, "./source")
 
     context.activate :syntax
@@ -50,14 +64,17 @@ def self.configure(context, options = {})
                 tables: true,
                 no_intra_emphasis: true
 
+    # this doesnt seem to work
+    context.set :sass, { output_style: "nested", quiet_deps: true }
+
     # Reload the browser automatically whenever files change
     context.configure :development do
       activate :livereload, options[:livereload].to_h
     end
 
     context.configure :build do
       activate :autoprefixer
-      activate :minify_javascript, ignore: ["/raw_assets/*"]
+      activate :minify_javascript, compressor: Terser.new, ignore: ["/raw_assets/*"]
     end
 
     config_file = ENV.fetch("CONFIG_FILE", "config/tech-docs.yml")

lib/govuk_tech_docs/meta_tags.rb

@@ -48,7 +48,7 @@ def canonical_url
     attr_reader :config, :current_page
 
     def page_image
-      "#{host}/images/govuk-large.png"
+      "#{host}/assets/govuk/assets/images/govuk-opengraph-image.png"
     end
 
     def site_name