@nationalarchives/frontend 0.1.35 → 0.1.37

package/nationalarchives/components/global-header/global-header.scss

@@ -0,0 +1,366 @@
+@use "sass:math";
+@use "../../variables/grid" as gridVars;
+@use "../../tools/colour";
+@use "../../tools/typography";
+@use "../../tools/media";
+@use "../../utilities";
+@use "../grid";
+
+.tna-global-header {
+  padding-top: 1rem;
+
+  @include colour.contrast;
+
+  .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;
+  }
+
+  &__logo-wrapper {
+    margin-top: 0.5rem;
+
+    display: flex;
+  }
+
+  &__logo {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-end;
+
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+
+      @include colour.colour-outline("font-dark", 0.3125rem, solid);
+      outline-offset: 1px;
+    }
+  }
+
+  .tna-logo {
+    width: 6.75rem;
+    height: 6.75rem;
+  }
+
+  &__logo-strapline {
+    padding-right: 0.625rem;
+
+    @include typography.heading-font;
+    @include typography.relative-font-size(20);
+    text-transform: uppercase;
+    line-height: math.div(6.75rem, 3);
+  }
+
+  &__navigation-button-wrapper {
+    display: none;
+  }
+
+  &__hamburger {
+    width: 2rem;
+    height: 0.25rem;
+
+    display: block;
+
+    @include colour.colour-background("font-dark");
+
+    &::before,
+    &::after {
+      height: 0.25rem;
+
+      display: block;
+
+      position: absolute;
+      right: 0;
+      left: 0;
+
+      background-color: inherit;
+
+      content: "";
+    }
+
+    &::before {
+      top: 0;
+    }
+
+    &::after {
+      bottom: 0;
+    }
+  }
+
+  &__navigation-button {
+    height: 2rem;
+    padding: 0;
+
+    display: block;
+
+    position: relative;
+
+    appearance: none;
+
+    font-size: 0;
+
+    background: none;
+
+    border: 0 transparent solid;
+    border-width: 0.25rem 0;
+
+    cursor: pointer;
+
+    &--opened {
+      .tna-global-header__hamburger {
+        height: 0;
+
+        &::before {
+          top: 0.625rem;
+
+          transform: rotate(-135deg);
+        }
+
+        &::after {
+          bottom: 0.625rem;
+
+          transform: rotate(135deg);
+        }
+      }
+    }
+  }
+
+  &__navigation {
+    margin: 0.5rem 0 0;
+    height: 100%;
+
+    position: relative;
+
+    columns: 2;
+    column-gap: 2rem;
+    list-style: none;
+  }
+
+  &__navigation-item {
+    break-inside: avoid;
+  }
+
+  &__navigation-item-link {
+    min-width: 15rem;
+    height: math.div(6.75rem, 3);
+
+    display: block;
+    box-sizing: border-box;
+
+    @include typography.relative-font-size(17);
+    text-decoration: none;
+    line-height: math.div(6.75rem, 3);
+
+    @include colour.colour-border("keyline", 0.5px, solid, bottom);
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
+  }
+
+  &__top-navigation {
+    padding: 0 0 0.5rem;
+
+    display: flex;
+    justify-content: flex-end;
+    gap: 1.5rem;
+
+    @include typography.relative-font-size(15);
+    list-style: none;
+  }
+
+  &__top-navigation-item {
+  }
+
+  &__top-navigation-link {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    text-decoration: none;
+
+    &,
+    &:link,
+    &:visited {
+      @include colour.colour-font("font-light");
+    }
+
+    &:hover {
+      @include colour.colour-font("font-base");
+      @include typography.interacted-text-decoration;
+    }
+  }
+
+  @include media.on-medium {
+    &__navigation-item-link {
+      @include typography.relative-font-size(16);
+    }
+
+    &--collapse-on-medium &__navigation-wrapper {
+      width: 100%;
+    }
+
+    &--collapse-on-medium &__top-navigation-wrapper {
+      flex: 1;
+      order: 2;
+    }
+
+    &--collapse-on-medium &__main {
+      padding-bottom: 1rem;
+    }
+
+    &--collapse-on-medium &__logo {
+      gap: 0.75rem;
+    }
+
+    &--collapse-on-medium &__logo-wrapper {
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+
+    &--collapse-on-medium .tna-logo {
+      width: 5rem;
+      height: 5rem;
+    }
+
+    &--collapse-on-medium &__logo-strapline {
+      line-height: math.div(5rem, 3);
+    }
+
+    &--collapse-on-medium &__navigation {
+      margin-bottom: 0.5rem;
+    }
+
+    &--collapse-on-medium &__navigation,
+    &--collapse-on-medium &__navigation-item,
+    &--collapse-on-medium &__navigation-item-link {
+      height: auto;
+    }
+  }
+
+  @include media.on-mobile {
+    &__main {
+      padding-bottom: 0;
+    }
+
+    &__logo-wrapper,
+    &__navigation-button-wrapper {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+
+    &__logo {
+      gap: 0.75rem;
+    }
+
+    &__navigation-button-wrapper {
+      display: flex;
+      align-items: center;
+    }
+
+    &__navigation,
+    &__navigation-item,
+    &__navigation-item-link {
+      height: auto;
+    }
+
+    &__navigation {
+      margin-top: 0;
+
+      columns: 1;
+
+      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);
+    }
+
+    &__navigation-item {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    &__navigation-item-link {
+      line-height: 1.75rem;
+    }
+
+    &__navigation-item:last-child &__navigation-item-link {
+      border-bottom: none;
+    }
+
+    &__navigation-item-contents {
+      display: block;
+    }
+
+    &__navigation-item-children {
+      margin-bottom: 1rem;
+      margin-left: 1.5rem;
+    }
+
+    &__top-navigation {
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+
+      justify-content: flex-start;
+    }
+  }
+
+  @include media.on-small {
+    .tna-logo {
+      width: 4rem;
+      height: 4rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.25rem;
+    }
+
+    &__navigation {
+      width: calc(100% + #{gridVars.$gutter-width * 2});
+
+      left: -#{gridVars.$gutter-width};
+    }
+
+    &__navigation-item-link {
+      padding: 0.5rem gridVars.$gutter-width;
+    }
+  }
+
+  @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});
+
+      left: -#{gridVars.$gutter-width-tiny};
+    }
+
+    &__navigation-item-link {
+      padding: 0.5rem gridVars.$gutter-width-tiny;
+    }
+  }
+}

