From 175dd5d2ee694758feab55daf90f9b7f71869ead Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 4 Feb 2025 17:35:12 +0000 Subject: [PATCH 1/5] Allow HTML to be added to the top of the header components --- .../components/global-header/fixtures.json | 39 +++++- .../global-header/global-header.scss | 3 +- .../global-header/global-header.stories.js | 67 +++++++++- .../global-header/macro-options.json | 6 + .../components/global-header/template.njk | 1 + .../components/header/fixtures.json | 118 +++++++++++++++++- .../components/header/header.stories.js | 45 +++++++ .../components/header/macro-options.json | 6 + .../components/header/template.njk | 1 + .../components/phase-banner/phase-banner.scss | 2 - 10 files changed, 275 insertions(+), 13 deletions(-) diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index 8c0072fe..b06c8939 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -177,6 +177,41 @@ }, "html": "
" }, + { + "name": "with pre HTML", + "options": { + "logo": { + "href": "#/", + "title": "Home page" + }, + "topNavigation": [ + { + "text": "Top item 1", + "href": "#/top-1" + }, + { + "text": "Top item 2", + "href": "#/top-2" + } + ], + "navigation": [ + { + "text": "Alpha", + "href": "#/alpha" + }, + { + "text": "Beta", + "href": "#/beta" + }, + { + "text": "Gamma", + "href": "#/gamma" + } + ], + "preHeaderHtml": "
PRE
" + }, + "html": "
PRE
" + }, { "name": "with classes", "options": { @@ -208,9 +243,9 @@ "href": "#/gamma" } ], - "classes": "card__test-class" + "classes": "global-header__test-class" }, - "html": "
" + "html": "
" }, { "name": "with attributes", diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index 75c379b0..beee6925 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -7,8 +7,6 @@ @use "../../tools/typography"; .tna-global-header { - padding-top: spacing.space(1); - @include colour.contrast; background: linear-gradient( 0deg, @@ -29,6 +27,7 @@ } &__main { + padding-top: spacing.space(1); padding-bottom: spacing.space(1.5); } diff --git a/src/nationalarchives/components/global-header/global-header.stories.js b/src/nationalarchives/components/global-header/global-header.stories.js index c1efc693..adf9f7c1 100644 --- a/src/nationalarchives/components/global-header/global-header.stories.js +++ b/src/nationalarchives/components/global-header/global-header.stories.js @@ -1,4 +1,5 @@ import Header from "./template.njk"; +import PhaseBanner from "../phase-banner/template.njk"; import macroOptions from "./macro-options.json"; import { within, userEvent, expect } from "@storybook/test"; import { customViewports } from "../../../../.storybook/viewports"; @@ -10,6 +11,7 @@ const argTypes = { collapseOnMedium: { control: "boolean" }, navigationId: { control: "text" }, topNavigationId: { control: "text" }, + preHeaderHtml: { control: "text" }, classes: { control: "text" }, attributes: { control: "object" }, }; @@ -34,7 +36,7 @@ const Template = ({ navigation, collapseOnMedium, navigationId, - topNavigationId, + topNavigationId,preHeaderHtml, classes, attributes, }) => @@ -45,7 +47,7 @@ const Template = ({ navigation, collapseOnMedium, navigationId, - topNavigationId, + topNavigationId,preHeaderHtml, classes, attributes, }, @@ -366,3 +368,64 @@ Mobile.play = async ({ args, canvasElement, step }) => { $navigationToggle.blur(); }; + + + + + +export const PreHTML = Template.bind({}); +PreHTML.args = { + logo: { + href: "#/", + }, + topNavigation: [ + { + text: "Search", + href: "https://www.nationalarchives.gov.uk/search/", + icon: "search", + }, + { + text: "Shop", + href: "https://shop.nationalarchives.gov.uk/", + icon: "shop", + }, + { + text: "Sign in", + href: "#/sign-in", + icon: "user", + }, + ], + navigation: [ + { + text: "Visit", + href: "https://www.nationalarchives.gov.uk/about/visit-us/", + }, + { + text: "What’s on", + href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/", + }, + { + text: "Explore the collection", + href: "https://beta.nationalarchives.gov.uk/explore-the-collection/", + }, + { + text: "Help using the archive", + href: "https://www.nationalarchives.gov.uk/help-with-your-research/", + }, + { + text: "Education", + href: "https://www.nationalarchives.gov.uk/education/", + }, + { + text: "Professional guidance and services", + href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/", + }, + ], + preHeaderHtml: PhaseBanner({ + params: { + phase: "beta", + message: `This is a new service – give us your feedback to help improve it.`, + }, + }), + classes: "tna-global-header--demo", +}; diff --git a/src/nationalarchives/components/global-header/macro-options.json b/src/nationalarchives/components/global-header/macro-options.json index b3b4365f..335b45f5 100644 --- a/src/nationalarchives/components/global-header/macro-options.json +++ b/src/nationalarchives/components/global-header/macro-options.json @@ -89,6 +89,12 @@ "required": false, "description": "" }, + { + "name": "preHeaderHtml", + "type": "string", + "required": false, + "description": "HTML to add at the top of the global header." + }, { "name": "classes", "type": "string", diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index bf9cb1b3..2022b54d 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -4,6 +4,7 @@ {%- endif -%} {%- set classes = containerClasses | join(' ') -%}
+ {{ params.preHeaderHtml | safe }}
diff --git a/src/nationalarchives/components/header/fixtures.json b/src/nationalarchives/components/header/fixtures.json index 4e169d9e..8dd0a053 100644 --- a/src/nationalarchives/components/header/fixtures.json +++ b/src/nationalarchives/components/header/fixtures.json @@ -33,14 +33,122 @@ "text": "Gamma", "href": "#/gamma" } + ] + }, + "html": "
" + }, + { + "name": "with pre HTML", + "options": { + "logo": { + "strapline": "Beta", + "href": "#/" + }, + "topNavigation": [ + { + "text": "Top item 1", + "href": "#/top-1" + }, + { + "text": "Top item 2", + "href": "#/top-2", + "icon": "phone" + } + ], + "navigation": [ + { + "text": "Alpha", + "href": "#/alpha", + "selected": true + }, + { + "text": "Beta", + "href": "#/beta" + }, + { + "text": "Gamma", + "href": "#/gamma" + } + ], + "preHeaderHtml": "
PRE
" + }, + "html": "
PRE
" + }, + { + "name": "with classes", + "options": { + "logo": { + "strapline": "Beta", + "href": "#/" + }, + "topNavigation": [ + { + "text": "Top item 1", + "href": "#/top-1" + }, + { + "text": "Top item 2", + "href": "#/top-2", + "icon": "phone" + } + ], + "navigation": [ + { + "text": "Alpha", + "href": "#/alpha", + "selected": true + }, + { + "text": "Beta", + "href": "#/beta" + }, + { + "text": "Gamma", + "href": "#/gamma" + } + ], + "classes": "header__test-class" + }, + "html": "
" + }, + { + "name": "with attributes", + "options": { + "logo": { + "strapline": "Beta", + "href": "#/" + }, + "topNavigation": [ + { + "text": "Top item 1", + "href": "#/top-1" + }, + { + "text": "Top item 2", + "href": "#/top-2", + "icon": "phone" + } ], - "exit": { - "text": "Go to the current National Archives website", - "href": "#", - "target": "_blank" + "navigation": [ + { + "text": "Alpha", + "href": "#/alpha", + "selected": true + }, + { + "text": "Beta", + "href": "#/beta" + }, + { + "text": "Gamma", + "href": "#/gamma" + } + ], + "attributes": { + "data-testattribute": "foobar" } }, - "html": "
" + "html": "
" } ] } diff --git a/src/nationalarchives/components/header/header.stories.js b/src/nationalarchives/components/header/header.stories.js index e36ee816..b3361a74 100644 --- a/src/nationalarchives/components/header/header.stories.js +++ b/src/nationalarchives/components/header/header.stories.js @@ -1,4 +1,5 @@ import Header from "./template.njk"; +import PhaseBanner from "../phase-banner/template.njk"; import macroOptions from "./macro-options.json"; import { within, userEvent, expect } from "@storybook/test"; import { customViewports } from "../../../../.storybook/viewports"; @@ -10,6 +11,7 @@ const argTypes = { accent: { control: "boolean", }, + preHeaderHtml: { control: "text" }, classes: { control: "text" }, attributes: { control: "object" }, }; @@ -33,6 +35,7 @@ const Template = ({ topNavigation, navigation, accent, + preHeaderHtml, classes, attributes, }) => @@ -42,6 +45,7 @@ const Template = ({ topNavigation, navigation, accent, + preHeaderHtml, classes, attributes, }, @@ -224,3 +228,44 @@ Mobile.play = async ({ args, canvasElement, step }) => { $navigationToggle.blur(); }; + +export const PreHTML = Template.bind({}); +PreHTML.args = { + logo: { + strapline: "Design System", + href: "#/", + }, + topNavigation: [ + { + text: "Top item 1", + href: "#/top-1", + }, + { + text: "Top item 2", + href: "#/top-2", + icon: "heart", + }, + ], + navigation: [ + { + text: "Alpha", + href: "#/alpha", + selected: true, + }, + { + text: "Beta", + href: "#/beta", + }, + { + text: "Gamma", + href: "#/gamma", + }, + ], + preHeaderHtml: PhaseBanner({ + params: { + phase: "beta", + message: `This is a new service – give us your feedback to help improve it.`, + }, + }), + classes: "tna-header--demo", +}; diff --git a/src/nationalarchives/components/header/macro-options.json b/src/nationalarchives/components/header/macro-options.json index 1acd0321..11a1af98 100644 --- a/src/nationalarchives/components/header/macro-options.json +++ b/src/nationalarchives/components/header/macro-options.json @@ -101,6 +101,12 @@ "required": false, "description": "" }, + { + "name": "preHeaderHtml", + "type": "string", + "required": false, + "description": "HTML to add at the top of the header." + }, { "name": "classes", "type": "string", diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk index 561af49e..3b9dc715 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -4,6 +4,7 @@ {%- endif -%} {%- set classes = containerClasses | join(' ') -%}
+ {{ params.preHeaderHtml | safe }}
{% if params.logo.href -%} diff --git a/src/nationalarchives/components/phase-banner/phase-banner.scss b/src/nationalarchives/components/phase-banner/phase-banner.scss index 0c642b25..bea2e86f 100644 --- a/src/nationalarchives/components/phase-banner/phase-banner.scss +++ b/src/nationalarchives/components/phase-banner/phase-banner.scss @@ -11,8 +11,6 @@ @include typography.font-size(16); - border-bottom: 1px transparent solid; - .tna-container { align-items: center; } From 8cf6c172127cc5e83d12211d8a3d559127a7894f Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 5 Feb 2025 10:48:04 +0000 Subject: [PATCH 2/5] Remove accent option of the phase banner component --- CHANGELOG.md | 3 +++ .../components/phase-banner/macro-options.json | 6 ------ .../components/phase-banner/phase-banner.stories.js | 1 - src/nationalarchives/components/phase-banner/template.njk | 3 --- 4 files changed, 3 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bdd0db02..ed114d67 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed ### Deprecated ### Removed + +- Remove `accent` option of the phase banner component + ### Fixed - Clicking on a gallery item doesn't break keyboard navigation for the gallery diff --git a/src/nationalarchives/components/phase-banner/macro-options.json b/src/nationalarchives/components/phase-banner/macro-options.json index 6a001059..7eab71ea 100644 --- a/src/nationalarchives/components/phase-banner/macro-options.json +++ b/src/nationalarchives/components/phase-banner/macro-options.json @@ -11,12 +11,6 @@ "required": true, "description": "" }, - { - "name": "accent", - "type": "boolean", - "required": false, - "description": "" - }, { "name": "classes", "type": "string", diff --git a/src/nationalarchives/components/phase-banner/phase-banner.stories.js b/src/nationalarchives/components/phase-banner/phase-banner.stories.js index f91f29ef..05ec1370 100644 --- a/src/nationalarchives/components/phase-banner/phase-banner.stories.js +++ b/src/nationalarchives/components/phase-banner/phase-banner.stories.js @@ -6,7 +6,6 @@ const argTypes = { control: "text", }, message: { control: "text" }, - accent: { control: "boolean" }, classes: { control: "text" }, attributes: { control: "object" }, }; diff --git a/src/nationalarchives/components/phase-banner/template.njk b/src/nationalarchives/components/phase-banner/template.njk index cec2ea4a..dbfb81fa 100644 --- a/src/nationalarchives/components/phase-banner/template.njk +++ b/src/nationalarchives/components/phase-banner/template.njk @@ -1,7 +1,4 @@ {%- set containerClasses = [params.classes] if params.classes else [] -%} -{%- if params.accent -%} - {%- set containerClasses = containerClasses.concat('tna-background-accent') -%} -{%- endif -%} {%- set classes = containerClasses | join(' ') -%}
From f51e2fdfb172ec08355300c8cd377ef67e69ce35 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 5 Feb 2025 12:24:00 +0000 Subject: [PATCH 3/5] Add phaseBanner option to headers and remove preHeaderHtml option --- .../components/global-header/fixtures.json | 9 ++++--- .../global-header/global-header.stories.js | 27 ++++++++----------- .../global-header/macro-options.json | 7 ++--- .../components/global-header/template.njk | 6 ++++- .../components/header/fixtures.json | 9 ++++--- .../components/header/header.stories.js | 21 +++++++-------- .../components/header/macro-options.json | 7 ++--- .../components/header/template.njk | 6 ++++- 8 files changed, 50 insertions(+), 42 deletions(-) diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index b06c8939..1c90b887 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -178,7 +178,7 @@ "html": "
" }, { - "name": "with pre HTML", + "name": "with phase banner", "options": { "logo": { "href": "#/", @@ -208,9 +208,12 @@ "href": "#/gamma" } ], - "preHeaderHtml": "
PRE
" + "phaseBanner": { + "phase": "beta", + "message": "This is a new service – give us your feedback to help improve it." + } }, - "html": "
PRE
" + "html": "
Beta

