@nationalarchives/frontend 0.1.64 → 0.2.0

package/nationalarchives/components/tabs/tabs.stories.js

@@ -1,300 +0,0 @@
-import Tabs from "./template.njk";
-import macroOptions from "./macro-options.json";
-import { within, userEvent, expect } from "@storybook/test";
-
-const argTypes = {
-  items: { control: "object" },
-  sticky: { 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/Tabs",
-  argTypes,
-};
-
-const Template = ({ items, sticky, classes, attributes }) =>
-  Tabs({
-    params: {
-      items,
-      sticky,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  items: [
-    {
-      id: "unique-id-a",
-      title: "Alpha section",
-      body: '<h2 class="tna-heading-l">Alpha title</h2><p>Lorem ipsum</p>',
-    },
-    {
-      id: "unique-id-b",
-      title: "Beta section",
-      body: '<h2 class="tna-heading-l">Beta title</h2><p>Lorem ipsum</p>',
-    },
-    {
-      id: "unique-id-c",
-      title: "Gamma section",
-      body: '<h2 class="tna-heading-l">Gamma title</h2><p>Lorem ipsum</p>',
-    },
-  ],
-  classes: "tna-tabs--demo",
-};
-
-export const Test = Template.bind({});
-Test.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Test.args = {
-  items: [
-    {
-      id: "unique-id-a",
-      title: "Alpha section",
-      body: '<h2 class="tna-heading-l">Alpha title</h2><p>Lorem ipsum</p>',
-    },
-    {
-      id: "unique-id-b",
-      title: "Beta section",
-      body: '<h2 class="tna-heading-l">Beta title</h2><p>Lorem ipsum</p>',
-    },
-    {
-      id: "unique-id-c",
-      title: "Gamma section",
-      body: '<h2 class="tna-heading-l">Gamma title</h2><p>Lorem ipsum</p>',
-    },
-  ],
-  classes: "tna-tabs--demo",
-};
-Test.play = async ({ args, canvasElement, step }) => {
-  await new Promise((r) => setTimeout(r, 100));
-
-  const canvas = within(canvasElement);
-
-  const tablist = canvas.getByRole("tablist");
-  const [buttonA, buttonB, buttonC] = args.items.map((item) =>
-    canvas.getByText(item.title),
-  );
-  const [sectionA, sectionB, sectionC] = args.items.map((item) =>
-    canvasElement.querySelector(`#${item.id}`),
-  );
-
-  const expectButtonToBeCurrent = async (button) => {
-    await expect(button).toHaveAttribute("tabindex", "0");
-    await expect(button).toHaveAttribute("aria-selected", "true");
-    await expect(button).toHaveFocus();
-  };
-
-  const expectButtonNotToBeCurrent = async (button) => {
-    await expect(button).toHaveAttribute("tabindex", "-1");
-    await expect(button).toHaveAttribute("aria-selected", "false");
-  };
-
-  const expectSectionToBeCurrent = async (section) => {
-    await expect(section).toBeVisible();
-    await expect(section).toHaveAttribute("tabindex", "0");
-  };
-
-  const expectSectionNotToBeCurrent = async (section) => {
-    await expect(section).not.toBeVisible();
-    await expect(section).toHaveAttribute("tabindex", "-1");
-  };
-
-  const expectButtonAndSectionAToBeCurrent = async () => {
-    await step("Test tab buttons", async () => {
-      await expectButtonToBeCurrent(buttonA);
-      await expectButtonNotToBeCurrent(buttonB);
-      await expectButtonNotToBeCurrent(buttonC);
-    });
-
-    await step("Test tab sections", async () => {
-      await expectSectionToBeCurrent(sectionA);
-      await expectSectionNotToBeCurrent(sectionB);
-      await expectSectionNotToBeCurrent(sectionC);
-    });
-  };
-
-  const expectButtonAndSectionBToBeCurrent = async () => {
-    await step("Test tab buttons", async () => {
-      await expectButtonNotToBeCurrent(buttonA);
-      await expectButtonToBeCurrent(buttonB);
-      await expectButtonNotToBeCurrent(buttonC);
-    });
-
-    await step("Test tab sections", async () => {
-      await expectSectionNotToBeCurrent(sectionA);
-      await expectSectionToBeCurrent(sectionB);
-      await expectSectionNotToBeCurrent(sectionC);
-    });
-  };
-
-  const expectButtonAndSectionCToBeCurrent = async () => {
-    await step("Test tab buttons", async () => {
-      await expectButtonNotToBeCurrent(buttonA);
-      await expectButtonNotToBeCurrent(buttonB);
-      await expectButtonToBeCurrent(buttonC);
-    });
-
-    await step("Test tab sections", async () => {
-      await expectSectionNotToBeCurrent(sectionA);
-      await expectSectionNotToBeCurrent(sectionB);
-      await expectSectionToBeCurrent(sectionC);
-    });
-  };
-
-  await step("Initial load", async () => {
-    await step("Test tablist", async () => {
-      await expect(tablist).toBeDefined();
-      await expect(tablist).toBeVisible();
-    });
-
-    await step("Test tab buttons", async () => {
-      await step("First tab button", async () => {
-        await expect(buttonA).toBeVisible();
-        await expect(buttonA).toHaveAttribute("id", `${args.items[0].id}-tab`);
-        await expect(buttonA).toHaveAttribute("role", "tab");
-        await expect(buttonA).toHaveAttribute("tabindex", "0");
-        await expect(buttonA).toHaveAttribute("aria-selected", "true");
-        await expect(buttonA).toHaveAttribute(
-          "aria-controls",
-          args.items[0].id,
-        );
-      });
-
-      await step("Second tab button", async () => {
-        await expect(buttonB).toBeVisible();
-        await expect(buttonB).toHaveAttribute("id", `${args.items[1].id}-tab`);
-        await expect(buttonB).toHaveAttribute("role", "tab");
-        await expect(buttonB).toHaveAttribute("tabindex", "-1");
-        await expect(buttonB).toHaveAttribute("aria-selected", "false");
-        await expect(buttonB).toHaveAttribute(
-          "aria-controls",
-          args.items[1].id,
-        );
-      });
-
-      await step("Third tab button", async () => {
-        await expect(buttonC).toBeVisible();
-        await expect(buttonC).toHaveAttribute("id", `${args.items[2].id}-tab`);
-        await expect(buttonC).toHaveAttribute("role", "tab");
-        await expect(buttonC).toHaveAttribute("tabindex", "-1");
-        await expect(buttonC).toHaveAttribute("aria-selected", "false");
-        await expect(buttonC).toHaveAttribute(
-          "aria-controls",
-          args.items[2].id,
-        );
-      });
-    });
-
-    await step("Test tab sections", async () => {
-      await expect(sectionA).toBeVisible();
-      await expect(sectionA).toHaveAttribute("id", args.items[0].id);
-      await expect(sectionA).toHaveAttribute("role", "tabpanel");
-      await expect(sectionA).toHaveAttribute(
-        "aria-labelledby",
-        `${args.items[0].id}-tab`,
-      );
-      await expect(sectionA).toHaveAttribute("tabindex", "0");
-
-      await expect(sectionB).not.toBeVisible();
-      await expect(sectionB).toHaveAttribute("id", args.items[1].id);
-      await expect(sectionB).toHaveAttribute("role", "tabpanel");
-      await expect(sectionB).toHaveAttribute(
-        "aria-labelledby",
-        `${args.items[1].id}-tab`,
-      );
-      await expect(sectionB).toHaveAttribute("tabindex", "0");
-
-      await expect(sectionC).not.toBeVisible();
-      await expect(sectionC).toHaveAttribute("id", args.items[2].id);
-      await expect(sectionC).toHaveAttribute("role", "tabpanel");
-      await expect(sectionC).toHaveAttribute(
-        "aria-labelledby",
-        `${args.items[2].id}-tab`,
-      );
-      await expect(sectionC).toHaveAttribute("tabindex", "0");
-    });
-  });
-
-  await userEvent.click(buttonA);
-
-  await step("First tab (already selected)", async () => {
-    await userEvent.click(buttonA);
-    await expectButtonAndSectionAToBeCurrent();
-  });
-
-  await step("Second tab", async () => {
-    await userEvent.click(buttonB);
-    await expectButtonAndSectionBToBeCurrent();
-  });
-
-  await step("Third tab", async () => {
-    await userEvent.click(buttonC);
-    await expectButtonAndSectionCToBeCurrent();
-  });
-
-  await step("First tab", async () => {
-    await userEvent.click(buttonA);
-    await expectButtonAndSectionAToBeCurrent();
-  });
-
-  await step("Keyboard interaciton", async () => {
-    await step("Left/right", async () => {
-      await userEvent.click(buttonA);
-      await expectButtonAndSectionAToBeCurrent();
-
-      await userEvent.keyboard("[ArrowRight]");
-      await expectButtonAndSectionBToBeCurrent();
-
-      await userEvent.keyboard("[ArrowRight]");
-      await expectButtonAndSectionCToBeCurrent();
-
-      await userEvent.keyboard("[ArrowRight]");
-      await expectButtonAndSectionAToBeCurrent();
-
-      await userEvent.keyboard("[ArrowRight]");
-      await expectButtonAndSectionBToBeCurrent();
-
-      await userEvent.keyboard("[ArrowLeft]");
-      await expectButtonAndSectionAToBeCurrent();
-
-      await userEvent.keyboard("[ArrowLeft]");
-      await expectButtonAndSectionCToBeCurrent();
-
-      await userEvent.keyboard("[ArrowLeft]");
-      await expectButtonAndSectionBToBeCurrent();
-
-      await userEvent.keyboard("[ArrowLeft]");
-      await expectButtonAndSectionAToBeCurrent();
-    });
-
-    await step("Home/end", async () => {
-      await userEvent.click(buttonA);
-      await expectButtonAndSectionAToBeCurrent();
-
-      await userEvent.keyboard("[Home]");
-      await expectButtonAndSectionAToBeCurrent();
-
-      await userEvent.keyboard("[End]");
-      await expectButtonAndSectionCToBeCurrent();
-
-      await userEvent.keyboard("[End]");
-      await expectButtonAndSectionCToBeCurrent();
-
-      await userEvent.keyboard("[Home]");
-      await expectButtonAndSectionAToBeCurrent();
-    });
-
-    buttonA.blur();
-  });
-};

package/nationalarchives/components/text-input/text-input.stories.js

@@ -1,188 +0,0 @@
-import TextInput from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  label: { control: "text" },
-  headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: {
-    control: "inline-radio",
-    options: ["xs", "s", "m", "l", "xl"],
-  },
-  id: { control: "text" },
-  name: { control: "text" },
-  hint: { control: "text" },
-  value: { control: "text" },
-  error: { control: "object" },
-  spellcheck: { control: "boolean" },
-  inputmode: {
-    control: "select",
-    options: ["text", "decimal", "numeric", "tel", "search", "email", "url"],
-  },
-  autofill: {
-    control: "select",
-    options: [
-      "name",
-      "honorific-prefix",
-      "given-name",
-      "additional-name",
-      "family-name",
-      "honorific-suffix",
-      "nickname",
-      "username",
-      "new-password",
-      "current-password",
-      "one-time-code",
-      "organization-title",
-      "organization",
-      "street-address",
-      "address-line1",
-      "address-line2",
-      "address-line3",
-      "address-level4",
-      "address-level3",
-      "address-level2",
-      "address-level1",
-      "country",
-      "country-name",
-      "postal-code",
-      "cc-name",
-      "cc-given-name",
-      "cc-additional-name",
-      "cc-family-name",
-      "cc-number",
-      "cc-exp",
-      "cc-exp-month",
-      "cc-exp-year",
-      "cc-csc",
-      "cc-type",
-      "transaction-currency",
-      "transaction-amount",
-      "language",
-      "bday",
-      "bday-day",
-      "bday-month",
-      "bday-year",
-      "sex",
-      "url",
-      "photo",
-      "email",
-    ],
-  },
-  size: { control: "inline-radio", options: ["xs", "s", "m", "l", "xl"] },
-  maxLength: { control: "number" },
-  inline: { control: "boolean" },
-  formGroupClasses: { control: "text" },
-  formGroupAttributes: { 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/Text input",
-  argTypes,
-};
-
-const Template = ({
-  label,
-  headingLevel,
-  headingSize,
-  id,
-  name,
-  hint,
-  value,
-  error,
-  spellcheck,
-  inputmode,
-  autofill,
-  size,
-  maxLength,
-  inline,
-  formGroupClasses,
-  formGroupAttributes,
-  classes,
-  attributes,
-}) =>
-  TextInput({
-    params: {
-      label,
-      headingLevel,
-      headingSize,
-      id,
-      name,
-      hint,
-      value,
-      error,
-      spellcheck,
-      inputmode,
-      autofill,
-      size,
-      maxLength,
-      inline,
-      formGroupClasses,
-      formGroupAttributes,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  label: "Enter your first name",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "firstname1",
-  name: "firstname1",
-  classes: "tna-text-input--demo",
-};
-
-export const Predefined = Template.bind({});
-Predefined.args = {
-  label: "Edit your first name",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "firstname2",
-  name: "firstname2",
-  value: "John",
-  classes: "tna-text-input--demo",
-};
-
-export const WithHint = Template.bind({});
-WithHint.args = {
-  label: "Enter your first name",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "firstname3",
-  name: "firstname3",
-  hint: "What people call you by",
-  classes: "tna-text-input--demo",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  label: "Enter your first name",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "firstname4",
-  name: "firstname4",
-  error: {
-    text: "Enter a name",
-  },
-  classes: "tna-text-input--demo",
-};
-
-export const Inline = Template.bind({});
-Inline.args = {
-  label: "Enter your first name",
-  headingLevel: 4,
-  headingSize: "xs",
-  id: "firstname5",
-  name: "firstname5",
-  inline: true,
-  classes: "tna-text-input--demo",
-};

package/nationalarchives/components/textarea/textarea.stories.js

@@ -1,130 +0,0 @@
-import Textarea from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  label: { control: "text" },
-  headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: {
-    control: "inline-radio",
-    options: ["xs", "s", "m", "l", "xl"],
-  },
-  id: { control: "text" },
-  name: { control: "text" },
-  hint: { control: "text" },
-  value: { control: "text" },
-  error: { control: "object" },
-  spellcheck: { control: "boolean" },
-  size: { control: "inline-radio", options: ["m", "l", "xl"] },
-  rows: { control: "number" },
-  inline: { control: "boolean" },
-  formGroupClasses: { control: "text" },
-  formGroupAttributes: { 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/Textarea",
-  argTypes,
-};
-
-const Template = ({
-  label,
-  headingLevel,
-  headingSize,
-  id,
-  name,
-  hint,
-  value,
-  error,
-  spellcheck,
-  size,
-  rows,
-  inline,
-  formGroupClasses,
-  formGroupAttributes,
-  classes,
-  attributes,
-}) =>
-  Textarea({
-    params: {
-      label,
-      headingLevel,
-      headingSize,
-      id,
-      name,
-      hint,
-      value,
-      error,
-      spellcheck,
-      size,
-      rows,
-      inline,
-      formGroupClasses,
-      formGroupAttributes,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  label: "Enter your feedback",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "feedback1",
-  name: "feedback1",
-  classes: "tna-textarea--demo",
-};
-
-export const Predefined = Template.bind({});
-Predefined.args = {
-  label: "Edit your feedback",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "feedback2",
-  name: "feedback2",
-  value: "I like this 👍🏼",
-  classes: "tna-textarea--demo",
-};
-
-export const WithHint = Template.bind({});
-WithHint.args = {
-  label: "Enter your feedback",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "feedback3",
-  name: "feedback3",
-  hint: "What did you think?",
-  classes: "tna-textarea--demo",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  label: "Enter your feedback",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "feedback4",
-  name: "feedback4",
-  error: {
-    text: "Enter some feedback",
-  },
-  classes: "tna-textarea--demo",
-};
-
-export const Inline = Template.bind({});
-Inline.args = {
-  label: "Enter your feedback",
-  headingLevel: 4,
-  headingSize: "xs",
-  id: "feedback5",
-  name: "feedback5",
-  inline: true,
-  classes: "tna-textarea--demo",
-};

package/nationalarchives/components/warning/warning.stories.js

@@ -1,39 +0,0 @@
-import Warning from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  heading: { control: "text" },
-  headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  body: { 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/Warning",
-  argTypes,
-};
-
-const Template = ({ heading, headingLevel, body, classes, attributes }) =>
-  Warning({
-    params: {
-      heading,
-      headingLevel,
-      body,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  headingLevel: 2,
-  body: "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
-  classes: "tna-warning--demo",
-};

package/nationalarchives/stories/intro.mdx

@@ -1,13 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Introduction" />
-
-# Welcome
-
-[TNA Frontend](https://github.com/nationalarchives/tna-frontend) contains the code you need to start building user interfaces for National Archives platforms and services.
-
-This Storybook instance represents the working branch (`main`) of TNA Frontend. This may contain unreleased styles and code.
-
-To see how the styles and components in TNA Frontend should be used, see the [National Archives Design System](https://nationalarchives.github.io/design-system/).
-
-To get the latest release, see the [GitHub releases page](https://github.com/nationalarchives/tna-frontend/releases).