From 3f137650cc89923882a6f1af9ee153619516df0f Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Thu, 4 May 2023 11:27:41 +0100 Subject: [PATCH 1/3] Remove $govuk-use-legacy-font code from components --- .../govuk/components/back-link/_index.scss | 14 ++--------- .../govuk/components/breadcrumbs/_index.scss | 13 ++--------- .../src/govuk/components/button/_index.scss | 14 ----------- .../src/govuk/components/header/_index.scss | 21 ----------------- .../src/govuk/components/tag/_index.scss | 23 +++++-------------- 5 files changed, 10 insertions(+), 75 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/back-link/_index.scss b/packages/govuk-frontend/src/govuk/components/back-link/_index.scss index 64af5836d7..32d10696ab 100644 --- a/packages/govuk-frontend/src/govuk/components/back-link/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/back-link/_index.scss @@ -34,18 +34,8 @@ // Vertically align with the parent element position: absolute; - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset - // These should be removed when legacy font support is dropped - $offset: govuk-em(1px, $font-size); - top: $offset * -1; - bottom: $offset; - } @else { - top: 0; - bottom: 0; - } - + top: 0; + bottom: 0; left: govuk-em(3px, $font-size); width: $chevron-size; diff --git a/packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss b/packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss index c38b6a78b7..e239adbe4c 100644 --- a/packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss @@ -54,17 +54,8 @@ display: block; position: absolute; - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset - // These should be removed when legacy font support is dropped - $offset: govuk-em(1px, $font-size); - top: $offset * -1; - bottom: $offset; - } @else { - top: 0; - bottom: 0; - } + top: 0; + bottom: 0; // Offset by the difference between the width of the non-rotated square // and its width when rotated diff --git a/packages/govuk-frontend/src/govuk/components/button/_index.scss b/packages/govuk-frontend/src/govuk/components/button/_index.scss index 6ad353f2f6..0236e5cbcd 100644 --- a/packages/govuk-frontend/src/govuk/components/button/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/button/_index.scss @@ -286,18 +286,4 @@ $govuk-button-text-colour: govuk-colour("white") !default; // (https://github.com/w3c/csswg-drafts/issues/6310) forced-color-adjust: auto; } - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset when using v1 of nta - $offset: 2; - - .govuk-button { - padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1 - padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1 - } - - .govuk-button__start-icon { - margin-top: -3px; - } - } } diff --git a/packages/govuk-frontend/src/govuk/components/header/_index.scss b/packages/govuk-frontend/src/govuk/components/header/_index.scss index 10ff01d2e9..004074511b 100644 --- a/packages/govuk-frontend/src/govuk/components/header/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/header/_index.scss @@ -322,25 +322,4 @@ } } } - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset - // These should be removed when the font is updated with the correct baseline - .govuk-header__logotype-crown, - .govuk-header__logotype-crown-fallback-image { - position: relative; - top: -4px; - vertical-align: middle; - } - - .govuk-header { - $offset: 3px; - padding-top: $offset; - } - - .govuk-header__link--homepage { - line-height: 30px; - } - // End adjustments - } } diff --git a/packages/govuk-frontend/src/govuk/components/tag/_index.scss b/packages/govuk-frontend/src/govuk/components/tag/_index.scss index 1d657a1613..bcf43e413a 100644 --- a/packages/govuk-frontend/src/govuk/components/tag/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/tag/_index.scss @@ -1,8 +1,14 @@ @include govuk-exports("govuk/component/tag") { .govuk-tag { + @include govuk-font($size: 16, $weight: bold, $line-height: 1); display: inline-block; + padding-top: 5px; + padding-right: 8px; + padding-bottom: 4px; + padding-left: 8px; + // When a user customises their colours often the background is removed, // by adding a outline we ensure that the tag component still keeps it's meaning. // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ @@ -15,23 +21,6 @@ text-decoration: none; text-transform: uppercase; - - @if $govuk-use-legacy-font { - // Since New Transport sits slightly higher than other common fonts. - // We use intentionally uneven padding to make it balanced, this can be - // removed using the version of the font that has a more common vertical spacing. - @include govuk-font($size: 16, $weight: bold, $line-height: 1.25); - padding-top: 4px; - padding-right: 8px; - padding-bottom: 1px; - padding-left: 8px; - } @else { - @include govuk-font($size: 16, $weight: bold, $line-height: 1); - padding-top: 5px; - padding-right: 8px; - padding-bottom: 4px; - padding-left: 8px; - } } .govuk-tag--grey { From 1101e6c28bf07016f17443bf715c76c54e6c762c Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Thu, 4 May 2023 11:33:30 +0100 Subject: [PATCH 2/3] Remove $govuk-use-legacy-font and $govuk-font-family-tabular settings --- .../src/govuk/helpers/_typography.scss | 16 ++--- .../settings/_typography-font-families.scss | 21 ------- .../src/govuk/settings/_typography-font.scss | 60 +------------------ 3 files changed, 6 insertions(+), 91 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/helpers/_typography.scss b/packages/govuk-frontend/src/govuk/helpers/_typography.scss index a02eb1a6e9..b712342516 100644 --- a/packages/govuk-frontend/src/govuk/helpers/_typography.scss +++ b/packages/govuk-frontend/src/govuk/helpers/_typography.scss @@ -184,17 +184,11 @@ @mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) { @if $tabular { - // if govuk-font-family-tabular is set use $govuk-font-family-tabular - @if $govuk-font-family-tabular { - @include govuk-typography-common($font-family: $govuk-font-family-tabular); - } @else { - @include govuk-typography-common; - font-feature-settings: "tnum" 1; - - @supports (font-variant-numeric: tabular-nums) { - font-feature-settings: normal; - font-variant-numeric: tabular-nums; - } + @include govuk-typography-common; + font-feature-settings: "tnum" 1; + @supports (font-variant-numeric: tabular-nums) { + font-feature-settings: normal; + font-variant-numeric: tabular-nums; } } @else { @include govuk-typography-common; diff --git a/packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss b/packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss index 9a3df10c1e..bdd1b1411c 100644 --- a/packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss +++ b/packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss @@ -9,24 +9,3 @@ /// @access public $govuk-font-family-gds-transport: "GDS Transport", arial, sans-serif; - -/// List of font families to use if using NTA (old font 'stack' for -/// GOV.UK) -/// -/// @type List -/// @access public -/// @deprecated To be removed once support for compatibility mode is dropped - -$govuk-font-family-nta: "nta", arial, sans-serif; - -/// List of font families to use if using the 'tabular numbers' subset of NTA -/// (the default font 'stack' for GOV.UK) -/// -/// Because ntatabularnumbers only includes the digits 0-10, all other glyphs -/// will 'fall-through' the stack to NTA. -/// -/// @type List -/// @access public -/// @deprecated To be removed once support for compatibility mode is dropped - -$govuk-font-family-nta-tabular: "ntatabularnumbers", $govuk-font-family-nta; diff --git a/packages/govuk-frontend/src/govuk/settings/_typography-font.scss b/packages/govuk-frontend/src/govuk/settings/_typography-font.scss index 2dd0aa4ed4..f822110423 100644 --- a/packages/govuk-frontend/src/govuk/settings/_typography-font.scss +++ b/packages/govuk-frontend/src/govuk/settings/_typography-font.scss @@ -1,42 +1,9 @@ -@import "compatibility"; @import "typography-font-families"; //// /// @group settings/typography //// -/// Use 'legacy' fonts -/// -/// Whether or not to use v1 nta font from GOV.UK Elements / Frontend -/// Toolkit, for teams that are migrating to GOV.UK Frontend and may be using -/// components from both places in a single application. -/// -/// @type Boolean -/// @access public -/// @deprecated Will be removed in v5.0 with the rest of the compatibility mode -/// suite of tools and settings - -$govuk-use-legacy-font: if( - ( - $govuk-compatibility-govukfrontendtoolkit or - $govuk-compatibility-govuktemplate or - $govuk-compatibility-govukelements - ), - true, - false -) !default; - -// Only show the deprecation warning if user is setting $govuk-use-legacy-font -// manually instead of automatically via compatibility variables -@if $govuk-use-legacy-font == true and - $govuk-compatibility-govukfrontendtoolkit == false and - $govuk-compatibility-govuktemplate == false and - $govuk-compatibility-govukelements == false { - @include _warning(legacy-font, "$govuk-use-legacy-font is deprecated. " + - "From version 5.0, GOV.UK Frontend will only support the included version " + - "of GDS Transport."); -} - // ========================================================= // Font families // ========================================================= @@ -46,32 +13,7 @@ $govuk-use-legacy-font: if( /// @type List /// @access public -$govuk-font-family: if( - $govuk-use-legacy-font, - $govuk-font-family-nta, - $govuk-font-family-gds-transport -) !default; - -/// Font families to use when displaying tabular numbers -/// -/// @type List -/// @access public -/// @deprecated Will be removed in v5.0 with the rest of the compatibility mode -/// suite of tools and settings - -$govuk-font-family-tabular: if( - $govuk-use-legacy-font, - $govuk-font-family-nta-tabular, - false -) !default; - -// Only show the deprecation warning if user is setting $govuk-font-family-tabular -// manually instead of automatically via $govuk-use-legacy-font -@if $govuk-font-family-tabular != false and $govuk-use-legacy-font == false { - @include _warning(tabular-font-face, "$govuk-font-family-tabular is deprecated. " + - "From version 5.0, GOV.UK Frontend will not support using a separate " + - "font-face for tabular numbers."); -} +$govuk-font-family: $govuk-font-family-gds-transport !default; /// Font families to use for print media /// From dc875b73a4a635057e6b8151e75211212c06ca67 Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Thu, 4 May 2023 11:36:20 +0100 Subject: [PATCH 3/3] Remove tests for $govuk-font-family-tabular setting Additionally update tests that used $govuk-font-family-tabular as example data to use Helvetica instead. --- .../src/govuk/helpers/typography.test.js | 79 +------------------ 1 file changed, 2 insertions(+), 77 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/helpers/typography.test.js b/packages/govuk-frontend/src/govuk/helpers/typography.test.js index 77e01581c9..db0cf8371a 100644 --- a/packages/govuk-frontend/src/govuk/helpers/typography.test.js +++ b/packages/govuk-frontend/src/govuk/helpers/typography.test.js @@ -54,7 +54,7 @@ describe('@mixin govuk-typography-common', () => { @include govuk-typography-common; } :root { - @include govuk-typography-common($font-family: $govuk-font-family-tabular); + @include govuk-typography-common($font-family: Helvetica); } ` @@ -93,39 +93,6 @@ describe('@mixin govuk-typography-common', () => { await expect(results).resolves.toMatchObject({ css: expect.not.stringContaining('font-family: "GDS Transport"') }) - - await expect(results).resolves.toMatchObject({ - css: expect.not.stringContaining('font-family: "ntatabularnumbers"') - }) - }) - - it('should not output a @font-face declaration when the user wants compatibility with GOV.UK Template', async () => { - const sass = ` - $govuk-compatibility-govuktemplate: true; - @import "settings/all"; - @import "helpers/all"; - - :root { - @include govuk-typography-common; - } - :root { - @include govuk-typography-common($font-family: $govuk-font-family-tabular); - } - ` - - const results = compileSassString(sass) - - await expect(results).resolves.toMatchObject({ - css: expect.not.stringContaining('@font-face') - }) - - await expect(results).resolves.toMatchObject({ - css: expect.stringContaining('font-family: "nta"') - }) - - await expect(results).resolves.toMatchObject({ - css: expect.stringContaining('font-family: "ntatabularnumbers"') - }) }) it('should not output a @font-face declaration when the user has turned off this feature', async () => { @@ -138,7 +105,7 @@ describe('@mixin govuk-typography-common', () => { @include govuk-typography-common; } :root { - @include govuk-typography-common($font-family: $govuk-font-family-tabular); + @include govuk-typography-common($font-family: Helvetica); } ` @@ -593,27 +560,6 @@ describe('@mixin govuk-typography-responsive', () => { }) }) - it('uses the tabular font instead if defined and $tabular: true', async () => { - const sass = ` - $govuk-font-family-tabular: "ntatabularnumbers"; - ${sassBootstrap} - - .foo { - @include govuk-font($size: 14, $tabular: true) - } - ` - - const results = compileSassString(sass) - - await expect(results).resolves.toMatchObject({ - css: expect.stringContaining('font-family: "ntatabularnumbers"') - }) - - await expect(results).resolves.toMatchObject({ - css: expect.not.stringContaining('font-feature-settings') - }) - }) - it('sets font-size based on $size', async () => { const sass = ` ${sassBootstrap} @@ -713,24 +659,3 @@ describe('@mixin govuk-typography-responsive', () => { }) }) }) - -describe('$govuk-font-family-tabular value is specified', () => { - it('outputs a deprecation warning when set', async () => { - const sass = ` - $govuk-font-family-tabular: monospace; - ${sassBootstrap} - ` - - await compileSassString(sass, sassConfig) - - // Get the argument of the last @warn call, which we expect to be the - // deprecation notice - expect(mockWarnFunction.mock.calls.at(-1)) - .toEqual(expect.arrayContaining([ - '$govuk-font-family-tabular is deprecated. From version 5.0, ' + - 'GOV.UK Frontend will not support using a separate font-face for ' + - 'tabular numbers. To silence this warning, update ' + - '$govuk-suppressed-warnings with key: "tabular-font-face"' - ])) - }) -})