Add override class for tabular numbers

[querkmachine]

Adds an override class that invokes the govuk-font-tabular-numbers mixin.

I think this is a necessary feature to help meet alphagov/govuk-design-system#1233, as users are currently unable to use tabular numbers without using Sass—which in turn requires having a Sass build pipeline set up and authoring bespoke code—which is a bit of a faff, really.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	113.32 KiB
dist/govuk-frontend-development.min.js	42.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	81.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs	4.17 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.3 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.2 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	77.67 KiB	40.19 KiB
accordion.mjs	22.71 KiB	12.85 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for f262500

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 75a932582..de91626e8 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -7585,6 +7585,10 @@ screen and (-ms-high-contrast:active) {
     font-weight: 700 !important
 }
 
+.govuk-\!-font-tabular-numbers {
+    font-variant-numeric: tabular-nums !important
+}
+
 .govuk-\!-width-full,
 .govuk-\!-width-three-quarters {
     width: 100% !important

---

Action run for f262500

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/overrides/_typography.scss b/packages/govuk-frontend/dist/govuk/overrides/_typography.scss
index 8ff1d7a7e..8afef6c1c 100644
--- a/packages/govuk-frontend/dist/govuk/overrides/_typography.scss
+++ b/packages/govuk-frontend/dist/govuk/overrides/_typography.scss
@@ -27,6 +27,12 @@
   .govuk-\!-font-weight-bold {
     @include govuk-typography-weight-bold($important: true);
   }
+
+  // Tabular numbers
+
+  .govuk-\!-font-tabular-numbers {
+    @include govuk-font-tabular-numbers($important: true);
+  }
 }
 
 /*# sourceMappingURL=_typography.scss.map */

---

Action run for f262500

[owenatgov]

Seems reasonable to me 👍🏻

There's a tricky thing here around what to name it. We've currently got the convention with our overrides that they follow the same rule written out in css as a kebab case class eg: font-weight: bold becomes font-weight-bold. Therefore should this be govuk-!-font-variant-numeric-tabular-nums or some variant? I personally think this is a reasonable tradeoff as the full class name looks a bit yucky. We could experiment with variants but I still think this communicates what it is.