diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f5db895e2..d07cb8494e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -265,6 +265,18 @@ If you need to maintain the existing behaviour, you can set the value to an empt This change was introduced in [pull request #3773: Omit the value attribute from select options with no value](https://github.com/alphagov/govuk-frontend/pull/3773). +### Removal of font family Sass variables + +The following Sass variables have been removed: + +- `$govuk-font-family-gds-transport` +- `$govuk-font-family-nta` +- `$govuk-font-family-nta-tabular` + +If you were using `$govuk-font-family-gds-transport` to set the font on an element we recommend using [the `govuk-font` mixin](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-font) instead. + +This change was introduced in [pull request #3949: Simplify font family settings](https://github.com/alphagov/govuk-frontend/pull/3949). + ### Suggested changes #### Update the Pagination component's default `aria-label` diff --git a/packages/govuk-frontend/src/govuk/settings/_all.scss b/packages/govuk-frontend/src/govuk/settings/_all.scss index 8f2b27bfcb..fb25212fa3 100644 --- a/packages/govuk-frontend/src/govuk/settings/_all.scss +++ b/packages/govuk-frontend/src/govuk/settings/_all.scss @@ -15,7 +15,6 @@ @import "spacing"; @import "measurements"; -@import "typography-font-families"; @import "typography-font"; @import "typography-responsive"; diff --git a/packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss b/packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss deleted file mode 100644 index bdd1b1411c..0000000000 --- a/packages/govuk-frontend/src/govuk/settings/_typography-font-families.scss +++ /dev/null @@ -1,11 +0,0 @@ -//// -/// @group settings/typography -//// - -/// List of font families to use if using GDS Transport (the default font -/// 'stack' for GOV.UK) -/// -/// @type List -/// @access public - -$govuk-font-family-gds-transport: "GDS Transport", arial, sans-serif; diff --git a/packages/govuk-frontend/src/govuk/settings/_typography-font.scss b/packages/govuk-frontend/src/govuk/settings/_typography-font.scss index f822110423..e1dd964213 100644 --- a/packages/govuk-frontend/src/govuk/settings/_typography-font.scss +++ b/packages/govuk-frontend/src/govuk/settings/_typography-font.scss @@ -1,5 +1,3 @@ -@import "typography-font-families"; - //// /// @group settings/typography //// @@ -13,7 +11,7 @@ /// @type List /// @access public -$govuk-font-family: $govuk-font-family-gds-transport !default; +$govuk-font-family: "GDS Transport", arial, sans-serif !default; /// Font families to use for print media /// @@ -27,15 +25,13 @@ $govuk-font-family-print: sans-serif !default; /// Include the default @font-face declarations /// -/// If you have set $govuk-font-family to something other than -/// `$govuk-font-family-gds-transport` this option is disabled by default. +/// Defaults to true if "GDS Transport" appears in the $govuk-font-family +/// setting. /// /// @type Boolean /// @access public -$govuk-include-default-font-face: ( - $govuk-font-family == $govuk-font-family-gds-transport -) !default; +$govuk-include-default-font-face: if(index($govuk-font-family, "GDS Transport"), true, false) !default; // ========================================================= // Font weights diff --git a/packages/govuk-frontend/src/govuk/settings/typography.test.js b/packages/govuk-frontend/src/govuk/settings/typography.test.js new file mode 100644 index 0000000000..401e2eafeb --- /dev/null +++ b/packages/govuk-frontend/src/govuk/settings/typography.test.js @@ -0,0 +1,44 @@ +const { compileSassString } = require('govuk-frontend-helpers/tests') + +describe('$govuk-include-default-font-face', () => { + it('is true if $govuk-font-family is default', async () => { + const sass = ` + @import "settings/typography-font"; + :root { + --result: #{$govuk-include-default-font-face} + } + ` + + await expect(compileSassString(sass)).resolves.toMatchObject({ + css: expect.stringContaining('--result: true') + }) + }) + + it('is true if $govuk-font-family includes GDS Transport', async () => { + const sass = ` + $govuk-font-family: "GDS Transport", "Comic Sans MS", "Comic Sans", cursive; + @import "settings/typography-font"; + :root { + --result: #{$govuk-include-default-font-face} + } + ` + + await expect(compileSassString(sass)).resolves.toMatchObject({ + css: expect.stringContaining('--result: true') + }) + }) + + it('is false if $govuk-font-family does not include GDS Transport', async () => { + const sass = ` + $govuk-font-family: "Comic Sans MS", "Comic Sans", cursive; + @import "settings/typography-font"; + :root { + --result: #{$govuk-include-default-font-face} + } + ` + + await expect(compileSassString(sass)).resolves.toMatchObject({ + css: expect.stringContaining('--result: false') + }) + }) +})