package/nationalarchives/components/global-header/global-header.stories.js

@@ -0,0 +1,351 @@
+import Header from "./template.njk";
+import macroOptions from "./macro-options.json";
+import { within, userEvent, expect } from "@storybook/test";
+import { customViewports } from "../../../../.storybook/viewports";
+
+const argTypes = {
+  logo: { control: "object" },
+  topNavigation: { control: "object" },
+  navigation: { control: "object" },
+  collapseOnMedium: { control: "boolean" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Global header",
+  argTypes,
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
+};
+
+const Template = ({
+  logo,
+  topNavigation,
+  navigation,
+  collapseOnMedium,
+  classes,
+  attributes,
+}) =>
+  Header({
+    params: {
+      logo,
+      topNavigation,
+      navigation,
+      collapseOnMedium,
+      classes,
+      attributes,
+    },
+  });
+
+export const Standard = Template.bind({});
+Standard.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",
+};
+Standard.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 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 MediumCollapsed = Template.bind({});
+MediumCollapsed.parameters = {
+  viewport: {
+    defaultViewport: "medium",
+  },
+  chromatic: {
+    viewports: [customViewports["medium"].styles.width.replace(/px$/, "")],
+  },
+};
+MediumCollapsed.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",
+    },
+  ],
+  collapseOnMedium: true,
+  classes: "tna-global-header--demo",
+};
+
+export const Mobile = Template.bind({});
+Mobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+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: "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",
+};
+Mobile.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
+  const canvas = within(canvasElement);
+
+  const $navigationItems = canvasElement.querySelector(
+    `.tna-global-header__navigation`,
+  );
+  const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
+    canvas.getByText(navigationItem.text),
+  );
+  const $navigationToggle = canvasElement.querySelector(
+    `.tna-global-header__navigation-button`,
+  );
+
+  await step("Initial load", async () => {
+    await expect($navigationItems).not.toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
+    await expect($linkA).not.toBeVisible();
+    await expect($linkB).not.toBeVisible();
+    await expect($linkC).not.toBeVisible();
+  });
+
+  await step("Open the menu", async () => {
+    await userEvent.click($navigationToggle);
+    await expect($navigationItems).toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "true");
+    await expect($linkA).toBeVisible();
+    await expect($linkB).toBeVisible();
+    await expect($linkC).toBeVisible();
+  });
+
+  await step("Close the menu", async () => {
+    await userEvent.click($navigationToggle);
+    await expect($navigationItems).not.toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
+    await expect($linkA).not.toBeVisible();
+    await expect($linkB).not.toBeVisible();
+    await expect($linkC).not.toBeVisible();
+  });
+
+  $navigationToggle.blur();
+};