From dc4905168145a810ec3765cd669d0ea024cb4aec Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 12 Aug 2019 08:00:45 +0100 Subject: [PATCH 1/5] Bump components gem to 18 --- Gemfile | 2 +- Gemfile.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Gemfile b/Gemfile index 4faf49f07..30e4e7dc2 100644 --- a/Gemfile +++ b/Gemfile @@ -8,7 +8,7 @@ gem 'gds-api-adapters', '~> 59.6' gem 'govuk_ab_testing', '~> 2.4.1' gem 'govuk_app_config', '~> 1.20.2' gem 'govuk_document_types', '~> 0.9.2' -gem 'govuk_publishing_components', '~> 17.21.0' +gem 'govuk_publishing_components', '~> 18.1.2' gem 'rails', '~> 5.2.3' gem 'slimmer', '~> 13.1.0' diff --git a/Gemfile.lock b/Gemfile.lock index ab24a52e1..e4a112718 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -137,7 +137,7 @@ GEM govuk_frontend_toolkit (8.2.0) railties (>= 3.1.0) sass (>= 3.2.0) - govuk_publishing_components (17.21.0) + govuk_publishing_components (18.1.2) gds-api-adapters govuk_app_config govuk_frontend_toolkit @@ -199,7 +199,7 @@ GEM multipart-post (2.1.1) netrc (0.11.0) nio4r (2.4.0) - nokogiri (1.10.3) + nokogiri (1.10.4) mini_portile2 (~> 2.4.0) null_logger (0.0.1) oj (3.8.1) @@ -241,7 +241,7 @@ GEM rails-dom-testing (2.0.3) activesupport (>= 4.2.0) nokogiri (>= 1.6) - rails-html-sanitizer (1.1.0) + rails-html-sanitizer (1.2.0) loofah (~> 2.2, >= 2.2.2) railties (5.2.3) actionpack (= 5.2.3) @@ -263,7 +263,7 @@ GEM http-cookie (>= 1.0.2, < 2.0) mime-types (>= 1.16, < 4.0) netrc (~> 0.8) - rouge (3.7.0) + rouge (3.8.0) rspec-core (3.8.0) rspec-support (~> 3.8.0) rspec-expectations (3.8.2) @@ -396,7 +396,7 @@ DEPENDENCIES govuk_app_config (~> 1.20.2) govuk_document_types (~> 0.9.2) govuk_frontend_toolkit (~> 8.2) - govuk_publishing_components (~> 17.21.0) + govuk_publishing_components (~> 18.1.2) govuk_schemas (~> 4.0) govuk_test jasmine-rails From c4a5752b51494a65bf910b7189c25a0e03f8fa06 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 16 Aug 2019 09:50:34 +0100 Subject: [PATCH 2/5] Add legacy compatibility flags --- app/assets/stylesheets/application.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 8284f4ebd..7190382b3 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,3 +1,6 @@ +$govuk-compatibility-govukfrontendtoolkit: true; +$govuk-compatibility-govuktemplate: true; + @import 'not-ie-conditional'; @import 'reset'; @import 'govuk_publishing_components/all_components'; From e45239b40754b8d1f600d6a2be75b7c974d3dd44 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 16 Aug 2019 09:50:56 +0100 Subject: [PATCH 3/5] Update main stylesheet --- app/assets/stylesheets/finder_frontend.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/finder_frontend.scss b/app/assets/stylesheets/finder_frontend.scss index c18fde9c0..4d1fc37ff 100644 --- a/app/assets/stylesheets/finder_frontend.scss +++ b/app/assets/stylesheets/finder_frontend.scss @@ -80,7 +80,7 @@ .published-by { @include govuk-font(14); display: block; - color: govuk-colour("grey-1"); + color: govuk-colour("dark-grey", $legacy: "grey-1"); } .debug-results { @@ -95,7 +95,7 @@ } .debug-results--meta { - color: govuk-colour("bright-red"); + color: govuk-colour("red"); } .filtered-results__group { @@ -119,7 +119,7 @@ padding: 5px; &:nth-child(odd) { - background-color: govuk-colour("grey-4"); + background-color: govuk-colour("light-grey", $legacy: "grey-4"); } } @@ -155,9 +155,9 @@ display: block; position: relative; padding: 5px; - border: 1px solid govuk-colour("grey-1"); + border: 1px solid govuk-colour("dark-grey", $legacy: "grey-1"); border-radius: 5px; - background-color: govuk-colour("grey-4"); + background-color: govuk-colour("light-grey", $legacy: "grey-4"); .js-enabled & { padding: 8px 7px 7px 23px; From 58428849beecc08a20129063a04a90ae713ad1de Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 12 Aug 2019 08:01:39 +0100 Subject: [PATCH 4/5] Fix expander focus style --- app/assets/stylesheets/components/_expander.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/_expander.scss b/app/assets/stylesheets/components/_expander.scss index 07745e0e5..2a666350f 100644 --- a/app/assets/stylesheets/components/_expander.scss +++ b/app/assets/stylesheets/components/_expander.scss @@ -35,7 +35,6 @@ .app-c-expander__button { @include govuk-font(19, $weight: bold); - @include govuk-focusable; position: relative; width: 100%; border: 0; @@ -43,6 +42,10 @@ background: none; text-align: left; cursor: pointer; + + &:focus { + @include govuk-focused-text; + } } .js-enabled { From 3bb7cfcc008362c4a5a651c8b050732f079f79f2 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 15 Aug 2019 14:53:16 +0100 Subject: [PATCH 5/5] Update option select component styles --- .../javascripts/components/option-select.js | 2 +- .../components/_option-select.scss | 46 +++++++++---------- 2 files changed, 22 insertions(+), 26 deletions(-) diff --git a/app/assets/javascripts/components/option-select.js b/app/assets/javascripts/components/option-select.js index 36f6a3ce0..77974602a 100644 --- a/app/assets/javascripts/components/option-select.js +++ b/app/assets/javascripts/components/option-select.js @@ -140,7 +140,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; OptionSelect.prototype.attachCheckedCounter = function attachCheckedCounter (checkedString) { this.$optionSelect.find('.js-container-head') - .after('
' + checkedString + '
') + .after('
' + checkedString + '
') } OptionSelect.prototype.updateCheckedCount = function updateCheckedCount () { diff --git a/app/assets/stylesheets/components/_option-select.scss b/app/assets/stylesheets/components/_option-select.scss index 1003236f4..23f62b100 100644 --- a/app/assets/stylesheets/components/_option-select.scss +++ b/app/assets/stylesheets/components/_option-select.scss @@ -1,7 +1,7 @@ .app-c-option-select { position: relative; padding: 0 0 1px; - background-color: govuk-colour("grey-3"); + background-color: govuk-colour("light-grey", $legacy: "grey-3"); margin-bottom: govuk-spacing(6); @include media(desktop) { @@ -45,7 +45,8 @@ } .app-c-option-select__button { - z-index: 100; + position: relative; + z-index: 1; padding-right: 40px; width: 100%; background: none; @@ -55,13 +56,13 @@ &:hover, &:hover + .app-c-option-select__selected-counter { - background-color: govuk-colour("grey-2"); + background-color: govuk-colour("mid-grey", $legacy: "grey-2"); } &:hover ~ .app-c-option-select__container, &:hover ~ .app-c-option-select__selected-counter, &:hover ~ .app-c-option-select__filter { - border-color: govuk-colour("grey-2"); + border-color: govuk-colour("mid-grey", $legacy: "grey-2"); } &::-moz-focus-inner { @@ -70,15 +71,17 @@ &:focus { outline: none; + @include govuk-focused-text; + + & ~ .app-c-option-select__selected-counter { + position: relative; + z-index: 2; + @include govuk-focused-text; + } - &:after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - outline: solid 3px govuk-colour('yellow'); + & ~ .app-c-option-select__container, + & ~ .app-c-option-select__filter { + border-color: govuk-colour("black"); } } @@ -103,7 +106,7 @@ max-height: 200px; overflow-y: auto; overflow-x: hidden; - border: govuk-spacing(1) solid govuk-colour("grey-3"); + border: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3"); background-color: govuk-colour("white"); &:focus { @@ -118,8 +121,8 @@ .app-c-option-select__filter { position: relative; background: govuk-colour('white'); - border-left: govuk-spacing(1) solid govuk-colour("grey-3"); - border-right: govuk-spacing(1) solid govuk-colour("grey-3"); + border-left: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3"); + border-right: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3"); padding: 13px 13px govuk-spacing(2) 13px; } @@ -135,7 +138,7 @@ .js-enabled { .app-c-option-select__container { - border: govuk-spacing(1) solid govuk-colour("grey-3"); + border: govuk-spacing(1) solid govuk-colour("light-grey", $legacy: "grey-3"); border-top: 0; } @@ -149,6 +152,7 @@ } .app-c-option-select__selected-counter { + @include govuk-font($size: 14); margin-top: -3px; padding: 0 8px 3px 18px; } @@ -156,7 +160,7 @@ .app-c-option-select--expander { padding: 0; margin: 0; - background: none; + background-color: transparent; border-bottom: solid 1px govuk-colour("black"); .app-c-option-select__container { @@ -176,14 +180,6 @@ .app-c-option-select__button { position: relative; - - &:hover { - background: none; - - & + .app-c-option-select__selected-counter { - background: none; - } - } } .app-c-option-select__selected-counter {