@nationalarchives/frontend 0.1.64 → 0.2.0

package/nationalarchives/components/checkboxes/checkboxes.stories.js

@@ -1,241 +0,0 @@
-import Checkboxes 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" },
-  error: { control: "object" },
-  items: { control: "object" },
-  small: { control: "boolean" },
-  inline: { 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/Checkboxes",
-  argTypes,
-};
-
-const Template = ({
-  label,
-  headingLevel,
-  headingSize,
-  id,
-  name,
-  hint,
-  error,
-  items,
-  small,
-  inline,
-  classes,
-  attributes,
-}) =>
-  Checkboxes({
-    params: {
-      label,
-      headingLevel,
-      headingSize,
-      id,
-      name,
-      hint,
-      error,
-      items,
-      small,
-      inline,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  label: "Categories",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "categories1",
-  name: "categories1",
-  items: [
-    {
-      text: "Alpha",
-      value: "alpha",
-    },
-    {
-      text: "Beta",
-      value: "beta",
-    },
-    {
-      text: "Gamma",
-      value: "gamma",
-    },
-  ],
-  classes: "tna-checkboxes--demo",
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  label: "Categories",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "categories2",
-  name: "categories2",
-  items: [
-    {
-      text: "Admiralty, Navy, Royal Marines, and Coastguard",
-      value: "ADM",
-    },
-    {
-      text: "Air Ministry and Royal Air Force records",
-      value: "AIR",
-    },
-    {
-      text: "Board of Trade and successors",
-      value: "BT",
-    },
-    {
-      text: "Chancery, the Wardrobe, Royal Household, Exchequer and various commissions",
-      value: "C",
-    },
-    {
-      text: "Colonial Office, Commonwealth and Foreign and Commonwealth Offices",
-      value: "CO",
-    },
-    {
-      text: "Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations",
-      value: "E",
-    },
-    {
-      text: "Foreign Office",
-      value: "FO",
-    },
-    {
-      text: "Home Office",
-      value: "HO",
-    },
-    {
-      text: "Prerogative Court of Canterbury",
-      value: "PROB",
-    },
-    {
-      text: "War Office, Armed Forces, Judge Advocate General, and related bodies",
-      value: "WO",
-    },
-  ],
-  small: true,
-  classes: "tna-checkboxes--demo",
-};
-
-export const Preselected = Template.bind({});
-Preselected.args = {
-  label: "Categories",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "categories3",
-  name: "categories3",
-  items: [
-    {
-      text: "Alpha",
-      value: "alpha",
-    },
-    {
-      text: "Beta",
-      value: "beta",
-      checked: true,
-    },
-    {
-      text: "Gamma",
-      value: "gamma",
-    },
-  ],
-  classes: "tna-checkboxes--demo",
-};
-
-export const WithHint = Template.bind({});
-WithHint.args = {
-  label: "Categories",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "categories4",
-  name: "categories4",
-  hint: "Select all that apply.",
-  items: [
-    {
-      text: "Alpha",
-      value: "alpha",
-    },
-    {
-      text: "Beta",
-      value: "beta",
-    },
-    {
-      text: "Gamma",
-      value: "gamma",
-    },
-  ],
-  classes: "tna-checkboxes--demo",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  label: "Categories",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "categories5",
-  name: "categories5",
-  error: {
-    text: "You must select a category",
-  },
-  items: [
-    {
-      text: "Alpha",
-      value: "alpha",
-    },
-    {
-      text: "Beta",
-      value: "beta",
-    },
-    {
-      text: "Gamma",
-      value: "gamma",
-    },
-  ],
-  classes: "tna-checkboxes--demo",
-};
-
-export const Inline = Template.bind({});
-Inline.args = {
-  label: "Categories",
-  headingLevel: 4,
-  headingSize: "xs",
-  id: "categories6",
-  name: "categories6",
-  items: [
-    {
-      text: "Alpha",
-      value: "alpha",
-    },
-    {
-      text: "Beta",
-      value: "beta",
-    },
-    {
-      text: "Gamma",
-      value: "gamma",
-    },
-  ],
-  inline: true,
-  classes: "tna-checkboxes--demo",
-};

package/nationalarchives/components/compound-filters/compound-filters.stories.js

@@ -1,61 +0,0 @@
-import Filters from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  items: { control: "object" },
-  removeAllText: { control: "text" },
-  removeAllHref: { 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/Compound filters",
-  argTypes,
-};
-
-const Template = ({
-  items,
-  removeAllText,
-  removeAllHref,
-  classes,
-  attributes,
-}) =>
-  Filters({
-    params: {
-      items,
-      removeAllText,
-      removeAllHref,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  items: [
-    {
-      label: "AIR - Air Ministry and Royal Air Force records",
-      href: "#",
-      title: "Remove Air Ministry and Royal Air Force records filter",
-    },
-    {
-      label: "Item",
-      href: "#",
-      title: "Remove item filter",
-    },
-    {
-      label: "Closed Or Retained Document, Open Description",
-      href: "#",
-      title: "Remove filter for Closed Or Retained Document, Open Description",
-    },
-  ],
-  removeAllHref: "#",
-  classes: "tna-filters--demo",
-};

package/nationalarchives/components/cookie-banner/cookie-banner.stories.js

@@ -1,250 +0,0 @@
-import CookieBanner from "./template.njk";
-import macroOptions from "./macro-options.json";
-import { within, userEvent, expect } from "@storybook/test";
-import Cookies from "../../lib/cookies.mjs";
-
-const argTypes = {
-  serviceName: { control: "text" },
-  cookiesUrl: { control: "text" },
-  policies: { control: "text" },
-  policiesKey: { control: "text" },
-  preferencesSetKey: { control: "text" },
-  cookiesDomain: { control: "text" },
-  cookiesPath: { control: "text" },
-  allowInsecure: { control: "boolean" },
-  style: {
-    control: "inline-radio",
-    options: ["none", "contrast", "accent", "tint"],
-  },
-  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/Cookie banner",
-  argTypes,
-};
-
-const Template = ({
-  serviceName,
-  cookiesUrl,
-  policies,
-  policiesKey,
-  preferencesSetKey,
-  cookiesDomain,
-  cookiesPath,
-  allowInsecure,
-  style,
-  classes,
-  attributes,
-}) =>
-  CookieBanner({
-    params: {
-      serviceName,
-      cookiesUrl,
-      policies,
-      policiesKey,
-      preferencesSetKey,
-      cookiesDomain,
-      cookiesPath,
-      allowInsecure,
-      style,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  cookiesUrl: "#",
-  cookiesPath: "/tna-frontend/",
-  classes: "tna-cookie-banner--demo",
-};
-
-export const Accept = Template.bind({});
-Accept.args = {
-  serviceName: "My service",
-  cookiesUrl: "#",
-  allowInsecure: true,
-  classes: "tna-cookie-banner--demo",
-};
-Accept.play = async ({ canvasElement }) => {
-  const cookies = new Cookies({ newInstance: true });
-  await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("unknown")).toEqual(null);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(false);
-
-  const canvas = within(canvasElement);
-  const acceptButton = canvas.getByText("Accept cookies");
-  const rejectButton = canvas.getByText("Reject cookies");
-  await expect(acceptButton).toBeVisible();
-  await expect(rejectButton).toBeVisible();
-  await userEvent.click(acceptButton);
-
-  await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("unknown")).toEqual(null);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("true");
-  await expect(cookies.hasValue("cookie_preferences_set", "true")).toEqual(
-    true,
-  );
-  await expect(acceptButton).not.toBeVisible();
-  await expect(rejectButton).not.toBeVisible();
-
-  // const closeButton = canvas.getByText("Close this message");
-  // await expect(closeButton).toBeVisible();
-  // await userEvent.click(closeButton);
-
-  // await expect(closeButton).not.toBeVisible();
-
-  await cookies.deleteAll();
-};
-
-export const Reject = Template.bind({});
-Reject.args = {
-  serviceName: "My service",
-  cookiesUrl: "#",
-  classes: "tna-cookie-banner--demo",
-};
-Reject.play = async ({ canvasElement }) => {
-  const cookies = new Cookies({ newInstance: true });
-  await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("unknown")).toEqual(null);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(false);
-
-  const canvas = within(canvasElement);
-  const acceptButton = canvas.getByText("Accept cookies");
-  const rejectButton = canvas.getByText("Reject cookies");
-  await expect(acceptButton).toBeVisible();
-  await expect(rejectButton).toBeVisible();
-  await userEvent.click(rejectButton);
-
-  await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("unknown")).toEqual(null);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("true");
-  await expect(cookies.hasValue("cookie_preferences_set", "true")).toEqual(
-    true,
-  );
-  await expect(acceptButton).not.toBeVisible();
-  await expect(rejectButton).not.toBeVisible();
-
-  await cookies.deleteAll();
-};
-
-export const CustomPolicies = Template.bind({});
-CustomPolicies.args = {
-  serviceName: "My service",
-  cookiesUrl: "#",
-  policies: "custom",
-  classes: "tna-cookie-banner--demo",
-};
-CustomPolicies.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-CustomPolicies.play = async ({ args, canvasElement }) => {
-  const cookies = new Cookies({
-    extraPolicies: args.policies.split(","),
-    newInstance: true,
-  });
-  await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("custom")).toEqual(false);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(false);
-
-  const canvas = within(canvasElement);
-  const acceptButton = canvas.getByText("Accept cookies");
-  await userEvent.click(acceptButton);
-
-  await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("custom")).toEqual(true);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("true");
-  await expect(cookies.hasValue("cookie_preferences_set", "true")).toEqual(
-    true,
-  );
-
-  await cookies.deleteAll();
-};
-
-export const Existing = Template.bind({});
-Existing.args = {
-  serviceName: "My service",
-  cookiesUrl: "#",
-  allowInsecure: true,
-  classes: "tna-cookie-banner--demo",
-};
-Existing.decorators = [
-  (Story) => {
-    const cookies = new Cookies({ newInstance: true });
-    cookies.set("cookie_preferences_set", true);
-    return Story();
-  },
-];
-Existing.play = async ({ canvasElement }) => {
-  const cookies = new Cookies();
-  await expect(cookies.isPolicyAccepted("essential")).toEqual(true);
-  await expect(cookies.isPolicyAccepted("usage")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("settings")).toEqual(false);
-  await expect(cookies.isPolicyAccepted("unknown")).toEqual(null);
-  await expect(cookies.exists("cookie_preferences_set")).toEqual(true);
-  await expect(cookies.get("cookie_preferences_set")).toEqual("true");
-  await expect(cookies.hasValue("cookie_preferences_set", "true")).toEqual(
-    true,
-  );
-
-  const canvas = within(canvasElement);
-  const acceptButton = canvas.getByText("Accept cookies");
-  const rejectButton = canvas.getByText("Reject cookies");
-  await expect(acceptButton).not.toBeVisible();
-  await expect(rejectButton).not.toBeVisible();
-
-  await cookies.deleteAll();
-};
-
-// export const EventHandling = Template.bind({});
-// EventHandling.args = {
-//   serviceName: "My service",
-//   cookiesUrl: "#",
-//   cookiesPath: "/tna-frontend/",
-//   policies: "custom",
-//   classes: "tna-cookie-banner--demo",
-// };
-// EventHandling.play = async ({ args, canvasElement }) => {
-//   deleteAllCookies();
-
-//   const cookies = new Cookies();
-
-//   const onChangePolicy = jest.fn(data => {
-//     console.log(data)
-//   })
-//   cookies.on("changePolicy", onChangePolicy)
-
-//   const canvas = within(canvasElement);
-//   const acceptButton = canvas.getByText("Accept cookies");
-//   await userEvent.click(acceptButton);
-
-//   await expect(onChangePolicy.mock).toHaveBeenCalledTimes(1);
-//   await expect(onChangePolicy.mock.calls).toHaveLength(1);
-//   await expect(onChangePolicy.mock.results[0].value).toHaveProperty("custom");
-//   await expect(onChangePolicy.mock.results[0].value.custom).toEqual(true);
-
-//   deleteAllCookies();
-// };

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

