Skip to content

Commit

Permalink
Merge pull request #3574 from alphagov/remove-compat-mode-legacy-fonts
Browse files Browse the repository at this point in the history 
Remove legacy and tabular fonts support
  • Loading branch information
@querkmachine
querkmachine authored May 4, 2023
2 parents a7f1e57 + dc875b7 commit dc5d5fa
Show file tree
Hide file tree
Showing 9 changed files with 18 additions and 243 deletions.
14 changes: 2 additions & 12 deletions packages/govuk-frontend/src/govuk/components/back-link/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 2 additions & 11 deletions packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 0 additions & 14 deletions packages/govuk-frontend/src/govuk/components/button/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
21 changes: 0 additions & 21 deletions packages/govuk-frontend/src/govuk/components/header/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
23 changes: 6 additions & 17 deletions packages/govuk-frontend/src/govuk/components/tag/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -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/
Expand All @@ -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 {
Expand Down
16 changes: 5 additions & 11 deletions packages/govuk-frontend/src/govuk/helpers/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,17 +178,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;
Expand Down
79 changes: 2 additions & 77 deletions packages/govuk-frontend/src/govuk/helpers/typography.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
`

Expand Down Expand Up @@ -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 () => {
Expand All @@ -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);
}
`

Expand Down Expand Up @@ -438,27 +405,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}
Expand Down Expand Up @@ -558,24 +504,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"'
]))
})
})
21 changes: 0 additions & 21 deletions packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
60 changes: 1 addition & 59 deletions packages/govuk-frontend/src/govuk/settings/_typography-font.scss
View file
Original file line number Diff line number Diff line change
@@ -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
// =========================================================
Expand All @@ -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
///
Expand Down

0 comments on commit dc5d5fa

Please sign in to comment.