From ed544af65dd2bf2139e3285ac4f20bb5fa0b9f27 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 21 Feb 2025 17:06:16 +0000
Subject: [PATCH 1/8] Move grid widths to globals and make public

See: https://github.com/alphagov/govuk-frontend/pull/1090

Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
---
 packages/core/settings/_globals.scss | 13 +++++++++++++
 packages/core/tools/_grid.scss       | 20 ++++----------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/core/settings/_globals.scss b/packages/core/settings/_globals.scss
index 9f16e8624..c890a6ead 100644
--- a/packages/core/settings/_globals.scss
+++ b/packages/core/settings/_globals.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 ////
 /// Globals
 ///
@@ -32,6 +34,17 @@ $nhsuk-page-width: 960px !default;
 $nhsuk-gutter: 32px;
 $nhsuk-gutter-half: $nhsuk-gutter * 0.5;
 
+/// Map of grid column widths
+
+$nhsuk-grid-widths: (
+  one-quarter: math.percentage(math.div(1, 4)),
+  one-third: math.percentage(math.div(1, 3)),
+  one-half: math.percentage(math.div(1, 2)),
+  two-thirds: math.percentage(math.div(2, 3)),
+  three-quarters: math.percentage(math.div(3, 4)),
+  full: 100%
+) !default;
+
 /// Border sizes
 
 $nhsuk-border-width-inset-text: 8px !default;
diff --git a/packages/core/tools/_grid.scss b/packages/core/tools/_grid.scss
index afb08ddc4..744d691e5 100644
--- a/packages/core/tools/_grid.scss
+++ b/packages/core/tools/_grid.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 ////
 /// Grid
 ///
@@ -5,20 +7,6 @@
 /// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
 ////
 
-@use "sass:map";
-@use "sass:math";
-
-/// Map of grid column widths
-
-$_nhsuk-grid-widths: (
-  one-quarter: math.percentage(math.div(1, 4)),
-  one-third: math.percentage(math.div(1, 3)),
-  one-half: math.percentage(math.div(1, 2)),
-  two-thirds: math.percentage(math.div(2, 3)),
-  three-quarters: math.percentage(math.div(3, 4)),
-  full: 100%
-) !default;
-
 /// Grid width percentage
 ///
 /// @param {String} $key - Name of grid width (e.g. two-thirds)
