From 2647ef57bcad19f04f7c3501c925de42aed492d0 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 18 Sep 2024 15:15:15 +0100 Subject: [PATCH 01/14] Update paths for govuk-frontend v5 --- govuk_tech_docs.gemspec | 2 +- lib/govuk_tech_docs.rb | 2 +- lib/source/stylesheets/manifest.css | 2 +- spec/javascripts/support/jasmine.yml | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/govuk_tech_docs.gemspec b/govuk_tech_docs.gemspec index e4cf5e18..8112da0b 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 diff --git a/lib/govuk_tech_docs.rb b/lib/govuk_tech_docs.rb index 696ddb96..d5a1af4b 100644 --- a/lib/govuk_tech_docs.rb +++ b/lib/govuk_tech_docs.rb @@ -32,7 +32,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 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/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 # From 11d609c583849245ee8788d7f99aec3198b0333d Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Tue, 17 Sep 2024 13:49:12 +0100 Subject: [PATCH 02/14] Remove special cases for IE 8, no longer supported we're no longer targeting any IE prior to 11, so removing this out, see: https://github.com/alphagov/govuk-frontend/blob/main/CHANGELOG.md#500-breaking-release --- lib/assets/stylesheets/modules/_search.scss | 4 ---- 1 file changed, 4 deletions(-) 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; - } } } From dc7726ae525eb5c68e32201fd5236ea9a35f9a79 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Tue, 17 Sep 2024 13:50:43 +0100 Subject: [PATCH 03/14] Update govuk-frontend to v5.6.0 --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) 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" From ef9f452d68beeb3d37026e0c0ed2a29a98dc2248 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Tue, 17 Sep 2024 13:52:20 +0100 Subject: [PATCH 04/14] Use "index" files for Sass imports Import using "all" has been deprecated https://github.com/alphagov/govuk-frontend/releases#:~:text=Importing%20layers%20using%20all%20files --- lib/assets/stylesheets/_govuk_tech_docs.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/assets/stylesheets/_govuk_tech_docs.scss b/lib/assets/stylesheets/_govuk_tech_docs.scss index 4006d118..ce3bcc48 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,8 +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"; From a27781dfc70404b3831605005ab5666c1cb0bd75 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Tue, 17 Sep 2024 14:30:24 +0100 Subject: [PATCH 05/14] Create an new javascript entry point for govuk-frontend As govuk-frontend encourages its use within script type=module, we need to create a separate entry for it as we do not want any downstrema project to change the way they write their own javascript. This PR - adds a new zgovuk_frontend.js` include to core layout - removes `all.js` import from `govuk_tech_docs.js` - creates a new `govuk_frontend_all.js` entry in the lib that imports `all.bundle.js` from the NPM package - adds a new `govuk_frontend.js` entry point in the example project that pulls in the `govuk_frontend_all.js` from the lib - adds new minifier - https://github.com/ahorek/terser-ruby as the built-in one doesn't support ES6 --- example/source/javascripts/govuk_frontend.js | 1 + govuk_tech_docs.gemspec | 3 ++- lib/assets/javascripts/govuk_frontend_all.js | 3 +++ lib/assets/javascripts/govuk_tech_docs.js | 2 -- lib/govuk_tech_docs.rb | 3 ++- lib/source/layouts/core.erb | 3 ++- 6 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 example/source/javascripts/govuk_frontend.js create mode 100644 lib/assets/javascripts/govuk_frontend_all.js 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 8112da0b..101addbe 100644 --- a/govuk_tech_docs.gemspec +++ b/govuk_tech_docs.gemspec @@ -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,7 @@ 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_development_dependency "byebug" spec.add_development_dependency "capybara", "~> 3.32" 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/govuk_tech_docs.rb b/lib/govuk_tech_docs.rb index d5a1af4b..2c4681cc 100644 --- a/lib/govuk_tech_docs.rb +++ b/lib/govuk_tech_docs.rb @@ -10,6 +10,7 @@ require "nokogiri" require "chronic" require "active_support/all" +require "terser" require "govuk_tech_docs/redirects" require "govuk_tech_docs/table_of_contents/helpers" @@ -57,7 +58,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/source/layouts/core.erb b/lib/source/layouts/core.erb index df22efff..c01770f5 100644 --- a/lib/source/layouts/core.erb +++ b/lib/source/layouts/core.erb @@ -23,7 +23,7 @@ - +
@@ -75,6 +75,7 @@
<%= partial 'layouts/analytics' %> + <%= javascript_include_tag :govuk_frontend, :type => "module" %> <%= javascript_include_tag :application %> From 8973a58f73ea30cbf833c63781729acd728aaa46 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Thu, 19 Sep 2024 12:56:03 +0100 Subject: [PATCH 06/14] Use sassc-embeded to compile Sass To do: see if we can configure to silence warning Built-in sassc compiler doesn't compile stylesheet do to them, containing source maps https://github.com/sass-contrib/sassc-embedded-shim-ruby --- govuk_tech_docs.gemspec | 1 + lib/govuk_tech_docs.rb | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/govuk_tech_docs.gemspec b/govuk_tech_docs.gemspec index 101addbe..5bf199cf 100644 --- a/govuk_tech_docs.gemspec +++ b/govuk_tech_docs.gemspec @@ -53,6 +53,7 @@ Gem::Specification.new do |spec| 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/govuk_tech_docs.rb b/lib/govuk_tech_docs.rb index 2c4681cc..21299529 100644 --- a/lib/govuk_tech_docs.rb +++ b/lib/govuk_tech_docs.rb @@ -11,6 +11,7 @@ require "chronic" require "active_support/all" require "terser" +require "sassc-embedded" require "govuk_tech_docs/redirects" require "govuk_tech_docs/table_of_contents/helpers" @@ -51,6 +52,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 From 94bd0371a1c2284e559ce9e8bd5380a4c3d4c00d Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 18 Sep 2024 09:48:02 +0100 Subject: [PATCH 07/14] CSS: remove crown adjustment No longer needed with the upgrade to v5 --- lib/assets/stylesheets/_govuk_tech_docs.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/lib/assets/stylesheets/_govuk_tech_docs.scss b/lib/assets/stylesheets/_govuk_tech_docs.scss index ce3bcc48..e081631b 100644 --- a/lib/assets/stylesheets/_govuk_tech_docs.scss +++ b/lib/assets/stylesheets/_govuk_tech_docs.scss @@ -27,9 +27,3 @@ $govuk-new-link-styles: true; @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; -} From 3e578782fdc1a9f369090a1df6bfd48caf2e57fa Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 18 Sep 2024 11:05:48 +0100 Subject: [PATCH 08/14] Update crown and header - update to the new crown svg https://github.com/alphagov/govuk-frontend/releases#:~:text=If%20you%E2%80%99re%20not%20using%20the%20Nunjucks%20macro%2C%20locate%20the%20SVG%20code%20for%20the%20existing%20logo%20and%20replace%20it%20with%20this%20updated%20SVG. - remove redundant markup https://github.com/alphagov/govuk-frontend/releases?page=2#:~:text=Update%20the%20GOV.UK%20logo --- lib/source/layouts/_header.erb | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) 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] %> From 01829189c5a9888f532bb06f608035c011e5d109 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Wed, 18 Sep 2024 10:19:29 +0100 Subject: [PATCH 09/14] Use new favicons and assets https://github.com/alphagov/govuk-frontend/releases?page=2#:~:text=Check%20your%20favicons%2C%20app%20icons%20and%20OpenGraph%20image%20still%20work Also remove the root one --- lib/govuk_tech_docs/meta_tags.rb | 2 +- lib/source/favicon.ico | Bin 14254 -> 0 bytes lib/source/layouts/core.erb | 5 +++++ spec/govuk_tech_docs/meta_tags_spec.rb | 4 ++-- 4 files changed, 8 insertions(+), 3 deletions(-) delete mode 100644 lib/source/favicon.ico 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 20129a0bbab925707308d7681e4470f62a010b51..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 14254 zcmeI0ziVVw6vt0+6|-0b3+spqTLxFH18O0Q5Lg9KSR?ocq_7pHv6Q5+m8215n>6I5enMr2Eci_%_@7{C1=jT1|y@}Y07h-2;C+BE&lPW~T1ub)NSPXqq^H0jHT zcOHKG?BV;d{l)hmKl}Z+lUJTUdGyO4KmHo=`41ocl&p_W?w@VHd$#@c(-#k(K01l` z?B&UKAb#-LSKlzlho5v)yz%zUyd}GDZkPKdPP;kwa}dvt>I$a0H;yp|8&d;$E~j~3 zr+I$6kv(FtZOBL-EHGQ^JkNi&iaKTAm}U>D4)*#8%vSx`ulisXUI(*9KXJnkM)t`r z4^o{ddU|@=?Q0!g*4TqbMBKp;UP~SodvYgxiMQKNF0*e-O?U12g%=sgg9WwZ z0Q(vFEa-IN6ZSKs6HNBGMhAmy*4RUrWbhwbzyd=&va6isyW&YqOF~8j9z*1NS_6Xt zCNwJs;=%5G9(Ml72K;0l|KL-u(Jz15g9ly+S!@D}bqLwgZ{6$ME6%LTChCZLc&H=p zMO?F{8ql8W0uvj=Bc1bR>F~ILfsZ~MS9wHs9{#+2;)@?GXGd7@B7>~fT4v;^Rfw5; za_aeL!GQ-EWNVmx81OrB-^U9sab|Gc$2SBMo1JF)P3}cp_vs&k35L#!&L4F}-7?%y z>DDa$@Q7bENsO>jnBr}j-A|ooQjEbYCU~;#Fin_ zeINgAtm_$v4P4)bj#-%0x%!OP|16ntFYY`~4KYua^%4J5?BzJjv8Deh-preS(OGF9UkV=&ghSOaUT0lu?%-{zf!_YuDPW_`ac+Oxm}Tkk*UT!kKgpVND#&wOL? zZL`SmZ#Bo%^(x*U`JZcDCdVJje(iTfr0td6$oi))4p*x@+Iv z>=AG2WQI@o<#)W+org6rAnh}w8$QLLjF0p7T~jL%|Dm7*dx!}=O}3G5XmW*ohAC(Fs3F19gq1@A(*=x0}l@Cm?;YXMH zCb=1^&vUBWg4b%xvV7{b(#?!bt+?fx5>Bf;eCPv*F+?}AH3Fwqzus>ghZBA7aT6u|AN#(OZ{oMIVo?0A+oUvAWOTL=@Wq&5; zC6#qhv;Qu7bj>zB+uT>Lq1xG{zMThu%lBEwTje!A@IFgTcz>Y728br INb8EgUlZ|}Qvd(} diff --git a/lib/source/layouts/core.erb b/lib/source/layouts/core.erb index c01770f5..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 %> 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", From 11ed1fda8f2292218a28019fd9d896f0abb6dea6 Mon Sep 17 00:00:00 2001 From: Jani Kraner Date: Thu, 19 Sep 2024 16:02:46 +0100 Subject: [PATCH 10/14] Add to changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) 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. From fe34f320f2da7c72714c57c67658654c63e1ed53 Mon Sep 17 00:00:00 2001 From: Marco Tranchino Date: Mon, 23 Sep 2024 11:32:27 +0100 Subject: [PATCH 11/14] Fix intermittent tests by cleaning up after each --- spec/javascripts/table-of-contents-spec.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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 () { From 30322df4a909557f0f68fa1a883a26a22fffa937 Mon Sep 17 00:00:00 2001 From: Marco Tranchino Date: Mon, 23 Sep 2024 15:21:38 +0100 Subject: [PATCH 12/14] Prevent access to this.$sticky unless it is ready This change adds checks to ensure that this.$sticky exists and it is visible before trying to access its methods. Further information at https://github.com/alphagov/tech-docs-gem/pull/368 --- lib/assets/javascripts/_modules/table-of-contents.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/lib/assets/javascripts/_modules/table-of-contents.js b/lib/assets/javascripts/_modules/table-of-contents.js index 850d7285..5fe2f780 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 && 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) + } } } From eab85ee822235e9272a65c28798f4af87111cf72 Mon Sep 17 00:00:00 2001 From: Marco Tranchino Date: Tue, 24 Sep 2024 16:59:22 +0100 Subject: [PATCH 13/14] Update JQuery visibility check on sticky element Following a PR review[1], this commit changes the test on this.$sticky, in order to verify if the object actually contains any elements. Further details in the PR[2]. [1] https://github.com/alphagov/tech-docs-gem/pull/368#issuecomment-2370689455 [2] https://github.com/alphagov/tech-docs-gem/pull/368 --- lib/assets/javascripts/_modules/table-of-contents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/assets/javascripts/_modules/table-of-contents.js b/lib/assets/javascripts/_modules/table-of-contents.js index 5fe2f780..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 && 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 From 0882b972aacff26021b0f632c7294afbcbb4ce49 Mon Sep 17 00:00:00 2001 From: Marco Tranchino Date: Fri, 20 Sep 2024 10:14:08 +0100 Subject: [PATCH 14/14] Introduce a custom module to silence dart sass warnings With this change, we have defined a custom SassWarningSupressor module that overrides the warn method so that we can ignore messages containing 'sass' or 'dart-sass' only. This is needed so that we can avoid sass warnings in downstream projects. --- lib/govuk_tech_docs.rb | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/lib/govuk_tech_docs.rb b/lib/govuk_tech_docs.rb index 21299529..e76e6432 100644 --- a/lib/govuk_tech_docs.rb +++ b/lib/govuk_tech_docs.rb @@ -25,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 #