From b16fd381dcac20cea9983d97254076c97717c1f0 Mon Sep 17 00:00:00 2001
From: beeps <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Thu, 5 Oct 2023 19:03:41 +0100
Subject: [PATCH] Refactor tabular numbers into their own mixin

---
 .../components/character-count/_index.scss    |  2 +-
 .../src/govuk/components/input/_index.scss    |  2 +-
 .../src/govuk/components/table/_index.scss    |  2 +-
 .../src/govuk/helpers/_typography.scss        | 23 ++++++++++++++-----
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/_index.scss b/packages/govuk-frontend/src/govuk/components/character-count/_index.scss
index 073c6088d6..e8277e0d7b 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/character-count/_index.scss
@@ -14,7 +14,7 @@
   }
 
   .govuk-character-count__message {
-    @include govuk-font($size: false, $tabular: true);
+    @include govuk-typography-tabular-numbers;
     margin-top: 0;
     margin-bottom: 0;
 
diff --git a/packages/govuk-frontend/src/govuk/components/input/_index.scss b/packages/govuk-frontend/src/govuk/components/input/_index.scss
index 5a71d64ff0..e6590493f4 100644
--- a/packages/govuk-frontend/src/govuk/components/input/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/input/_index.scss
@@ -57,7 +57,7 @@
   }
 
   .govuk-input--extra-letter-spacing {
-    @include govuk-font(false, $tabular: true);
+    @include govuk-typography-tabular-numbers;
     letter-spacing: 0.05em;
   }
 
diff --git a/packages/govuk-frontend/src/govuk/components/table/_index.scss b/packages/govuk-frontend/src/govuk/components/table/_index.scss
index 052a5b362e..2997838e4f 100644
--- a/packages/govuk-frontend/src/govuk/components/table/_index.scss
+++ b/packages/govuk-frontend/src/govuk/components/table/_index.scss
@@ -22,7 +22,7 @@
   }
 
   .govuk-table__cell--numeric {
-    @include govuk-font($size: false, $tabular: true);
+    @include govuk-typography-tabular-numbers;
   }
 
   .govuk-table__header--numeric,
diff --git a/packages/govuk-frontend/src/govuk/helpers/_typography.scss b/packages/govuk-frontend/src/govuk/helpers/_typography.scss
index 141dc02d2e..302a371b26 100644
--- a/packages/govuk-frontend/src/govuk/helpers/_typography.scss
+++ b/packages/govuk-frontend/src/govuk/helpers/_typography.scss
@@ -62,6 +62,22 @@
   font-weight: $govuk-font-weight-bold if($important, !important, null);
 }
 
+/// Tabular number helper
+///
+/// Using font-feature-settings is generally discouraged, but unfortunately
+/// IE 11 doesn't support font-variant-numeric or @supports, so we resort to
+/// using font-feature-settings as the default and then removing it again if
+/// font-variant-numeric is supported.
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-tabular-numbers($important: false) {
+  font-feature-settings: "tnum" 1 if($important, !important, null);
+  font-variant-numeric: tabular-nums if($important, !important, null);
+}
+
 /// Convert line-heights specified in pixels into a relative value, unless
 /// they are already unit-less (and thus already treated as relative values)
 /// or the units do not match the units used for the font size.
@@ -171,12 +187,7 @@
   @include govuk-typography-common;
 
   @if $tabular {
-    font-feature-settings: "tnum" 1;
-
-    @supports (font-variant-numeric: tabular-nums) {
-      font-feature-settings: normal;
-      font-variant-numeric: tabular-nums;
-    }
+    @include govuk-typography-tabular-numbers;
   }
 
   @if $weight == regular {