diff --git a/CHANGELOG.md b/CHANGELOG.md index f708f12037..21e1f54f8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -400,6 +400,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests: - [#3791: Refactor mobile menu button label/text handling](https://github.com/alphagov/govuk-frontend/pull/3791) - [#3862: Fix focus style being overlapped by summary action links](https://github.com/alphagov/govuk-frontend/pull/3862) - [#4113: Always set an explicit button `type`](https://github.com/alphagov/govuk-frontend/pull/4113) +- [#4267: Remove unnecessary duplicated use of govuk-font](https://github.com/alphagov/govuk-frontend/pull/4267) ## 4.7.0 (Feature release) diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss index dacfeb4e91..d64a087530 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss @@ -10,8 +10,6 @@ $govuk-checkboxes-label-padding-left-right: govuk-spacing(3); .govuk-checkboxes__item { - @include govuk-font($size: 19); - display: block; position: relative; @@ -141,9 +139,9 @@ // ========================================================= .govuk-checkboxes__divider { - $govuk-divider-size: $govuk-checkboxes-size !default; @include govuk-font($size: 19); @include govuk-text-colour; + $govuk-divider-size: $govuk-checkboxes-size !default; width: $govuk-divider-size; margin-bottom: govuk-spacing(2); text-align: center; diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss b/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss index 34e7aa8688..eed902b8a5 100644 --- a/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/error-summary/_index.scss @@ -2,6 +2,7 @@ @include govuk-exports("govuk/component/error-summary") { .govuk-error-summary { + @include govuk-font($size: 19); @include govuk-text-colour; @include govuk-responsive-padding(4); @include govuk-responsive-margin(8, "bottom"); @@ -14,15 +15,14 @@ } .govuk-error-summary__title { - @include govuk-font($size: 24, $weight: bold); + @include govuk-typography-responsive($size: 24); + @include govuk-typography-weight-bold; margin-top: 0; @include govuk-responsive-margin(4, "bottom"); } .govuk-error-summary__body { - @include govuk-font($size: 19); - p { margin-top: 0; @include govuk-responsive-margin(4, "bottom"); diff --git a/packages/govuk-frontend/src/govuk/components/fieldset/_index.scss b/packages/govuk-frontend/src/govuk/components/fieldset/_index.scss index 02278648a2..63bfe77def 100644 --- a/packages/govuk-frontend/src/govuk/components/fieldset/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/fieldset/_index.scss @@ -35,24 +35,27 @@ } // Modifiers that make legends look more like their equivalent headings + .govuk-fieldset__legend--xl, + .govuk-fieldset__legend--l, + .govuk-fieldset__legend--m { + @include govuk-typography-weight-bold; + margin-bottom: govuk-spacing(3); + } .govuk-fieldset__legend--xl { - @include govuk-font($size: 48, $weight: bold); - margin-bottom: govuk-spacing(3); + @include govuk-typography-responsive($size: 48); } .govuk-fieldset__legend--l { - @include govuk-font($size: 36, $weight: bold); - margin-bottom: govuk-spacing(3); + @include govuk-typography-responsive($size: 36); } .govuk-fieldset__legend--m { - @include govuk-font($size: 24, $weight: bold); - margin-bottom: govuk-spacing(3); + @include govuk-typography-responsive($size: 24); } .govuk-fieldset__legend--s { - @include govuk-font($size: 19, $weight: bold); + @include govuk-typography-weight-bold; } // When the legend contains an H1, we want the H1 to inherit all styles from diff --git a/packages/govuk-frontend/src/govuk/components/header/_index.scss b/packages/govuk-frontend/src/govuk/components/header/_index.scss index e437fc45dd..3e2f64640e 100644 --- a/packages/govuk-frontend/src/govuk/components/header/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/header/_index.scss @@ -62,7 +62,8 @@ } .govuk-header__product-name { - @include govuk-font($size: 24, $line-height: 1); + @include govuk-typography-responsive($size: 24, $override-line-height: 1); + @include govuk-typography-weight-regular; display: inline-table; } @@ -74,7 +75,6 @@ // - all links get a 3px underline regardless of text size, as there are // multiple grouped elements close to one another and having slightly // different underline widths looks unbalanced - @include govuk-typography-common; @include govuk-link-style-inverse; text-decoration: none; @@ -96,8 +96,7 @@ .govuk-header__link--homepage { // Font size needs to be set on the link so that the box sizing is correct // in Firefox - @include govuk-font($size: false, $weight: bold); - + @include govuk-typography-weight-bold; display: inline-block; margin-right: govuk-spacing(2); font-size: 30px; // We don't have a mixin that produces 30px font size @@ -135,7 +134,8 @@ .govuk-header__service-name { display: inline-block; margin-bottom: govuk-spacing(2); - @include govuk-font($size: 24, $weight: bold); + @include govuk-typography-responsive($size: 24); + @include govuk-typography-weight-bold; } .govuk-header__logo, @@ -248,7 +248,8 @@ } a { - @include govuk-font($size: 16, $weight: bold); + @include govuk-typography-responsive($size: 16); + @include govuk-typography-weight-bold; white-space: nowrap; } } diff --git a/packages/govuk-frontend/src/govuk/components/label/_index.scss b/packages/govuk-frontend/src/govuk/components/label/_index.scss index 4c10ce9086..ed7b5ca5c7 100644 --- a/packages/govuk-frontend/src/govuk/components/label/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/label/_index.scss @@ -9,24 +9,27 @@ } // Modifiers that make labels look more like their equivalent headings + .govuk-label--xl, + .govuk-label--l, + .govuk-label--m { + @include govuk-typography-weight-bold; + margin-bottom: govuk-spacing(3); + } .govuk-label--xl { - @include govuk-font($size: 48, $weight: bold); - margin-bottom: govuk-spacing(3); + @include govuk-typography-responsive($size: 48); } .govuk-label--l { - @include govuk-font($size: 36, $weight: bold); - margin-bottom: govuk-spacing(3); + @include govuk-typography-responsive($size: 36); } .govuk-label--m { - @include govuk-font($size: 24, $weight: bold); - margin-bottom: govuk-spacing(2); + @include govuk-typography-responsive($size: 24); } .govuk-label--s { - @include govuk-font($size: 19, $weight: bold); + @include govuk-typography-weight-bold; } // When the label is nested inside a heading, override the heading so that it diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss index 0968f06007..83a4f9dec6 100644 --- a/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss @@ -24,12 +24,12 @@ } .govuk-notification-banner__title { - @include govuk-font($size: 19, $weight: bold); - + // Set the size again because this element is a heading and the user agent + // font size overrides the inherited font size + @include govuk-typography-responsive($size: 19); + @include govuk-typography-weight-bold; margin: 0; - padding: 0; - color: govuk-colour("white"); } @@ -65,7 +65,8 @@ } .govuk-notification-banner__heading { - @include govuk-font($size: 24, $weight: bold); + @include govuk-typography-responsive($size: 24); + @include govuk-typography-weight-bold; margin: 0 0 govuk-spacing(3) 0; diff --git a/packages/govuk-frontend/src/govuk/components/pagination/_index.scss b/packages/govuk-frontend/src/govuk/components/pagination/_index.scss index 439e46cf3d..c4a7eda10d 100644 --- a/packages/govuk-frontend/src/govuk/components/pagination/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/pagination/_index.scss @@ -148,7 +148,7 @@ } .govuk-pagination__link-label { - @include govuk-font($size: 19, $weight: "regular"); + @include govuk-typography-weight-regular; @include govuk-link-decoration; display: inline-block; padding-left: govuk-spacing(6); diff --git a/packages/govuk-frontend/src/govuk/components/panel/_index.scss b/packages/govuk-frontend/src/govuk/components/panel/_index.scss index c1653b54fa..de98f9bdd7 100644 --- a/packages/govuk-frontend/src/govuk/components/panel/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/panel/_index.scss @@ -1,6 +1,6 @@ @include govuk-exports("govuk/component/panel") { .govuk-panel { - @include govuk-font($size: 19); + @include govuk-font($size: 36); box-sizing: border-box; @@ -40,17 +40,13 @@ } .govuk-panel__title { + @include govuk-typography-responsive($size: 48); + @include govuk-typography-weight-bold; margin-top: 0; margin-bottom: govuk-spacing(6); - - @include govuk-font($size: 48, $weight: bold); } .govuk-panel__title:last-child { margin-bottom: 0; } - - .govuk-panel__body { - @include govuk-font($size: 36); - } } diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss index ea4b330496..addf4f54f7 100644 --- a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss @@ -17,7 +17,7 @@ } .govuk-phase-banner__content__tag { - @include govuk-font($size: 16); + @include govuk-typography-responsive($size: 16); margin-right: govuk-spacing(2); // When forced colour mode is active, for example to provide high contrast, diff --git a/packages/govuk-frontend/src/govuk/components/radios/_index.scss b/packages/govuk-frontend/src/govuk/components/radios/_index.scss index 8e62e31d80..6b2e612fc3 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/radios/_index.scss @@ -13,8 +13,6 @@ $govuk-radios-focus-width: $govuk-focus-width + 1px; .govuk-radios__item { - @include govuk-font($size: 19); - display: block; position: relative; @@ -157,9 +155,9 @@ // ========================================================= .govuk-radios__divider { - $govuk-divider-size: $govuk-radios-size !default; @include govuk-font($size: 19); @include govuk-text-colour; + $govuk-divider-size: $govuk-radios-size !default; width: $govuk-divider-size; margin-bottom: govuk-spacing(2); text-align: center; diff --git a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss index e24dfa399f..4a10f7132f 100644 --- a/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/summary-list/_index.scss @@ -193,6 +193,7 @@ .govuk-summary-card__title { @include govuk-font($size: 19, $weight: bold); + @include govuk-text-colour; margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0; @include govuk-media-query($from: "tablet") { @@ -201,7 +202,8 @@ } .govuk-summary-card__actions { - @include govuk-font($size: 19, $weight: bold); + @include govuk-typography-responsive($size: 19); + @include govuk-typography-weight-bold; display: flex; flex-wrap: wrap; row-gap: 10px; diff --git a/packages/govuk-frontend/src/govuk/components/table/_index.scss b/packages/govuk-frontend/src/govuk/components/table/_index.scss index f4872a1b52..052a5b362e 100644 --- a/packages/govuk-frontend/src/govuk/components/table/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/table/_index.scss @@ -43,23 +43,21 @@ } // Modifiers that make captions look more like their equivalent headings + .govuk-table__caption--xl, + .govuk-table__caption--l, + .govuk-table__caption--m { + margin-bottom: govuk-spacing(3); + } .govuk-table__caption--xl { - @include govuk-font($size: 48, $weight: bold); - margin-bottom: govuk-spacing(3); + @include govuk-typography-responsive($size: 48); } .govuk-table__caption--l { - @include govuk-font($size: 36, $weight: bold); - margin-bottom: govuk-spacing(3); + @include govuk-typography-responsive($size: 36); } .govuk-table__caption--m { - @include govuk-font($size: 24, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-table__caption--s { - @include govuk-font($size: 19, $weight: bold); + @include govuk-typography-responsive($size: 24); } } diff --git a/packages/govuk-frontend/src/govuk/components/table/table.yaml b/packages/govuk-frontend/src/govuk/components/table/table.yaml index e1d271a27d..fb7ff8795f 100644 --- a/packages/govuk-frontend/src/govuk/components/table/table.yaml +++ b/packages/govuk-frontend/src/govuk/components/table/table.yaml @@ -132,7 +132,7 @@ examples: - name: table with head and caption options: caption: 'Caption 1: Months and rates' - captionClasses: govuk-heading-m + captionClasses: govuk-table__caption--m firstCellIsHeader: true head: - text: Month you apply diff --git a/packages/govuk-frontend/src/govuk/components/table/template.test.js b/packages/govuk-frontend/src/govuk/components/table/template.test.js index 3a6a66d4fb..aaa61ad85e 100644 --- a/packages/govuk-frontend/src/govuk/components/table/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/table/template.test.js @@ -36,7 +36,7 @@ describe('Table', () => { const $ = render('table', examples['table with head and caption']) const $caption = $('.govuk-table__caption') - expect($caption.hasClass('govuk-heading-m')).toBeTruthy() + expect($caption.hasClass('govuk-table__caption--m')).toBeTruthy() }) }) diff --git a/packages/govuk-frontend/src/govuk/components/tabs/_index.scss b/packages/govuk-frontend/src/govuk/components/tabs/_index.scss index f5e48d1869..019c56f2a7 100644 --- a/packages/govuk-frontend/src/govuk/components/tabs/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/tabs/_index.scss @@ -2,10 +2,14 @@ .govuk-tabs { @include govuk-responsive-margin(1, "top"); @include govuk-responsive-margin(6, "bottom"); + @include govuk-font($size: 19); } .govuk-tabs__title { - @include govuk-font($size: 19); + // Set the size and weight again because this element is a heading and the + // user agent font size overrides the inherited font size + @include govuk-typography-responsive($size: 19); + @include govuk-typography-weight-regular; @include govuk-text-colour; margin-bottom: govuk-spacing(2); } @@ -18,7 +22,6 @@ } .govuk-tabs__list-item { - @include govuk-font($size: 19); margin-left: govuk-spacing(5); &::before { diff --git a/packages/govuk-frontend/src/govuk/components/warning-text/_index.scss b/packages/govuk-frontend/src/govuk/components/warning-text/_index.scss index 59235c0edc..bf0cd8422e 100644 --- a/packages/govuk-frontend/src/govuk/components/warning-text/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/warning-text/_index.scss @@ -1,13 +1,15 @@ @include govuk-exports("govuk/component/warning-text") { .govuk-warning-text { - position: relative; + @include govuk-font($size: 19); @include govuk-responsive-margin(6, "bottom"); + position: relative; padding: govuk-spacing(2) 0; } .govuk-warning-text__icon { - @include govuk-font($size: false, $weight: bold); - + // We apply this here and not at the parent level because the actual text is + // a and so will always be bold + @include govuk-typography-weight-bold; box-sizing: border-box; display: inline-block; @@ -52,7 +54,6 @@ } .govuk-warning-text__text { - @include govuk-font($size: 19, $weight: bold); @include govuk-text-colour; display: block; padding-left: 45px;