@nationalarchives/frontend 0.1.64 → 0.2.0

package/nationalarchives/components/grid/grid.stories.js

@@ -1,279 +0,0 @@
-import Header from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  columns: { control: "object" },
-  maxWidth: { control: "boolean" },
-  noPadding: { control: "boolean" },
-  noPaddingAll: { control: "boolean" },
-  htmlElement: { control: "text" },
-  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/Grid",
-  argTypes,
-};
-
-const Template = ({
-  columns,
-  maxWidth,
-  noPadding,
-  noPaddingAll,
-  htmlElement,
-  classes,
-  attributes,
-}) =>
-  Header({
-    params: {
-      columns,
-      maxWidth,
-      noPadding,
-      noPaddingAll,
-      htmlElement,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  classes: "tna-grid--demo",
-  columns: [
-    {
-      html: "<p>Full width</p>",
-      width: "full",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Two thirds</p>",
-      width: "2-3",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Two thirds</p>",
-      width: "2-3",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-  ],
-};
-
-export const Responsive = Template.bind({});
-const responsiveColumn = {
-  html: "<p>Responsive</p>",
-  width: "1-4",
-  widthMedium: "1-3",
-  widthSmall: "1-2",
-  widthTiny: "full",
-};
-Responsive.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Responsive.args = {
-  classes: "tna-grid--demo tna-grid--demo-tall",
-  columns: Array(12).fill({ ...responsiveColumn }),
-};
-
-export const Flex = Template.bind({});
-Flex.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Flex.args = {
-  classes: "tna-grid--demo",
-  columns: [
-    {
-      html: "<h1>A</h1>",
-      width: "1-4",
-    },
-    {
-      html: "<h1>B</h1>",
-      flex: 1,
-    },
-  ],
-};
-
-export const Order = Template.bind({});
-Order.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Order.args = {
-  classes: "tna-grid--demo tna-grid--demo-tall",
-  columns: [
-    {
-      html: "<h1>A</h1>",
-      width: "1-4",
-      order: 1,
-      orderMedium: 2,
-      orderSmall: 3,
-      orderTiny: 4,
-    },
-    {
-      html: "<h1>B</h1>",
-      width: "1-4",
-      order: 2,
-      orderMedium: 1,
-      orderSmall: 4,
-      orderTiny: 3,
-    },
-    {
-      html: "<h1>C</h1>",
-      width: "1-4",
-      order: 3,
-      orderMedium: 4,
-      orderSmall: 1,
-      orderTiny: 2,
-    },
-    {
-      html: "<h1>D</h1>",
-      width: "1-4",
-      order: 4,
-      orderMedium: 3,
-      orderSmall: 2,
-      orderTiny: 1,
-    },
-  ],
-};
-
-export const Margin = Template.bind({});
-Margin.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Margin.args = {
-  classes: "tna-grid--demo",
-  columns: [
-    {
-      html: "<h1>A</h1>",
-      width: "1-4",
-    },
-    {
-      html: "<h1>B</h1>",
-      width: "1-4",
-      marginLeft: "1-12",
-    },
-    {
-      html: "<h1>C</h1>",
-      width: "1-4",
-      marginLeft: "1-6",
-    },
-  ],
-};

package/nationalarchives/components/grid/macro.njk

@@ -1,3 +0,0 @@
-{% macro tnaGrid(params) %}
-  {%- include "nationalarchives/components/grid/template.njk" -%}
-{% endmacro %}

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

@@ -1,239 +0,0 @@
-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" },
-  accent: {
-    control: "boolean",
-  },
-  exit: { control: "object" },
-  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/Header",
-  argTypes,
-  parameters: {
-    chromatic: { delay: 1000 },
-  },
-};
-
-const Template = ({
-  logo,
-  topNavigation,
-  navigation,
-  accent,
-  exit,
-  classes,
-  attributes,
-}) =>
-  Header({
-    params: {
-      logo,
-      topNavigation,
-      navigation,
-      accent,
-      exit,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  logo: {
-    strapline: "Design System",
-    href: "#/",
-  },
-  topNavigation: [
-    {
-      text: "Top item 1",
-      href: "#/top-1",
-    },
-    {
-      text: "Top item 2",
-      href: "#/top-2",
-      icon: "heart",
-    },
-  ],
-  navigation: [
-    {
-      text: "Alpha",
-      href: "#/alpha",
-      selected: true,
-    },
-    {
-      text: "Beta",
-      href: "#/beta",
-    },
-    {
-      text: "Gamma",
-      href: "#/gamma",
-    },
-  ],
-  exit: {
-    text: "Go to the current National Archives website",
-    href: "#",
-    target: "_blank",
-  },
-  classes: "tna-header--demo",
-};
-Standard.play = async ({ canvasElement }) => {
-  await new Promise((r) => setTimeout(r, 100));
-
-  const $navigationItems = canvasElement.querySelector(
-    `.tna-header__navigation-items`,
-  );
-  const $navigationToggle = canvasElement.querySelector(
-    `.tna-header__navigation-toggle-button`,
-  );
-
-  await expect($navigationItems).toBeVisible();
-  await expect($navigationToggle).not.toBeVisible();
-};
-
-export const Accent = Template.bind({});
-Accent.args = {
-  logo: {
-    strapline: "Design System",
-    href: "#/",
-  },
-  topNavigation: [
-    {
-      text: "Top item 1",
-      href: "#/top-1",
-    },
-    {
-      text: "Top item 2",
-      href: "#/top-2",
-      icon: "heart",
-    },
-  ],
-  navigation: [
-    {
-      text: "Alpha",
-      href: "#/alpha",
-      selected: true,
-    },
-    {
-      text: "Beta",
-      href: "#/beta",
-    },
-    {
-      text: "Gamma",
-      href: "#/gamma",
-    },
-  ],
-  exit: {
-    text: "Go to the current National Archives website",
-    href: "#",
-    target: "_blank",
-  },
-  accent: true,
-  classes: "tna-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: "Top item 1",
-      href: "#/top-1",
-    },
-    {
-      text: "Top item 2",
-      href: "#/top-2",
-      icon: "heart",
-    },
-  ],
-  navigation: [
-    {
-      text: "Alpha",
-      href: "#/alpha",
-      selected: true,
-    },
-    {
-      text: "Beta",
-      href: "#/beta",
-    },
-    {
-      text: "Gamma",
-      href: "#/gamma",
-    },
-  ],
-  exit: {
-    text: "Go to the current National Archives website",
-    href: "#",
-    target: "_blank",
-  },
-  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(
-    `.tna-header__navigation-items`,
-  );
-  const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
-    canvas.getByText(navigationItem.text),
-  );
-  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 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();
-};