@nationalarchives/frontend 0.1.64 → 0.2.0

package/nationalarchives/components/hero/hero.stories.js

@@ -1,326 +0,0 @@
-import Hero from "./template.njk";
-import macroOptions from "./macro-options.json";
-import { within, userEvent, expect } from "@storybook/test";
-import { customViewports } from "../../../../.storybook/viewports";
-
-const argTypes = {
-  supertitle: { control: "text" },
-  title: { control: "text" },
-  headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
-  body: { control: "text" },
-  text: { control: "text" },
-  imageSrc: { control: { type: "file", accept: ".jpg" } },
-  imageAlt: { control: "text" },
-  imageWidth: { control: { type: "number", min: 1 } },
-  imageHeight: { control: { type: "number", min: 1 } },
-  imageType: { control: "text" },
-  imageSources: { control: "object" },
-  imageCaption: { control: "text" },
-  actions: { control: "object" },
-  style: {
-    control: "inline-radio",
-    options: ["none", "contrast", "tint", "accent"],
-  },
-  layout: {
-    control: "inline-radio",
-    options: ["plain", "shift", "split"],
-  },
-  narrow: { 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/Hero",
-  argTypes,
-};
-
-const Template = ({
-  supertitle,
-  title,
-  headingLevel,
-  headingSize,
-  body,
-  text,
-  imageSrc,
-  imageAlt,
-  imageWidth,
-  imageHeight,
-  imageType,
-  imageSources,
-  imageCaption,
-  actions,
-  style,
-  layout,
-  narrow,
-  classes,
-  attributes,
-}) =>
-  Hero({
-    params: {
-      supertitle,
-      title,
-      headingLevel,
-      headingSize,
-      body,
-      text,
-      imageSrc,
-      imageAlt,
-      imageWidth,
-      imageHeight,
-      imageType,
-      imageSources,
-      imageCaption,
-      actions,
-      style,
-      layout,
-      narrow,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-};
-
-Standard.play = async ({ args, canvasElement, step }) => {
-  await new Promise((r) => setTimeout(r, 100));
-
-  const canvas = within(canvasElement);
-  const image = canvas.getByAltText(args.imageAlt);
-  const content = canvasElement.querySelector(".tna-hero__content");
-  const summary = canvasElement.querySelector(".tna-hero__details-summary");
-  const information = canvas.getByText(args.imageCaption);
-
-  await step("Initial load", async () => {
-    await expect(image).toBeVisible();
-    await expect(content).toBeVisible();
-    await expect(summary).toBeVisible();
-    await expect(information).not.toBeVisible();
-  });
-
-  await step("Open information", async () => {
-    await userEvent.click(summary);
-    await expect(information).toBeVisible();
-  });
-
-  await step("Close information", async () => {
-    await userEvent.click(summary);
-    await expect(information).not.toBeVisible();
-  });
-};
-
-export const LargeContent = Template.bind({});
-LargeContent.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-LargeContent.args = {
-  supertitle: "Focus on",
-  title: "‘Not acceptable’: Gay Switchboard’s attempts to become a charity",
-  body: `<p class="tna-large-paragraph">Switchboard LGBT+ Helpline is one of the oldest telephone help services for lesbian, gay, bisexual, transgender and queer people in the UK. Despite high demand for its support, prejudice and laws meant Switchboard’s journey to register as a charity was not easy.</p>`,
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-};
-
-export const Accent = Template.bind({});
-Accent.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Accent.args = {
-  supertitle: "Supertitle",
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-  style: "accent",
-};
-
-export const Contrast = Template.bind({});
-Contrast.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Contrast.args = {
-  supertitle: "Supertitle",
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-  style: "contrast",
-};
-
-export const Tint = Template.bind({});
-Tint.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Tint.args = {
-  supertitle: "Supertitle",
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-  style: "tint",
-};
-
-export const Shifted = Template.bind({});
-Shifted.args = {
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-  style: "accent",
-  layout: "shift",
-};
-
-export const Split = Template.bind({});
-Split.args = {
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-  style: "accent",
-  layout: "split",
-};
-
-export const Narrow = Template.bind({});
-Narrow.args = {
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-  style: "accent",
-  // layout: "split",
-  narrow: true,
-};
-
-export const Actions = Template.bind({});
-Actions.args = {
-  supertitle: "Supertitle",
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-  actions: [
-    {
-      text: "Action 1",
-      href: "#",
-    },
-    {
-      text: "Action 2",
-      href: "#",
-      icon: "globe",
-    },
-    {
-      text: "Action 3",
-      href: "#",
-      title: "Go and do the action",
-      icon: "chevron-right",
-      rightAlignIcon: true,
-    },
-  ],
-  style: "accent",
-};
-
-export const CaptionWithNoHeading = Template.bind({});
-CaptionWithNoHeading.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-CaptionWithNoHeading.args = {
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-};
-
-export const Sources = Template.bind({});
-Sources.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Sources.args = {
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageSources: [
-    {
-      src: "https://www.gstatic.com/webp/gallery/2.webp",
-      type: "image/webp",
-      media: "(max-width: 48em)",
-      width: 550,
-      height: 404,
-    },
-  ],
-};
-
-export const Mobile = Template.bind({});
-Mobile.parameters = {
-  viewport: {
-    defaultViewport: "small",
-  },
-  chromatic: {
-    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
-  },
-};
-Mobile.args = {
-  supertitle: "Supertitle",
-  title: "Title",
-  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  imageCaption: "An interesting photo by a famous photographer ©2023",
-};

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

@@ -1,128 +0,0 @@
-import IndexGrid from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  supertitle: { control: "text" },
-  title: { control: "text" },
-  headingLevel: { control: { type: "number", min: 1, max: 6 } },
-  headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
-  href: { control: "text" },
-  hrefClasses: { control: "text" },
-  hrefAttributes: { control: "object" },
-  body: { control: "text" },
-  text: { control: "text" },
-  items: { control: "object" },
-  lazyImages: { control: "boolean" },
-  columns: { control: "number" },
-  columnsMedium: { control: "number" },
-  columnsSmall: { control: "number" },
-  columnsTiny: { control: "number" },
-  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/Index grid",
-  argTypes,
-};
-
-const Template = ({
-  supertitle,
-  title,
-  headingLevel,
-  headingSize,
-  href,
-  hrefClasses,
-  hrefAttributes,
-  body,
-  text,
-  items,
-  lazyImages,
-  columns,
-  columnsMedium,
-  columnsSmall,
-  columnsTiny,
-  classes,
-  attributes,
-}) =>
-  IndexGrid({
-    params: {
-      supertitle,
-      title,
-      headingLevel,
-      headingSize,
-      href,
-      hrefClasses,
-      hrefAttributes,
-      body,
-      text,
-      items,
-      lazyImages,
-      columns,
-      columnsMedium,
-      columnsSmall,
-      columnsTiny,
-      classes,
-      attributes,
-    },
-  });
-
-const exampleItem = {
-  href: "#",
-  src: "https://picsum.photos/id/237/800/600",
-  alt: "Photo of a puppy",
-  width: 800,
-  height: 600,
-  title: "Cat",
-};
-
-export const Standard = Template.bind({});
-Standard.args = {
-  title: "My dogs",
-  headingLevel: 2,
-  items: Array(12)
-    .fill({ ...exampleItem })
-    .map((item, index) => {
-      const pseudoRandom = ((index * 29) % 8) + 1;
-      return {
-        ...item,
-        href: `#/category-${index}`,
-        label: "Time period",
-        title: `Category #${index + 101}`,
-        subtitle: `${pseudoRandom} photos`,
-      };
-    }),
-  columns: 4,
-  columnsMedium: 3,
-  columnsSmall: 2,
-  columnsTiny: 1,
-  classes: "tna-index-grid--demo",
-};
-
-export const Basic = Template.bind({});
-Basic.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Basic.args = {
-  title: "My dogs",
-  items: Array(6)
-    .fill({ ...exampleItem })
-    .map((item, index) => {
-      return {
-        ...item,
-        href: `#/category-${index}`,
-        title: `Category #${index + 101}`,
-      };
-    }),
-  columns: 3,
-  columnsMedium: 3,
-  columnsSmall: 2,
-  columnsTiny: 1,
-  classes: "tna-index-grid--demo",
-};