From a6eb74ad5d9c91fcc7a5e221ab10bf2f4ea9275c Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Fri, 9 Feb 2024 17:03:55 +0000 Subject: [PATCH] Tweaks to global header and stories --- .../global-header/global-header.scss | 62 +++++--- .../global-header/global-header.stories.js | 137 ++++++++++++++++-- .../components/phase-banner/phase-banner.scss | 6 +- .../colour-schemes/colour-themes.stories.js | 52 +++++-- src/nationalarchives/tools/_colour.scss | 8 + 5 files changed, 215 insertions(+), 50 deletions(-) diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index a6302d52..55f7558c 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -10,11 +10,23 @@ @include colour.contrast; - background: linear-gradient( - 0deg, - rgb(34 34 34 / 100%) 0%, - rgb(0 0 0 / 100%) 100% - ); + .tna-template--light-theme & { + background: linear-gradient( + 0deg, + rgb(34 34 34 / 100%) 0%, + rgb(0 0 0 / 100%) 100% + ); + } + + .tna-template--system-theme { + @media (prefers-color-scheme: light) { + background: linear-gradient( + 0deg, + rgb(34 34 34 / 100%) 0%, + rgb(0 0 0 / 100%) 100% + ); + } + } &__main { padding-bottom: 1.5rem; @@ -55,6 +67,8 @@ } &__logo-strapline { + padding-right: 0.625rem; + @include typography.heading-font; @include typography.relative-font-size(20); text-transform: uppercase; @@ -73,8 +87,6 @@ @include colour.colour-background("font-dark"); - // transition: height 1ms 100ms; - &::before, &::after { height: 0.25rem; @@ -87,11 +99,6 @@ background-color: inherit; - // transition: - // top 100ms 100ms, - // bottom 100ms 100ms, - // transform 100ms; - content: ""; } @@ -154,13 +161,11 @@ } &__navigation-item { - // display: flex; - // align-items: center; - break-inside: avoid; } &__navigation-item-link { + min-width: 20vw; height: math.div(6.75rem, 3); display: block; @@ -257,7 +262,6 @@ @include media.on-mobile { &__main { padding-bottom: 0; - // padding-bottom: 0; } &__logo-wrapper, @@ -291,7 +295,7 @@ columns: 1; - background-color: rgb(255 255 255/5%); + background-color: rgb(255 255 255 / 10%); @include colour.colour-border("keyline-dark", 3px, solid, top); @include colour.colour-border("keyline-dark", 3px, solid, bottom); @@ -300,16 +304,16 @@ &__navigation-item { flex-direction: column; align-items: flex-start; - - &:last-child { - border-bottom: none; - } } &__navigation-item-link { line-height: 1.75rem; } + &__navigation-item:last-child &__navigation-item-link { + border-bottom: none; + } + &__navigation-item-contents { display: block; } @@ -350,4 +354,20 @@ padding: 0.5rem gridVars.$gutter-width-tiny; } } + + @include colour.on-high-contrast { + &__logo { + &:hover { + .tna-logo { + &__background { + fill: #fff; + } + + &__foreground { + fill: #000; + } + } + } + } + } } diff --git a/src/nationalarchives/components/global-header/global-header.stories.js b/src/nationalarchives/components/global-header/global-header.stories.js index a16c14bc..e06a48b0 100644 --- a/src/nationalarchives/components/global-header/global-header.stories.js +++ b/src/nationalarchives/components/global-header/global-header.stories.js @@ -45,44 +45,44 @@ Standard.args = { topNavigation: [ { text: "Search", - href: "#/top-1", + href: "#/search", icon: "search", }, { text: "Shop", - href: "#/top-2", + href: "#/shop", icon: "bag-shopping", }, { text: "Sign in", - href: "#/top-3", + href: "#/sign-in", icon: "user", }, ], navigation: [ { text: "Visit", - href: "#", + href: "#/visit", }, { text: "What's on", - href: "#", + href: "#/whats-on", }, { text: "Explore the collection", - href: "#", + href: "#/explore-the-collection", }, { text: "Using the archives", - href: "#", + href: "#/using-the-archives", }, { text: "Learn", - href: "#", + href: "#/learn", }, { text: "Professional guidance & services", - href: "#", + href: "#/professional-guidance-and-services", }, ], classes: "tna-global-header--demo", @@ -101,6 +101,79 @@ Standard.play = async ({ canvasElement }) => { await expect($navigationToggle).not.toBeVisible(); }; +export const Medium = Template.bind({}); +Medium.parameters = { + viewport: { + defaultViewport: "medium", + }, + chromatic: { + viewports: [customViewports["medium"].styles.width.replace(/px$/, "")], + }, +}; +Medium.args = { + logo: { + strapline: "Design System", + href: "#/", + }, + topNavigation: [ + { + text: "Search", + href: "#/search", + icon: "search", + }, + { + text: "Shop", + href: "#/shop", + icon: "bag-shopping", + }, + { + text: "Sign in", + href: "#/sign-in", + icon: "user", + }, + ], + navigation: [ + { + text: "Visit", + href: "#/visit", + }, + { + text: "What's on", + href: "#/whats-on", + }, + { + text: "Explore the collection", + href: "#/explore-the-collection", + }, + { + text: "Using the archives", + href: "#/using-the-archives", + }, + { + text: "Learn", + href: "#/learn", + }, + { + text: "Professional guidance & services", + href: "#/professional-guidance-and-services", + }, + ], + classes: "tna-global-header--demo", +}; +Medium.play = async ({ canvasElement }) => { + await new Promise((r) => setTimeout(r, 100)); + + const $navigationItems = canvasElement.querySelector( + `.tna-global-header__navigation`, + ); + const $navigationToggle = canvasElement.querySelector( + `.tna-global-header__navigation-button`, + ); + + await expect($navigationItems).toBeVisible(); + await expect($navigationToggle).not.toBeVisible(); +}; + export const Mobile = Template.bind({}); Mobile.parameters = { viewport: { @@ -111,19 +184,51 @@ Mobile.parameters = { }, }; Mobile.args = { + logo: { + strapline: "Design System", + href: "#/", + }, + topNavigation: [ + { + text: "Search", + href: "#/search", + icon: "search", + }, + { + text: "Shop", + href: "#/shop", + icon: "bag-shopping", + }, + { + text: "Sign in", + href: "#/sign-in", + icon: "user", + }, + ], navigation: [ { - text: "Alpha", - href: "#/alpha", - selected: true, + text: "Visit", + href: "#/visit", + }, + { + text: "What's on", + href: "#/whats-on", }, { - text: "Beta", - href: "#/beta", + text: "Explore the collection", + href: "#/explore-the-collection", }, { - text: "Gamma", - href: "#/gamma", + text: "Using the archives", + href: "#/using-the-archives", + }, + { + text: "Learn", + href: "#/learn", + }, + { + text: "Professional guidance & services", + href: "#/professional-guidance-and-services", }, ], classes: "tna-global-header--demo", diff --git a/src/nationalarchives/components/phase-banner/phase-banner.scss b/src/nationalarchives/components/phase-banner/phase-banner.scss index 2caddb59..2abfb481 100644 --- a/src/nationalarchives/components/phase-banner/phase-banner.scss +++ b/src/nationalarchives/components/phase-banner/phase-banner.scss @@ -10,11 +10,9 @@ padding-top: 0.5rem; padding-bottom: 0.5rem; - border-bottom: 1px transparent solid; + @include typography.relative-font-size(16); - @include media.on-mobile { - @include typography.relative-font-size(16); - } + border-bottom: 1px transparent solid; .tna-container { align-items: center; 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 0625364b..27dad13e 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js @@ -6,7 +6,7 @@ import Checkboxes from "../../../components/checkboxes/template.njk"; import FeaturedRecords from "../../../components/featured-records/template.njk"; import Footer from "../../../components/footer/template.njk"; import Gallery from "../../../components/gallery/template.njk"; -import Header from "../../../components/header/template.njk"; +import GlobalHeader from "../../../components/global-header/template.njk"; import Hero from "../../../components/hero/template.njk"; import IndexGrid from "../../../components/index-grid/template.njk"; import Message from "../../../components/message/template.njk"; @@ -43,6 +43,12 @@ export default { }; const Template = ({ theme, accent }) => { + document.documentElement.classList.remove( + "tna-template", + "tna-template--light-theme", + "tna-template--yellow-accent", + ); + const cardDefaultOptions = { supertitle: "Card supertitle", title: "Card title", @@ -104,25 +110,53 @@ const Template = ({ theme, accent }) => { accent: true, }, })} - ${Header({ + ${GlobalHeader({ params: { logo: { strapline: "Colours", href: "#/", }, + topNavigation: [ + { + text: "Search", + href: "#/search", + icon: "search", + }, + { + text: "Shop", + href: "#/shop", + icon: "bag-shopping", + }, + { + text: "Sign in", + href: "#/sign-in", + icon: "user", + }, + ], navigation: [ { - text: "Alpha", - href: "#/alpha", - selected: true, + text: "Visit", + href: "#/visit", + }, + { + text: "What's on", + href: "#/whats-on", + }, + { + text: "Explore the collection", + href: "#/explore-the-collection", + }, + { + text: "Using the archives", + href: "#/using-the-archives", }, { - text: "Beta", - href: "#/beta", + text: "Learn", + href: "#/learn", }, { - text: "Gamma", - href: "#/gamma", + text: "Professional guidance & services", + href: "#/professional-guidance-and-services", }, ], }, diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss index 16f4bcdb..f09da22f 100644 --- a/src/nationalarchives/tools/_colour.scss +++ b/src/nationalarchives/tools/_colour.scss @@ -156,6 +156,10 @@ @media (prefers-contrast: more) { @include colour-css-vars-high-contrast; } + + .tna-template--high-contrast-theme & { + @include colour-css-vars-high-contrast; + } } @mixin light { @@ -168,6 +172,10 @@ @media (prefers-contrast: more) { @include colour-css-vars-high-contrast-dark; } + + .tna-template--high-contrast-theme & { + @include colour-css-vars-high-contrast-dark; + } } @mixin dark {