From 9da4d652faef43e83b11bd38d85b163dba2d6243 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 28 Mar 2024 15:25:03 +0000 Subject: [PATCH 1/7] Allow border width change, fix variable scopes --- CHANGELOG.md | 3 ++ .../components/button/button.scss | 4 ++- .../featured-records/featured-records.scss | 5 +-- .../global-header/global-header.scss | 1 - .../components/header/header.scss | 5 ++- .../components/skip-link/skip-link.scss | 10 ++++-- .../components/tabs/tabs.scss | 30 +++++++---------- src/nationalarchives/tools/_colour.scss | 32 ++++++++++++++++--- src/nationalarchives/variables/_borders.scss | 1 + src/nationalarchives/variables/_index.scss | 1 + tasks/test-package.js | 1 + 11 files changed, 58 insertions(+), 35 deletions(-) create mode 100644 src/nationalarchives/variables/_borders.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bade86c..73dd6f29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.50...HEAD) ### Added + +- "Thick" and button border widths are customisable + ### Changed ### Deprecated ### Removed diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index 005e9702..33007e43 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -5,6 +5,8 @@ @use "../../tools/typography"; @use "button-group"; +$button-border-width: 4px !default; + .tna-button { padding: spacing.space(0.25) spacing.space(1); @@ -22,7 +24,7 @@ @include colour.colour-background("button-background"); - @include colour.colour-border("button-background", 4px); + @include colour.colour-border("button-background", $button-border-width); cursor: pointer; diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss index c3545c02..db7cb702 100644 --- a/src/nationalarchives/components/featured-records/featured-records.scss +++ b/src/nationalarchives/components/featured-records/featured-records.scss @@ -2,7 +2,6 @@ @use "../../tools/media"; @use "../../tools/spacing"; @use "../../tools/typography"; -@use "../../variables/typography" as typographyVars; .tna-featured-records { @include spacing.space-above; @@ -77,9 +76,7 @@ &__date-description { @include colour.colour-font("font-light"); - @include typography.relative-font-size( - typographyVars.$body-font-size-px * 0.85 - ); + @include typography.relative-font-size(16); } @include media.on-tiny { diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index e2599f6a..b62ceaaa 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -1,5 +1,4 @@ @use "sass:math"; -@use "../../variables/grid" as gridVars; @use "../../tools/colour"; @use "../../tools/grid"; @use "../../tools/media"; diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss index 826a2b26..7e6cf245 100644 --- a/src/nationalarchives/components/header/header.scss +++ b/src/nationalarchives/components/header/header.scss @@ -1,5 +1,4 @@ @use "sass:math"; -@use "../../variables/colour" as colourVars; // TODO @use "../../tools/colour"; @use "../../tools/grid"; @use "../../tools/media"; @@ -37,7 +36,7 @@ text-align: right; - background-color: colourVars.$dark-grey; + @include colour.contrast; } &__exit-link { @@ -292,7 +291,7 @@ &, &:hover { &::after { - height: 0.375rem; + @include colour.thick-keyline-dark(top); } } } diff --git a/src/nationalarchives/components/skip-link/skip-link.scss b/src/nationalarchives/components/skip-link/skip-link.scss index e910f9ad..ffbf1f8c 100644 --- a/src/nationalarchives/components/skip-link/skip-link.scss +++ b/src/nationalarchives/components/skip-link/skip-link.scss @@ -1,5 +1,8 @@ +@use "../../variables/a11y" as a11yVars; +@use "../../tools/a11y"; @use "../../tools/colour"; @use "../../tools/spacing"; +@use "../../tools/typography"; .tna-skip-link { width: 1px !important; @@ -29,8 +32,11 @@ &:focus { @include colour.colour-background("button-background", $important: true); - @include colour.colour-border("focus-outline", 5px, $important: true); - + @include colour.colour-border( + "focus-outline", + a11yVars.$focus-outline-width, + $important: true + ); outline: none !important; } diff --git a/src/nationalarchives/components/tabs/tabs.scss b/src/nationalarchives/components/tabs/tabs.scss index 2ddd671d..5695361d 100644 --- a/src/nationalarchives/components/tabs/tabs.scss +++ b/src/nationalarchives/components/tabs/tabs.scss @@ -47,15 +47,11 @@ } &::after { - height: 0; - position: absolute; right: 0; bottom: 0; left: 0; - @include colour.colour-background("keyline-dark"); - content: ""; } @@ -65,7 +61,7 @@ text-decoration: none; &::after { - height: 0.25rem; + @include colour.thick-keyline-dark(top); } } @@ -74,9 +70,7 @@ &:hover { &::after { - height: 0.125rem; - - @include colour.colour-background("font-light"); + @include colour.thick-keyline(top); } } @@ -85,9 +79,7 @@ &::after, &:hover::after { - height: 0.25rem; - - @include colour.colour-background("keyline-dark"); + @include colour.thick-keyline-dark(top); } } } @@ -135,15 +127,15 @@ } } - @include colour.on-forced-colours { - &__list-item-link { - &--selected { - padding-bottom: spacing.space(0.125); + // @include colour.on-forced-colours { + // &__list-item-link { + // &--selected { + // padding-bottom: spacing.space(0.125); - border-bottom-width: 0.375rem; - } - } - } + // border-bottom-width: 0.375rem; + // } + // } + // } @include media.on-print { &__list { diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss index 6f3750e8..271b9ed8 100644 --- a/src/nationalarchives/tools/_colour.scss +++ b/src/nationalarchives/tools/_colour.scss @@ -1,5 +1,6 @@ @use "sass:map"; @use "sass:list"; +@use "../variables/borders"; @use "../variables/colour"; @use "../tools/media"; @@ -121,23 +122,44 @@ } @mixin thick-keyline($direction) { - @include colour-border("keyline", 5px, solid, $direction); + @include colour-border( + "keyline", + borders.$thick-border-width, + solid, + $direction + ); } @mixin thick-keyline-dark($direction) { - @include colour-border("keyline-dark", 5px, solid, $direction); + @include colour-border( + "keyline-dark", + borders.$thick-border-width, + solid, + $direction + ); } @mixin thick-keyline-accent($direction) { - @include colour-border("accent-background", 5px, solid, $direction); + @include colour-border( + "accent-background", + borders.$thick-border-width, + solid, + $direction + ); } @mixin thick-keyline-error($direction) { - @include colour-border("form-error", 5px, solid, $direction); + @include colour-border( + "form-error", + borders.$thick-border-width, + solid, + $direction + ); } @mixin thick-keyline-brand($direction, $brandColour) { - border-#{$direction}: 5px #{brand-colour($brandColour)} solid; + border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)} + solid; } %light { diff --git a/src/nationalarchives/variables/_borders.scss b/src/nationalarchives/variables/_borders.scss new file mode 100644 index 00000000..c81f007b --- /dev/null +++ b/src/nationalarchives/variables/_borders.scss @@ -0,0 +1 @@ +$thick-border-width: 5px !default; diff --git a/src/nationalarchives/variables/_index.scss b/src/nationalarchives/variables/_index.scss index 5fa541c0..19c27e4e 100644 --- a/src/nationalarchives/variables/_index.scss +++ b/src/nationalarchives/variables/_index.scss @@ -1,5 +1,6 @@ @use "a11y"; @use "assets"; +@use "borders"; @use "colour"; @use "features"; @use "forms"; diff --git a/tasks/test-package.js b/tasks/test-package.js index e64df4a8..8c661ca0 100644 --- a/tasks/test-package.js +++ b/tasks/test-package.js @@ -130,6 +130,7 @@ const checkExists = [ // Variables "nationalarchives/variables/_a11y.scss", "nationalarchives/variables/_assets.scss", + "nationalarchives/variables/_borders.scss", "nationalarchives/variables/_colour.scss", "nationalarchives/variables/_features.scss", "nationalarchives/variables/_forms.scss", From 072f155fee633c9f53019c620e294a07eed71729 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 28 Mar 2024 16:00:30 +0000 Subject: [PATCH 2/7] Improve markup of warning component --- CHANGELOG.md | 3 +++ src/nationalarchives/components/warning/fixtures.json | 2 +- src/nationalarchives/components/warning/template.njk | 6 +++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 73dd6f29..de2d109c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - "Thick" and button border widths are customisable ### Changed + +- Improved markup of warning component + ### Deprecated ### Removed ### Fixed diff --git a/src/nationalarchives/components/warning/fixtures.json b/src/nationalarchives/components/warning/fixtures.json index 2c0da605..8cf7e2a6 100644 --- a/src/nationalarchives/components/warning/fixtures.json +++ b/src/nationalarchives/components/warning/fixtures.json @@ -7,7 +7,7 @@ "headingLevel": 2, "body": "Please note this page references hunger strikes and force feeding, which some people may find upsetting." }, - "html": "

