From 9c92edcc5b7fb189343a8923cb4c9d8e6d545d8c Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 6 Mar 2024 18:42:19 +0000 Subject: [PATCH 1/7] Change default pagination style to plain --- CHANGELOG.md | 3 ++ .../components/pagination/fixtures.json | 2 +- .../components/pagination/macro-options.json | 6 +++ .../pagination/pagination.stories.js | 44 +++++++++++++++++++ .../components/pagination/template.njk | 5 ++- 5 files changed, 58 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b2f613bd..22e6a970 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added ### Changed + +- The default pagination style is plain buttons but can be changed with the `solid` option + ### Deprecated ### Removed ### Fixed diff --git a/src/nationalarchives/components/pagination/fixtures.json b/src/nationalarchives/components/pagination/fixtures.json index 06ef820c..11181fa7 100644 --- a/src/nationalarchives/components/pagination/fixtures.json +++ b/src/nationalarchives/components/pagination/fixtures.json @@ -40,7 +40,7 @@ "href": "#next" } }, - "html": "" + "html": "" } ] } diff --git a/src/nationalarchives/components/pagination/macro-options.json b/src/nationalarchives/components/pagination/macro-options.json index 973c22ff..fe5c71f2 100644 --- a/src/nationalarchives/components/pagination/macro-options.json +++ b/src/nationalarchives/components/pagination/macro-options.json @@ -101,6 +101,12 @@ "required": false, "description": "" }, + { + "name": "solid", + "type": "boolean", + "required": false, + "description": "" + }, { "name": "spaced", "type": "boolean", diff --git a/src/nationalarchives/components/pagination/pagination.stories.js b/src/nationalarchives/components/pagination/pagination.stories.js index 6626e730..694ebbb8 100644 --- a/src/nationalarchives/components/pagination/pagination.stories.js +++ b/src/nationalarchives/components/pagination/pagination.stories.js @@ -6,6 +6,7 @@ const argTypes = { items: { control: "object" }, next: { control: "object" }, currentItemText: { control: "text" }, + solid: { control: "boolean" }, spaced: { control: "boolean" }, landmarkLabel: { control: "text" }, classes: { control: "text" }, @@ -28,6 +29,7 @@ const Template = ({ items, next, currentItemText, + solid, spaced, landmarkLabel, classes, @@ -39,6 +41,7 @@ const Template = ({ items, next, currentItemText, + solid, spaced, landmarkLabel, classes, @@ -470,6 +473,47 @@ Last.args = { classes: "tna-pagination--demo", }; +export const Solid = Template.bind({}); +Solid.args = { + previous: { + href: "#", + }, + items: [ + { + number: 1, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 6, + href: "#", + }, + { + number: 7, + current: true, + href: "#", + }, + { + number: 8, + href: "#", + }, + { + ellipsis: true, + }, + { + number: 42, + href: "#", + }, + ], + next: { + href: "#", + }, + solid: true, + classes: "tna-pagination--demo", +}; + export const NoNumbers = Template.bind({}); NoNumbers.args = { previous: { diff --git a/src/nationalarchives/components/pagination/template.njk b/src/nationalarchives/components/pagination/template.njk index 65eb3819..26738060 100644 --- a/src/nationalarchives/components/pagination/template.njk +++ b/src/nationalarchives/components/pagination/template.njk @@ -13,6 +13,7 @@ title: params.previous.title, icon: "arrow-left", iconOnlyOnMobile: true, + plain: not params.solid, attributes: { rel: "prev" } @@ -29,7 +30,8 @@ {{ tnaButton({ text: item.number, href: item.href, - accent: item.current, + accent: params.solid and item.current, + plain: not params.solid and not item.current, classes: "tna-pagination__link", attributes: { "aria-label": item.label @@ -50,6 +52,7 @@ title: params.next.title, icon: "arrow-right", iconOnlyOnMobile: true, + plain: not params.solid, classes: "tna-button--icon-right", attributes: { rel: "next" From 36db0cf1a086a087dc5e689e275313057c2fccff Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 6 Mar 2024 18:52:32 +0000 Subject: [PATCH 2/7] Make global header JS more robust --- .../global-header/global-header.mjs | 116 +++++++----------- .../global-header/global-header.scss | 7 ++ 2 files changed, 52 insertions(+), 71 deletions(-) diff --git a/src/nationalarchives/components/global-header/global-header.mjs b/src/nationalarchives/components/global-header/global-header.mjs index 649bb49f..a081ffeb 100644 --- a/src/nationalarchives/components/global-header/global-header.mjs +++ b/src/nationalarchives/components/global-header/global-header.mjs @@ -1,5 +1,3 @@ -import uuidv4 from "../../lib/uuid.mjs"; - export class GlobalHeader { constructor($module) { this.$module = $module; @@ -28,20 +26,17 @@ export class GlobalHeader { return; } - const uniqueId = `tna-menu-content-${uuidv4()}`; - const uniqueIdTop = `${uniqueId}-top`; + const id = "tna-global-menu-content"; + const idTop = `${id}-top`; if (this.$navigation) { - this.$navigation.setAttribute("id", uniqueId); + this.$navigation.setAttribute("id", id); } if (this.$topNavigation) { - this.$topNavigation.setAttribute("id", uniqueIdTop); + this.$topNavigation.setAttribute("id", idTop); } this.$toggleButton.removeAttribute("hidden"); - this.$toggleButton.setAttribute( - "aria-controls", - [uniqueId, uniqueIdTop].join(" "), - ); + this.$toggleButton.setAttribute("aria-controls", [id, idTop].join(" ")); this.syncState(); @@ -64,71 +59,50 @@ export class GlobalHeader { syncState() { if (this.mql.matches) { if (this.menuOpened) { - if (this.$navigation) { - this.$navigation.classList.add("tna-global-header__navigation--open"); - this.$navigation.hidden = false; - this.$navigation.setAttribute("aria-hidden", "false"); - } - if (this.$topNavigation) { - this.$topNavigation.classList.add( - "tna-global-header__top-navigation--open", - ); - this.$topNavigation.hidden = false; - this.$topNavigation.setAttribute("aria-hidden", "false"); - } - this.$toggleButton.setAttribute("aria-expanded", "true"); - this.$toggleButton.setAttribute("title", "Close menu"); - this.$toggleButton.classList.add( - "tna-global-header__navigation-button--opened", - ); - - for (let i = 0; i < this.$links.length; i++) { - this.$links[i].setAttribute("tabindex", "0"); - } + this.show(); } else { - if (this.$navigation) { - this.$navigation.classList.remove( - "tna-global-header__navigation--open", - ); - this.$navigation.hidden = true; - this.$navigation.setAttribute("aria-hidden", "true"); - } - if (this.$topNavigation) { - this.$topNavigation.classList.remove( - "tna-global-header__top-navigation--open", - ); - this.$topNavigation.hidden = true; - this.$topNavigation.setAttribute("aria-hidden", "true"); - } - this.$toggleButton.setAttribute("aria-expanded", "false"); - this.$toggleButton.setAttribute("title", "Open menu"); - this.$toggleButton.classList.remove( - "tna-global-header__navigation-button--opened", - ); - - for (let i = 0; i < this.$links.length; i++) { - this.$links[i].setAttribute("tabindex", "-1"); - } + this.hide(); } } else { - if (this.$navigation) { - this.$navigation.classList.add("tna-global-header__navigation--open"); - this.$navigation.hidden = false; - this.$navigation.setAttribute("aria-hidden", "false"); - } - if (this.$topNavigation) { - this.$topNavigation.classList.add( - "tna-global-header__top-navigation--open", - ); - this.$topNavigation.hidden = false; - this.$topNavigation.setAttribute("aria-hidden", "false"); - } - this.$toggleButton.setAttribute("aria-expanded", "true"); - this.$toggleButton.setAttribute("title", "Close menu"); + this.show(); + } + } - for (let i = 0; i < this.$links.length; i++) { - this.$links[i].setAttribute("tabindex", "0"); - } + hide() { + if (this.$navigation) { + this.$navigation.hidden = true; + this.$navigation.setAttribute("aria-hidden", "true"); + } + if (this.$topNavigation) { + this.$topNavigation.hidden = true; + this.$topNavigation.setAttribute("aria-hidden", "true"); + } + this.$toggleButton.setAttribute("aria-expanded", "false"); + this.$toggleButton.setAttribute("title", "Open menu"); + this.$toggleButton.classList.remove( + "tna-global-header__navigation-button--opened", + ); + for (let i = 0; i < this.$links.length; i++) { + this.$links[i].setAttribute("tabindex", "-1"); + } + } + + show() { + if (this.$navigation) { + this.$navigation.hidden = false; + this.$navigation.setAttribute("aria-hidden", "false"); + } + if (this.$topNavigation) { + this.$topNavigation.hidden = false; + this.$topNavigation.setAttribute("aria-hidden", "false"); + } + this.$toggleButton.setAttribute("aria-expanded", "true"); + this.$toggleButton.setAttribute("title", "Close menu"); + this.$toggleButton.classList.add( + "tna-global-header__navigation-button--opened", + ); + for (let i = 0; i < this.$links.length; i++) { + this.$links[i].setAttribute("tabindex", "0"); } } } diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index 07fbe8ed..975fbfef 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -154,6 +154,9 @@ } } + &__navigation-wrapper { + } + &__navigation { margin: 0.5rem 0 0; height: 100%; @@ -231,6 +234,10 @@ } @include media.on-medium { + &__navigation { + column-gap: 1rem; + } + &__navigation-item-link { @include typography.relative-font-size(16); } From 079db71f1a99ad53f3c421c572c549384875b5a3 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 6 Mar 2024 18:52:46 +0000 Subject: [PATCH 3/7] Reduce index grid items in example --- .../utilities/colour-schemes/colour-themes.stories.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 dbed2662..f95f8d93 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js @@ -652,7 +652,7 @@ const Template = ({ theme, accent }) => { title: "My dogs 1", headingLevel: 3, headingHref: "#", - items: Array(6) + items: Array(4) .fill({ ...{ href: "#", @@ -736,7 +736,7 @@ const Template = ({ theme, accent }) => { title: "My dogs 2", headingLevel: 3, headingHref: "#", - items: Array(6) + items: Array(4) .fill({ ...{ href: "#", @@ -820,7 +820,7 @@ const Template = ({ theme, accent }) => { title: "My dogs 3", headingLevel: 3, headingHref: "#", - items: Array(6) + items: Array(4) .fill({ ...{ href: "#", @@ -904,7 +904,7 @@ const Template = ({ theme, accent }) => { title: "My dogs 4", headingLevel: 3, headingHref: "#", - items: Array(6) + items: Array(4) .fill({ ...{ href: "#", @@ -988,7 +988,7 @@ const Template = ({ theme, accent }) => { title: "My dogs 5", headingLevel: 3, headingHref: "#", - items: Array(6) + items: Array(4) .fill({ ...{ href: "#", From bbe1db69aa5289c6dbe4feec37e52ed2113f675c Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 6 Mar 2024 18:53:06 +0000 Subject: [PATCH 4/7] Move reset --- src/nationalarchives/utilities/_reset.scss | 7 +++++-- .../utilities/_typography.scss | 20 +------------------ 2 files changed, 6 insertions(+), 21 deletions(-) diff --git a/src/nationalarchives/utilities/_reset.scss b/src/nationalarchives/utilities/_reset.scss index 95724e4a..f05f5a8c 100644 --- a/src/nationalarchives/utilities/_reset.scss +++ b/src/nationalarchives/utilities/_reset.scss @@ -1,5 +1,10 @@ @use "../tools/colour"; +* { + margin: 0; + padding: 0; +} + img, svg, picture, @@ -21,8 +26,6 @@ canvas { } hr { - margin: 0; - border-width: 1px 0 0; @include colour.colour-border("keyline"); border-style: solid; diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 4506dcf4..c6aa70d9 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -68,11 +68,6 @@ } } -* { - margin: 0; - padding: 0; -} - strong { @include typography.main-font-weight-bold; } @@ -80,16 +75,9 @@ strong { p { @include spacing.space-above; - + p/*, - + .tna-ul, - + .tna-ol, - + .tna-blockquote*/ { + + p { margin-top: 1rem; } - - // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) { - // margin-top: 1rem; - // } } a { @@ -116,12 +104,6 @@ a { @include colour.colour-font("link"); } } - - // &[target="_blank"]:not([title*="opens in a new"]) { - // &::after { - // content: "" / " (opens in a new window)" - // } - // } } small { From 3f2cbea46ba0a8e75faf844946d37ff4728962e6 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 6 Mar 2024 18:53:58 +0000 Subject: [PATCH 5/7] Add global active style and variables --- CHANGELOG.md | 3 +++ src/nationalarchives/tools/_a11y.scss | 13 +++++++++++-- src/nationalarchives/utilities/_a11y.scss | 4 ++++ src/nationalarchives/variables/_a11y.scss | 2 ++ src/nationalarchives/variables/_index.scss | 1 + 5 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 src/nationalarchives/variables/_a11y.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 22e6a970..9ab57a1e 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.42...HEAD) ### Added + +- Global active style added + ### Changed - The default pagination style is plain buttons but can be changed with the `solid` option diff --git a/src/nationalarchives/tools/_a11y.scss b/src/nationalarchives/tools/_a11y.scss index dfd823dd..3e799cc2 100644 --- a/src/nationalarchives/tools/_a11y.scss +++ b/src/nationalarchives/tools/_a11y.scss @@ -1,6 +1,15 @@ +@use "../variables/a11y"; @use "colour"; @mixin focus-outline { - @include colour.colour-outline("focus-outline", 5px, solid); - outline-offset: 2px; + @include colour.colour-outline( + "focus-outline", + a11y.$focus-outline-width, + solid + ); + outline-offset: a11y.$focus-outline-offset; +} + +@mixin active-outline { + outline-offset: a11y.$focus-outline-offset * 2; } diff --git a/src/nationalarchives/utilities/_a11y.scss b/src/nationalarchives/utilities/_a11y.scss index 260c1e25..68ddb5bd 100644 --- a/src/nationalarchives/utilities/_a11y.scss +++ b/src/nationalarchives/utilities/_a11y.scss @@ -32,6 +32,10 @@ @include a11y.focus-outline; } +*:active { + @include a11y.active-outline; +} + .tna-\!--no-focus-style { &:focus { outline: none; diff --git a/src/nationalarchives/variables/_a11y.scss b/src/nationalarchives/variables/_a11y.scss new file mode 100644 index 00000000..8d153cb1 --- /dev/null +++ b/src/nationalarchives/variables/_a11y.scss @@ -0,0 +1,2 @@ +$focus-outline-width: 5px !default; +$focus-outline-offset: 2px !default; diff --git a/src/nationalarchives/variables/_index.scss b/src/nationalarchives/variables/_index.scss index bcef0913..5fa541c0 100644 --- a/src/nationalarchives/variables/_index.scss +++ b/src/nationalarchives/variables/_index.scss @@ -1,3 +1,4 @@ +@use "a11y"; @use "assets"; @use "colour"; @use "features"; From ba4031ea9212a6e188551b65a0dddaee69d02174 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 6 Mar 2024 19:05:07 +0000 Subject: [PATCH 6/7] Move some JS into the HTML --- .../components/global-header/fixtures.json | 2 +- .../global-header/global-header.mjs | 13 ---- .../global-header/macro-options.json | 12 +++ .../components/global-header/template.njk | 6 +- .../components/header/fixtures.json | 2 +- .../components/header/header.mjs | 73 ++++++++----------- .../components/header/macro-options.json | 6 ++ .../components/header/template.njk | 4 +- 8 files changed, 57 insertions(+), 61 deletions(-) diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index 802fe76d..4789c698 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -34,7 +34,7 @@ } ] }, - "html": "
The National ArchivesBeta
" + "html": "
The National ArchivesBeta
" } ] } diff --git a/src/nationalarchives/components/global-header/global-header.mjs b/src/nationalarchives/components/global-header/global-header.mjs index a081ffeb..2148ec9b 100644 --- a/src/nationalarchives/components/global-header/global-header.mjs +++ b/src/nationalarchives/components/global-header/global-header.mjs @@ -26,24 +26,11 @@ export class GlobalHeader { return; } - const id = "tna-global-menu-content"; - const idTop = `${id}-top`; - if (this.$navigation) { - this.$navigation.setAttribute("id", id); - } - if (this.$topNavigation) { - this.$topNavigation.setAttribute("id", idTop); - } - this.$toggleButton.removeAttribute("hidden"); - this.$toggleButton.setAttribute("aria-controls", [id, idTop].join(" ")); - this.syncState(); - this.$toggleButton.addEventListener("click", () => this.handleToggleNavigation(), ); - if ("addEventListener" in this.mql) { this.mql.addEventListener("change", () => this.syncState()); } else { diff --git a/src/nationalarchives/components/global-header/macro-options.json b/src/nationalarchives/components/global-header/macro-options.json index f803c69c..88ece23d 100644 --- a/src/nationalarchives/components/global-header/macro-options.json +++ b/src/nationalarchives/components/global-header/macro-options.json @@ -83,6 +83,18 @@ } ] }, + { + "name": "navigationId", + "type": "string", + "required": false, + "description": "" + }, + { + "name": "topNavigationId", + "type": "string", + "required": false, + "description": "" + }, { "name": "classes", "type": "string", diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index e35a0f9f..23380fe5 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -30,13 +30,13 @@
-
{%- if params.navigation %} -