@@ -1,119 +0,0 @@
-import DateInput 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: "object" },
-  error: { control: "object" },
-  inline: { 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/Date input",
-  argTypes,
-};
-
-const Template = ({
-  label,
-  headingLevel,
-  headingSize,
-  id,
-  name,
-  hint,
-  value,
-  error,
-  inline,
-  classes,
-  attributes,
-}) =>
-  DateInput({
-    params: {
-      label,
-      headingLevel,
-      headingSize,
-      id,
-      name,
-      hint,
-      value,
-      error,
-      inline,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  label: "Enter a start date",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "date11",
-  name: "date11",
-  classes: "tna-date-search--demo",
-};
-
-export const Predefined = Template.bind({});
-Predefined.args = {
-  label: "Enter a start date",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "date12",
-  name: "date12",
-  value: {
-    day: "24",
-    month: "09",
-    year: "1986",
-  },
-  classes: "tna-date-search--demo",
-};
-
-export const WithHint = Template.bind({});
-WithHint.args = {
-  label: "Enter a start date",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "date13",
-  name: "date13",
-  hint: "The earliest date of the record",
-  classes: "tna-date-search--demo",
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  label: "Enter a start date",
-  headingLevel: 4,
-  headingSize: "m",
-  id: "date14",
-  name: "date14",
-  error: {
-    text: "Date is not valid",
-  },
-  classes: "tna-date-search--demo",
-};
-
-export const Inline = Template.bind({});
-Inline.args = {
-  label: "Enter a start date",
-  headingLevel: 4,
-  headingSize: "xs",
-  id: "date15",
-  name: "date15",
-  inline: true,
-  classes: "tna-date-search--demo",
-};