Important information

!
Please note this page references hunger strikes and force feeding, which some people may find upsetting.
" + "html": "

Important information!

Please note this page references hunger strikes and force feeding, which some people may find upsetting.
" } ] } diff --git a/src/nationalarchives/components/warning/template.njk b/src/nationalarchives/components/warning/template.njk index f5d6a4c8..f462e8d9 100644 --- a/src/nationalarchives/components/warning/template.njk +++ b/src/nationalarchives/components/warning/template.njk @@ -1,9 +1,9 @@ {%- set containerClasses = [params.classes] if params.classes else [] -%}
- - {{ params.heading or 'Important information' }} + + {{ params.heading or 'Important information' }} + -
{{ params.body | safe }}
From 818146221235b3f10f1842e52b4d277e4769b466 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 28 Mar 2024 17:38:32 +0000 Subject: [PATCH 3/7] Fix column margin removal classes --- CHANGELOG.md | 3 +++ src/nationalarchives/tools/_grid.scss | 6 ++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de2d109c..dd6d7840 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Deprecated ### Removed ### Fixed + +- Fixed column margin removal classes + ### Security ## [0.1.50](https://github.com/nationalarchives/tna-frontend/compare/v0.1.49...v0.1.50) - 2024-03-28 diff --git a/src/nationalarchives/tools/_grid.scss b/src/nationalarchives/tools/_grid.scss index 1cc7051c..b95b0344 100644 --- a/src/nationalarchives/tools/_grid.scss +++ b/src/nationalarchives/tools/_grid.scss @@ -75,12 +75,14 @@ margin-left: math.div(100%, $count) * $i; } } + } - &--no-margin-right-#{$suffix} { + @if $suffix != "" { + &--no-margin-right#{$suffix} { margin-right: 0; } - &--no-margin-left-#{$suffix} { + &--no-margin-left#{$suffix} { margin-left: 0; } } From 6a869c26135309b48865f6f46ef407124764a3e3 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 28 Mar 2024 17:43:19 +0000 Subject: [PATCH 4/7] Update card fixtures --- .../components/card/fixtures.json | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json index abf0bd45..5dec162a 100644 --- a/src/nationalarchives/components/card/fixtures.json +++ b/src/nationalarchives/components/card/fixtures.json @@ -252,6 +252,30 @@ }, "html": "

