Upgrade components gem

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'
 

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

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('<div class="govuk-!-font-size-14 app-c-option-select__selected-counter js-selected-counter">' + checkedString + '</div>')
+      .after('<div class="app-c-option-select__selected-counter js-selected-counter">' + checkedString + '</div>')
   }
 
   OptionSelect.prototype.updateCheckedCount = function updateCheckedCount () {

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

app/assets/stylesheets/components/_expander.scss

@@ -35,14 +35,17 @@
 
 .app-c-expander__button {
   @include govuk-font(19, $weight: bold);
-  @include govuk-focusable;
   position: relative;
   width: 100%;
   border: 0;
   padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) 0;
   background: none;
   text-align: left;
   cursor: pointer;
+
+  &:focus {
+    @include govuk-focused-text;
+  }
 }
 
 .js-enabled {

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,14 +152,15 @@
 }
 
 .app-c-option-select__selected-counter {
+  @include govuk-font($size: 14);
   margin-top: -3px;
   padding: 0 8px 3px 18px;
 }
 
 .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 {

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;