@@ -26,8 +14,8 @@ $_nhsuk-grid-widths: (
 /// @throw if `$key` is not a valid grid width
 
 @function grid-width($key) {
-  @if map.has-key($_nhsuk-grid-widths, $key) {
-    @return map.get($_nhsuk-grid-widths, $key);
+  @if map.has-key($nhsuk-grid-widths, $key) {
+    @return map.get($nhsuk-grid-widths, $key);
   }
 
   @error "Unknown grid width `#{$key}`";

From 5a617ebb791446c0a9481fcd49390dec5e85d8e8 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 21 Feb 2025 17:12:36 +0000
Subject: [PATCH 2/8] Rename grid-width function to govuk-grid-width

This is to be consistent with other functions which are namespaced under the govuk prefix.

We keep grid-width as a deprecated alias which we can remove in the next major version.

See: https://github.com/alphagov/govuk-frontend/pull/1090

Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
---
 packages/core/tools/_grid.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/core/tools/_grid.scss b/packages/core/tools/_grid.scss
index 744d691e5..6dd7af06e 100644
--- a/packages/core/tools/_grid.scss
+++ b/packages/core/tools/_grid.scss
@@ -13,7 +13,7 @@
 /// @return {Number} Percentage width
 /// @throw if `$key` is not a valid grid width
 
-@function grid-width($key) {
+@function govuk-grid-width($key) {
   @if map.has-key($nhsuk-grid-widths, $key) {
     @return map.get($nhsuk-grid-widths, $key);
   }
@@ -21,6 +21,15 @@
   @error "Unknown grid width `#{$key}`";
 }
 
+/// Grid width percentage (alias)
+///
+/// @alias govuk-grid-width
+/// @deprecated To be removed in v10.0, replaced by govuk-grid-width
+
+@function grid-width($key) {
+  @return govuk-grid-width($key);
+}
+
 /// Generate grid row styles
 ///
 /// Creates a grid row class with a standardised margin.
@@ -77,8 +86,8 @@
       width: 100%;
     }
     @include govuk-media-query($from: $at) {
+      width: govuk-grid-width($width);
       float: $float;
-      width: grid-width($width);
     }
   }
 }

From 1aabb4ad6b79b7e3927aee1b5cc84bb46bb7c1e0 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 21 Feb 2025 17:40:39 +0000
Subject: [PATCH 3/8] Deprecate govuk-grid-row mixin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrapping the row functionality up in a mixin offers little other than the ability to use a custom name, but we’re not sure there’s a need for users to do that.

Simplify the code by deprecating the mixin and just using the code to create the concrete class directly.

See: https://github.com/alphagov/govuk-frontend/pull/1090

Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
---
 packages/core/objects/_grid.scss | 7 ++++++-
 packages/core/tools/_grid.scss   | 2 ++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/core/objects/_grid.scss b/packages/core/objects/_grid.scss
index 72b518b95..3e14990f8 100644
--- a/packages/core/objects/_grid.scss
+++ b/packages/core/objects/_grid.scss
@@ -5,7 +5,12 @@
 ////
 
 @include govuk-exports("govuk/objects/grid") {
-  @include govuk-grid-row;
+  .nhsuk-grid-row {
+    @include clearfix;
+    margin-right: -($nhsuk-gutter-half);
+    margin-left: -($nhsuk-gutter-half);
+  }
+
   @include govuk-grid-column(one-quarter);
   @include govuk-grid-column(one-third);
   @include govuk-grid-column(one-half);
diff --git a/packages/core/tools/_grid.scss b/packages/core/tools/_grid.scss
index 6dd7af06e..4428d88b8 100644
--- a/packages/core/tools/_grid.scss
+++ b/packages/core/tools/_grid.scss
@@ -41,6 +41,8 @@
 ///
 /// @example scss - Customising the class name
 ///   @include govuk-grid-row("app-grid");
+///
+/// @deprecated To be removed in v10.0, replaced by the nhsuk-grid-row class
 
 @mixin govuk-grid-row($class: "nhsuk-grid-row") {
   .#{$class} {

From 89d24f65b615d58a20d85ec6b4127f69003eaada Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 21 Feb 2025 17:47:07 +0000
Subject: [PATCH 4/8] Deprecate govuk-grid-column generating class names
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The class names generated by the mixin are not flexible enough, as the width is just appended to the class name. In spiking how we might add an extended grid we found the generated class names a little yoda-ish, for example `govuk-grid-column--at-desktop-one-quarter` (bonus points if you actually read that in Yoda’s voice).

Moving the class naming out of the mixin and doing it within the objects layer is also more consistent with the rest of Frontend, and means that users who do use the grid mixins directly don’t have to fit with the constraints of our class name structure.

See: https://github.com/alphagov/govuk-frontend/pull/1090

Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
---
 packages/core/objects/_grid.scss | 11 +++----
 packages/core/tools/_grid.scss   | 56 ++++++++++++++++++++------------
 2 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/packages/core/objects/_grid.scss b/packages/core/objects/_grid.scss
index 3e14990f8..a20243cae 100644
--- a/packages/core/objects/_grid.scss
+++ b/packages/core/objects/_grid.scss
@@ -11,10 +11,9 @@
     margin-left: -($nhsuk-gutter-half);
   }
 
-  @include govuk-grid-column(one-quarter);
-  @include govuk-grid-column(one-third);
-  @include govuk-grid-column(one-half);
-  @include govuk-grid-column(two-thirds);
-  @include govuk-grid-column(three-quarters);
-  @include govuk-grid-column(full);
+  @each $width in map-keys($nhsuk-grid-widths) {
+    .nhsuk-grid-column-#{$width} {
+      @include govuk-grid-column($width, $class: false);
+    }
+  }
 }
diff --git a/packages/core/tools/_grid.scss b/packages/core/tools/_grid.scss
index 4428d88b8..db1cd6948 100644
--- a/packages/core/tools/_grid.scss
+++ b/packages/core/tools/_grid.scss
@@ -34,7 +34,7 @@
 ///
 /// Creates a grid row class with a standardised margin.
 ///
-/// @param {String} $class [govuk-grid-row] CSS class name
+/// @param {String} $class [nhsuk-grid-row] CSS class name
 ///
 /// @example scss - Default
 ///   @include govuk-grid-row;
@@ -47,46 +47,62 @@
 @mixin govuk-grid-row($class: "nhsuk-grid-row") {
   .#{$class} {
     @include clearfix;
-    margin-left: -($nhsuk-gutter-half);
     margin-right: -($nhsuk-gutter-half);
+    margin-left: -($nhsuk-gutter-half);
   }
 }
 
 /// Generate grid column styles
 ///