Card title

Card body

" }, + { + "name": "with classes for href items", + "options": { + "title": "Card title", + "headingLevel": 3, + "href": "#", + "body": "

Card body

", + "hrefClasses": "card__test-class" + }, + "html": "

Card title

Card body

" + }, + { + "name": "with attributes for href items", + "options": { + "title": "Card title", + "headingLevel": 3, + "href": "#", + "body": "

Card body

", + "hrefAttributes": { + "data-testattribute": "foobar" + } + }, + "html": "

Card title

Card body

" + }, { "name": "with classes", "options": { From 476a37cafa3948f0642e98db401853e0d2f3f973 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 28 Mar 2024 17:53:00 +0000 Subject: [PATCH 5/7] Update button macro options --- .../components/button/macro-options.json | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/nationalarchives/components/button/macro-options.json b/src/nationalarchives/components/button/macro-options.json index 9df9f6a0..6d3a1bff 100644 --- a/src/nationalarchives/components/button/macro-options.json +++ b/src/nationalarchives/components/button/macro-options.json @@ -3,73 +3,73 @@ "name": "text", "type": "string", "required": true, - "description": "" + "description": "The text of the button." }, { "name": "href", "type": "string", "required": false, - "description": "" + "description": "A URL to use as a link for the button." }, { "name": "title", "type": "string", "required": false, - "description": "" + "description": "A title attribute for the button." }, { "name": "icon", "type": "string", "required": false, - "description": "" + "description": "The name of a Font Awesome icon, without the prefixed `fa-`." }, { "name": "accent", "type": "boolean", "required": false, - "description": "" + "description": "If true, set the colour of the button to the page's accent colour." }, { "name": "small", "type": "boolean", "required": false, - "description": "" + "description": "If true, make the button smaller." }, { "name": "plain", "type": "boolean", "required": false, - "description": "" + "description": "If true, remove the background colour of the button and make it look more like a link." }, { "name": "iconOnly", "type": "boolean", "required": false, - "description": "" + "description": "If true, don't show the text of the button." }, { "name": "iconOnlyOnMobile", "type": "boolean", "required": false, - "description": "" + "description": "If true, show both the text and icon on larger devices but only show the icon on smaller devices." }, { "name": "rightAlignIcon", "type": "boolean", "required": false, - "description": "" + "description": "If true, align the icon to the right hand side of the button." }, { "name": "buttonElement", "type": "boolean", "required": false, - "description": "" + "description": "If true, use a `