From b132b62f564a554eecc66f1a1ee4ce910be3e3c1 Mon Sep 17 00:00:00 2001 From: JoPintoPaul Date: Thu, 11 Jun 2026 10:11:38 +0100 Subject: [PATCH] PLATUI-4336 DO NOT MERGE: spiking new Sass syntax --- package-lock.json | 13 ++++---- package.json | 4 +-- src/_prototype-kit.scss | 2 +- src/accessible-autocomplete.scss | 16 ++++++---- src/all-govuk-and-hmrc.scss | 14 ++++---- src/all.scss | 24 ++++---------- src/components/_all.scss | 32 +++++++++---------- .../add-to-a-list/_add-to-a-list.scss | 6 ++-- src/components/header/_header.scss | 2 ++ .../internal-header/_internal-header.scss | 11 ++++--- .../list-with-actions/_list-with-actions.scss | 6 ++-- .../page-heading/_page-heading.scss | 2 ++ .../_service-navigation-language-select.scss | 1 + .../_status-tags-in-task-list-pages.scss | 2 ++ .../summary-list/_summary-list.scss | 2 ++ src/components/timeline/_timeline.scss | 3 +- .../timeout-dialog/_timeout-dialog.scss | 6 ++-- .../_user-research-banner.scss | 7 ++-- src/govuk-prototype-kit.config.json | 2 +- 19 files changed, 81 insertions(+), 74 deletions(-) diff --git a/package-lock.json b/package-lock.json index 361e9e20..ab47d456 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "hmrc-frontend", - "version": "7.19.0", + "version": "7.20.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "hmrc-frontend", - "version": "7.19.0", + "version": "7.20.0", "license": "Apache-2.0", "dependencies": { "accessible-autocomplete": "^3.0.1", - "govuk-frontend": "^6.1.0" + "govuk-frontend": "^6.2.0" }, "devDependencies": { "@babel/preset-env": "^7.21.5", @@ -8774,9 +8774,10 @@ } }, "node_modules/govuk-frontend": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-6.1.0.tgz", - "integrity": "sha512-sqivexZFa82LiDIDVMItsUlqEXE/wEUWWBqzEoxHvUFLBH7bY0C8lVrj1qsDThSnj5JEUMS7isBAbKnfQ5Qp6g==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-6.2.0.tgz", + "integrity": "sha512-PCRyQT+7kiV2dUz0Ku6Co+Nx4anOwJ7mAduXYbTQHK2krppBSynv9dBXtOYha/8j+LIzK7FqesTbJl9HD6ekHg==", + "license": "MIT", "engines": { "node": ">= 4.2.0" } diff --git a/package.json b/package.json index 74776308..0e64492b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hmrc-frontend", - "version": "7.19.0", + "version": "7.20.0", "description": "Design patterns for HMRC frontends", "scripts": { "start": "gulp dev", @@ -45,7 +45,7 @@ "homepage": "https://github.com/hmrc/hmrc-frontend#readme", "dependencies": { "accessible-autocomplete": "^3.0.1", - "govuk-frontend": "^6.1.0" + "govuk-frontend": "^6.2.0" }, "devDependencies": { "@babel/preset-env": "^7.21.5", diff --git a/src/_prototype-kit.scss b/src/_prototype-kit.scss index 9c480608..331f7afa 100644 --- a/src/_prototype-kit.scss +++ b/src/_prototype-kit.scss @@ -7,4 +7,4 @@ $govuk-suppressed-warnings: ( legacy-colour-param ); -@import "all"; +@use "all" as *; diff --git a/src/accessible-autocomplete.scss b/src/accessible-autocomplete.scss index a884a53e..9e6a93cd 100644 --- a/src/accessible-autocomplete.scss +++ b/src/accessible-autocomplete.scss @@ -1,9 +1,13 @@ -$govuk-include-default-font-face: false; - -@import "../../govuk-frontend/dist/govuk/settings/index"; -@import "../../govuk-frontend/dist/govuk/tools/index"; -@import "../../govuk-frontend/dist/govuk/helpers/index"; -@import "../../accessible-autocomplete/dist/accessible-autocomplete.min"; +@use "../../govuk-frontend/dist/govuk/settings/index" as * with ( + $govuk-include-default-font-face: false +); +@use "../../govuk-frontend/dist/govuk/tools/index" as *; +@use "../../govuk-frontend/dist/govuk/helpers/index" as * with ( + $govuk-include-default-font-face: false +); +@use "../../accessible-autocomplete/dist/accessible-autocomplete.min" as * with ( + $govuk-include-default-font-face: false +); .autocomplete__wrapper, .autocomplete__input, diff --git a/src/all-govuk-and-hmrc.scss b/src/all-govuk-and-hmrc.scss index 3725d81c..6476c96d 100644 --- a/src/all-govuk-and-hmrc.scss +++ b/src/all-govuk-and-hmrc.scss @@ -1,8 +1,6 @@ -$govuk-global-styles: false; -$hmrc-assets-path: ""; -$govuk-assets-path: "govuk/"; -$govuk-new-link-styles: true; - -@import "../../govuk-frontend/dist/govuk/index"; -@import "components/all"; -@import "hmrc-frontend-print-overrides"; +@use "../../govuk-frontend/dist/govuk/index" as * with ( + $govuk-global-styles: false, + $govuk-assets-path: "govuk/" +); +@use "components/all" as * ; +@use "hmrc-frontend-print-overrides" as *; diff --git a/src/all.scss b/src/all.scss index 16cbc527..089385ac 100644 --- a/src/all.scss +++ b/src/all.scss @@ -1,17 +1,7 @@ -$govuk-global-styles: true; -$govuk-new-link-styles: true !default; -$govuk-new-organisation-colours: true !default; - -/// Path to the assets directory, with trailing slash. -/// -/// This is the directory where the images and fonts subdirectories live. You -/// will need to make this directory available via your application – see the -/// README for details. -/// -/// @type String -/// @access public - -$hmrc-assets-path: "./" !default; -$govuk-assets-path: $hmrc-assets-path !default; - -@import "components/all"; +@use "components/all" as * with ( + $govuk-global-styles: true, + $govuk-new-link-styles: true !default, + $govuk-new-organisation-colours: true !default, + $hmrc-assets-path: "./" !default, + $govuk-assets-path: $hmrc-assets-path !default +); diff --git a/src/components/_all.scss b/src/components/_all.scss index a9960da4..791cbf3a 100644 --- a/src/components/_all.scss +++ b/src/components/_all.scss @@ -1,16 +1,16 @@ -@import "add-to-a-list/add-to-a-list"; -@import "back-link-helper/back-link-helper"; -@import "banner/banner"; -@import "caseworker-banner/caseworker-banner"; -@import "header/header"; -@import "internal-header/internal-header"; -@import "js-visible/js-visible"; -@import "list-with-actions/list-with-actions"; -@import "notification-badge/notification-badge"; -@import "page-heading/page-heading"; -@import "service-navigation-language-select/service-navigation-language-select"; -@import "status-tags-in-task-list-pages/status-tags-in-task-list-pages"; -@import "summary-list/summary-list"; -@import "timeline/timeline"; -@import "timeout-dialog/timeout-dialog"; -@import "user-research-banner/user-research-banner"; +@use "add-to-a-list/add-to-a-list" as *; +@use "back-link-helper/back-link-helper" as *; +@use "banner/banner" as *; +@use "caseworker-banner/caseworker-banner" as *; +@use "header/header" as *; +@use "internal-header/internal-header" as *; +@use "js-visible/js-visible" as *; +@use "list-with-actions/list-with-actions" as *; +@use "notification-badge/notification-badge" as *; +@use "page-heading/page-heading" as *; +@use "service-navigation-language-select/service-navigation-language-select" as *; +@use "status-tags-in-task-list-pages/status-tags-in-task-list-pages" as *; +@use "summary-list/summary-list" as *; +@use "timeline/timeline" as *; +@use "timeout-dialog/timeout-dialog" as *; +@use "user-research-banner/user-research-banner" as *; diff --git a/src/components/add-to-a-list/_add-to-a-list.scss b/src/components/add-to-a-list/_add-to-a-list.scss index 4ba68ab6..b72d620a 100644 --- a/src/components/add-to-a-list/_add-to-a-list.scss +++ b/src/components/add-to-a-list/_add-to-a-list.scss @@ -1,6 +1,6 @@ -@import "../../../../govuk-frontend/dist/govuk/settings/index"; -@import "../../../../govuk-frontend/dist/govuk/tools/index"; -@import "../../../../govuk-frontend/dist/govuk/helpers/index"; +@use "../../../../govuk-frontend/dist/govuk/settings/index" as *; +@use "../../../../govuk-frontend/dist/govuk/tools/index" as *; +@use "../../../../govuk-frontend/dist/govuk/helpers/index" as *; .hmrc-add-to-a-list { padding-left: 0; diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index e905123b..086d553b 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -1,4 +1,6 @@ // stylelint-disable max-nesting-depth, number-max-precision -- deferred during move to stylelint-config-gds +@use "../../../../govuk-frontend/dist/govuk/base" as *; + $govuk-header-link-underline-thickness: 3px; .hmrc-header.hmrc-header--with-additional-navigation { diff --git a/src/components/internal-header/_internal-header.scss b/src/components/internal-header/_internal-header.scss index a967c0cb..f5e124a9 100644 --- a/src/components/internal-header/_internal-header.scss +++ b/src/components/internal-header/_internal-header.scss @@ -1,3 +1,6 @@ +@use "../../../../govuk-frontend/dist/govuk/base" as *; +@use "../../../../govuk-frontend/dist/govuk/components/header" as *; + .hmrc-internal-header { @include govuk-font($size: 19); @@ -69,8 +72,8 @@ &:hover, &:active { // Negate added border - margin-bottom: $govuk-header-link-underline-thickness * -1; - border-bottom: $govuk-header-link-underline-thickness solid; + //margin-bottom: $govuk-header-link-underline-thickness * -1; + //border-bottom: $govuk-header-link-underline-thickness solid; } &:focus { @@ -127,8 +130,8 @@ &:hover, &:active { // Negate added border - margin-bottom: $govuk-header-link-underline-thickness * -1; - border-bottom: $govuk-header-link-underline-thickness solid; + //margin-bottom: $govuk-header-link-underline-thickness * -1; + //border-bottom: $govuk-header-link-underline-thickness solid; } &:focus { diff --git a/src/components/list-with-actions/_list-with-actions.scss b/src/components/list-with-actions/_list-with-actions.scss index 9fdf945a..ad58cc2e 100644 --- a/src/components/list-with-actions/_list-with-actions.scss +++ b/src/components/list-with-actions/_list-with-actions.scss @@ -1,6 +1,6 @@ -@import "../../../../govuk-frontend/dist/govuk/settings/index"; -@import "../../../../govuk-frontend/dist/govuk/tools/index"; -@import "../../../../govuk-frontend/dist/govuk/helpers/index"; +@use "../../../../govuk-frontend/dist/govuk/settings/index" as *; +@use "../../../../govuk-frontend/dist/govuk/tools/index" as *; +@use "../../../../govuk-frontend/dist/govuk/helpers/index" as *; .hmrc-list-with-actions { @include govuk-font($size: 19); diff --git a/src/components/page-heading/_page-heading.scss b/src/components/page-heading/_page-heading.scss index 01f635b4..510c5bc1 100644 --- a/src/components/page-heading/_page-heading.scss +++ b/src/components/page-heading/_page-heading.scss @@ -1,3 +1,5 @@ +@use "../../../../govuk-frontend/dist/govuk/base" as *; + .hmrc-page-heading { display: table; width: 100%; diff --git a/src/components/service-navigation-language-select/_service-navigation-language-select.scss b/src/components/service-navigation-language-select/_service-navigation-language-select.scss index c7579f54..9167556e 100644 --- a/src/components/service-navigation-language-select/_service-navigation-language-select.scss +++ b/src/components/service-navigation-language-select/_service-navigation-language-select.scss @@ -1,4 +1,5 @@ @use "sass:math"; +@use "../../../../govuk-frontend/dist/govuk/base" as *; .hmrc-service-navigation-language-select { @include govuk-font($size: 16); diff --git a/src/components/status-tags-in-task-list-pages/_status-tags-in-task-list-pages.scss b/src/components/status-tags-in-task-list-pages/_status-tags-in-task-list-pages.scss index 9e55c083..858bd7c2 100644 --- a/src/components/status-tags-in-task-list-pages/_status-tags-in-task-list-pages.scss +++ b/src/components/status-tags-in-task-list-pages/_status-tags-in-task-list-pages.scss @@ -3,6 +3,8 @@ // Custom styles +@use "../../../../govuk-frontend/dist/govuk/base" as *; + .hmrc-status-tag { color: $govuk-text-colour; font-family: "GDS Transport", Arial, sans-serif; diff --git a/src/components/summary-list/_summary-list.scss b/src/components/summary-list/_summary-list.scss index 845d541e..285b15ed 100644 --- a/src/components/summary-list/_summary-list.scss +++ b/src/components/summary-list/_summary-list.scss @@ -1,3 +1,5 @@ +@use "../../../../govuk-frontend/dist/govuk/base" as *; + @include govuk-media-query($from: tablet) { .govuk-summary-list.govuk-summary-list--long-key { .govuk-summary-list__row { diff --git a/src/components/timeline/_timeline.scss b/src/components/timeline/_timeline.scss index 84c2fce5..bdedb343 100644 --- a/src/components/timeline/_timeline.scss +++ b/src/components/timeline/_timeline.scss @@ -1,4 +1,5 @@ -@import "../../../../govuk-frontend/dist/govuk/core/typography"; +@use "../../../../govuk-frontend/dist/govuk/core/typography" as *; +@use "../../../../govuk-frontend/dist/govuk/base" as *; .hmrc-timeline { $border-width: 5px; diff --git a/src/components/timeout-dialog/_timeout-dialog.scss b/src/components/timeout-dialog/_timeout-dialog.scss index d38c9f12..2d64a569 100644 --- a/src/components/timeout-dialog/_timeout-dialog.scss +++ b/src/components/timeout-dialog/_timeout-dialog.scss @@ -1,9 +1,9 @@ @use "sass:math"; // stylelint-disable number-max-precision -- deferred during move to stylelint-config-gds -@import "../../../../govuk-frontend/dist/govuk/settings/index"; -@import "../../../../govuk-frontend/dist/govuk/tools/index"; -@import "../../../../govuk-frontend/dist/govuk/helpers/index"; +@use "../../../../govuk-frontend/dist/govuk/settings/index" as *; +@use "../../../../govuk-frontend/dist/govuk/tools/index" as *; +@use "../../../../govuk-frontend/dist/govuk/helpers/index" as *; .hmrc-timeout-overlay { position: fixed; diff --git a/src/components/user-research-banner/_user-research-banner.scss b/src/components/user-research-banner/_user-research-banner.scss index 11ff031f..44c1cb81 100644 --- a/src/components/user-research-banner/_user-research-banner.scss +++ b/src/components/user-research-banner/_user-research-banner.scss @@ -1,6 +1,7 @@ -@import "../../../../govuk-frontend/dist/govuk/helpers/links"; -@import "../../../../govuk-frontend/dist/govuk/helpers/typography"; -@import "../../../../govuk-frontend/dist/govuk/utilities/clearfix"; +@use "../../../../govuk-frontend/dist/govuk/helpers/links" as *; +@use "../../../../govuk-frontend/dist/govuk/helpers/typography" as *; +@use "../../../../govuk-frontend/dist/govuk/utilities/clearfix" as *; +@use "../../../../govuk-frontend/dist/govuk/base" as *; .hmrc-user-research-banner { display: none; diff --git a/src/govuk-prototype-kit.config.json b/src/govuk-prototype-kit.config.json index 1bb27e2c..ecdbf9a0 100644 --- a/src/govuk-prototype-kit.config.json +++ b/src/govuk-prototype-kit.config.json @@ -10,7 +10,7 @@ "pluginDependencies": [ { "packageName": "govuk-frontend", - "minVersion": "6.1.0" + "minVersion": "6.2.0" } ], "assets": [