-/// Creates a cross browser grid column with a class of '.govuk-grid-column' by
-/// default, and a standardised gutter between the columns.
+/// Creates a grid column with standard gutter between the columns.
+///
+/// If a `$class` is provided (which is the default, but deprecated behaviour),
+/// the generated rules will be wrapped in a predefined selector in the format
+/// `$class-$width` (e.g. `nhsuk-grid-column-full`). This behaviour is
+/// deprecated and will be removed in v10.0
 ///
-/// Common widths are predefined above as keywords in the `$grid-widths` map.
+/// Grid widths are defined in the `$nhsuk-grid-widths` map.
 ///
-/// By default their width changes from 100% to specified width at the 'tablet'
-/// breakpoint, but that can be configured to be any other breakpoint by using
-/// the `$at` parameter.
+/// By default the column width changes from 100% to specified width at the
+/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// parameter.
 ///
-/// @param {String} $class [govuk-grid-column] CSS class name
-/// @param {String} $width [full] one-quarter | one-third | one-half | two-third | three-quarters | full
+/// @param {String} $width [full] name of a grid width from $nhsuk-grid-widths
 /// @param {String} $float [left] left | right
-/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint in px or em
+/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
+/// @param {String} $class [nhsuk-grid-column] CSS class name (deprecated)
 ///
 /// @example scss - Default
-///   @include govuk-grid-column(two-thirds)
-///
-/// @example scss - Customising the class name
-///   @include govuk-grid-column(one-half, $class: "test-column");
+///   .nhsuk-grid-column-two-thirds {
+///     @include govuk-grid-column(two-thirds, $class: false)
+///   }
 ///
 /// @example scss - Customising the breakpoint where width percentage is applied
-///   @include govuk-grid-column(one-half, $at: desktop);
+///   .nhsuk-grid-column-one-half-at-desktop {
+///     @include govuk-grid-column(one-half, $at: desktop);
+///   }
 ///
 /// @example scss - Customising the float direction
-///   @include govuk-grid-column(one-half, $float: right);
+///   .nhsuk-grid-column-one-half-right {
+///     @include govuk-grid-column(two-thirds, $float: right, $class: false);
+///   }
+///
+/// @example scss - Customising the class name (deprecated)
+///   @include govuk-grid-column(one-half, $class: "test-column");
+///
+/// @access public
 
