From 36f621346e918cf95d28b2c4faaabf54cf247537 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Fri, 9 Feb 2024 18:08:12 +0000 Subject: [PATCH] Better alignment between headers --- CHANGELOG.md | 6 ++ .../components/global-header/fixtures.json | 2 +- .../global-header/global-header.scss | 31 +++++--- .../components/global-header/template.njk | 4 +- .../components/header/fixtures.json | 2 +- .../components/header/header.scss | 73 ++++++++++++++----- .../components/header/header.stories.js | 27 ++++++- .../components/header/template.njk | 4 +- 8 files changed, 112 insertions(+), 37 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bf381af..29a2df6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,15 +8,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.36...HEAD) ### Added + +- New global header component + ### Changed - Changed the aspect ratio of the hero image to be 5:2 +- Selected state of header component changed +- Phase banner font size reduced ### Deprecated ### Removed ### Fixed - Allowed taller images in picture elements on tiny devices +- Fixed focus styles for always-light components (e.g. text inputs) on high contrast themes ### Security diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index efa7faca..5f7ac12d 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -39,7 +39,7 @@ } ] }, - "html": "
Beta
", + "html": "
Beta
", "hidden": false } ] diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index 55f7558c..0be09522 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -250,7 +250,6 @@ } &__logo-strapline { - @include typography.relative-font-size(15); line-height: math.div(5rem, 3); } @@ -271,17 +270,7 @@ } &__logo { - gap: 0.625rem; - } - - .tna-logo { - width: 4rem; - height: 4rem; - } - - &__logo-strapline { - @include typography.relative-font-size(15); - line-height: math.div(4rem, 3); + gap: 0.75rem; } &__navigation-button-wrapper { @@ -332,6 +321,15 @@ } @include media.on-small { + .tna-logo { + width: 4rem; + height: 4rem; + } + + &__logo-strapline { + line-height: 1.25rem; + } + &__navigation { width: calc(100% + #{gridVars.$gutter-width * 2}); @@ -344,6 +342,15 @@ } @include media.on-tiny { + .tna-logo { + width: 3.5rem; + height: 3.5rem; + } + + &__logo-strapline { + line-height: 1; + } + &__navigation { width: calc(100% + #{gridVars.$gutter-width-tiny * 2}); diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index 82927562..bfe86d01 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -44,9 +44,9 @@
  • {%- if item.brandIcon -%} - + {%- elseif item.icon -%} - + {%- endif -%} {{ item.text }} diff --git a/src/nationalarchives/components/header/fixtures.json b/src/nationalarchives/components/header/fixtures.json index 8eacf39e..b7a219f2 100644 --- a/src/nationalarchives/components/header/fixtures.json +++ b/src/nationalarchives/components/header/fixtures.json @@ -45,7 +45,7 @@ "target": "_blank" } }, - "html": "
    Go to the current National Archives website
    Beta
    ", + "html": "
    Go to the current National Archives website
    Beta
    ", "hidden": false } ] diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss index 36b3348c..6d0aaabe 100644 --- a/src/nationalarchives/components/header/header.scss +++ b/src/nationalarchives/components/header/header.scss @@ -8,13 +8,28 @@ @use "../grid"; .tna-header { - @include colour.dark; @include colour.contrast; position: relative; - &:not(&--accent) { - background-color: colour.brand-colour("black"); + background-color: colour.brand-colour("black"); + + .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% + ); + } } &__exit { @@ -78,8 +93,8 @@ } .tna-logo { - width: 5.5rem; - height: 5.5rem; + width: 6rem; + height: 6rem; display: inline-block; @@ -98,6 +113,8 @@ display: inline-block; line-height: 2rem; + @include typography.heading-font; + @include typography.relative-font-size(20); text-transform: uppercase; } @@ -300,26 +317,28 @@ @include colour.accent; } - @include media.on-mobile { - &__contents { - &.tna-container { - padding-right: 0; - padding-left: 0; - } + @include media.on-medium { + .tna-logo { + width: 5rem; + height: 5rem; } + &__logo-strapline { + line-height: 1.625rem; + } + } + + @include media.on-mobile { &__logo { padding-top: 1rem; padding-bottom: 1rem; } - .tna-logo { - width: 4.5rem; - height: 4.5rem; - } - - &__logo-strapline { - line-height: 1.5; + &__contents { + &.tna-container { + padding-right: 0; + padding-left: 0; + } } &__navigation-toggle { @@ -364,6 +383,15 @@ } &__top-navigation-item-link { + &, + &:link, + &:visited { + @include colour.colour-font("font-light"); + } + + &:hover { + @include colour.colour-font("font-dark"); + } } &__navigation-items { @@ -411,6 +439,15 @@ } @include media.on-small { + .tna-logo { + width: 4rem; + height: 4rem; + } + + &__logo-strapline { + line-height: 1.25rem; + } + &__logo.tna-column, &__navigation-item-link, &__navigation-toggle.tna-column { diff --git a/src/nationalarchives/components/header/header.stories.js b/src/nationalarchives/components/header/header.stories.js index 569b773f..fcce3b97 100644 --- a/src/nationalarchives/components/header/header.stories.js +++ b/src/nationalarchives/components/header/header.stories.js @@ -53,7 +53,7 @@ const Template = ({ export const Standard = Template.bind({}); Standard.args = { logo: { - strapline: "Beta", + strapline: "Design System", href: "#/", }, topNavigation: [ @@ -118,6 +118,26 @@ Mobile.parameters = { }, }; Mobile.args = { + logo: { + strapline: "Design System", + href: "#/", + }, + topNavigation: [ + { + text: "Top item 1", + href: "#/top-1", + }, + { + text: "Top item 2", + href: "#/top-2", + icon: "phone", + }, + { + text: "Top item 3", + href: "#/top-3", + brandIcon: "github", + }, + ], navigation: [ { text: "Alpha", @@ -133,6 +153,11 @@ Mobile.args = { href: "#/gamma", }, ], + exit: { + text: "Go to the current National Archives website", + href: "#", + target: "_blank", + }, classes: "tna-header--demo", }; Mobile.play = async ({ args, canvasElement, step }) => { diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk index 337ec858..4ab4088b 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -52,9 +52,9 @@
  • {%- if item.brandIcon -%} - + {%- elseif item.icon -%} - + {%- endif -%} {{ item.text }}