From 4e8127a02a6b1b8d11dc33e670dd3c7210101fa6 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Fri, 22 Mar 2024 14:30:33 +0000 Subject: [PATCH] Spacing refactor (#108) * Refactor spacing, update global header package * Refactored spacing and typography * Simplify SCSS --- CHANGELOG.md | 13 ++ src/nationalarchives/analytics.mjs | 8 +- .../components/breadcrumbs/breadcrumbs.scss | 11 +- .../components/button/_button-group.scss | 4 +- .../components/button/button.scss | 7 +- .../components/card/card.scss | 44 ++--- .../components/checkboxes/checkboxes.scss | 11 +- .../compound-filters/compound-filters.scss | 6 +- .../cookie-banner/cookie-banner.scss | 4 +- .../components/date-input/date-input.scss | 5 +- .../components/date-search/date-search.scss | 3 +- .../error-summary/error-summary.scss | 4 +- .../featured-records/featured-records.scss | 10 +- .../components/footer/footer.scss | 43 +++-- .../components/gallery/gallery.scss | 20 +- .../components/global-header/fixtures.json | 3 +- .../global-header/global-header.mjs | 2 +- .../global-header/global-header.scss | 60 +++--- .../global-header/global-header.stories.js | 1 - .../global-header/macro-options.json | 6 - .../components/global-header/template.njk | 3 - .../components/grid/grid.scss | 32 ++-- .../components/header/header.mjs | 2 +- .../components/header/header.scss | 51 ++--- .../components/hero/hero.scss | 24 ++- .../components/index-grid/index-grid.scss | 8 +- .../components/message/message.scss | 6 +- .../components/pagination/pagination.scss | 18 +- .../components/phase-banner/phase-banner.scss | 5 +- .../components/picture/picture.scss | 35 ++-- .../quick-filters/quick-filters.scss | 4 +- .../components/radios/radios.scss | 11 +- .../components/search-field/search-field.scss | 2 +- .../search-filters/search-filters.scss | 20 +- .../components/select/select.scss | 5 +- .../sensitive-image/sensitive-image.scss | 3 +- .../components/skip-link/skip-link.scss | 3 +- .../components/tabs/tabs.scss | 8 +- .../components/text-input/text-input.scss | 3 +- .../components/textarea/textarea.scss | 7 +- .../global-header-package.scss | 180 ++++++++++++++++-- .../colour-schemes/colour-themes.stories.js | 1 - src/nationalarchives/tools/_grid.scss | 9 + src/nationalarchives/tools/_spacing.scss | 29 ++- src/nationalarchives/tools/_typography.scss | 4 +- src/nationalarchives/utilities/_areas.scss | 14 +- src/nationalarchives/utilities/_columns.scss | 6 +- src/nationalarchives/utilities/_forms.scss | 6 +- src/nationalarchives/utilities/_lists.scss | 16 +- src/nationalarchives/utilities/_tables.scss | 20 +- .../utilities/_typography.scss | 42 ++-- src/nationalarchives/variables/_grid.scss | 6 +- src/nationalarchives/variables/_spacing.scss | 24 +-- .../variables/_typography.scss | 4 +- .../build-global-header-package.sh | 2 +- 55 files changed, 531 insertions(+), 347 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 41ed37dd..4386d229 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,10 +8,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.48...HEAD) ### Added + +- Spacing can now be defined in relative terms (e.g. `1`, `3`, `0.25`) which is converted to absolute values + ### Changed + +- Changed grid dimensions (max width, gutters etc.) from `rem` units to `px` +- Changed all spacing (margin, padding and gap) to use `spacing.space()` tool for relative sizes + ### Deprecated ### Removed + +- Removed strapline option for global header + ### Fixed + +- Removed explicit font size on `tna-template` allowing browser-defined font sizes + ### Security ## [0.1.48](https://github.com/nationalarchives/tna-frontend/compare/v0.1.47...v0.1.48) - 2024-03-21 diff --git a/src/nationalarchives/analytics.mjs b/src/nationalarchives/analytics.mjs index 08e5c2a1..d9d01bc1 100644 --- a/src/nationalarchives/analytics.mjs +++ b/src/nationalarchives/analytics.mjs @@ -246,14 +246,11 @@ class GA4 extends EventTracker { return GA4._instance; } const { - id = null, + id = "", prefix = null, initAll = true, addTrackingCode = true, } = options; - if (!id) { - throw Error("ID was not specified"); - } super({ prefix, addTrackingCode }); GA4._instance = this; this.gTagId = id; @@ -301,6 +298,9 @@ class GA4 extends EventTracker { window[this.ga4Disable] = false; this.cookies.set(this.ga4Disable, "false"); if (!this.trackingCodeAdded && this.addTrackingCode) { + if (!this.gTagId) { + throw Error("ID was not specified"); + } this.pushToDataLayer({ "gtm.start": new Date().getTime(), event: "gtm.js", diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss index 8975bea6..ea362405 100644 --- a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss +++ b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss @@ -1,10 +1,11 @@ @use "../../tools/colour"; @use "../../tools/media"; +@use "../../tools/spacing"; @use "../../tools/typography"; .tna-breadcrumbs { - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: spacing.space(1); + padding-bottom: spacing.space(1); &:focus { outline: none !important; @@ -25,7 +26,7 @@ + .tna-breadcrumbs__item { &::before { - margin: 0 0.75rem; + margin: 0 spacing.space(0.75); display: inline-block; @@ -59,8 +60,8 @@ } @include colour.on-high-contrast-and-forced-colours { - padding-right: 0.75rem; - padding-left: 0.75rem; + padding-right: spacing.space(0.75); + padding-left: spacing.space(0.75); text-decoration: none; diff --git a/src/nationalarchives/components/button/_button-group.scss b/src/nationalarchives/components/button/_button-group.scss index fc82eb7d..598e1c5e 100644 --- a/src/nationalarchives/components/button/_button-group.scss +++ b/src/nationalarchives/components/button/_button-group.scss @@ -5,7 +5,7 @@ display: flex; flex-wrap: wrap; align-items: center; - gap: 1rem; + gap: spacing.space(1); @include spacing.space-above; @@ -15,6 +15,6 @@ } &--small { - gap: 0.5rem; + gap: spacing.space(0.5); } } diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index 0f1d8637..005e9702 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -1,16 +1,17 @@ @use "sass:math"; @use "../../tools/colour"; @use "../../tools/media"; +@use "../../tools/spacing"; @use "../../tools/typography"; @use "button-group"; .tna-button { - padding: 0.25rem 1rem; + padding: spacing.space(0.25) spacing.space(1); display: inline-flex; align-items: baseline; justify-content: center; - gap: 0.75rem; + gap: spacing.space(0.75); @include typography.relative-font-size(18); @include typography.main-font-weight-bold; @@ -85,7 +86,7 @@ &--small, &-group--small & { - padding: 0 0.5rem; + padding: 0 spacing.space(0.5); @include typography.relative-font-size(14); line-height: 1.5rem; diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 3dda1d7b..c035b8a2 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -1,8 +1,8 @@ @use "sass:math"; @use "../../tools/colour"; -@use "../../tools/typography"; @use "../../tools/media"; @use "../../tools/spacing"; +@use "../../tools/typography"; .tna-card { @include spacing.space-above; @@ -24,7 +24,7 @@ &__image-container { height: 0; - margin-bottom: 1rem; + margin-bottom: spacing.space(1); padding-bottom: #{math.div(2, 3) * 100%}; position: relative; @@ -44,15 +44,15 @@ } &__image-label { - max-width: calc(100% - 1rem); + max-width: calc(100% - #{spacing.space(1)}); position: absolute; - top: 0.5rem; - left: 0.5rem; + top: spacing.space(0.5); + left: spacing.space(0.5); } &__body { - padding-top: 1rem; + padding-top: spacing.space(1); order: 3; } @@ -60,22 +60,22 @@ &__meta { display: flex; flex-wrap: wrap; - gap: 0.5rem 1.5rem; + gap: spacing.space(0.5) spacing.space(1.5); line-height: 1.3; list-style: none; + p { - margin-top: 1rem; + margin-top: spacing.space(1); } } &__actions { - margin-top: 1rem; + margin-top: spacing.space(1); display: flex; - gap: 1rem 2rem; + gap: spacing.space(1) spacing.space(2); order: 4; } @@ -87,14 +87,14 @@ &--contrast, &--accent { .tna-card__inner { - padding-bottom: 1rem; + padding-bottom: spacing.space(1); } .tna-card__heading, .tna-card__body, .tna-card__actions { - margin-right: 1rem; - margin-left: 1rem; + margin-right: spacing.space(1); + margin-left: spacing.space(1); } } @@ -120,7 +120,7 @@ @include media.on-larger-than-mobile { .tna-card__inner { margin-left: 50%; - padding: 2rem; + padding: spacing.space(2); } .tna-card__image-container { @@ -148,24 +148,24 @@ &--horizontal#{&}--accent { @include media.on-mobile { .tna-card__inner { - padding: 0 0 1rem; + padding: 0 0 spacing.space(1); } .tna-card__image-container { - margin-bottom: 1rem; + margin-bottom: spacing.space(1); } .tna-card__heading, .tna-card__body, .tna-card__actions { - margin-right: 1rem; - margin-left: 1rem; + margin-right: spacing.space(1); + margin-left: spacing.space(1); } } } &__inner:has(&__heading + &__body) { - padding-top: 0.5rem; + padding-top: spacing.space(0.5); @include colour.thick-keyline-dark(top); } @@ -175,14 +175,14 @@ &:not(#{&}--horizontal) { .tna-card__inner { - padding-bottom: 1rem; + padding-bottom: spacing.space(1); } .tna-card__heading, .tna-card__body, .tna-card__actions { - margin-right: 1rem; - margin-left: 1rem; + margin-right: spacing.space(1); + margin-left: spacing.space(1); } } } diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss index 0335a156..e6c56ebb 100644 --- a/src/nationalarchives/components/checkboxes/checkboxes.scss +++ b/src/nationalarchives/components/checkboxes/checkboxes.scss @@ -2,12 +2,13 @@ @use "../../tools/a11y"; @use "../../tools/colour"; @use "../../tools/media"; +@use "../../tools/spacing"; .tna-checkboxes { display: flex; flex-direction: column; align-items: flex-start; - gap: 1rem; + gap: spacing.space(1); &__item { position: relative; @@ -26,7 +27,7 @@ } &-label { - padding-left: 3rem; + padding-left: spacing.space(3); display: block; @@ -85,12 +86,12 @@ } &--small { - gap: 0.5rem; + gap: spacing.space(0.5); } &--small &__item { &-label { - padding-left: 2.25rem; + padding-left: spacing.space(2.25); line-height: 1.5rem; @@ -113,7 +114,7 @@ &--inline { flex-flow: row wrap; align-items: center; - gap: 1rem 2rem; + gap: spacing.space(1) spacing.space(2); @include media.on-tiny { flex-direction: column; diff --git a/src/nationalarchives/components/compound-filters/compound-filters.scss b/src/nationalarchives/components/compound-filters/compound-filters.scss index 981b3fe1..332d85de 100644 --- a/src/nationalarchives/components/compound-filters/compound-filters.scss +++ b/src/nationalarchives/components/compound-filters/compound-filters.scss @@ -8,15 +8,15 @@ display: flex; flex-wrap: wrap; align-items: center; - gap: 0.75rem 1rem; + gap: spacing.space(0.75) spacing.space(1); list-style: none; &__item { - padding: 0 0.125rem 0 0.75rem; + padding: 0 spacing.space(0.125) 0 spacing.space(0.75); display: flex; - gap: 0.5rem; + gap: spacing.space(0.5); align-items: center; @include typography.relative-font-size(16); diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.scss b/src/nationalarchives/components/cookie-banner/cookie-banner.scss index ee6f520b..6f0ecdb7 100644 --- a/src/nationalarchives/components/cookie-banner/cookie-banner.scss +++ b/src/nationalarchives/components/cookie-banner/cookie-banner.scss @@ -4,8 +4,8 @@ @use "../../tools/typography"; .tna-cookie-banner { - padding-top: 2rem; - padding-bottom: 2rem; + padding-top: spacing.space(2); + padding-bottom: spacing.space(2); &--contrast { @include colour.contrast; diff --git a/src/nationalarchives/components/date-input/date-input.scss b/src/nationalarchives/components/date-input/date-input.scss index 50c291fc..aa140df8 100644 --- a/src/nationalarchives/components/date-input/date-input.scss +++ b/src/nationalarchives/components/date-input/date-input.scss @@ -1,10 +1,11 @@ @use "../../variables/forms"; @use "../../tools/colour"; +@use "../../tools/spacing"; @use "../../tools/typography"; .tna-date-input { display: flex; - gap: 1rem; + gap: spacing.space(1); &__item { &-label { @@ -15,7 +16,7 @@ &-input { width: 3rem; - padding: 0 0.375rem; + padding: 0 spacing.space(0.375); display: block; box-sizing: border-box; diff --git a/src/nationalarchives/components/date-search/date-search.scss b/src/nationalarchives/components/date-search/date-search.scss index f944e894..10412515 100644 --- a/src/nationalarchives/components/date-search/date-search.scss +++ b/src/nationalarchives/components/date-search/date-search.scss @@ -1,9 +1,10 @@ @use "../../variables/forms"; @use "../../tools/colour"; +@use "../../tools/spacing"; .tna-date-search { max-width: 100%; - padding: 0 0.375rem; + padding: 0 spacing.space(0.375); display: block; box-sizing: border-box; diff --git a/src/nationalarchives/components/error-summary/error-summary.scss b/src/nationalarchives/components/error-summary/error-summary.scss index 68972060..e0c62567 100644 --- a/src/nationalarchives/components/error-summary/error-summary.scss +++ b/src/nationalarchives/components/error-summary/error-summary.scss @@ -6,7 +6,7 @@ .tna-error-summary { @include spacing.space-above; - padding: 1rem; + padding: spacing.space(1); @include colour.plain; @@ -19,7 +19,7 @@ } &__list { - margin: 0.5rem 0 0; + margin: spacing.space(0.5) 0 0; list-style: none; } diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss index 375db42e..cd84a457 100644 --- a/src/nationalarchives/components/featured-records/featured-records.scss +++ b/src/nationalarchives/components/featured-records/featured-records.scss @@ -14,10 +14,10 @@ @include colour.thick-keyline-accent(top); &__item { - padding: 2rem; + padding: spacing.space(2); display: flex; - gap: 2rem; + gap: spacing.space(2); justify-content: flex-start; align-items: center; @@ -67,7 +67,7 @@ } &__title-description { - padding-bottom: 0.25rem; + padding-bottom: spacing.space(0.25); @include typography.detail-font(true); } @@ -84,9 +84,9 @@ @include media.on-tiny { &__item { - padding: 1rem; + padding: spacing.space(1); - gap: 1rem; + gap: spacing.space(1); flex-direction: column; align-items: flex-start; } diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss index 187f3783..2bba128e 100644 --- a/src/nationalarchives/components/footer/footer.scss +++ b/src/nationalarchives/components/footer/footer.scss @@ -1,15 +1,16 @@ @use "../../tools/colour"; -@use "../../tools/typography"; @use "../../tools/media"; +@use "../../tools/spacing"; +@use "../../tools/typography"; .tna-footer { @include colour.contrast; - padding-top: 1rem; - padding-bottom: 3rem; + padding-top: spacing.space(1); + padding-bottom: spacing.space(3); .tna-logo { - margin-top: 2rem; + margin-top: spacing.space(2); &__background { fill: transparent; @@ -21,7 +22,7 @@ } &__title { - margin-top: 1rem; + margin-top: spacing.space(1); margin-bottom: 0; padding-top: 0; } @@ -31,18 +32,18 @@ } &__meta { - margin-top: 1rem; + margin-top: spacing.space(1); @include typography.relative-font-size(16); } &__social { - margin-top: 2rem; + margin-top: spacing.space(2); &-items { display: flex; flex-wrap: wrap; - gap: 0.3125rem; + gap: spacing.space(0.3125); align-items: flex-start; } @@ -81,8 +82,8 @@ } &__mailing-list { - margin-top: 2rem; - padding: 1rem; + margin-top: spacing.space(2); + padding: spacing.space(1); @include typography.relative-font-size(16); @@ -93,7 +94,7 @@ &__navigation { &-block { - padding-top: 2rem; + padding-top: spacing.space(2); &-heading { } @@ -102,8 +103,8 @@ } &-item { - padding-top: 0.375rem; - padding-bottom: 0.375rem; + padding-top: spacing.space(0.375); + padding-bottom: spacing.space(0.375); @include typography.relative-font-size(16); @@ -119,7 +120,7 @@ } .fa-solid { - margin-left: 0.75rem; + margin-left: spacing.space(0.75); } } } @@ -127,7 +128,7 @@ } &__legal { - padding-top: 3rem; + padding-top: spacing.space(3); @include typography.relative-font-size(16); @@ -142,7 +143,7 @@ } &-item { - padding: 0.5rem; + padding: spacing.space(0.5); display: inline-block; @@ -156,8 +157,8 @@ } hr { - margin-top: 1.5rem; - margin-bottom: 0.5rem; + margin-top: spacing.space(1.5); + margin-bottom: spacing.space(0.5); } &__licence { @@ -168,7 +169,7 @@ } .tna-column { - margin-top: 1rem; + margin-top: spacing.space(1); } } @@ -184,7 +185,7 @@ } &-logotype-crown { - margin: 0 auto 0.125rem; + margin: 0 auto spacing.space(0.125); display: block; } @@ -192,7 +193,7 @@ @include media.on-mobile { padding-top: 0; - padding-bottom: 2rem; + padding-bottom: spacing.space(2); } @include colour.on-high-contrast-and-forced-colours { diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss index 4d30dc64..609ce695 100644 --- a/src/nationalarchives/components/gallery/gallery.scss +++ b/src/nationalarchives/components/gallery/gallery.scss @@ -1,14 +1,14 @@ @use "../../tools/colour"; -@use "../../tools/spacing"; @use "../../tools/media"; +@use "../../tools/spacing"; .tna-gallery { @include colour.contrast; - padding-bottom: 2rem; + padding-bottom: spacing.space(2); &__header { - padding-top: 2rem; + padding-top: spacing.space(2); } &__items { @@ -17,7 +17,7 @@ display: flex; flex-direction: column; align-items: center; - gap: spacing.space("l"); + gap: spacing.space(3); &:focus { outline: none !important; @@ -28,7 +28,7 @@ margin: 0; &-index { - padding-bottom: 1rem; + padding-bottom: spacing.space(1); text-align: center; } @@ -42,15 +42,15 @@ } &-description { - margin-top: 1rem; - padding: 0.5rem 0 0.5rem 1rem; + margin-top: spacing.space(1); + padding: spacing.space(0.5) 0 spacing.space(0.5) spacing.space(1); @include colour.colour-border("keyline-dark", 4px, solid, left); } &-tabs { @include media.on-smaller-than-large { - padding-top: 2rem; + padding-top: spacing.space(2); } } } @@ -64,13 +64,13 @@ } &__toggle { - margin-top: 2rem; + margin-top: spacing.space(2); } &--touchable { .tna-gallery__items { flex-flow: row nowrap; - gap: 6rem; + gap: spacing.space(6); overflow-x: scroll; scroll-snap-type: x mandatory; diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index 92716254..ca21c0c3 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -5,7 +5,6 @@ "name": "default", "options": { "logo": { - "strapline": "Beta", "href": "#/" }, "topNavigation": [ @@ -34,7 +33,7 @@ } ] }, - "html": "
The National ArchivesBeta
" + "html": "
The National Archives
" } ] } diff --git a/src/nationalarchives/components/global-header/global-header.mjs b/src/nationalarchives/components/global-header/global-header.mjs index deed7651..97eb2dc2 100644 --- a/src/nationalarchives/components/global-header/global-header.mjs +++ b/src/nationalarchives/components/global-header/global-header.mjs @@ -16,7 +16,7 @@ export class GlobalHeader { (this.$topNavigation && this.$topNavigation.querySelectorAll("[tabindex='0']"))); this.menuOpened = false; - this.mql = window.matchMedia("(max-width: 768px)"); + this.mql = window.matchMedia("(max-width: 48em)"); if ( !this.$module || diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index b57f6360..0052ab00 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -1,11 +1,13 @@ @use "sass:math"; @use "../../variables/grid" as gridVars; @use "../../tools/colour"; -@use "../../tools/typography"; +@use "../../tools/grid"; @use "../../tools/media"; +@use "../../tools/spacing"; +@use "../../tools/typography"; .tna-global-header { - padding-top: 1rem; + padding-top: spacing.space(1); @include colour.contrast; @@ -36,18 +38,18 @@ } &__main { - padding-bottom: 1.5rem; + padding-bottom: spacing.space(1.5); } &__logo-wrapper { - margin-top: 0.5rem; + margin-top: spacing.space(0.5); display: flex; } &__logo { display: flex; - gap: 1rem; + gap: spacing.space(1); align-items: flex-end; text-decoration: none; @@ -68,7 +70,7 @@ } &__logo-strapline { - padding-right: 0.625rem; + padding-right: spacing.space(0.625); @include typography.heading-font; @include typography.relative-font-size(20); @@ -154,13 +156,13 @@ } &__navigation { - margin: 0.5rem 0 0; height: 100%; + margin: spacing.space(0.5) 0 0; position: relative; columns: 2; - column-gap: 2rem; + column-gap: spacing.space(2); list-style: none; } @@ -187,11 +189,11 @@ } &__top-navigation { - padding: 0 0 0.5rem; + padding: 0 0 spacing.space(0.5); display: flex; justify-content: flex-end; - gap: 1.5rem; + gap: spacing.space(1.5); @include typography.relative-font-size(15); list-style: none; @@ -202,7 +204,7 @@ &__top-navigation-link { display: flex; - gap: 0.5rem; + gap: spacing.space(0.5); align-items: center; text-decoration: none; @@ -231,7 +233,7 @@ @include media.on-medium { &__navigation { - column-gap: 1rem; + column-gap: spacing.space(1); } &__navigation-item-link { @@ -248,16 +250,16 @@ } &--collapse-on-medium &__main { - padding-bottom: 1rem; + padding-bottom: spacing.space(1); } &--collapse-on-medium &__logo { - gap: 0.75rem; + gap: spacing.space(0.75); } &--collapse-on-medium &__logo-wrapper { - margin-top: 0.5rem; - margin-bottom: 0.5rem; + margin-top: spacing.space(0.5); + margin-bottom: spacing.space(0.5); } &--collapse-on-medium .tna-logo { @@ -270,7 +272,7 @@ } &--collapse-on-medium &__navigation { - margin-bottom: 0.5rem; + margin-bottom: spacing.space(0.5); } &--collapse-on-medium &__navigation, @@ -288,11 +290,11 @@ &__logo-wrapper, &__navigation-button-wrapper { margin-top: 0; - margin-bottom: 1rem; + margin-bottom: spacing.space(1); } &__logo { - gap: 0.75rem; + gap: spacing.space(0.75); } &__navigation-button-wrapper { @@ -336,13 +338,13 @@ } &__navigation-item-children { - margin-bottom: 1rem; - margin-left: 1.5rem; + margin-bottom: spacing.space(1); + margin-left: spacing.space(1.5); } &__top-navigation { - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: spacing.space(1); + padding-bottom: spacing.space(1); justify-content: flex-start; } @@ -359,13 +361,13 @@ } &__navigation { - width: calc(100% + #{gridVars.$gutter-width * 2}); + width: calc(100% + #{grid.gutter-width(2)}); - left: -#{gridVars.$gutter-width}; + left: -#{grid.gutter-width()}; } &__navigation-item-link { - padding: 0.5rem gridVars.$gutter-width; + padding: spacing.space(0.5) grid.gutter-width(); } } @@ -380,13 +382,13 @@ } &__navigation { - width: calc(100% + #{gridVars.$gutter-width-tiny * 2}); + width: calc(100% + #{grid.gutter-width-tiny(2)}); - left: -#{gridVars.$gutter-width-tiny}; + left: -#{grid.gutter-width-tiny()}; } &__navigation-item-link { - padding: 0.5rem gridVars.$gutter-width-tiny; + padding: spacing.space(0.5) grid.gutter-width-tiny(); } } } diff --git a/src/nationalarchives/components/global-header/global-header.stories.js b/src/nationalarchives/components/global-header/global-header.stories.js index 827db5fb..6859c416 100644 --- a/src/nationalarchives/components/global-header/global-header.stories.js +++ b/src/nationalarchives/components/global-header/global-header.stories.js @@ -48,7 +48,6 @@ const Template = ({ export const Standard = Template.bind({}); Standard.args = { logo: { - // strapline: "Design System", href: "#/", }, topNavigation: [ diff --git a/src/nationalarchives/components/global-header/macro-options.json b/src/nationalarchives/components/global-header/macro-options.json index 88ece23d..b3b4365f 100644 --- a/src/nationalarchives/components/global-header/macro-options.json +++ b/src/nationalarchives/components/global-header/macro-options.json @@ -16,12 +16,6 @@ "type": "string", "required": false, "description": "" - }, - { - "name": "strapline", - "type": "string", - "required": false, - "description": "" } ] }, diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index 8f4aa576..204f2909 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -19,9 +19,6 @@ - {%- if params.logo.strapline %} - {{ params.logo.strapline }} - {%- endif %} {%- if params.logo.href %} {%- else %} diff --git a/src/nationalarchives/components/grid/grid.scss b/src/nationalarchives/components/grid/grid.scss index 739ab9dc..76754082 100644 --- a/src/nationalarchives/components/grid/grid.scss +++ b/src/nationalarchives/components/grid/grid.scss @@ -1,15 +1,15 @@ @use "sass:math"; -@use "../../variables/grid"; +@use "../../variables/grid" as gridVars; @use "../../tools/media"; -@use "../../tools/grid" as gridTools; +@use "../../tools/grid"; .tna-container { - max-width: grid.$largest-container-width; + max-width: gridVars.$largest-container-width; width: 100%; margin-right: auto; margin-left: auto; - padding-right: math.div(grid.$gutter-width, 2); - padding-left: math.div(grid.$gutter-width, 2); + padding-right: grid.gutter-width(0.5); + padding-left: grid.gutter-width(0.5); box-sizing: border-box; @@ -20,7 +20,7 @@ &--no-padding, &--no-padding-all { - max-width: grid.$largest-container-width - (grid.$gutter-width * 2); + max-width: gridVars.$largest-container-width - grid.gutter-width(2); } &--max { @@ -33,8 +33,8 @@ } .tna-column { - padding-right: math.div(grid.$gutter-width, 2); - padding-left: math.div(grid.$gutter-width, 2); + padding-right: grid.gutter-width(0.5); + padding-left: grid.gutter-width(0.5); box-sizing: border-box; @@ -58,30 +58,30 @@ } } -@include gridTools.columns-generator(grid.$column-count); +@include grid.columns-generator(gridVars.$column-count); @include media.on-medium { - @include gridTools.columns-generator(grid.$column-count-medium, "medium"); + @include grid.columns-generator(gridVars.$column-count-medium, "medium"); } @include media.on-tiny { .tna-container { - padding-right: math.div(grid.$gutter-width-tiny, 2); - padding-left: math.div(grid.$gutter-width-tiny, 2); + padding-right: grid.gutter-width-tiny(0.5); + padding-left: grid.gutter-width-tiny(0.5); } .tna-column { - padding-right: math.div(grid.$gutter-width-tiny, 2); - padding-left: math.div(grid.$gutter-width-tiny, 2); + padding-right: grid.gutter-width-tiny(0.5); + padding-left: grid.gutter-width-tiny(0.5); } } @include media.on-small { - @include gridTools.columns-generator(grid.$column-count-small, "small"); + @include grid.columns-generator(gridVars.$column-count-small, "small"); } @include media.on-tiny { - @include gridTools.columns-generator(grid.$column-count-tiny, "tiny"); + @include grid.columns-generator(gridVars.$column-count-tiny, "tiny"); } .tna-container--no-padding, diff --git a/src/nationalarchives/components/header/header.mjs b/src/nationalarchives/components/header/header.mjs index c24a114c..846e8eaf 100644 --- a/src/nationalarchives/components/header/header.mjs +++ b/src/nationalarchives/components/header/header.mjs @@ -10,7 +10,7 @@ export class Header { this.$navigation && this.$navigation.querySelectorAll("[tabindex='0']"); this.menuOpened = false; - this.mql = window.matchMedia("(max-width: 768px)"); + this.mql = window.matchMedia("(max-width: 48em)"); if (!this.$module || !this.$toggleButton || !this.$navigation) { return; diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss index 139e9a17..0652b511 100644 --- a/src/nationalarchives/components/header/header.scss +++ b/src/nationalarchives/components/header/header.scss @@ -1,9 +1,10 @@ @use "sass:math"; @use "../../variables/colour" as colourVars; // TODO -@use "../../variables/grid" as gridVars; @use "../../tools/colour"; -@use "../../tools/typography"; +@use "../../tools/grid"; @use "../../tools/media"; +@use "../../tools/spacing"; +@use "../../tools/typography"; .tna-header { @include colour.contrast; @@ -31,8 +32,8 @@ } &__exit { - padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-top: spacing.space(0.5); + padding-bottom: spacing.space(0.5); text-align: right; @@ -54,7 +55,7 @@ } .fa-solid { - margin-left: 0.5rem; + margin-left: spacing.space(0.5); } } @@ -65,8 +66,8 @@ } &__logo { - padding-top: 1.5rem; - padding-bottom: 1.5rem; + padding-top: spacing.space(1.5); + padding-bottom: spacing.space(1.5); } &__logo-link { @@ -100,7 +101,7 @@ } &__logo-strapline { - margin: 0 0.75rem; + margin: 0 spacing.space(0.75); display: inline-block; @@ -198,11 +199,11 @@ &__top-navigation-items { margin: 0; - padding: 1.25rem 0; + padding: spacing.space(1.25) 0; display: flex; justify-content: flex-end; - gap: 0.5rem 1.5rem; + gap: spacing.space(0.5) spacing.space(1.5); @include typography.relative-font-size(15); list-style: none; @@ -237,7 +238,7 @@ } .fa-solid { - margin-right: 0.375rem; + margin-right: spacing.space(0.375); } } @@ -247,7 +248,7 @@ display: flex; flex-wrap: nowrap; - gap: 2rem; + gap: spacing.space(2); list-style: none; @@ -258,7 +259,7 @@ } &__navigation-item-link { - padding: 0.5rem 0; + padding: spacing.space(0.5) 0; display: inline-block; @@ -314,8 +315,8 @@ @include media.on-mobile { &__logo { - padding-top: 1rem; - padding-bottom: 1rem; + padding-top: spacing.space(1); + padding-bottom: spacing.space(1); } &__contents { @@ -352,7 +353,7 @@ } &__top-navigation-items { - padding: 0.5rem 1rem; + padding: spacing.space(0.5) spacing.space(1); justify-content: flex-start; @@ -361,7 +362,7 @@ &__top-navigation-item { margin: 0; - padding: 0.5rem; + padding: spacing.space(0.5); } &__top-navigation-item-link { @@ -438,28 +439,28 @@ &__logo.tna-column, &__navigation-item-link, &__navigation-toggle.tna-column { - padding-right: gridVars.$gutter-width; + padding-right: grid.gutter-width(); } &__logo.tna-column, &__navigation-item-link { - padding-left: gridVars.$gutter-width; + padding-left: grid.gutter-width(); } &__top-navigation-items { - padding-right: gridVars.$gutter-width - 0.5rem; - padding-left: gridVars.$gutter-width - 0.5rem; + padding-right: calc(#{grid.gutter-width()} - 0.5rem); + padding-left: calc(#{grid.gutter-width()} - 0.5rem); } } @include media.on-tiny { &__navigation-toggle.tna-column, &__logo.tna-column { - padding-right: gridVars.$gutter-width-tiny; + padding-right: grid.gutter-width-tiny(); } &__logo.tna-column { - padding-left: gridVars.$gutter-width-tiny; + padding-left: grid.gutter-width-tiny(); } .tna-logo { @@ -476,8 +477,8 @@ } &__navigation-item-link { - padding-right: gridVars.$gutter-width-tiny; - padding-left: gridVars.$gutter-width-tiny + 0.5rem; + padding-right: grid.gutter-width-tiny(); + padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem); } } diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss index 5991d957..36939f9d 100644 --- a/src/nationalarchives/components/hero/hero.scss +++ b/src/nationalarchives/components/hero/hero.scss @@ -1,15 +1,20 @@ @use "../../tools/colour"; @use "../../tools/media"; +@use "../../tools/spacing"; @use "../../tools/typography"; .tna-hero { @include colour.contrast-on-mobile; &__figure { - min-height: clamp(12rem, calc(40vw - 12rem), 50rem); + min-height: clamp( + #{spacing.space(12)}, + calc(40vw - #{spacing.space(12)}), + 50rem + ); margin: 0; - padding-top: 8rem; - padding-bottom: 4rem; + padding-top: spacing.space(8); + padding-bottom: spacing.space(4); display: flex; align-items: flex-end; @@ -39,8 +44,8 @@ height: 1.5rem; position: absolute; - right: 0.5rem; - bottom: 0.5rem; + right: spacing.space(0.5); + bottom: spacing.space(0.5); z-index: 2; font-size: 0; @@ -72,7 +77,8 @@ &__information { width: 45rem; max-width: 75vw; - padding: 0.625rem 3.25rem 0.625rem 1rem; + padding: spacing.space(0.625) spacing.space(0.325) spacing.space(0.625) + spacing.space(1); position: absolute; right: 0; @@ -148,7 +154,7 @@ } &__content-inner { - padding: 2rem; + padding: spacing.space(2); @include colour.colour-background("page-background"); } @@ -212,7 +218,7 @@ } &__content-inner { - padding: 2rem 0; + padding: spacing.space(2) 0; background-color: transparent; } @@ -221,7 +227,7 @@ } &__body { - margin-top: 1rem; + margin-top: spacing.space(1); } } diff --git a/src/nationalarchives/components/index-grid/index-grid.scss b/src/nationalarchives/components/index-grid/index-grid.scss index 6f43bdd5..69cbc55b 100644 --- a/src/nationalarchives/components/index-grid/index-grid.scss +++ b/src/nationalarchives/components/index-grid/index-grid.scss @@ -16,7 +16,7 @@ margin-bottom: 0; display: flex; - gap: 2rem 0; + gap: spacing.space(2) 0; list-style: none; } @@ -48,15 +48,15 @@ } &__item-content { - padding: 1rem; + padding: spacing.space(1); flex: 1; } &__item-label { position: absolute; - top: 0.5rem; - left: 0.5rem; + top: spacing.space(0.5); + left: spacing.space(0.5); } &__item-title { diff --git a/src/nationalarchives/components/message/message.scss b/src/nationalarchives/components/message/message.scss index 4093d6c3..2d083df4 100644 --- a/src/nationalarchives/components/message/message.scss +++ b/src/nationalarchives/components/message/message.scss @@ -5,10 +5,10 @@ .tna-message { @include spacing.space-above; - padding: 1rem; + padding: spacing.space(1); display: flex; - gap: 1rem; + gap: spacing.space(1); align-items: flex-start; @include colour.accent-light; @@ -19,7 +19,7 @@ @include media.on-tiny { flex-direction: column; - gap: 0.5rem; + gap: spacing.space(0.5); } &__heading { diff --git a/src/nationalarchives/components/pagination/pagination.scss b/src/nationalarchives/components/pagination/pagination.scss index 14064ced..483ece1b 100644 --- a/src/nationalarchives/components/pagination/pagination.scss +++ b/src/nationalarchives/components/pagination/pagination.scss @@ -6,7 +6,7 @@ .tna-pagination { display: flex; - gap: 1rem; + gap: spacing.space(1); justify-content: center; align-items: center; flex-wrap: wrap; @@ -25,8 +25,8 @@ &__link { min-width: 1.5rem; - padding-right: 0.5rem; - padding-left: 0.5rem; + padding-right: spacing.space(0.5); + padding-left: spacing.space(0.5); } &__icon { @@ -37,17 +37,17 @@ } &--prev { - margin-left: 0.5rem; + margin-left: spacing.space(0.5); } &--next { - margin-right: 0.5rem; + margin-right: spacing.space(0.5); } } &__link-title { - padding-right: 0.5rem; - padding-left: 0.5rem; + padding-right: spacing.space(0.5); + padding-left: spacing.space(0.5); } &__list { @@ -56,7 +56,7 @@ display: flex; align-items: center; - gap: 0.25rem; + gap: spacing.space(0.25); list-style: none; } @@ -64,7 +64,7 @@ &__item { &--ellipses { min-width: 2rem; - padding: 0.5rem; + padding: spacing.space(0.5); text-align: center; } diff --git a/src/nationalarchives/components/phase-banner/phase-banner.scss b/src/nationalarchives/components/phase-banner/phase-banner.scss index de140470..1db9a9ae 100644 --- a/src/nationalarchives/components/phase-banner/phase-banner.scss +++ b/src/nationalarchives/components/phase-banner/phase-banner.scss @@ -1,12 +1,13 @@ @use "../../tools/colour"; @use "../../tools/media"; +@use "../../tools/spacing"; @use "../../tools/typography"; .tna-phase-banner { @include colour.contrast; - padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-top: spacing.space(0.5); + padding-bottom: spacing.space(0.5); @include typography.relative-font-size(16); diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss index 69ad27ca..d5b814f5 100644 --- a/src/nationalarchives/components/picture/picture.scss +++ b/src/nationalarchives/components/picture/picture.scss @@ -1,8 +1,8 @@ @use "../../tools/colour"; +@use "../../tools/grid"; @use "../../tools/media"; @use "../../tools/spacing"; @use "../../tools/typography"; -@use "../../variables/grid"; .tna-picture { @include spacing.space-above; @@ -12,7 +12,7 @@ padding: 0; &__image-wrapper { - padding: 1.5rem; + padding: spacing.space(1.5); position: relative; } @@ -26,27 +26,27 @@ &__toggle-transcript { position: absolute; - right: 1rem; - bottom: 1rem; + right: spacing.space(1); + bottom: spacing.space(1); } &__transcript { @include colour.contrast; - padding: 1rem 1.5rem; + padding: spacing.space(1) spacing.space(1.5); .tna-template--clicked &:focus { outline: none; } .tna-tabs { - margin-bottom: 0.5rem; + margin-bottom: spacing.space(0.5); } } &__caption { - margin: 0 1rem; - padding: 1rem; + margin: 0 spacing.space(1); + padding: spacing.space(1); @include typography.relative-font-size(16); @@ -61,10 +61,10 @@ @include media.on-tiny { .tna-column & { - width: calc(100% + #{grid.$gutter-width-tiny * 2}); + width: calc(100% + #{grid.gutter-width-tiny(2)}); position: relative; - left: -#{grid.$gutter-width-tiny}; + left: -#{grid.gutter-width-tiny()}; } &__image { @@ -78,13 +78,14 @@ @include typography.relative-font-size(14); } - @if grid.$gutter-width-tiny != 1.5rem { - &__caption, - &__transcript { - padding-right: grid.$gutter-width-tiny; - padding-left: grid.$gutter-width-tiny; - } - } + // TODO + // @if grid.$gutter-width-tiny != 1.5rem { + // &__caption, + // &__transcript { + // padding-right: grid.$gutter-width-tiny; + // padding-left: grid.$gutter-width-tiny; + // } + // } } @include colour.on-high-contrast-and-forced-colours { diff --git a/src/nationalarchives/components/quick-filters/quick-filters.scss b/src/nationalarchives/components/quick-filters/quick-filters.scss index 34aef49d..34d944a7 100644 --- a/src/nationalarchives/components/quick-filters/quick-filters.scss +++ b/src/nationalarchives/components/quick-filters/quick-filters.scss @@ -6,7 +6,7 @@ display: flex; flex-wrap: wrap; - gap: 0.75rem 1rem; + gap: spacing.space(0.75) spacing.space(1); list-style: none; @@ -18,7 +18,7 @@ } &__link { - padding: 0.125rem 0.75rem; + padding: spacing.space(0.125) spacing.space(0.75); text-decoration: none; line-height: 1.75; diff --git a/src/nationalarchives/components/radios/radios.scss b/src/nationalarchives/components/radios/radios.scss index 6911ca41..15c7f8d0 100644 --- a/src/nationalarchives/components/radios/radios.scss +++ b/src/nationalarchives/components/radios/radios.scss @@ -2,12 +2,13 @@ @use "../../tools/a11y"; @use "../../tools/colour"; @use "../../tools/media"; +@use "../../tools/spacing"; .tna-radios { display: flex; flex-direction: column; align-items: flex-start; - gap: 1rem; + gap: spacing.space(1); &__item { position: relative; @@ -26,7 +27,7 @@ } &-label { - padding-left: 3rem; + padding-left: spacing.space(3); display: block; @@ -79,12 +80,12 @@ } &--small { - gap: 0.5rem; + gap: spacing.space(0.5); } &--small &__item { &-label { - padding-left: 2.25rem; + padding-left: spacing.space(2.25); line-height: 1.5rem; @@ -104,7 +105,7 @@ &--inline { flex-flow: row wrap; align-items: center; - gap: 1rem 2rem; + gap: spacing.space(1) spacing.space(2); @include media.on-tiny { flex-direction: column; diff --git a/src/nationalarchives/components/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss index 7f0c9c1f..a5d6ba11 100644 --- a/src/nationalarchives/components/search-field/search-field.scss +++ b/src/nationalarchives/components/search-field/search-field.scss @@ -12,7 +12,7 @@ &__input { min-width: 8rem; - padding: 0 0.375rem; + padding: 0 spacing.space(0.375); display: block; flex: 1; diff --git a/src/nationalarchives/components/search-filters/search-filters.scss b/src/nationalarchives/components/search-filters/search-filters.scss index 58f496d6..c7609baa 100644 --- a/src/nationalarchives/components/search-filters/search-filters.scss +++ b/src/nationalarchives/components/search-filters/search-filters.scss @@ -30,21 +30,21 @@ &__heading-inner, &__item-toggle { - padding: 0.5rem 0.75rem; + padding: spacing.space(0.5) spacing.space(0.75); @include colour.colour-border("keyline", 1px, solid); border-bottom-width: 0; } &__heading-inner { - margin-top: 1rem; - padding: 0.5rem 0.75rem; + margin-top: spacing.space(1); + padding: spacing.space(0.5) spacing.space(0.75); } &__item-toggle { width: 100%; margin: 0; - padding-right: 2.5rem; + padding-right: spacing.space(2.5); display: block; @@ -66,7 +66,7 @@ height: 0; position: absolute; - right: 0.5rem; + right: spacing.space(0.5); top: calc(50% - #{math.div(math.sqrt(3), 4)}rem); @include colour.colour-border( @@ -106,7 +106,7 @@ } &__item { - padding: 0.75rem; + padding: spacing.space(0.75); @include colour.colour-background("background-tint"); @@ -115,7 +115,7 @@ } &__hint { - margin-bottom: 0.5rem; + margin-bottom: spacing.space(0.75); @include typography.relative-font-size(16); @include colour.colour-font("font-light"); @@ -124,7 +124,7 @@ &__inline-fields { display: flex; flex-wrap: wrap; - gap: 0.5rem 2rem; + gap: spacing.space(0.5) spacing.space(2); } &__label { @@ -132,7 +132,7 @@ } &__footer { - padding: 0.75rem; + padding: spacing.space(0.75); display: none; @@ -140,7 +140,7 @@ } &--js-enabled &__title { - margin-bottom: 1rem; + margin-bottom: spacing.space(1); } &--js-enabled &__footer { diff --git a/src/nationalarchives/components/select/select.scss b/src/nationalarchives/components/select/select.scss index d033f6a0..2439580f 100644 --- a/src/nationalarchives/components/select/select.scss +++ b/src/nationalarchives/components/select/select.scss @@ -1,10 +1,11 @@ @use "../../variables/forms"; @use "../../tools/colour"; +@use "../../tools/spacing"; .tna-select { max-width: 100%; height: calc(2rem + 6px); - padding: 0 1rem 0 0.5rem; + padding: 0 spacing.space(1) 0 spacing.space(0.5); display: block; @@ -19,7 +20,7 @@ border-radius: 0.1px; &--styled { - padding: 0 2.5rem 0 0.75rem; + padding: 0 spacing.space(2.5) 0 spacing.space(0.75); appearance: none; diff --git a/src/nationalarchives/components/sensitive-image/sensitive-image.scss b/src/nationalarchives/components/sensitive-image/sensitive-image.scss index ec0af6e8..8173f977 100644 --- a/src/nationalarchives/components/sensitive-image/sensitive-image.scss +++ b/src/nationalarchives/components/sensitive-image/sensitive-image.scss @@ -1,3 +1,4 @@ +@use "../../tools/spacing"; @use "../../tools/typography"; .tna-sensitive-image { @@ -42,7 +43,7 @@ cursor: pointer; &::after { - padding: 0.5rem 2rem; + padding: spacing.space(0.5) spacing.space(2); @include typography.relative-font-size(16); background-color: #ff0; diff --git a/src/nationalarchives/components/skip-link/skip-link.scss b/src/nationalarchives/components/skip-link/skip-link.scss index 3744f4aa..e910f9ad 100644 --- a/src/nationalarchives/components/skip-link/skip-link.scss +++ b/src/nationalarchives/components/skip-link/skip-link.scss @@ -1,4 +1,5 @@ @use "../../tools/colour"; +@use "../../tools/spacing"; .tna-skip-link { width: 1px !important; @@ -38,7 +39,7 @@ width: auto !important; height: auto !important; margin: inherit !important; - padding: 1rem !important; + padding: spacing.space(1) !important; position: static !important; diff --git a/src/nationalarchives/components/tabs/tabs.scss b/src/nationalarchives/components/tabs/tabs.scss index 32b514c3..2ddd671d 100644 --- a/src/nationalarchives/components/tabs/tabs.scss +++ b/src/nationalarchives/components/tabs/tabs.scss @@ -7,12 +7,12 @@ @include spacing.space-above; &__list { - margin: 0 0 1rem; + margin: 0 0 spacing.space(1); padding: 0; display: flex; align-items: stretch; - gap: 1rem; + gap: spacing.space(1); flex-wrap: nowrap; list-style: none; @@ -22,7 +22,7 @@ } &__list-item-link { - padding: 0.5rem 0; + padding: spacing.space(0.5) 0; display: flex; @@ -138,7 +138,7 @@ @include colour.on-forced-colours { &__list-item-link { &--selected { - padding-bottom: 0.125rem; + padding-bottom: spacing.space(0.125); border-bottom-width: 0.375rem; } diff --git a/src/nationalarchives/components/text-input/text-input.scss b/src/nationalarchives/components/text-input/text-input.scss index dd7aad2d..c55a8f2a 100644 --- a/src/nationalarchives/components/text-input/text-input.scss +++ b/src/nationalarchives/components/text-input/text-input.scss @@ -1,9 +1,10 @@ @use "../../variables/forms"; @use "../../tools/colour"; +@use "../../tools/spacing"; .tna-text-input { width: 100%; - padding: 0 0.375rem; + padding: 0 spacing.space(0.375); display: block; box-sizing: border-box; diff --git a/src/nationalarchives/components/textarea/textarea.scss b/src/nationalarchives/components/textarea/textarea.scss index 9365fe45..5da9f556 100644 --- a/src/nationalarchives/components/textarea/textarea.scss +++ b/src/nationalarchives/components/textarea/textarea.scss @@ -1,16 +1,17 @@ @use "../../variables/forms"; @use "../../tools/colour"; +@use "../../tools/spacing"; $textarea-minimum-lines-visible: 5.5 !default; $textarea-line-height: 1.5rem !default; -$textarea-vertical-padding: 0.25rem !default; +$textarea-vertical-padding: 0.25 !default; .tna-textarea { width: 100%; min-height: #{($textarea-line-height * $textarea-minimum-lines-visible) + ( - 2 * $textarea-vertical-padding + spacing.space($textarea-vertical-padding, 2) )}; - padding: $textarea-vertical-padding 0.5rem; + padding: spacing.space($textarea-vertical-padding) spacing.space(0.5); display: block; box-sizing: border-box; diff --git a/src/nationalarchives/global-header-package.scss b/src/nationalarchives/global-header-package.scss index 7fce4ea7..f90c352b 100644 --- a/src/nationalarchives/global-header-package.scss +++ b/src/nationalarchives/global-header-package.scss @@ -1,19 +1,34 @@ // @use "variables/assets"; @use "variables/grid" as gridVars with ( - $largest-container-width: 1270px, + $largest-container-width: 1300px, $gutter-width: 30px, $gutter-width-tiny: 15px ); @use "variables/typography" as typographyVars; @use "tools/colour"; +@use "tools/media"; +@use "tools/spacing"; @use "tools/typography"; +@use "utilities/a11y" as a11yUtils; +// @use "utilities/areas" as areasUtils; @use "utilities/colour" as colourUtils; - +@use "utilities/columns" as columnsUtils; +// @use "utilities/debug" as debugUtils; +// @use "utilities/forms" as formsUtils; +@use "utilities/global" as globalUtils; +@use "utilities/lists" as listsUtils; +@use "utilities/overrides" as overridesUtils; +// @use "utilities/reset" as resetUtils; +// @use "utilities/tables" as tablesUtils; +// @use "utilities/typography" as typographyUtils; + +@use "components/button"; +@use "components/footer"; @use "components/global-header"; @use "components/grid"; -@use "components/footer"; +@use "components/skip-link"; .tna-template { -moz-osx-font-smoothing: grayscale; @@ -22,14 +37,139 @@ -webkit-text-size-adjust: none; text-size-adjust: none; direction: ltr; - font-size: #{typographyVars.$relative-1rem-px}px; + + --page-background: #fff; +} + +hr { + border-width: 1px 0 0; + @include colour.colour-border("keyline"); + border-style: solid; +} + +%heading { + @include colour.colour-font("font-dark"); + + strong { + font-weight: inherit; + } +} + +%heading-xl { + @extend %heading; + + @include typography.heading-font; + @include typography.relative-font-size(64); + line-height: 1.1; + + @include media.on-medium { + @include typography.relative-font-size(48); + } + + @include media.on-mobile { + @include typography.relative-font-size(36); + } +} + +%heading-l { + @extend %heading; + + @include typography.heading-font; + @include typography.relative-font-size(36); + line-height: 1.3; + + @include media.on-medium { + @include typography.relative-font-size(30); + } + + @include media.on-small { + @include typography.relative-font-size(28); + } + + @include media.on-tiny { + @include typography.relative-font-size(25); + } +} + +%heading-m { + @extend %heading; + + @include typography.main-font-weight-bold; + @include typography.relative-font-size(22); + line-height: 1.6; + + @include media.on-medium { + @include typography.relative-font-size(21); + } + + @include media.on-small { + @include typography.relative-font-size(20); + } + + @include media.on-tiny { + @include typography.relative-font-size(19); + } +} + +%heading-s { + @extend %heading; + + @include typography.main-font-weight-bold; + @include typography.relative-font-size(18); + line-height: 1.6; +} + +%headings-and-heading-groups { + margin: spacing.space(2) 0 0; + padding: spacing.space(1) 0 0; + + &:first-child { + margin-top: 0; + padding-top: 0; + } + + + p { + margin-top: spacing.space(1); + } +} + +.tna-heading { + &-xl { + @extend %heading-xl; + @extend %headings-and-heading-groups; + } + + &-l { + @extend %heading-l; + @extend %headings-and-heading-groups; + } + + &-m { + @extend %heading-m; + @extend %headings-and-heading-groups; + } + + &-s { + @extend %heading-s; + @extend %headings-and-heading-groups; + } +} + +.tna-button { + &, + &:link, + &:visited { + text-decoration: none; + } } .tna-global-header, .tna-footer { - color: inherit; + // * { + // color: inherit; + // } - a { + a:not(.tna-button) { text-decoration: none; text-decoration-thickness: 1.5px; @@ -47,6 +187,8 @@ @include typography.interacted-text-decoration; background: none; + + outline: none; } &:focus { @@ -76,8 +218,10 @@ margin-bottom: 0; &-link { - &:hover { - outline: none; + &, + &:link, + &:visited { + display: block; } } } @@ -89,11 +233,21 @@ &-item { margin-left: 0; } + } +} - &-link { - &:hover { - outline: none; - } - } +.tna-footer { + &__title { + margin-top: 0; + } + + &__address { + margin-bottom: 0; + } + + &__social-item, + &__navigation-block-item, + &__legal-item { + margin-left: 0; } } diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js index b68c47b1..692c56ea 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js @@ -114,7 +114,6 @@ const Template = ({ theme, accent }) => { ${GlobalHeader({ params: { logo: { - strapline: "Colours", href: "#/", }, topNavigation: [ diff --git a/src/nationalarchives/tools/_grid.scss b/src/nationalarchives/tools/_grid.scss index d039097c..1ff1c228 100644 --- a/src/nationalarchives/tools/_grid.scss +++ b/src/nationalarchives/tools/_grid.scss @@ -1,5 +1,14 @@ @use "sass:math"; @use "../variables/grid"; +@use "spacing"; + +@function gutter-width($multiple: 1) { + @return spacing.space(grid.$gutter-width, $multiple); +} + +@function gutter-width-tiny($multiple: 1) { + @return spacing.space(grid.$gutter-width-tiny, $multiple); +} @mixin columns-generator($count, $suffix: "") { @if $suffix != "" { diff --git a/src/nationalarchives/tools/_spacing.scss b/src/nationalarchives/tools/_spacing.scss index f265e266..9f76a995 100644 --- a/src/nationalarchives/tools/_spacing.scss +++ b/src/nationalarchives/tools/_spacing.scss @@ -1,9 +1,14 @@ @use "sass:map"; @use "../variables/spacing"; +@use "../variables/typography"; @use "../tools/media"; +@function space($size, $multiple: 1) { + @return #{$size * typography.$relative-1rem-px * $multiple}px; +} + %space-above { - margin-top: 2rem; + margin-top: space(2); &:first-child { margin-top: 0; @@ -11,7 +16,7 @@ } %space-only-above { - margin: 2rem 0 0; + margin: #{space(2)} 0 0; &:first-child { margin-top: 0; @@ -26,14 +31,6 @@ } } -@function space($size) { - @return map.get(spacing.$spacing, $size); -} - -@function space-mobile($size) { - @return map.get(spacing.$spacing-mobile, $size); -} - @mixin no-spacing-generator($suffix: "") { @if $suffix != "" { $suffix: "-" + $suffix; @@ -66,7 +63,7 @@ @each $size, $amount in spacing.$spacing { @if $direction == all { .tna-\!--#{$property}-#{$size} { - #{$property}: #{$amount} !important; + #{$property}: #{space($amount)} !important; } } @else { $combined-direction: ""; @@ -78,11 +75,11 @@ @if $combined-direction { .tna-\!--#{$property}-#{$direction}-#{$size}, .tna-\!--#{$property}-#{$combined-direction}-#{$size} { - #{$property}-#{$direction}: #{$amount} !important; + #{$property}-#{$direction}: #{space($amount)} !important; } } @else { .tna-\!--#{$property}-#{$direction}-#{$size} { - #{$property}-#{$direction}: #{$amount} !important; + #{$property}-#{$direction}: #{space($amount)} !important; } } } @@ -96,7 +93,7 @@ @each $size, $amount in spacing.$spacing-mobile { @if $direction == all { .tna-\!--#{$property}-#{$size} { - #{$property}: #{$amount} !important; + #{$property}: #{space($amount)} !important; } } @else { $combined-direction: ""; @@ -108,11 +105,11 @@ @if $combined-direction { .tna-\!--#{$property}-#{$direction}-#{$size}, .tna-\!--#{$property}-#{$combined-direction}-#{$size} { - #{$property}-#{$direction}: #{$amount} !important; + #{$property}-#{$direction}: #{space($amount)} !important; } } @else { .tna-\!--#{$property}-#{$direction}-#{$size} { - #{$property}-#{$direction}: #{$amount} !important; + #{$property}-#{$direction}: #{space($amount)} !important; } } } diff --git a/src/nationalarchives/tools/_typography.scss b/src/nationalarchives/tools/_typography.scss index 4a17ab60..a2053cd2 100644 --- a/src/nationalarchives/tools/_typography.scss +++ b/src/nationalarchives/tools/_typography.scss @@ -1,6 +1,6 @@ @use "sass:math"; -@use "colour"; @use "../variables/typography"; +@use "colour"; @mixin relative-font-size($fontSizePx) { font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem; @@ -46,7 +46,7 @@ @include detail-font; @include relative-font-size(14); text-transform: uppercase; - line-height: #{math.div(typography.$relative-1rem-px, 14)}; + line-height: 1.1; } @mixin interacted-text-decoration { diff --git a/src/nationalarchives/utilities/_areas.scss b/src/nationalarchives/utilities/_areas.scss index 325df8b9..e1a3a833 100644 --- a/src/nationalarchives/utilities/_areas.scss +++ b/src/nationalarchives/utilities/_areas.scss @@ -3,22 +3,22 @@ @use "../tools/spacing"; .tna-section { - padding-top: 3rem; - padding-bottom: 3rem; + padding-top: spacing.space(3); + padding-bottom: spacing.space(3); @include media.on-mobile { - padding-top: 2rem; - padding-bottom: 2rem; + padding-top: spacing.space(2); + padding-bottom: spacing.space(2); } } .tna-aside { - padding: 2rem; + padding: spacing.space(2); @include spacing.space-above; @include media.on-mobile { - padding: 1rem; + padding: spacing.space(1); } @include colour.on-high-contrast { @@ -26,6 +26,6 @@ } &--tight { - padding: 1rem; + padding: spacing.space(1); } } diff --git a/src/nationalarchives/utilities/_columns.scss b/src/nationalarchives/utilities/_columns.scss index 5e0fb650..d06e4988 100644 --- a/src/nationalarchives/utilities/_columns.scss +++ b/src/nationalarchives/utilities/_columns.scss @@ -1,8 +1,8 @@ +@use "../tools/grid"; @use "../tools/media"; -@use "../variables/grid"; .tna-columns { - column-gap: grid.$gutter-width; + column-gap: grid.gutter-width(); &--2 { column-count: 2; @@ -13,7 +13,7 @@ } @include media.on-tiny { - column-gap: grid.$gutter-width-tiny; + column-gap: grid.gutter-width-tiny(); } @include media.on-small { diff --git a/src/nationalarchives/utilities/_forms.scss b/src/nationalarchives/utilities/_forms.scss index 6add11a0..c7accd98 100644 --- a/src/nationalarchives/utilities/_forms.scss +++ b/src/nationalarchives/utilities/_forms.scss @@ -15,7 +15,7 @@ select { @include spacing.space-above; &--error { - padding-left: 1rem; + padding-left: spacing.space(1); @include colour.thick-keyline-error(left); } @@ -32,7 +32,7 @@ select { display: flex; flex-direction: column; align-items: flex-start; - gap: 0.5rem; + gap: spacing.space(0.5); } &__group--inline, @@ -50,7 +50,7 @@ select { } &__legend { - margin-bottom: 0.5rem; + margin-bottom: spacing.space(0.5); } &__heading { diff --git a/src/nationalarchives/utilities/_lists.scss b/src/nationalarchives/utilities/_lists.scss index 5f9fadc5..c5269d40 100644 --- a/src/nationalarchives/utilities/_lists.scss +++ b/src/nationalarchives/utilities/_lists.scss @@ -5,8 +5,8 @@ .tna-ul, .tna-ol { - margin: 1rem 0 0; - padding: 0 0 0 2rem; + margin: spacing.space(1) 0 0; + padding: 0 0 0 spacing.space(2); &:first-child { margin-top: 0; @@ -37,7 +37,7 @@ } dd { - padding-left: 1rem; + padding-left: spacing.space(1); } &.tna-dl--plain { @@ -82,7 +82,7 @@ dt, dd { margin: 0; - padding: 0.5rem 1rem; + padding: spacing.space(0.5) spacing.space(1); position: relative; @@ -128,7 +128,7 @@ position: absolute; top: 50%; - left: 1rem; + left: spacing.space(1); @include colour.colour-font("icon-light"); text-align: left; @@ -140,17 +140,17 @@ &--icon-padding#{&}--plain { dt { - padding-left: 2rem !important; + padding-left: spacing.space(2) !important; .fa-solid { - margin-top: -0.25rem; + margin-top: -#{spacing.space(0.25)}; left: 0; } } dd { - padding-left: 2rem; + padding-left: spacing.space(2); } } diff --git a/src/nationalarchives/utilities/_tables.scss b/src/nationalarchives/utilities/_tables.scss index 10be4924..a6e5b664 100644 --- a/src/nationalarchives/utilities/_tables.scss +++ b/src/nationalarchives/utilities/_tables.scss @@ -1,10 +1,10 @@ @use "sass:math"; @use "sass:selector"; @use "../tools/colour"; +@use "../tools/grid"; @use "../tools/media"; @use "../tools/spacing"; @use "../tools/typography"; -@use "../variables/grid"; .tna-table { width: 100%; @@ -19,7 +19,7 @@ } &__caption { - padding: 1rem 0; + padding: spacing.space(1) 0; caption-side: bottom; @@ -50,7 +50,7 @@ &__header, &__cell { - padding: 0.25rem 1rem; + padding: spacing.space(0.25) spacing.space(1); @include colour.colour-border("keyline", 1px, solid, bottom); @@ -78,7 +78,7 @@ p { + p { - margin-top: 0.25rem; + margin-top: spacing.space(0.25); } } } @@ -86,18 +86,18 @@ .tna-table-wrapper { width: 100%; @include spacing.space-above; - padding-left: grid.$gutter-width; - padding-right: grid.$gutter-width; + padding-left: grid.gutter-width(); + padding-right: grid.gutter-width(); position: relative; - left: -#{grid.$gutter-width}; + left: -#{grid.gutter-width()}; overflow: auto; @include media.on-tiny { - padding-left: grid.$gutter-width-tiny; - padding-right: grid.$gutter-width-tiny; + padding-left: grid.gutter-width-tiny(); + padding-right: grid.gutter-width-tiny(); - left: -#{grid.$gutter-width-tiny}; + left: -#{grid.gutter-width-tiny()}; } } diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 8d7cd4c3..e7cf266f 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -1,12 +1,11 @@ @use "sass:math"; @use "sass:selector"; +@use "../variables/assets"; +@use "../variables/typography" as typographyVars; @use "../tools/colour"; @use "../tools/media"; @use "../tools/spacing"; @use "../tools/typography"; -@use "../variables/assets"; -@use "../variables/grid"; -@use "../variables/typography" as typographyVars; @if typographyVars.$use-local-fonts { @font-face { @@ -14,7 +13,7 @@ src: url("#{assets.$tna-font-path}/OpenSans-Regular.ttf"); font-weight: typographyVars.$main-font-weight; font-style: normal; - // font-display: swap; + font-display: swap; } @font-face { @@ -22,7 +21,7 @@ src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf"); font-weight: typographyVars.$main-font-weight-bold; font-style: normal; - // font-display: swap; + font-display: swap; } @font-face { @@ -30,7 +29,7 @@ src: url("#{assets.$tna-font-path}/RobotoMono-Regular.ttf"); font-weight: typographyVars.$detail-font-weight; font-style: normal; - // font-display: swap; + font-display: swap; } @font-face { @@ -38,7 +37,7 @@ src: url("#{assets.$tna-font-path}/RobotoMono-Medium.ttf"); font-weight: typographyVars.$detail-font-weight-bold; font-style: normal; - // font-display: swap; + font-display: swap; } } @else { @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&family=Roboto+Mono:wght@100..700&display=swap"); /* stylelint-disable-line */ @@ -47,7 +46,6 @@ .tna-template { @include colour.colour-font("font-base"); @include typography.main-font; - font-size: #{typographyVars.$relative-1rem-px}px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; @@ -76,7 +74,7 @@ p { @include spacing.space-above; + p { - margin-top: 1rem; + margin-top: spacing.space(1); } } @@ -114,11 +112,11 @@ small { %chip-base { max-width: max-content; - padding: 0.125em 0.25rem; + padding: spacing.space(0.125) spacing.space(0.25); display: flex; align-items: center; - gap: 0.5rem; + gap: spacing.space(0.5); @include colour.colour-font("font-base"); @include typography.detail-font-small; @@ -160,7 +158,7 @@ small { @include colour.colour-font("icon-light"); @include colour.on-high-contrast { - padding-right: 0.5rem; + padding-right: spacing.space(0.5); color: inherit; @@ -186,7 +184,7 @@ small { display: flex; flex-wrap: wrap; - gap: 0.5rem 1.5rem; + gap: spacing.space(0.5) spacing.space(1.5); list-style: none; @@ -205,7 +203,7 @@ small { display: inline-block; &::after { - padding-left: 0.5rem; + padding-left: spacing.space(0.5); display: inline-block; @@ -216,7 +214,7 @@ small { &:hover { &::after { - padding-left: 0.75rem; + padding-left: spacing.space(0.75); } } } @@ -294,14 +292,14 @@ small { %headings-and-heading-groups { @include spacing.space-above; margin-bottom: 0; - padding: 1rem 0 0; + padding: spacing.space(1) 0 0; &:first-child { padding-top: 0; } + p { - margin-top: 1rem; + margin-top: spacing.space(1); } } @@ -336,7 +334,7 @@ small { } &__supertitle { - margin: 0 0 0.25rem; + margin: 0 0 spacing.space(0.25); @extend %chip-base; @@ -377,7 +375,7 @@ small { margin-right: 0; margin-bottom: 0; margin-left: 0; - padding: 1rem 1rem 1rem 2rem; + padding: spacing.space(1) spacing.space(1) spacing.space(1) spacing.space(2); @include colour.thick-keyline-accent(left); @@ -389,7 +387,7 @@ small { @include typography.relative-font-size(16); .tna-blockquote & { - margin: 1rem 0 0; + margin: spacing.space(1) 0 0; } &::before { @@ -399,7 +397,9 @@ small { } @include media.on-tiny { - padding: 0.5rem 0.5rem 0.5rem 1rem; + padding: spacing.space(0.5) spacing.space(0.5) spacing.space(0.5) #{spacing.space( + 1 + )}; } } diff --git a/src/nationalarchives/variables/_grid.scss b/src/nationalarchives/variables/_grid.scss index cac20fb6..4f8c2b47 100644 --- a/src/nationalarchives/variables/_grid.scss +++ b/src/nationalarchives/variables/_grid.scss @@ -1,7 +1,7 @@ -$largest-container-width: 80rem !default; +$largest-container-width: 1280px !default; -$gutter-width: 2rem !default; -$gutter-width-tiny: 1rem !default; +$gutter-width: 2 !default; +$gutter-width-tiny: 1 !default; $column-count: 12; $column-count-medium: 6; diff --git a/src/nationalarchives/variables/_spacing.scss b/src/nationalarchives/variables/_spacing.scss index bd75b6be..8e2ed282 100644 --- a/src/nationalarchives/variables/_spacing.scss +++ b/src/nationalarchives/variables/_spacing.scss @@ -1,22 +1,22 @@ @use "sass:map"; $spacing: ( - "xs": 0.5rem, - "s": 1rem, - "m": 2rem, - "l": 3rem, - "xl": 5rem, - "xxl": 8rem, + "xs": 0.5, + "s": 1, + "m": 2, + "l": 3, + "xl": 5, + "xxl": 8, ) !default; $spacing-mobile: map.merge( $spacing, ( - "xs": 0.5rem, - "s": 0.75rem, - "m": 1.5rem, - "l": 2rem, - "xl": 3rem, - "xxl": 5rem, + "xs": 0.5, + "s": 0.75, + "m": 1.5, + "l": 2, + "xl": 3, + "xxl": 5, ) ) !default; diff --git a/src/nationalarchives/variables/_typography.scss b/src/nationalarchives/variables/_typography.scss index 66333ad9..8a1392e2 100644 --- a/src/nationalarchives/variables/_typography.scss +++ b/src/nationalarchives/variables/_typography.scss @@ -2,11 +2,11 @@ $use-local-fonts: false !default; -$relative-1rem-px: 16; // 16px is always 1rem +$relative-1rem-px: 16; // 16px is 1rem by default $body-font-size-px: 18 !default; $body-font-size-px-mobile: 17 !default; -$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777 +$body-line-height: 1.75 !default; $interactive-text-decoration-thickness: 3.5px !default; diff --git a/tasks/global-header/build-global-header-package.sh b/tasks/global-header/build-global-header-package.sh index bd0d0340..9b23a666 100755 --- a/tasks/global-header/build-global-header-package.sh +++ b/tasks/global-header/build-global-header-package.sh @@ -4,5 +4,5 @@ set -e ./tasks/build-package.sh rm -fR package-global-header mkdir package-global-header -cp -R package/nationalarchives/global-header-package.css package/nationalarchives/global-header-package.css.map package/nationalarchives/components/global-header/global-header.js package/nationalarchives/components/global-header/global-header.js.map package/nationalarchives/global-header-package.scss package/nationalarchives/assets package/nationalarchives/analytics.js package/nationalarchives/analytics.js.map LICENCE package-global-header +cp -R package/nationalarchives/global-header-package.css package/nationalarchives/global-header-package.css.map package/nationalarchives/all.js package/nationalarchives/all.js.map package/nationalarchives/global-header-package.scss package/nationalarchives/assets package/nationalarchives/analytics.js package/nationalarchives/analytics.js.map LICENCE package-global-header node tasks/global-header/generate-global-header-assets.js