Fix issues with header colours and layout

nationalarchives · Aug 11, 2023 · e9a10f4 · e9a10f4
1 parent a4d11f5
commit e9a10f4
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 43 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -5,9 +5,9 @@ import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
 export const dynamicColourSchemeStories = false;
 document.documentElement.classList.add(
   "tna-template",
-  dynamicColourSchemeStories
-    ? "tna-template--system-theme"
-    : "tna-template--light-theme",
+  // dynamicColourSchemeStories
+  //   ? "tna-template--system-theme"
+  //   : "tna-template--light-theme",
 );
 if (window.self !== window.top) {
   document.documentElement.classList.add("tna-template--padded");

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,18 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.13-prerelease...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.14-prerelease...HEAD)
 
 ### Added
 ### Changed
-
-- Simplified SCSS for inverted colours
-
 ### Deprecated
 ### Removed
 ### Fixed
 ### Security
 
+## [v0.1.14-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.13-prerelease...v0.1.14-prerelease) - 2023-08-11
+
+### Changed
+
+- Simplified SCSS for inverted colours and introduced contrasting option
+
+### Fixed
+
+- Default colour scheme works without having to define a theme class on `tna-template`
+- Fixed top navigation layout in header when on mobile with no JavaScript enabled
+
 ## [v0.1.13-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.12-prerelease...v0.1.13-prerelease) - 2023-08-11
 
 ### Added

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.13-prerelease",
+  "version": "0.1.14-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",

diff --git a/src/nationalarchives/components/header/_index.scss b/src/nationalarchives/components/header/_index.scss
@@ -439,9 +439,13 @@
     }
 
     &__navigation {
+      @include colour.uninvert;
       @include colour.colour-font("font-base");
       @include typography.relative-font-size(20);
 
+      align-items: stretch;
+      flex-direction: column;
+
       &.tna-column {
         padding-right: 0;
         padding-left: 0;
@@ -451,7 +455,7 @@
         display: none;
 
         &--open {
-          display: block;
+          display: flex;
         }
       }
     }

diff --git a/src/nationalarchives/components/header/header.stories.js b/src/nationalarchives/components/header/header.stories.js
@@ -125,15 +125,17 @@ Desktop.args = {
   classes: "tna-header--demo",
 };
 Desktop.play = async ({ canvasElement }) => {
-  const navigationItems = canvasElement.querySelector(
+  await new Promise((r) => setTimeout(r, 100));
+
+  const $navigationItems = canvasElement.querySelector(
     `.tna-header__navigation-items`,
   );
-  const navigationToggle = canvasElement.querySelector(
+  const $navigationToggle = canvasElement.querySelector(
     `.tna-header__navigation-toggle-button`,
   );
 
-  await expect(navigationItems).toBeVisible();
-  await expect(navigationToggle).not.toBeVisible();
+  await expect($navigationItems).toBeVisible();
+  await expect($navigationToggle).not.toBeVisible();
 };
 
 export const Mobile = Template.bind({});
@@ -164,46 +166,89 @@ Mobile.args = {
   classes: "tna-header--demo",
 };
 Mobile.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
 
-  const navigationItems = canvasElement.querySelector(
+  const $navigationItems = canvasElement.querySelector(
     `.tna-header__navigation-items`,
   );
-  const [linkA, linkB, linkC] = args.navigation.map((navigationItem) =>
+  const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
     canvas.getByText(navigationItem.text),
   );
-  const navigationToggle = canvasElement.querySelector(
+  const $navigationToggle = canvasElement.querySelector(
     `.tna-header__navigation-toggle-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 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 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();
+    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();
+  $navigationToggle.blur();
 };
+
+// export const NoJavascript = Template.bind({});
+// NoJavascript.args = {
+//   navigation: [
+//     {
+//       text: "Alpha",
+//       href: "#/alpha",
+//       selected: true,
+//     },
+//     {
+//       text: "Beta",
+//       href: "#/beta",
+//     },
+//     {
+//       text: "Gamma",
+//       href: "#/gamma",
+//     },
+//   ],
+//   classes: "tna-header--demo",
+// };
+// NoJavascript.play = async ({ args, canvasElement, step }) => {
+//   document.documentElement.classList.remove("tna-template--js-enabled");
+//   canvasElement.innerHTML = canvasElement.innerHTML;
+//   const $navigationToggleWrapper = canvasElement.querySelector(
+//     `.tna-header__navigation-toggle`,
+//   );
+//   $navigationToggleWrapper.innerHTML = "";
+
+//   const canvas = within(canvasElement);
+
+//   // const $navigationItems = canvasElement.querySelector(
+//   //   `.tna-header__navigation-items`,
+//   // );
+//   // const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
+//   //   canvas.getByText(navigationItem.text),
+//   // );
+//   // await expect($navigationItems).toBeVisible();
+//   // await expect($linkA).toBeVisible();
+//   // await expect($linkB).toBeVisible();
+//   // await expect($linkC).toBeVisible();
+// };
diff --git a/src/nationalarchives/components/hero/hero.stories.js b/src/nationalarchives/components/hero/hero.stories.js
@@ -51,6 +51,8 @@ Standard.args = {
 };
 
 Standard.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
   const image = canvas.getByAltText(args.image.alt);
   const title = canvas.getByText(args.heading);

diff --git a/src/nationalarchives/components/sensitive-image/sensitive-image.stories.js b/src/nationalarchives/components/sensitive-image/sensitive-image.stories.js
@@ -68,6 +68,8 @@ Test.args = {
 };
 
 Test.play = async ({ args, canvasElement }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
 
   const image = canvas.getByAltText(args.image.alt);

diff --git a/src/nationalarchives/components/tabs/tabs.stories.js b/src/nationalarchives/components/tabs/tabs.stories.js
@@ -5,7 +5,7 @@ import { within, userEvent } from "@storybook/testing-library";
 
 const argTypes = {
   title: { control: "text" },
-  items: { control: "array" },
+  items: { control: "object" },
   sticky: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -81,6 +81,8 @@ Test.args = {
 };
 
 Test.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
 
   const tablist = canvas.getByRole("tablist");

diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -71,6 +71,8 @@
 }
 
 @mixin uninvert {
+  @include colour-css-vars;
+
   .tna-template--system-theme & {
     @include colour-css-vars;
 

diff --git a/src/nationalarchives/utilities/_global.scss b/src/nationalarchives/utilities/_global.scss
@@ -2,9 +2,9 @@
 @use "../tools/colour";
 @use "../variables/typography";
 
-// :root {
-//   @include colour.colour-css-vars;
-// }
+:root {
+  @include colour.colour-css-vars;
+}
 
 .tna-template {
   min-width: 320px;