dxw_govuk_frontend_rails 3.8.0 → 3.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24366e1d10fcdffc7d4ce6ab81b1af6bc53a01971488e7dc4d1e3dc82b3edf3c
-  data.tar.gz: 9ef221edb271314433d1944067443cb2500536c98cf89e84e672ffd56c5ccc05
+  metadata.gz: e42e5531caedbe80f014557b076fc609f16ca85d666bdcc86bfb4e7c280e28a1
+  data.tar.gz: c712317b305d72d5960a65a1d4dbf0e7b0ebaf4bd482b057f32c6518d4fc90cc
 SHA512:
-  metadata.gz: 5fb712c7e9a7b679f9727b49d57eefe2ca24c0e2b01b0216999ef20ff4ca5c476a63be78d803ff4651b330d5361a4bd13d342dc44118a667cd41b86c1fd44dee
-  data.tar.gz: 3c0f0d0f3d3dd1182d366a2a547345a63ea13ba90d44a7fa0e914201954c7547aafeff04119f64dcdb1db39c9002d922161df2758f5fc1f05a5290ce45312cc4
+  metadata.gz: 5f6a004060916897d45767e91565c3cdc6322d860814f2acbc027d35eca9a22f2d328e955095e4c9d0b14b478de12c259f064d88bdc5468bc0ffda3dcd325085
+  data.tar.gz: 3c4a6afe51e11a479d23a3e1ec51e17660511e4dba977af9a89545f5a55be39ac0cffb0cc82626e053323841efdf4976858b4fecf2f11f2664af4341e755e44b

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    dxw_govuk_frontend_rails (3.8.0)
+    dxw_govuk_frontend_rails (3.12.0)
 
 GEM
   remote: https://rubygems.org/
@@ -18,4 +18,4 @@ DEPENDENCIES
   rake (~> 13.0)
 
 BUNDLED WITH
-   2.2.1
+   2.2.24

data/README.md

@@ -1,91 +1,112 @@
-# GOVUK Frontend for Rails
+# GOV.UK Frontend for Rails
 
 ## Read this first
 
-Although this gem makes it super easy to add the GOVUK Frontend to your
-Rails applications, we would recommend using it as a guide to add the
-GOVUK Frontend yourself.
+Although this gem makes it super easy to add the GOV.UK Frontend to your Rails
+applications, we would recommend using it as a guide to add the GOV.UK Frontend
+yourself.
 
-## About Adds the GOVUK Frontend for Rails using the asset pipeline.
+## About
+
+Adds the GOV.UK Frontend for Rails using the asset pipeline.
 
 https://github.com/alphagov/govuk-frontend
 
 ## Breaking Changes in v3.0.0
 
-This release of the GOVUK Frontend has breaking changes! Do not update to this
+This release of the GOV.UK Frontend has breaking changes! Do not update to this
 version until you have read and understood:
 
-You will not be required to updated any file paths with govuk as we take care of
-that for you, all others changes will need to be managed:
+You will not be required to updated any file paths with `govuk` as we take care
+of that for you, all others changes will need to be managed:
 
 https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
 
 ## Limitations
 
-This gem does not include the ie8 version of GOVUK Frontend, as the service
-standard no longer requires it:
+This gem does not include the `ie8` version of GOV.UK Frontend, as the service
+standard no longer requires support for Internet Explorer versions less than 11:
 
 https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices
 
-This gem and its documentation cannot tell you how to use the GOVUK effectively,
-see the GOVUK Design System documentation for that:
+This gem and its documentation cannot tell you how to use the GOV.UK patterns
+effectively, see the GOV.UK Design System documentation for that:
+
+https://design-system.service.gov.uk/
 
-https://design-system.service.gov.uk/ ## Installation
+## Installation
 
 Add this line to your application's Gemfile:
 
-```ruby gem 'dxw_govuk_frontend_rails' ```
+```ruby
+gem 'dxw_govuk_frontend_rails'
+```
 
 And then execute:
 
-    $ bundle
+```
+$ bundle
+```
+
+## Usage
 
