Tweaks to global header and stories

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;
+          }
+        }
+      }
+    }
+  }
 }

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",

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;