-@mixin govuk-grid-column($width: full, $float: left, $at: desktop, $class: "nhsuk-grid-column") {
-  .#{$class}-#{$width} {
+@mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "nhsuk-grid-column") {
+  @if $class {
+    .#{$class}-#{$width} {
+      @include govuk-grid-column($width, $float, $at, $class: false);
+    }
+  } @else {
     box-sizing: border-box;
-    padding: 0 $nhsuk-gutter-half;
     @if $at != desktop {
       width: 100%;
     }
+    padding: 0 $nhsuk-gutter-half;
     @include govuk-media-query($from: $at) {
       width: govuk-grid-width($width);
       float: $float;

From 15dc67581d6d86ed96d02afe6b55c4fe53b6d4de Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 21 Feb 2025 17:07:57 +0000
Subject: [PATCH 5/8] Rename Jest test projects to match GOV.UK Frontend

---
 jest.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 6ab9d8cb4..95396cc52 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,12 +16,12 @@ module.exports = {
 
   projects: [
     {
-      displayName: 'JSDom',
+      displayName: 'JavaScript behaviour tests',
       testEnvironment: 'jsdom',
       testMatch: ['<rootDir>/tests/integration/jsdom/**/*.test.js']
     },
     {
-      displayName: 'Pupppeteer',
+      displayName: 'JavaScript component tests',
       globalSetup: 'jest-environment-puppeteer/setup',
       globalTeardown: 'jest-environment-puppeteer/teardown',
       testEnvironment: 'jest-environment-puppeteer',

From 534aeaf6c6d7f0beacbde33ca05abafb6a6c191f Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 21 Feb 2025 17:48:47 +0000
Subject: [PATCH 6/8] Add unit tests for grid mixins from GOV.UK Frontend

See: https://github.com/alphagov/govuk-frontend/pull/1090

Co-authored-by: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
---
 .npmignore                            |   1 +
 jest.config.js                        |   9 +
 package-lock.json                     |   8 +
 package.json                          |   1 +
 packages/core/tools/grid.unit.test.js | 302 ++++++++++++++++++++++++++
 5 files changed, 321 insertions(+)
 create mode 100644 .npmignore
 create mode 100644 packages/core/tools/grid.unit.test.js

diff --git a/.npmignore b/.npmignore
new file mode 100644
index 000000000..9db083158
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1 @@
+*.test.*
diff --git a/jest.config.js b/jest.config.js
index 95396cc52..69b30bc62 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -15,6 +15,15 @@ module.exports = {
     : 1, // Use only 1x browser window when headless
 
   projects: [
+    {
+      displayName: 'JavaScript unit tests',
+      testMatch: [
+        '**/*.unit.test.{js,mjs}',
+
+        // Exclude integration tests
+        '!<rootDir>/tests/integration/**'
+      ]
+    },
     {
       displayName: 'JavaScript behaviour tests',
       testEnvironment: 'jsdom',
diff --git a/package-lock.json b/package-lock.json
index 22fd2daef..d164a1a7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-puppeteer": "^11.0.0",
         "nunjucks": "^3.2.4",
+        "outdent": "^0.8.0",
         "plugin-error": "^2.0.1",
         "postcss": "^8.5.2",
         "postcss-markdown": "^1.3.0",
@@ -12989,6 +12990,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/outdent": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz",
+      "integrity": "sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
diff --git a/package.json b/package.json
index 1fd72e84e..8fa4ddea7 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-puppeteer": "^11.0.0",
     "nunjucks": "^3.2.4",
+    "outdent": "^0.8.0",
     "plugin-error": "^2.0.1",
     "postcss": "^8.5.2",
     "postcss-markdown": "^1.3.0",
diff --git a/packages/core/tools/grid.unit.test.js b/packages/core/tools/grid.unit.test.js
new file mode 100644
index 000000000..ef86b718c
--- /dev/null
+++ b/packages/core/tools/grid.unit.test.js
@@ -0,0 +1,302 @@
+const outdent = require('outdent')
+const { compileStringAsync } = require('sass-embedded')
+
+describe('grid system', () => {
+  const sassImports = `
+    @import "core/settings/globals";
+    @import "core/settings/spacing";
+
+    @import "core/tools/grid";
+    @import "core/tools/exports";
+    @import "core/tools/sass-mq";
+  `
+
+  describe('govuk-grid-width function', () => {
+    it('outputs the specified key value from the map of widths', async () => {
+      const sass = `
+        ${sassImports}
+
+        .foo {
+          content: govuk-grid-width(one-quarter);
+        }
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(
+        outdent`
+          .foo {
+            content: 25%;
+          }
+        `
+      )
+    })
+
+    it('throws an error that the specified key does not exist in the map of widths', async () => {
+      const sass = `
+        ${sassImports}
+
+        $value: govuk-grid-width(seven-fifths);
+      `
+
+      await expect(
+        compileStringAsync(sass, {
+          loadPaths: ['packages']
+        })
+      ).rejects.toThrow('Unknown grid width `seven-fifths`')
+    })
+  })
+
+  describe('@govuk-grid-row mixin', () => {
+    it('outputs default defined styles for .nhsuk-grid-row class', async () => {
+      const sass = `
+        ${sassImports}
+
+        @import "core/tools/mixins";
+
+        @include govuk-grid-row;
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .nhsuk-grid-row {
+          margin-right: -16px;
+          margin-left: -16px;
+        }
+        .nhsuk-grid-row::after {
+          clear: both;
+          content: \"\";
+          display: block;
+        }
+      `)
+    })
+
+    it('outputs styles for the specified class', async () => {
+      const sass = `
+        ${sassImports}
+
+        @import "core/tools/mixins";
+
+        @include govuk-grid-row("app-grid-row");
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .app-grid-row {
+          margin-right: -16px;
+          margin-left: -16px;
+        }
+        .app-grid-row::after {
+          clear: both;
+          content: \"\";
+          display: block;
+        }
+      `)
+    })
+  })
+
+  describe('@govuk-grid-column mixin', () => {
+    it('outputs the CSS required for a column in the grid', async () => {
+      const sass = `
+        ${sassImports}
+
+        .nhsuk-grid-column-full {
+          @include govuk-grid-column($class: false);
+        }
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .nhsuk-grid-column-full {
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0 16px;
+        }
+        @media (min-width: 46.25em) {
+          .nhsuk-grid-column-full {
+            width: 100%;
+            float: left;
+          }
+        }
+      `)
+    })
+
+    it('allows different widths to be specified using $width', async () => {
+      const sass = `
+        ${sassImports}
+
+        .nhsuk-grid-column-two-thirds {
+          @include govuk-grid-column(two-thirds, $class: false);
+        }
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .nhsuk-grid-column-two-thirds {
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0 16px;
+        }
+        @media (min-width: 46.25em) {
+          .nhsuk-grid-column-two-thirds {
+            width: 66.6666666667%;
+            float: left;
+          }
+        }
+      `)
+    })
+
+    it('allows predefined breakpoints to be specified using $at', async () => {
+      const sass = `
+        ${sassImports}
+
+        .nhsuk-grid-column-one-quarter-at-desktop {
+          @include govuk-grid-column(one-quarter, $at: desktop, $class: false);
+        }
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .nhsuk-grid-column-one-quarter-at-desktop {
+          box-sizing: border-box;
+          padding: 0 16px;
+        }
+        @media (min-width: 61.25em) {
+          .nhsuk-grid-column-one-quarter-at-desktop {
+            width: 25%;
+            float: left;
+          }
+        }
+      `)
+    })
+
+    it('allows custom breakpoints to be specified using $at', async () => {
+      const sass = `
+        ${sassImports}
+
+        .nhsuk-grid-column-one-quarter-at-500px {
+          @include govuk-grid-column(one-quarter, $at: 500px, $class: false);
+        }
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .nhsuk-grid-column-one-quarter-at-500px {
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0 16px;
+        }
+        @media (min-width: 31.25em) {
+          .nhsuk-grid-column-one-quarter-at-500px {
+            width: 25%;
+            float: left;
+          }
+        }
+      `)
+    })
+
+    it('allows columns to float right using $float: right', async () => {
+      const sass = `
+        ${sassImports}
+
+        .nhsuk-grid-column-one-half-right {
+          @include govuk-grid-column(one-half, $float: right, $class: false);
+        }
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .nhsuk-grid-column-one-half-right {
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0 16px;
+        }
+        @media (min-width: 46.25em) {
+          .nhsuk-grid-column-one-half-right {
+            width: 50%;
+            float: right;
+          }
+        }
+      `)
+    })
+
+    it('includes the class name by default (deprecated)', async () => {
+      const sass = `
+        ${sassImports}
+
+        @include govuk-grid-column();
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .nhsuk-grid-column-full {
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0 16px;
+        }
+        @media (min-width: 46.25em) {
+          .nhsuk-grid-column-full {
+            width: 100%;
+            float: left;
+          }
+        }
+      `)
+    })
+
+    it('allows the class name to be overridden (deprecated)', async () => {
+      const sass = `
+        ${sassImports}
+
+        @include govuk-grid-column(three-quarters, $class: "large-column");
+      `
+
+      const results = await compileStringAsync(sass, {
+        loadPaths: ['packages']
+      })
+
+      expect(results.css).toBe(outdent`
+        .large-column-three-quarters {
+          box-sizing: border-box;
+          width: 100%;
+          padding: 0 16px;
+        }
+        @media (min-width: 46.25em) {
+          .large-column-three-quarters {
+            width: 75%;
+            float: left;
+          }
+        }
+      `)
+    })
+  })
+})
+
+/**
+ * @import { Options } from 'sass-embedded'
+ */

From ae6c76c3c5ae1369f7485fabe58273213dd8b20f Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 21 Feb 2025 18:24:08 +0000
Subject: [PATCH 7/8] Prefer NHS default `$at` param

---
 packages/core/tools/_grid.scss        | 12 ++++++------
 packages/core/tools/grid.unit.test.js | 20 ++++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/core/tools/_grid.scss b/packages/core/tools/_grid.scss
index db1cd6948..419c45ba2 100644
--- a/packages/core/tools/_grid.scss
+++ b/packages/core/tools/_grid.scss
@@ -64,12 +64,12 @@
 /// Grid widths are defined in the `$nhsuk-grid-widths` map.
 ///
 /// By default the column width changes from 100% to specified width at the
-/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// 'desktop' breakpoint, but other breakpoints can be specified using the `$at`
 /// parameter.
 ///
 /// @param {String} $width [full] name of a grid width from $nhsuk-grid-widths
 /// @param {String} $float [left] left | right
-/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
+/// @param {String} $at [desktop] - mobile | tablet | desktop | any custom breakpoint
 /// @param {String} $class [nhsuk-grid-column] CSS class name (deprecated)
 ///
 /// @example scss - Default
@@ -78,8 +78,8 @@
 ///   }
 ///
 /// @example scss - Customising the breakpoint where width percentage is applied
-///   .nhsuk-grid-column-one-half-at-desktop {
-///     @include govuk-grid-column(one-half, $at: desktop);
+///   .nhsuk-grid-column-one-half-at-tablet {
+///     @include govuk-grid-column(one-half, $at: tablet);
 ///   }
 ///
 /// @example scss - Customising the float direction
@@ -92,14 +92,14 @@
 ///
 /// @access public
 
-@mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "nhsuk-grid-column") {
+@mixin govuk-grid-column($width: full, $float: left, $at: desktop, $class: "nhsuk-grid-column") {
   @if $class {
     .#{$class}-#{$width} {
       @include govuk-grid-column($width, $float, $at, $class: false);
     }
   } @else {
     box-sizing: border-box;
-    @if $at != desktop {
+    @if $at != tablet {
       width: 100%;
     }
     padding: 0 $nhsuk-gutter-half;
diff --git a/packages/core/tools/grid.unit.test.js b/packages/core/tools/grid.unit.test.js
index ef86b718c..3e14da38b 100644
--- a/packages/core/tools/grid.unit.test.js
+++ b/packages/core/tools/grid.unit.test.js
@@ -123,7 +123,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .nhsuk-grid-column-full {
             width: 100%;
             float: left;
@@ -151,7 +151,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .nhsuk-grid-column-two-thirds {
             width: 66.6666666667%;
             float: left;
@@ -164,8 +164,8 @@ describe('grid system', () => {
       const sass = `
         ${sassImports}
 
-        .nhsuk-grid-column-one-quarter-at-desktop {
-          @include govuk-grid-column(one-quarter, $at: desktop, $class: false);
+        .nhsuk-grid-column-one-quarter-at-tablet {
+          @include govuk-grid-column(one-quarter, $at: tablet, $class: false);
         }
       `
 
@@ -174,12 +174,12 @@ describe('grid system', () => {
       })
 
       expect(results.css).toBe(outdent`
-        .nhsuk-grid-column-one-quarter-at-desktop {
+        .nhsuk-grid-column-one-quarter-at-tablet {
           box-sizing: border-box;
           padding: 0 16px;
         }
-        @media (min-width: 61.25em) {
-          .nhsuk-grid-column-one-quarter-at-desktop {
+        @media (min-width: 46.25em) {
+          .nhsuk-grid-column-one-quarter-at-tablet {
             width: 25%;
             float: left;
           }
@@ -234,7 +234,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .nhsuk-grid-column-one-half-right {
             width: 50%;
             float: right;
@@ -260,7 +260,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .nhsuk-grid-column-full {
             width: 100%;
             float: left;
@@ -286,7 +286,7 @@ describe('grid system', () => {
           width: 100%;
           padding: 0 16px;
         }
-        @media (min-width: 46.25em) {
+        @media (min-width: 61.25em) {
           .large-column-three-quarters {
             width: 75%;
             float: left;

From 416fd128806b83aec7d21050f876c6a7832dc1b0 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 21 Feb 2025 18:02:34 +0000
Subject: [PATCH 8/8] Add tablet specific grid classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inspired by “desktop specific grid classs” in: https://github.com/alphagov/govuk-frontend/pull/1094
---
 packages/core/objects/_grid.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/core/objects/_grid.scss b/packages/core/objects/_grid.scss
index a20243cae..ed5f12504 100644
--- a/packages/core/objects/_grid.scss
+++ b/packages/core/objects/_grid.scss
@@ -11,6 +11,15 @@
     margin-left: -($nhsuk-gutter-half);
   }
 
+  // These *must* be defined in a separate loop as they have the same
+  // specificity as the non-breakpoint specific classes, so need to appear before
+  // them in the outputted CSS
+  @each $width in map-keys($nhsuk-grid-widths) {
+    .nhsuk-grid-column-#{$width}-from-tablet {
+      @include govuk-grid-column($width, $at: tablet, $class: false);
+    }
+  }
+
   @each $width in map-keys($nhsuk-grid-widths) {
     .nhsuk-grid-column-#{$width} {
       @include govuk-grid-column($width, $class: false);