diff --git a/.storybook/preview.js b/.storybook/preview.js index 578c781f..5c9b9835 100644 --- 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 index 6550a394..d63bb72f 100644 --- 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 index d8432ad7..25264841 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nationalarchives/frontend", - "version": "0.1.13-prerelease", + "version": "0.1.14-prerelease", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@nationalarchives/frontend", - "version": "0.1.13-prerelease", + "version": "0.1.14-prerelease", "license": "MIT", "devDependencies": { "@babel/core": "^7.22.10", diff --git a/package.json b/package.json index 4da32a8f..3eb79f62 100644 --- 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 index 1bd8785d..db8acfbe 100644 --- 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 index f0520f57..67741bea 100644 --- 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 index f212163c..870996e7 100644 --- 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 index 2ba81474..c0851760 100644 --- 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 index 18d4fed2..2e479af4 100644 --- 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 index 594f2a42..9780c155 100644 --- 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 index 6229aeff..5b2c0ed9 100644 --- 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;