This is a new service – give us your feedback to help improve it.

" }, { "name": "with classes", diff --git a/src/nationalarchives/components/global-header/global-header.stories.js b/src/nationalarchives/components/global-header/global-header.stories.js index adf9f7c1..97c4c567 100644 --- a/src/nationalarchives/components/global-header/global-header.stories.js +++ b/src/nationalarchives/components/global-header/global-header.stories.js @@ -1,5 +1,4 @@ import Header from "./template.njk"; -import PhaseBanner from "../phase-banner/template.njk"; import macroOptions from "./macro-options.json"; import { within, userEvent, expect } from "@storybook/test"; import { customViewports } from "../../../../.storybook/viewports"; @@ -11,7 +10,7 @@ const argTypes = { collapseOnMedium: { control: "boolean" }, navigationId: { control: "text" }, topNavigationId: { control: "text" }, - preHeaderHtml: { control: "text" }, + phaseBanner: { control: "object" }, classes: { control: "text" }, attributes: { control: "object" }, }; @@ -36,7 +35,8 @@ const Template = ({ navigation, collapseOnMedium, navigationId, - topNavigationId,preHeaderHtml, + topNavigationId, + phaseBanner, classes, attributes, }) => @@ -47,7 +47,8 @@ const Template = ({ navigation, collapseOnMedium, navigationId, - topNavigationId,preHeaderHtml, + topNavigationId, + phaseBanner, classes, attributes, }, @@ -369,12 +370,8 @@ Mobile.play = async ({ args, canvasElement, step }) => { $navigationToggle.blur(); }; - - - - -export const PreHTML = Template.bind({}); -PreHTML.args = { +export const WithPhaseBanner = Template.bind({}); +WithPhaseBanner.args = { logo: { href: "#/", }, @@ -421,11 +418,9 @@ PreHTML.args = { href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/", }, ], - preHeaderHtml: PhaseBanner({ - params: { - phase: "beta", - message: `This is a new service – give us your feedback to help improve it.`, - }, - }), + phaseBanner: { + phase: "beta", + message: `This is a new service – give us your feedback to help improve it.`, + }, classes: "tna-global-header--demo", }; diff --git a/src/nationalarchives/components/global-header/macro-options.json b/src/nationalarchives/components/global-header/macro-options.json index 335b45f5..d6099985 100644 --- a/src/nationalarchives/components/global-header/macro-options.json +++ b/src/nationalarchives/components/global-header/macro-options.json @@ -90,10 +90,11 @@ "description": "" }, { - "name": "preHeaderHtml", - "type": "string", + "name": "phaseBanner", + "type": "object", "required": false, - "description": "HTML to add at the top of the global header." + "description": "", + "paramsFrom": "phase-banner" }, { "name": "classes", diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index 2022b54d..aa20a33b 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -1,10 +1,14 @@ +{% from "nationalarchives/components/phase-banner/macro.njk" import tnaPhaseBanner %} + {%- set containerClasses = [params.classes] if params.classes else [] -%} {%- if params.collapseOnMedium -%} {%- set containerClasses = containerClasses.concat('tna-global-header--collapse-on-medium') -%} {%- endif -%} {%- set classes = containerClasses | join(' ') -%}
- {{ params.preHeaderHtml | safe }} + {% if params.phaseBanner -%} + {{ tnaPhaseBanner(params.phaseBanner) }} + {% endif -%}
diff --git a/src/nationalarchives/components/header/fixtures.json b/src/nationalarchives/components/header/fixtures.json index 8dd0a053..b30888ce 100644 --- a/src/nationalarchives/components/header/fixtures.json +++ b/src/nationalarchives/components/header/fixtures.json @@ -38,7 +38,7 @@ "html": "
" }, { - "name": "with pre HTML", + "name": "with phase banner", "options": { "logo": { "strapline": "Beta", @@ -70,9 +70,12 @@ "href": "#/gamma" } ], - "preHeaderHtml": "
PRE
" + "phaseBanner": { + "phase": "beta", + "message": "This is a new service – give us your feedback to help improve it." + } }, - "html": "
PRE
" + "html": "
Beta