-## Usage Your Rails app will need to have sass enabled.
+Your Rails app will need to have SCSS enabled.
+
+**IMPORTANT: You must not use this library without changes if the service you
+are building is not on GOV.UK. Read and understand the guidance here:**
+
+https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
 
 ### Basic usage
 
-If the service you are building does not need to modify or extend the GOVUK
-Frontend all you need to do is import the main sass and javascript files into
+If the service you are building does not need to modify or extend the GOV.UK
+Frontend, all you need to do is import the main SCSS and JavaScript files into
 your Rails app:
 
-- create a sass file in your application: ```
-  app/assets/stylesheets/govuk_frontend_rails.scss ```
-- import the styles into `govuk_frontend_rails.scss`: ```sass @import
-  "govuk-frontend-rails"; ```
-- require the `govuk-frontend-rails.scss` file in `application.css` or
-  equivalent:
+- create a SCSS file in your application:
 
-``` *= require govuk_frontend_rails ```
+  `app/assets/stylesheets/govuk_frontend_rails.scss`
 
-- require the javascript into `app/assets/javascripts/application.js`:
+- import the styles into `govuk_frontend_rails.scss`:
 
-``` //= require govuk_frontend_rails ```
-- initialise the GOVUK Frontend either in a .js file on in your application
+  `@import "govuk-frontend-rails";`
+
+- import the `govuk-frontend-rails.scss` file in the comment block in
+  `app/assets/stylesheets/application.css` or equivalent:
+
+  `*= require govuk_frontend_rails`
+
+- import the JavaScript in the comment block of
+  `app/assets/javascripts/application.js`:
+
+  `//= require govuk_frontend_rails`
+
+- initialise the GOV.UK Frontend either in a .js file or in your application
   layout:
 
-```javascript window.onload = function() { window.GOVUKFrontend.initAll() }; ```
-- update your application markup to use the GOVUK Frontend class names
+  `window.onload = function() { window.GOVUKFrontend.initAll() };`
 
-IMPORTANT: You cannot use the GOVUK Frontend without changes if the service you
-are building is not on GOV.UK, read and understand the guidance here:
+- update your application markup to use the GOV.UK Frontend class names
 
-https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk
+## Tracking GOV.UK Frontend versions
 
-## Tracking version We aim to tracking the version of GOVUK Frontend.
+We aim to track the latest version of GOV.UK Frontend but we may fall behind.
+Opening an issue if we are behind on a new release would be helpful, or open a
+PR to update to the latest release!
 
-## Updating to a new Version of GOVUK Frontend
+## Updating to a new version of GOV.UK Frontend
 
-When a new version of the GOVUK Frontend is released:
+When a new version of the GOV.UK Frontend is released:
 
-- make a new branch with the GOVUK Frontend version number
+- make a new branch with the GOV.UK Frontend version number
 - set the new version number in `package.json` and
   `lib/dxw_govuk_frontend_rails/version.rb`
-- run  `npm update` to get the new release of the GOVUK Frontend
+- run `npm update` to get the new release of the GOV.UK Frontend
 - run `bundle exec rake` to compile the new assets
 - commit the changes
-- tag with the same release number as GOVUK Frontend
+- tag with the same release number as GOV.UK Frontend
 - push the change
 - push the tag
 - merge your branch
 - make a new release of the tag on GitHub
-- GitHub acitons will build the gem and push to Rubygems
+- GitHub actions will build the gem and push to RubyGems

data/lib/dxw_govuk_frontend_rails/version.rb

@@ -1,3 +1,3 @@
 module DxwGovukFrontendRails
-  VERSION = "3.8.0"
+  VERSION = "3.12.0"
 end

data/package-lock.json

