diff --git a/CHANGELOG.md b/CHANGELOG.md index 863131c3..a667169e 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/example/source/javascripts/govuk_frontend.js b/example/source/javascripts/govuk_frontend.js new file mode 100644 index 00000000..c3588dfe --- /dev/null +++ b/example/source/javascripts/govuk_frontend.js @@ -0,0 +1 @@ +//= require govuk_frontend_all diff --git a/govuk_tech_docs.gemspec b/govuk_tech_docs.gemspec index e4cf5e18..5bf199cf 100644 --- a/govuk_tech_docs.gemspec +++ b/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" diff --git a/lib/assets/javascripts/_modules/table-of-contents.js b/lib/assets/javascripts/_modules/table-of-contents.js index 850d7285..b24257e7 100644 --- a/lib/assets/javascripts/_modules/table-of-contents.js +++ b/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) + } } } diff --git a/lib/assets/javascripts/govuk_frontend_all.js b/lib/assets/javascripts/govuk_frontend_all.js new file mode 100644 index 00000000..3e059c1b --- /dev/null +++ b/lib/assets/javascripts/govuk_frontend_all.js @@ -0,0 +1,3 @@ +//= require govuk/all.bundle.js +const { initAll } = window.GOVUKFrontend +initAll() diff --git a/lib/assets/javascripts/govuk_tech_docs.js b/lib/assets/javascripts/govuk_tech_docs.js index 6c657e52..cb874c3c 100644 --- a/lib/assets/javascripts/govuk_tech_docs.js +++ b/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() }) diff --git a/lib/assets/stylesheets/_govuk_tech_docs.scss b/lib/assets/stylesheets/_govuk_tech_docs.scss index 4006d118..e081631b 100644 --- a/lib/assets/stylesheets/_govuk_tech_docs.scss +++ b/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; -} diff --git a/lib/assets/stylesheets/modules/_search.scss b/lib/assets/stylesheets/modules/_search.scss index 9bde54cd..401de5f9 100644 --- a/lib/assets/stylesheets/modules/_search.scss +++ b/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; - } } } diff --git a/lib/govuk_tech_docs.rb b/lib/govuk_tech_docs.rb index 696ddb96..e76e6432 100644 --- a/lib/govuk_tech_docs.rb +++ b/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,6 +64,9 @@ 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 @@ -57,7 +74,7 @@ def self.configure(context, options = {}) 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") diff --git a/lib/govuk_tech_docs/meta_tags.rb b/lib/govuk_tech_docs/meta_tags.rb index 76850e1b..56ade52f 100644 --- a/lib/govuk_tech_docs/meta_tags.rb +++ b/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 diff --git a/lib/source/favicon.ico b/lib/source/favicon.ico deleted file mode 100644 index 20129a0b..00000000 Binary files a/lib/source/favicon.ico and /dev/null differ diff --git a/lib/source/layouts/_header.erb b/lib/source/layouts/_header.erb index 9bb7bd0e..00c7b9e5 100644 --- a/lib/source/layouts/_header.erb +++ b/lib/source/layouts/_header.erb @@ -8,22 +8,18 @@ <% end %> <% if config[:tech_docs][:show_govuk_logo] %> - - GOV.UK - - <% end %> <%= config[:tech_docs][:service_name] %> diff --git a/lib/source/layouts/core.erb b/lib/source/layouts/core.erb index df22efff..d86aa1d3 100644 --- a/lib/source/layouts/core.erb +++ b/lib/source/layouts/core.erb @@ -10,6 +10,11 @@ <%= stylesheet_link_tag :manifest %> + + + + + <% meta_tags.tags.each do |name, content| %> <%= tag :meta, name: name, content: content %> @@ -23,7 +28,7 @@ - +
@@ -75,6 +80,7 @@
<%= partial 'layouts/analytics' %> + <%= javascript_include_tag :govuk_frontend, :type => "module" %> <%= javascript_include_tag :application %> diff --git a/lib/source/stylesheets/manifest.css b/lib/source/stylesheets/manifest.css index 10c45dcb..2a1daf9f 100644 --- a/lib/source/stylesheets/manifest.css +++ b/lib/source/stylesheets/manifest.css @@ -1,3 +1,3 @@ -//= link_tree ../../../node_modules/govuk-frontend/govuk/assets +//= link_tree ../../../node_modules/govuk-frontend/dist/govuk/assets //= require screen diff --git a/package-lock.json b/package-lock.json index eca53594..8843d2a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,7 @@ "name": "tech-docs-gem", "license": "MIT", "dependencies": { - "govuk-frontend": "~4.7.0" + "govuk-frontend": "~5.6.0" }, "devDependencies": { "standard": "^14.3.4" @@ -1053,9 +1053,9 @@ } }, "node_modules/govuk-frontend": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.7.0.tgz", - "integrity": "sha512-0OsdCusF5qvLWwKziU8zqxiC0nq6WP0ZQuw51ymZ/1V0tO71oIKMlSLN2S9bm8RcEGSoidPt2A34gKxePrLjvg==", + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.6.0.tgz", + "integrity": "sha512-yNA4bL7i7mNrg36wPNZ3RctHo9mjl82Phs8MWs1lwovxJuQ4ogEo/XWn2uB1HxkXNqgMlW4wnd0iiKgRMfxYfw==", "engines": { "node": ">= 4.2.0" } @@ -3508,9 +3508,9 @@ } }, "govuk-frontend": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.7.0.tgz", - "integrity": "sha512-0OsdCusF5qvLWwKziU8zqxiC0nq6WP0ZQuw51ymZ/1V0tO71oIKMlSLN2S9bm8RcEGSoidPt2A34gKxePrLjvg==" + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-5.6.0.tgz", + "integrity": "sha512-yNA4bL7i7mNrg36wPNZ3RctHo9mjl82Phs8MWs1lwovxJuQ4ogEo/XWn2uB1HxkXNqgMlW4wnd0iiKgRMfxYfw==" }, "graceful-fs": { "version": "4.2.6", diff --git a/package.json b/package.json index 5a42330c..9d3cf191 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "lint": "standard" }, "dependencies": { - "govuk-frontend": "~4.7.0" + "govuk-frontend": "~5.6.0" }, "devDependencies": { "standard": "^14.3.4" diff --git a/spec/govuk_tech_docs/meta_tags_spec.rb b/spec/govuk_tech_docs/meta_tags_spec.rb index 1b1b69fd..cb85ec2c 100644 --- a/spec/govuk_tech_docs/meta_tags_spec.rb +++ b/spec/govuk_tech_docs/meta_tags_spec.rb @@ -50,7 +50,7 @@ def generate_title(site_name:, page_title:) "description" => "The description.", "twitter:card" => "summary", "twitter:domain" => "www.example.org", - "twitter:image" => "https://www.example.org/images/govuk-large.png", + "twitter:image" => "https://www.example.org/assets/govuk/assets/images/govuk-opengraph-image.png", "twitter:title" => "The Title - Test Site", "twitter:url" => "https://www.example.org/foo.html", ) @@ -139,7 +139,7 @@ def generate_title(site_name:, page_title:) expect(og_tags).to eql( "og:description" => "The description.", - "og:image" => "https://www.example.org/images/govuk-large.png", + "og:image" => "https://www.example.org/assets/govuk/assets/images/govuk-opengraph-image.png", "og:site_name" => "Test Site", "og:title" => "The Title", "og:type" => "object", diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml index 56eed2ae..d24fb719 100644 --- a/spec/javascripts/support/jasmine.yml +++ b/spec/javascripts/support/jasmine.yml @@ -13,7 +13,7 @@ src_files: - lib/assets/javascripts/_vendor/jquery.js - lib/assets/javascripts/**/*.js - - node_modules/govuk-frontend/govuk/all.js + - "!lib/assets/javascripts/govuk_frontend_all.js" # helpers # diff --git a/spec/javascripts/table-of-contents-spec.js b/spec/javascripts/table-of-contents-spec.js index 0e398557..1d94a753 100644 --- a/spec/javascripts/table-of-contents-spec.js +++ b/spec/javascripts/table-of-contents-spec.js @@ -7,6 +7,7 @@ describe('Table of contents', function () { var $toc var $closeButton var $openButton + var $tocStickyHeader var module beforeAll(function () { @@ -64,13 +65,18 @@ describe('Table of contents', function () { $closeButton = $toc.find('.js-toc-close') $openButton = $html.find('.js-toc-show') + + $tocStickyHeader = $html.find('.toc-show') }) afterEach(function () { // clear up any classes left on - $html.removeClass('.toc-open') + $html.removeClass('toc-open') $html.find('body #toc-heading').remove() $html.find('body .toc').remove() + if ($tocStickyHeader && $tocStickyHeader.length) { + $tocStickyHeader.remove() + } }) describe('when the module is started', function () {