Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove legacy and tabular fonts support #3574

Merged
merged 3 commits into from
May 4, 2023
Merged

Remove legacy and tabular fonts support #3574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f13765
Remove $govuk-use-legacy-font code from components
querkmachine May 4, 2023
1101e6c
Remove $govuk-use-legacy-font and $govuk-font-family-tabular settings
querkmachine May 4, 2023
dc875b7
Remove tests for $govuk-font-family-tabular setting
querkmachine May 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 2 additions & 12 deletions packages/govuk-frontend/src/govuk/components/back-link/_index.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
79 changes: 2 additions & 77 deletions packages/govuk-frontend/src/govuk/helpers/typography.test.js
View file
Open in desktop
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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels odd to have Helvetica here without a matching check for the output?

I appreciate we didn't before this edit, but we did (further down) in the tabular test

await expect(results).resolves.toMatchObject({
  css: expect.stringContaining('font-family: Helvetica')
})

await expect(results).resolves.toMatchObject({
  css: expect.stringContaining('font-family: "GDS Transport"')
})

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a blocker

}
`

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 @@ -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}
Expand Down Expand Up @@ -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"'
]))
})
})
21 changes: 0 additions & 21 deletions packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss
View file
Open in desktop
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
Open in desktop
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