govuk_publishing_components 68.3.0 → 69.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03455dfe8892b30b454209d8b8a490fd52abfbe5605d8f2823dbe9bd03d52979
-  data.tar.gz: c037b1fbba983e32b96b8abdc6e73cce0c7a2c448862982973f5d757ed324480
+  metadata.gz: 4d6a8ca8a18729239925c15778ecfe6f9e699c8c1531d199e3259ed084c2b40f
+  data.tar.gz: f94b13c75a3b38547a27716a5b40252b8a62a83cd609365c056eb578d6901741
 SHA512:
-  metadata.gz: f3e2136388c8bbc98caf66c605efc335139e485f59e15a4e1bffcc72b5f2ea94d67dcbcefb9dbde13ba8dc779dd465301ed25c22c0f2a88f0022f3ab2704d634
-  data.tar.gz: 275c48bef08012285e2091aef239b78effce8f893c5ed191fec261f05f708c5ef77241cc17a0763d2407a30512a4d4d040105b3aef9178dccc3fc45520e1d8ea
+  metadata.gz: 5318a3a3ddda3807aedfa588342b942574d5d863ca064d553b9fd83beb0a9817e927f0e8583bd76a9dd90a344b7961e7f4c8c6bcbbb0f1bc2d32bfdc01575b1c
+  data.tar.gz: bca644a69295230d4e4715a01819589b4e50c11c84e47b5410772e4b614b9d7bcbf109680b50015a63907195dea5f7eaa586672e18c0f5115507a11815c54706

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -1,89 +1,51 @@
 (function (Modules) {
-  var SETTINGS = {
+  const SETTINGS = {
     label: {
       hide: 'data-text-for-hide',
       show: 'data-text-for-show'
     }
   }
 
-  // Small helpers that update the label when the state of the button has
-  // changed:
-  var setLabel = function ($button, showOrHide) {
-    var newLabel = $button.getAttribute(SETTINGS.label[showOrHide])
+  // Small helpers that update the label when the state of the button has changed:
+  const setLabel = function (button, showOrHide) {
+    const newLabel = button.getAttribute(SETTINGS.label[showOrHide])
 
     if (newLabel) {
-      $button.setAttribute('aria-label', newLabel)
+      button.setAttribute('aria-label', newLabel)
     }
   }
 
   // Wrapper functions to contain all of the mechanisms needed for hiding and
   // toggling the menus.
-  var hide = function ($button, $menu) {
-    $button.setAttribute('aria-expanded', false)
-    $button.classList.remove('gem-c-layout-super-navigation-header__open-button')
-    $menu.setAttribute('hidden', 'hidden')
-    setLabel($button, 'show')
+  const hide = function (button, menu) {
+    button.setAttribute('aria-expanded', false)
+    button.classList.remove('gem-c-layout-super-navigation-header__open-button')
+    menu.setAttribute('hidden', 'hidden')
+    setLabel(button, 'show')
   }
-  var show = function ($button, $menu) {
-    $button.setAttribute('aria-expanded', true)
-    $button.classList.add('gem-c-layout-super-navigation-header__open-button')
-    $menu.removeAttribute('hidden')
-    setLabel($button, 'hide')
+
+  const show = function (button, menu) {
+    button.setAttribute('aria-expanded', true)
+    button.classList.add('gem-c-layout-super-navigation-header__open-button')
+    menu.removeAttribute('hidden')
+    setLabel(button, 'hide')
   }
 
-  var toggle = function ($button, $menu) {
-    var isOpen = $button.getAttribute('aria-expanded') === 'true'
+  const toggle = function (button, menu) {
+    const isOpen = button.getAttribute('aria-expanded') === 'true'
     if (isOpen) {
-      hide($button, $menu)
+      hide(button, menu)
     } else {
-      show($button, $menu)
+      show(button, menu)
     }
   }
 
-  // Clicking an element inside a `button` element causes the `event.target` to
-  // be the inside element, not the button. This can be taken care of by setting
-  // the CSS pointer-events to be none, but that doesn't work for older
-  // browsers, won't work for people with CSS turned off, or for people who are
-  // using CSS overrides.
-  //    This checks if the $element is the `elementType`; if it is, it gets
-  // returned; if not it recursively checks to see if the parent element is a
-  // `elementType`. This means that it can be used with `pointer-events: none`.
-  var closestParentIncluding = function ($element, elementType) {
-    if ($element.tagName.toLowerCase() === elementType.toLowerCase()) {
-      return $element
-    }
-    return closestParentIncluding($element.parentNode, elementType)
-  }
-
-  // Searched the previous elements to find one with the same tag as set in
-  // `elementType` . If it's found the element is returned; if not, it returns
-  // null.
-  var closestPrevious = function ($element, elementType) {
-    if ($element === null) {
-      return null
-    }
-
-    // Using `previousSibling` means that there is a possibility that the
-    // $element could be a text node or a comment node - checking the `nodeType`
-    // of the element will ensure that it's a real element.
-    if ($element.nodeType === 1 && $element.tagName.toLowerCase() === elementType.toLowerCase()) {
-      return $element
-    }
-
-    // If `previousElementSibling` can be used then let's use it as it'll be
-    // slightly faster since it skips things that aren't elements. If not,
-    // `previousSibling` can still be used as there's a `nodeType` check.
-    var previousElement = $element.previousElementSibling || $element.previousSibling
-
-    return closestPrevious(previousElement, elementType)
-  }
-
-  function SuperNavigationMegaMenu ($module) {
-    this.$module = $module
-    this.$searchToggle = this.$module.querySelector('#super-search-menu-toggle')
-    this.$searchMenu = this.$module.querySelector('#super-search-menu')
-    this.$navToggle = this.$module.querySelector('#super-navigation-menu-toggle')
-    this.$navMenu = this.$module.querySelector('#super-navigation-menu')
+  function SuperNavigationMegaMenu (module) {
+    this.module = module
+    this.searchToggle = this.module.querySelector('#super-search-menu-toggle')
+    this.searchMenu = this.module.querySelector('#super-search-menu')
+    this.navToggle = this.module.querySelector('#super-navigation-menu-toggle')
+    this.navMenu = this.module.querySelector('#super-navigation-menu')
 
     // The menu toggler buttons need three attributes for this to work:
     //  - `aria-controls` contains the id of the menu to be toggled
@@ -91,132 +53,129 @@
     //    smaller screens
     //  - `data-toggle-desktop-group` is the group that the menu belongs to on
     //    larger screens
-    this.$buttons = this.$module.querySelectorAll(
+    this.buttons = this.module.querySelectorAll(
       'button[aria-controls][data-toggle-mobile-group][data-toggle-desktop-group]'
     )
 
-    this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
+    this.hiddenButtons = this.module.querySelectorAll('button[hidden]')
   }
 
   SuperNavigationMegaMenu.prototype.buttonHandler = function (event) {
-    var $target = closestParentIncluding(event.target, 'button')
-    var $targetMenu = this.$module.querySelector('#' + $target.getAttribute('aria-controls'))
-
-    var toggleGroupAttribute = 'data-toggle-desktop-group'
-    var toggleGroupName = $target.getAttribute(toggleGroupAttribute)
-    var toggleGroupList = this.$module.querySelectorAll('[' + toggleGroupAttribute + '="' + toggleGroupName + '"]')
-
-    for (var k = 0; k < toggleGroupList.length; k++) {
-      var $element = toggleGroupList[k]
-      if ($element !== $target) {
-        var $menu = this.$module.querySelector('#' + $element.getAttribute('aria-controls'))
-        hide($element, $menu)
+    const target = event.target.closest('button')
+    const targetMenu = this.module.querySelector('#' + target.getAttribute('aria-controls'))
+
+    const toggleGroupAttribute = 'data-toggle-desktop-group'
+    const toggleGroupName = target.getAttribute(toggleGroupAttribute)
+    const toggleGroupList = this.module.querySelectorAll('[' + toggleGroupAttribute + '="' + toggleGroupName + '"]')
+
+    for (const element of toggleGroupList) {
+      if (element !== target) {
+        const menu = this.module.querySelector('#' + element.getAttribute('aria-controls'))
+        hide(element, menu)
       }
     }
 
-    toggle($target, $targetMenu)
+    toggle(target, targetMenu)
   }
 
   SuperNavigationMegaMenu.prototype.handleKeyDown = function (event) {
-    var KEY_TAB = 9
-    var KEY_ESC = 27
-    var $navMenuLinks = this.$navMenu.querySelectorAll('li a')
-    var $firstNavLink = $navMenuLinks[0]
-    var $lastNavLink = $navMenuLinks[$navMenuLinks.length - 1]
-    var $searchMenuTabbable = this.$searchMenu.querySelectorAll('li a, input, button')
-    var $lastSearchMenuTabbable = $searchMenuTabbable[$searchMenuTabbable.length - 1]
-
-    if (event.keyCode === KEY_TAB) {
-      if (!this.$navMenu.hasAttribute('hidden')) {
+    if (event.key !== 'Tab' && event.key !== 'Escape') {
+      return
+    }
+
+    const navMenuLinks = this.navMenu.querySelectorAll('li a')
+    const firstNavLink = navMenuLinks[0]
+    const lastNavLink = navMenuLinks[navMenuLinks.length - 1]
+    const searchMenuTabbable = this.searchMenu.querySelectorAll('li a, input, button')
+    const lastSearchMenuTabbable = searchMenuTabbable[searchMenuTabbable.length - 1]
+
+    if (event.key === 'Tab') {
+      if (!this.navMenu.hasAttribute('hidden')) {
         switch (document.activeElement) {
-          case this.$navToggle:
+          case this.navToggle:
             if (!event.shiftKey) {
               event.preventDefault()
-              $firstNavLink.focus()
+              firstNavLink.focus()
             }
             break
-          case $lastNavLink:
+          case lastNavLink:
             if (!event.shiftKey) {
               event.preventDefault()
-              this.$searchToggle.focus()
-              hide(this.$navToggle, this.$navMenu)
+              this.searchToggle.focus()
+              hide(this.navToggle, this.navMenu)
             }
             break
-          case $firstNavLink:
+          case firstNavLink:
             if (event.shiftKey) {
               event.preventDefault()
-              this.$navToggle.focus()
+              this.navToggle.focus()
             }
             break
-          case this.$searchToggle:
+          case this.searchToggle:
             if (event.shiftKey) {
               event.preventDefault()
-              $lastNavLink.focus()
+              lastNavLink.focus()
             }
             break
           default:
             break
         }
-      } else if (!this.$searchMenu.hasAttribute('hidden')) {
-        if (document.activeElement === $lastSearchMenuTabbable) {
+      } else if (!this.searchMenu.hasAttribute('hidden')) {
+        if (document.activeElement === lastSearchMenuTabbable) {
           if (!event.shiftKey) {
-            hide(this.$searchToggle, this.$searchMenu)
+            hide(this.searchToggle, this.searchMenu)
           }
         }
       }
-    } else if (event.keyCode === KEY_ESC) {
-      if (!this.$navMenu.hasAttribute('hidden')) {
-        hide(this.$navToggle, this.$navMenu)
-        this.$navToggle.focus()
-      } else if (!this.$searchMenu.hasAttribute('hidden')) {
-        hide(this.$searchToggle, this.$searchMenu)
-        this.$searchToggle.focus()
+    } else if (event.key === 'Escape') {
+      if (!this.navMenu.hasAttribute('hidden')) {
+        hide(this.navToggle, this.navMenu)
+        this.navToggle.focus()
+      } else if (!this.searchMenu.hasAttribute('hidden')) {
+        hide(this.searchToggle, this.searchMenu)
+        this.searchToggle.focus()
       }
     }
   }
 
   SuperNavigationMegaMenu.prototype.init = function () {
     // Handle key events for tab and escape keys
-    this.$module.addEventListener('keydown', this.handleKeyDown.bind(this))
+    this.module.addEventListener('keydown', this.handleKeyDown.bind(this))
 
-    for (var j = 0; j < this.$buttons.length; j++) {
-      var $button = this.$buttons[j]
-      $button.addEventListener('click', this.buttonHandler.bind(this), true)
+    for (const button of this.buttons) {
+      button.addEventListener('click', this.buttonHandler.bind(this), true)
     }
 
-    // The toggle buttons are hardcoded to be hidden in the markup - this means
-    // that people without JavaScript turned on won't have buttons present that
-    // don't do anything.
-    //     Since JavaScript is enabled we can remove the hidden attribute from
-    // the buttons so that they're perceivable by users.
-    //     As the toggle buttons are now selectable, we should prevent the links
-    // from being selectable to avoid confusion.
-    for (var i = 0; i < this.hiddenButtons.length; i++) {
-      var $element = this.hiddenButtons[i]
-      $element.removeAttribute('hidden')
-
-      var closestSiblingLink = closestPrevious($element, 'a')
-
-      if (closestSiblingLink) {
-        closestSiblingLink.setAttribute('hidden', 'hidden')
+    // Reveal toggle buttons hidden by default in HTML for non-JavaScript users
+    // and hide the fallback links now that JavaScript is available.
+    for (const element of this.hiddenButtons) {
+      element.removeAttribute('hidden')
+
+      let sibling = element.previousElementSibling
+
+      // Find and hide the preceding no JavaScript fallback links
+      while (sibling) {
+        if (sibling.matches('a')) {
+          sibling.setAttribute('hidden', 'hidden')
+          break
+        }
+        sibling = sibling.previousElementSibling
       }
     }
 
-    this.$module.querySelector('.gem-c-layout-super-navigation-header__search-item-link')
+    this.module.querySelector('.gem-c-layout-super-navigation-header__search-item-link')
       .setAttribute('hidden', 'hidden')
 
     // Navigation menu and search menu are hardcoded to be open in the markup -
-    // this means that the menu still makes sense with CSS and JavaScript turned
-    // off.
-    //     The menus now need to be hidden as part of the JavaScript
-    // initialisation.
-    //   - On both mobile and desktop, this means hiding the search menu
-    //   - On mobile, this means hiding the navigation
-    //   - On desktop, this means hiding the navigation button, showing the
-    //     second level navigation menu
-    hide(this.$searchToggle, this.$searchMenu)
-
-    this.$module.classList.add('js-module-initialised')
+    // this means that the menu still makes sense with CSS and JavaScript turned off.
+    // The menus now need to be hidden as part of the JavaScript initialisation:
+    //  - On both mobile and desktop, this means hiding the search menu
+    //  - On mobile, this means hiding the navigation
+    //  - On desktop, this means hiding the navigation button, showing the
+    //    second level navigation menu
+    hide(this.searchToggle, this.searchMenu)
+
+    this.module.classList.add('js-module-initialised')
   }
 
   Modules.SuperNavigationMegaMenu = SuperNavigationMegaMenu

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -45,9 +45,11 @@
         <span class="govuk-heading-s">How to watch this YouTube video</span>
         <span class="gem-c-govspeak__youtube-placeholder-text">There's a YouTube video on this page. You can't access it because of your cookie settings.</span>
         <span class="gem-c-govspeak__youtube-placeholder-text">You can <a href="/help/cookies" class="govuk-link">change your cookie settings</a> or watch the video on YouTube instead:</span>
-        <a href="${href}" class="govuk-link">${text}</a>
+        <a href="${href}" class="govuk-link js-youtube-link"></a>
       `
       placeholder.innerHTML = markup
+      const link = placeholder.querySelector('.js-youtube-link')
+      link.textContent = text
       $linkParent.after(placeholder)
       $linkParent.classList.add('gem-c-govspeak__youtube-placeholder-link')
     }

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -1,11 +1,13 @@
 // see https://github.com/alphagov/govuk_publishing_components/blob/main/docs/lib/trigger_event.md
-(function (root) {
+(function () {
   'use strict'
 
+  window.GOVUK = window.GOVUK || {}
+
   window.GOVUK.triggerEvent = function (element, eventName, parameters) {
-    var params = parameters || {}
-    var event
-    var keyCode = params.keyCode
+    const params = parameters || {}
+    const keyCode = params.keyCode
+    const key = params.key
 
     if (!Object.prototype.hasOwnProperty.call(params, 'bubbles')) {
       params.bubbles = true
@@ -15,11 +17,10 @@
       params.cancelable = true
     }
 
-    if (typeof window.CustomEvent === 'function') {
-      event = new window.CustomEvent(eventName, params)
-    } else {
-      event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable, params.detail)
+    const event = new window.CustomEvent(eventName, params)
+
+    if (key) {
+      event.key = key
     }
 
     if (keyCode) {
@@ -30,6 +31,8 @@
       event.shiftKey = true
     }
 
-    element.dispatchEvent(event)
+    if (element && typeof element.dispatchEvent === 'function') {
+      element.dispatchEvent(event)
+    }
   }
-}(window))
+}())

data/app/assets/stylesheets/component_guide/application.scss

@@ -15,7 +15,7 @@ $gem-guide-border-width: 1px;
   border: 3px solid govuk-functional-colour(error);
   margin: 0 0 govuk-spacing(6);
   padding: govuk-spacing(6);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 
   .component-violation__title {
     margin: 0;
@@ -115,8 +115,8 @@ $gem-guide-border-width: 1px;
 .component-guide-preview--violation,
 .component-guide-preview--warning {
   margin-top: -$gem-guide-border-width;
-
-  @include govuk-text-colour;
+  
+  color: govuk-functional-colour(text);
   @include govuk-font($size: 19);
 
   &:empty {

data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/accordion/accordion";
+@import "govuk/components/accordion";
 
 // Prevent elements inside the button from receiving click events
 .gem-c-accordion__show-all > * {

data/app/assets/stylesheets/govuk_publishing_components/components/_add-another.scss

@@ -1,5 +1,5 @@
-@import "govuk/components/button/button";
-@import "govuk/components/fieldset/fieldset";
+@import "govuk/components/button";
+@import "govuk/components/fieldset";
 
 .gem-c-add-another {
   .gem-c-add-another__remove-button {

data/app/assets/stylesheets/govuk_publishing_components/components/_app-promo-banner.scss

@@ -3,7 +3,7 @@
   padding: govuk-spacing(5) 0;
   border-top: 4px solid govuk-functional-colour(brand);
   background-color: $govuk-blue-tint-95;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 }
 
 .gem-c-app-promo-banner--visible {

data/app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss

@@ -1 +1 @@
-@import "govuk/components/back-link/back-link";
+@import "govuk/components/back-link";

data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss

@@ -1,6 +1,6 @@
 .gem-c-big-number {
   margin-bottom: govuk-spacing(3);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 }
 
 .gem-c-big-number__value {

data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/breadcrumbs/breadcrumbs";
+@import "govuk/components/breadcrumbs";
 
 .gem-c-breadcrumbs--border-bottom {
   border-bottom: 1px solid govuk-functional-colour(border);

data/app/assets/stylesheets/govuk_publishing_components/components/_button.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/button/button";
+@import "govuk/components/button";
 
 // Because govuk-frontend adds a responsive bottom margin by default for each component
 // we reset it to zero so we can set it separately using `gem-c-button--bottom-margin`
@@ -33,7 +33,7 @@
   display: block;
   max-width: 14em;
   margin-top: .5em;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font($size: 16);
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss

@@ -1 +1 @@
-@import "govuk/components/character-count/character-count";
+@import "govuk/components/character-count";

data/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/checkboxes/checkboxes";
+@import "govuk/components/checkboxes";
 
 .govuk-checkboxes--nested {
   width: 100%;

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss

@@ -9,7 +9,7 @@
 
 .gem-c-contents-list__title {
   margin: 0;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font($size: 16, $weight: regular, $line-height: 1.5);
 }
 
@@ -18,7 +18,7 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font($size: 16);
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/cookie-banner/cookie-banner";
+@import "govuk/components/cookie-banner";
 
 .gem-c-cookie-banner {
   [hidden],

data/app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/date-input/date-input";
+@import "govuk/components/date-input";
 
 // Add spacing between input items on narrow containers when they collapse under each other
 .govuk-date-input {

data/app/assets/stylesheets/govuk_publishing_components/components/_details.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/details/details";
+@import "govuk/components/details";
 
 [dir="rtl"] .gem-c-details,
 .direction-rtl .gem-c-details,

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -1,7 +1,7 @@
 .gem-c-document-list {
   margin: 0;
   padding: 0;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font(19);
 }
 
@@ -55,7 +55,7 @@
 
 .gem-c-document-list__item-description {
   margin: govuk-spacing(1) 0;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 }
 
 .gem-c-document-list__subtext {
@@ -79,7 +79,7 @@
   display: inline-block;
   list-style: none;
   padding-right: govuk-spacing(4);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font(16);
 
   & { // stylelint-disable-line no-duplicate-selectors, block-no-redundant-nested-style-rules
@@ -160,7 +160,7 @@
 .gem-c-document-list-child__description {
   margin-top: govuk-spacing(1);
   margin-bottom: govuk-spacing(1);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 
   @include govuk-media-query($until: tablet) {
     display: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss

@@ -1 +1 @@
-@import "govuk/components/error-message/error-message";
+@import "govuk/components/error-message";

data/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/error-summary/error-summary";
+@import "govuk/components/error-summary";
 
 .gem-c-error-summary__list-item {
   color: govuk-functional-colour(error);

data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss

@@ -176,13 +176,13 @@ $feedback-prompt-border-top-colour: $govuk-blue-tint-50;
   // this comes from the backend so we can't put a class on it
   h2 {
     margin: 0 0 govuk-spacing(3);
-    @include govuk-text-colour;
+    color: govuk-functional-colour(text);
     @include govuk-font($size: 24, $weight: bold);
   }
 
   p {
     margin: 0 0 govuk-spacing(3);
-    @include govuk-text-colour;
+    color: govuk-functional-colour(text);
     @include govuk-font($size: 19);
   }
 
@@ -211,13 +211,13 @@ $feedback-prompt-border-top-colour: $govuk-blue-tint-50;
 
 .gem-c-feedback__form-heading {
   margin: 0 0 govuk-spacing(3);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font(24, $weight: bold);
 }
 
 .gem-c-feedback__form-paragraph {
   margin: 0 0 govuk-spacing(6);
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
   @include govuk-font(19);
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss

@@ -1 +1 @@
-@import "govuk/components/fieldset/fieldset";
+@import "govuk/components/fieldset";

data/app/assets/stylesheets/govuk_publishing_components/components/_file-upload.scss

@@ -1 +1 @@
-@import "govuk/components/file-upload/file-upload";
+@import "govuk/components/file-upload";

data/app/assets/stylesheets/govuk_publishing_components/components/_hint.scss

@@ -1 +1 @@
-@import "govuk/components/hint/hint";
+@import "govuk/components/hint";

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -8,7 +8,7 @@
   gap: govuk-spacing(2);
   justify-content: space-between;
   align-items: stretch;
-  @include govuk-text-colour;
+  color: govuk-functional-colour(text);
 
   @include govuk-media-query($until: tablet) {
     gap: govuk-spacing(3);

data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss

@@ -1,4 +1,4 @@
-@import "govuk/components/input/input";
+@import "govuk/components/input";
 
 $search-icon-size: 40px;