@@ -1,13 +1,31 @@
 {
   "name": "dxw_govuk_frontend_rails",
   "version": "1.0.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
+  "packages": {
+    "": {
+      "name": "dxw_govuk_frontend_rails",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "govuk-frontend": "3.12.0"
+      }
+    },
+    "node_modules/govuk-frontend": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.12.0.tgz",
+      "integrity": "sha512-+mM8BqEUqsBVSV/ud0dEhE8OmMdhkK53eEUp5YyPN+y3mwcdRnwwP2A2B5qFdFi6E6j/2AYuCG8l5kXD+JXNxA==",
+      "engines": {
+        "node": ">= 4.2.0"
+      }
+    }
+  },
   "dependencies": {
     "govuk-frontend": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.8.0.tgz",
-      "integrity": "sha512-+vgXzFsh7wpLRGjFSDvDcA2zNA2wOxT6gGs/KUpkTjF1Uop9BerW/1W/YB1BMpeTEJoPlmrkA19+DS1fqJtL9Q=="
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-3.12.0.tgz",
+      "integrity": "sha512-+mM8BqEUqsBVSV/ud0dEhE8OmMdhkK53eEUp5YyPN+y3mwcdRnwwP2A2B5qFdFi6E6j/2AYuCG8l5kXD+JXNxA=="
     }
   }
 }

data/package.json

@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/mec/dxw_govuk_frontend_rails#readme",
   "dependencies": {
-    "govuk-frontend": "3.8.0"
+    "govuk-frontend": "3.12.0"
   }
 }

data/vendor/assets/javascripts/govuk_frontend_rails.js

@@ -1498,7 +1498,7 @@ function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]');
+    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]');
   }
 }
 
@@ -1959,57 +1959,103 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     $input.closest('label')
 };
 
-function Header ($module) {
+function NotificationBanner ($module) {
   this.$module = $module;
 }
 
-Header.prototype.init = function () {
-  // Check for module
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
   var $module = this.$module;
+  // Check for module
   if (!$module) {
     return
   }
 
-  // Check for button
-  var $toggleButton = $module.querySelector('.govuk-js-header-toggle');
-  if (!$toggleButton) {
+  this.setFocus();
+};
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
     return
   }
 
-  // Handle $toggleButton click events
-  $toggleButton.addEventListener('click', this.handleClick.bind(this));
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1');
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex');
+    });
+  }
+
+  $module.focus();
 };
 
