Merge branch 'main' into header-breaking-changes

Author: frankieroberto

CHANGELOG.md

@@ -2,6 +2,30 @@
 
 ## Unreleased
 
+:wrench: **Fixes**
+
+We've made fixes to NHS.UK frontend in the following pull requests:
+
+- [#1301: Support webpack `sass-loader` pkg: scheme with nested paths](https://github.com/nhsuk/nhsuk-frontend/pull/1307)
+
+## 9.5.2 - 14 May 2025
+
+:wrench: **Fixes**
+
+We've made fixes to NHS.UK frontend in the following pull requests:
+
+- [#1301: Fix legacy Sass import path for inset text component](https://github.com/nhsuk/nhsuk-frontend/pull/1301)
+
+## 9.5.1 - 14 May 2025
+
+:wrench: **Fixes**
+
+We've made fixes to NHS.UK frontend in the following pull requests:
+
+- [#1300: Fix deprecation warnings for settings and tools `/all` paths](https://github.com/nhsuk/nhsuk-frontend/pull/1300)
+
+## 9.5.0 - 13 May 2025
+
 :new: **New features**
 
 #### Updated header
@@ -149,7 +173,7 @@ If you are overriding any settings prefixed with `$mq-` in your application you
 
 #### Replace Sass mixins for grids
 
-If you're using the `govuk-grid-column()` Sass mixin to create custom grid classes, you must replace it with the `nhsuk-grid-column()` mixin and remove the `$class` parameter.
+If you're using the `govuk-grid-column()` Sass mixin to create custom grid classes, you must replace it with the `nhsuk-grid-column()` mixin and set the `$class` parameter to `false`.
 
 Before:
 
@@ -165,7 +189,7 @@ After:
 
 ```scss
 .app-grid-column-one-quarter-at-desktop {
-  @include nhsuk-grid-column(one-quarter, $at: desktop);
+  @include nhsuk-grid-column(one-quarter, $at: desktop, $class: false);
 }
 ```
 
@@ -177,11 +201,23 @@ If you're using the `grid-width()` Sass mixin, you must replace it with the `nhs
 
 If you're using the `govuk-main-wrapper()`, `govuk-main-wrapper--l()` or `govuk-main-wrapper--s()` Sass mixins, you must replace them with the `.nhsuk-main-wrapper`, `.nhsuk-main-wrapper--l` and `.nhsuk-main-wrapper--s` classes in your HTML.
 
-#### Replace Sass mixin `nhsuk-typography-responsive` with `nhsuk-font-size`
+#### Replace Sass mixin `nhsuk-typography-responsive()` with `nhsuk-font-size()`
+
+We've renamed the Sass mixin `nhsuk-typography-responsive()` to `nhsuk-font-size()` and have deprecated `nhsuk-typography-responsive()`. This better communicates its intended purpose and aligns with `nhsuk-font()` parameters.
+
+Before:
+
+```scss
+@include nhsuk-typography-responsive(26, $override-line-height: 1.2);
+```
 
-We've renamed the Sass mixin `nhsuk-typography-responsive` to `nhsuk-font-size` and have deprecated `nhsuk-typography-responsive` to better communicate its intended use.
+After:
+
+```scss
+@include nhsuk-font-size(26, $line-height: 1.2);
+```
 
-You can still use `nhsuk-typography-responsive`, but we'll remove it in a future breaking release.
+You can still use `nhsuk-typography-responsive()`, but we'll remove it in a future breaking release.
 
 #### Updated Sass mixin, function and variable namespace
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-frontend",
-  "version": "9.4.1",
+  "version": "9.5.2",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
   "engines": {
     "node": "^20.9.0 || ^22.11.0"
@@ -15,11 +15,10 @@
     },
     "./*": "./*",
     "./packages/*": {
-      "sass": "./packages/*.scss",
+      "sass": "./packages/*",
       "default": "./packages/*.js"
     },
     "./packages/*.js": "./packages/*.js",
-    "./packages/*.scss": "./packages/*.scss",
     "./package.json": "./package.json"
   },
   "main": "packages/index.js",

package.json

@@ -0,0 +1,68 @@
+import { compileStringAsync } from 'sass-embedded'
+
+describe('Components', () => {
+  describe('importing using index file', () => {
+    it('forwards all components', async () => {
+      const sass = `
+        @forward "components";
+      `
+
+      const results = compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      await expect(results).resolves.not.toThrow()
+    })
+  })
+
+  describe('importing using legacy paths', () => {
+    it('forwards all components', async () => {
+      const sass = `
+        @forward "components/action-link/action-link";
+        @forward "components/back-link/back-link";
+        @forward "components/breadcrumb/breadcrumb";
+        @forward "components/button/button";
+        @forward "components/card/card";
+        @forward "components/contents-list/contents-list";
+        @forward "components/date-input/date-input";
+        @forward "components/details/details";
+        @forward "components/do-dont-list/do-dont-list";
+        @forward "components/error-message/error-message";
+        @forward "components/error-summary/error-summary";
+        @forward "components/fieldset/fieldset";
+        @forward "components/footer/footer";
+        @forward "components/header/header";
+        @forward "components/header/header-organisation";
+        @forward "components/header/header-service";
+        @forward "components/header/header-transactional";
+        @forward "components/header/header-white";
+        @forward "components/hero/hero";
+        @forward "components/hint/hint";
+        @forward "components/images/images";
+        @forward "components/input/input";
+        @forward "components/inset-text/inset-text";
+        @forward "components/label/label";
+        @forward "components/pagination/pagination";
+        @forward "components/panel/panel";
+        @forward "components/checkboxes/checkboxes";
+        @forward "components/radios/radios";
+        @forward "components/select/select";
+        @forward "components/skip-link/skip-link";
+        @forward "components/summary-list/summary-list";
+        @forward "components/tables/tables";
+        @forward "components/tag/tag";
+        @forward "components/task-list/task-list";
+        @forward "components/textarea/textarea";
+        @forward "components/warning-callout/warning-callout";
+        @forward "components/character-count/character-count";
+        @forward "components/tabs/tabs";
+      `
+
+      const results = compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      await expect(results).resolves.not.toThrow()
+    })
+  })
+})

packages/components/components.unit.test.mjs

@@ -9,7 +9,7 @@
     "name": "href",
     "type": "string",
     "required": false,
-    "description": "The value of the skip link’s `href` attribute. Defaults to `\"#maincontent\"` if you do not provide a value."
+    "description": "The value of the skip link's `href` attribute. Defaults to `\"#maincontent\"` if you do not provide a value."
   },
   {
     "name": "classes",

packages/components/inset-text/_input.scss renamed to packages/components/inset-text/_inset-text.scss

@@ -0,0 +1,53 @@
+import { compileStringAsync, sassNull } from 'sass-embedded'
+
+describe('Core', () => {
+  /** @type {Logger} */
+  let logger = {}
+
+  beforeEach(() => {
+    // Create a mock warn function that we can use to override the native @warn
+    // function, that we can make assertions about post-render.
+    logger.warn = jest.fn().mockReturnValue(sassNull)
+  })
+
+  describe('importing using "all" files', () => {
+    it('outputs a warning when importing the core "all" file', async () => {
+      const sass = `
+        @forward "core/all";
+      `
+
+      await compileStringAsync(sass, {
+        loadPaths: ['packages'],
+        logger
+      })
+
+      expect(logger.warn).toHaveBeenCalledWith(
+        `Importing using 'core/all' is deprecated. Update your import statement to import 'core'. To silence this warning, update $nhsuk-suppressed-warnings with key: "import-using-all"`,
+        expect.anything()
+      )
+    })
+
+    it('outputs a warning for each layer that has an "all" file', async () => {
+      const sass = `
+        @forward "core/settings/all";
+        @forward "core/tools/all";
+      `
+
+      await compileStringAsync(sass, {
+        loadPaths: ['packages'],
+        logger
+      })
+
+      for (const layer of ['settings', 'tools']) {
+        expect(logger.warn).toHaveBeenCalledWith(
+          `Importing using 'core/${layer}/all' is deprecated. Update your import statement to import 'core/${layer}'. To silence this warning, update $nhsuk-suppressed-warnings with key: "import-using-all"`,
+          expect.anything()
+        )
+      }
+    })
+  })
+})
+
+/**
+ * @import { Logger } from 'sass-embedded'
+ */

packages/components/skip-link/macro-options.json

@@ -1,4 +1,4 @@
-@use "settings/warnings" as *;
+@use "warnings" as *;
 @forward ".";
 
 @include nhsuk-warning(

packages/core/core.unit.test.mjs

@@ -66,12 +66,12 @@
 %nhsuk-list + .nhsuk-heading-s {
   padding-top: nhsuk-spacing(1);
 
-  @include mq($from: tablet) {
+  @include nhsuk-media-query($from: tablet) {
     padding-top: nhsuk-spacing(2);
   }
 }
 
-@include mq($media-type: print) {
+@include nhsuk-media-query($media-type: print) {
   %nhsuk-list + h2,
   %nhsuk-list + h3,
   %nhsuk-list + h4,

packages/core/settings/_all.scss

@@ -1,4 +1,4 @@
-@use "settings/warnings" as *;
+@use "../settings/warnings" as *;
 @forward ".";
 
 @include nhsuk-warning(