This is a new service – give us your feedback to help improve it.

" }, { "name": "with classes", diff --git a/src/nationalarchives/components/header/header.stories.js b/src/nationalarchives/components/header/header.stories.js index b3361a74..91f51e1c 100644 --- a/src/nationalarchives/components/header/header.stories.js +++ b/src/nationalarchives/components/header/header.stories.js @@ -1,5 +1,4 @@ import Header from "./template.njk"; -import PhaseBanner from "../phase-banner/template.njk"; import macroOptions from "./macro-options.json"; import { within, userEvent, expect } from "@storybook/test"; import { customViewports } from "../../../../.storybook/viewports"; @@ -11,7 +10,7 @@ const argTypes = { accent: { control: "boolean", }, - preHeaderHtml: { control: "text" }, + phaseBanner: { control: "object" }, classes: { control: "text" }, attributes: { control: "object" }, }; @@ -35,7 +34,7 @@ const Template = ({ topNavigation, navigation, accent, - preHeaderHtml, + phaseBanner, classes, attributes, }) => @@ -45,7 +44,7 @@ const Template = ({ topNavigation, navigation, accent, - preHeaderHtml, + phaseBanner, classes, attributes, }, @@ -229,8 +228,8 @@ Mobile.play = async ({ args, canvasElement, step }) => { $navigationToggle.blur(); }; -export const PreHTML = Template.bind({}); -PreHTML.args = { +export const WithPhaseBanner = Template.bind({}); +WithPhaseBanner.args = { logo: { strapline: "Design System", href: "#/", @@ -261,11 +260,9 @@ PreHTML.args = { href: "#/gamma", }, ], - preHeaderHtml: PhaseBanner({ - params: { - phase: "beta", - message: `This is a new service – give us your feedback to help improve it.`, - }, - }), + phaseBanner: { + phase: "beta", + message: `This is a new service – give us your feedback to help improve it.`, + }, classes: "tna-header--demo", }; diff --git a/src/nationalarchives/components/header/macro-options.json b/src/nationalarchives/components/header/macro-options.json index 11a1af98..5edea180 100644 --- a/src/nationalarchives/components/header/macro-options.json +++ b/src/nationalarchives/components/header/macro-options.json @@ -102,10 +102,11 @@ "description": "" }, { - "name": "preHeaderHtml", - "type": "string", + "name": "phaseBanner", + "type": "object", "required": false, - "description": "HTML to add at the top of the header." + "description": "", + "paramsFrom": "phase-banner" }, { "name": "classes", diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk index 3b9dc715..a1e8d7ca 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -1,10 +1,14 @@ +{% from "nationalarchives/components/phase-banner/macro.njk" import tnaPhaseBanner %} + {%- set containerClasses = [params.classes] if params.classes else [] -%} {%- if params.accent -%} {%- set containerClasses = containerClasses.concat('tna-background-accent') -%} {%- endif -%} {%- set classes = containerClasses | join(' ') -%}
- {{ params.preHeaderHtml | safe }} + {% if params.phaseBanner -%} + {{ tnaPhaseBanner(params.phaseBanner) }} + {% endif -%}
{% if params.logo.href -%} From 0003492ed3094a78e54f709b7bee1f6f5c433a21 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 5 Feb 2025 12:25:10 +0000 Subject: [PATCH 4/5] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ed114d67..350ef041 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Added `labelText` option to breadcrumbs to enable custom `aria-label` attributes +- Phase banners can be added at the top of the header and global header components ### Changed ### Deprecated From c74ee834124a19297cd781d476bfd86e217eaa33 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 5 Feb 2025 12:39:53 +0000 Subject: [PATCH 5/5] Run tests on PR --- .github/workflows/tests.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index a95a0ea2..7ed81b60 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -10,6 +10,10 @@ on: - 'README.md' tags-ignore: - '**' + pull_request: + types: + - opened + - synchronize concurrency: group: tests-${{ github.ref }}