+function Header ($module) {
+  this.$module = $module;
+  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
+  this.$menu = this.$menuButton && $module.querySelector(
+    '#' + this.$menuButton.getAttribute('aria-controls')
+  );
+}
+
 /**
-* Toggle class
-* @param {object} node element
-* @param {string} className to toggle
-*/
-Header.prototype.toggleClass = function (node, className) {
-  if (node.className.indexOf(className) > 0) {
-    node.className = node.className.replace(' ' + className, '');
-  } else {
-    node.className += ' ' + className;
+ * Initialise header
+ *
+ * Check for the presence of the header, menu and menu button – if any are
+ * missing then there's nothing to do so return early.
+ */
+Header.prototype.init = function () {
+  if (!this.$module || !this.$menuButton || !this.$menu) {
+    return
   }
+
+  this.syncState(this.$menu.classList.contains('govuk-header__navigation--open'));
+  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this));
 };
 
 /**
-* An event handler for click event on $toggleButton
-* @param {object} event event
-*/
-Header.prototype.handleClick = function (event) {
-  var $module = this.$module;
-  var $toggleButton = event.target || event.srcElement;
-  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'));
-
-  // If a button with aria-controls, handle click
-  if ($toggleButton && $target) {
-    this.toggleClass($target, 'govuk-header__navigation--open');
-    this.toggleClass($toggleButton, 'govuk-header__menu-button--open');
+ * Sync menu state
+ *
+ * Sync the menu button class and the accessible state of the menu and the menu
+ * button with the visible state of the menu
+ *
+ * @param {boolean} isVisible Whether the menu is currently visible
+ */
+Header.prototype.syncState = function (isVisible) {
+  this.$menuButton.classList.toggle('govuk-header__menu-button--open', isVisible);
+  this.$menuButton.setAttribute('aria-expanded', isVisible);
+};
 
-    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true');
-    $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false');
-  }
+/**
+ * Handle menu button click
+ *
+ * When the menu button is clicked, change the visibility of the menu and then
+ * sync the accessibility state and menu button state
+ */
+Header.prototype.handleMenuButtonClick = function () {
+  var isVisible = this.$menu.classList.toggle('govuk-header__navigation--open');
+  this.syncState(isVisible);
 };
 
 function Radios ($module) {
@@ -2482,6 +2528,11 @@ function initAll (options) {
   var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
   new Header($toggleButton).init();
 
+  var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
+  nodeListForEach($notificationBanners, function ($notificationBanner) {
+    new NotificationBanner($notificationBanner).init();
+  });
+
   var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();

data/vendor/assets/stylesheets/components/_all.scss

@@ -6,6 +6,7 @@
 @import "button/index";
 @import "checkboxes/index";
 @import "character-count/index";
+@import "cookie-banner/index";
 @import "summary-list/index";
 @import "date-input/index";
 @import "details/index";
@@ -19,6 +20,7 @@
 @import "input/index";
 @import "inset-text/index";
 @import "label/index";
+@import "notification-banner/index";
 @import "panel/index";
 @import "phase-banner/index";
 @import "tabs/index";

data/vendor/assets/stylesheets/components/accordion/_index.scss

@@ -1,9 +1,4 @@
 @include govuk-exports("govuk/component/accordion") {
-
-  $govuk-accordion-link-colour: $govuk-link-colour;
-  $govuk-accordion-link-hover-colour: govuk-colour("light-blue");
-  $govuk-accordion-border-width: 3px;
-
   .govuk-accordion {
     @include govuk-responsive-margin(6, "bottom");
   }
@@ -47,7 +42,6 @@
 
   // JavaScript enabled
   .js-enabled {
-
     .govuk-accordion {
       // Border at the bottom of the whole accordion
       border-bottom: 1px solid $govuk-border-colour;
@@ -99,19 +93,9 @@
       // Safe area on the right to avoid clashing with icon
       padding-right: 40px;
       border-top: 1px solid $govuk-border-colour;
-      color: $govuk-accordion-link-colour;
       cursor: pointer;
     }
 
-    // For devices that can't hover such as touch devices,
-    // remove hover state as it can be stuck in that state (iOS).
-    @media (hover: none) {
-      .govuk-accordion__section-header:hover {
-        border-top-color: $govuk-accordion-link-colour;
-        box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
-      }
-    }
-
     // Buttons within the headers don’t need default styling
     .govuk-accordion__section-button {
       @include govuk-typography-common;
@@ -120,7 +104,7 @@
       margin-left: 0;
       padding: 0;
       border-width: 0;
-      color: inherit;
+      color: $govuk-link-colour;
       background: none;
       text-align: left;
       cursor: pointer;
@@ -148,7 +132,13 @@
     }
 
     .govuk-accordion__section-button:hover:not(:focus) {
+      color: $govuk-link-hover-colour;
       text-decoration: underline;
+
+      // This needs to come after the text-decoration property otherwise
+      // text-decoration, as a shorthand property, resets it to auto
+      @include govuk-link-hover-decoration;
+      text-underline-offset: $govuk-link-underline-offset;
     }
 
     // For devices that can't hover such as touch devices,

data/vendor/assets/stylesheets/components/back-link/_index.scss

@@ -24,21 +24,6 @@
     padding-left: 14px;
   }
 
-  // Only underline if the component is linkable
-  .govuk-back-link[href] {
-    text-decoration: underline;
-
-    // When the back link is focused, hide the bottom link border as the
-    // focus styles has a bottom border.
-    &:focus {
-      text-decoration: none;
-
-      &:before {
-        border-color: $govuk-text-colour;
-      }
-    }
-  }
-
   // Prepend left pointing chevron
   .govuk-back-link:before {
     content: "";
@@ -52,7 +37,6 @@
       // These should be removed when legacy font support is dropped
       top: -1px;
       bottom: 1px;
-
     } @else {
       top: 0;
       bottom: 0;
@@ -89,6 +73,10 @@
     }
   }
 
+  .govuk-back-link:focus:before {
+    border-color: $govuk-focus-text-colour;
+  }
+
   .govuk-back-link:after {
     content: "";
     position: absolute;
@@ -108,5 +96,4 @@
       bottom: $offset;
     }
   }
-
 }

data/vendor/assets/stylesheets/components/breadcrumbs/_index.scss

@@ -57,7 +57,6 @@
         // These should be removed when legacy font support is dropped
         top: -1px;
         bottom: 1px;
-
       } @else {
         top: 0;
         bottom: 0;

data/vendor/assets/stylesheets/components/button/_index.scss

@@ -1,5 +1,5 @@
 @include govuk-exports("govuk/component/button") {
-  $govuk-button-colour: govuk-colour("green", $legacy: #00823b); // sass-lint:disable no-color-literals
+  $govuk-button-colour: govuk-colour("green", $legacy: #00823b);
   $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
   $govuk-button-text-colour: govuk-colour("white");
@@ -29,6 +29,8 @@
     position: relative;
     width: 100%;
     margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
     @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
     padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
     border: $govuk-border-width-form-element solid transparent;
@@ -117,7 +119,7 @@
 
     // Use a pseudo element to expand the click target area to include the
     // button's shadow as well, in case users try to click it.
-    &::before {
+    &:before {
       content: "";
       display: block;
 
@@ -141,7 +143,7 @@
     // the click event is still fired.
     //
     // 🎉
-    &:active::before {
+    &:active:before {
       top: -($govuk-border-width-form-element + $button-shadow-size);
     }
   }

data/vendor/assets/stylesheets/components/character-count/_index.scss

@@ -11,13 +11,10 @@
     .govuk-textarea {
       margin-bottom: govuk-spacing(1);
     }
-
-    .govuk-textarea--error {
-      padding: govuk-spacing(1) - 2; // Stop a "jump" when width of border changes
-    }
   }
 
   .govuk-character-count__message {
+    @include govuk-font($size: false, $tabular: true);
     margin-top: 0;
     margin-bottom: 0;
   }

data/vendor/assets/stylesheets/components/checkboxes/_index.scss

@@ -74,7 +74,7 @@
   }
 
   // [ ] Check box
-  .govuk-checkboxes__label::before {
+  .govuk-checkboxes__label:before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -90,7 +90,7 @@
   //
   // The check mark is a box with a border on the left and bottom side (└──),
   // rotated 45 degrees
-  .govuk-checkboxes__label::after {
+  .govuk-checkboxes__label:after {
     content: "";
     box-sizing: border-box;
 
@@ -123,13 +123,13 @@
   }
 
   // Focused state
-  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+  .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 
   // Selected state
-  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
+  .govuk-checkboxes__input:checked + .govuk-checkboxes__label:after {
     opacity: 1;
   }
 
@@ -227,7 +227,7 @@
     //
     // Reduce the size of the check box [1], vertically center it within the
     // touch target [2]
-    .govuk-checkboxes__label::before {
+    .govuk-checkboxes__label:before {
       top: $input-offset - $govuk-border-width-form-element; // 2
       width: $govuk-small-checkboxes-size; // 1
       height: $govuk-small-checkboxes-size; // 1
@@ -236,7 +236,7 @@
     // ✔ Check mark
     //
     // Reduce the size of the check mark and re-align within the checkbox
-    .govuk-checkboxes__label::after {
+    .govuk-checkboxes__label:after {
       top: 15px;
       left: 6px;
       width: 12px;
@@ -271,7 +271,7 @@
     // is so much larger than their visible size, and so we need to provide
     // feedback to the user as to which checkbox they will select when their
     // cursor is outside of the visible area.
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -280,10 +280,10 @@
     //
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-      // sass-lint:disable indentation
-      box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
-                  0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+      box-shadow:
+        0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
+        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
     }
 
     // For devices that explicitly don't support hover, don't provide a hover
@@ -293,11 +293,11 @@
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
     @media (hover: none), (pointer: coarse) {
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
         box-shadow: initial;
       }
 
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
         box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
       }
     }

data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";