@nationalarchives/frontend 0.1.65 → 0.2.1

package/nationalarchives/components/button/button-group.stories.js

@@ -1,114 +0,0 @@
-import Button from "./template.njk";
-
-export default {
-  title: "Components/Button group",
-};
-
-const Template = ({
-  text,
-  href,
-  title,
-  icon,
-  accent,
-  small,
-  plain,
-  iconOnly,
-  iconOnlyOnMobile,
-  rightAlignIcon,
-  buttonElement,
-  buttonType,
-  classes,
-  attributes,
-}) =>
-  Button({
-    params: {
-      text,
-      href,
-      title,
-      icon,
-      accent,
-      small,
-      plain,
-      iconOnly,
-      iconOnlyOnMobile,
-      rightAlignIcon,
-      buttonElement,
-      buttonType,
-      classes,
-      attributes,
-    },
-  });
-
-const GroupTemplate = ({ buttons }) =>
-  `<div class="tna-button-group">
-    ${buttons.map((button) => Template(button)).join("")}
-</div>`;
-
-export const Group = GroupTemplate.bind({});
-Group.args = {
-  buttons: [
-    {
-      text: "Standard",
-      href: "#",
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Accent",
-      href: "#",
-      accent: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Icon",
-      href: "#",
-      icon: "phone",
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Right Aligned Icon",
-      href: "#",
-      icon: "chevron-right",
-      rightAlignIcon: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Icon Only",
-      href: "#",
-      icon: "list",
-      iconOnly: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Icon Only On Mobile",
-      href: "#",
-      icon: "list",
-      iconOnlyOnMobile: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Plain",
-      plain: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Plain With Icon",
-      href: "#",
-      icon: "map-location-dot",
-      plain: true,
-      classes: "tna-button--demo",
-    },
-    {
-      text: "Button",
-      buttonElement: true,
-      classes: "tna-button--demo",
-    },
-  ],
-};
-
-const SmallGroupTemplate = ({ buttons }) =>
-  `<div class="tna-button-group tna-button-group--small">
-    ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}` })).join("")}
-</div>`;
-
-export const SmallGroup = SmallGroupTemplate.bind({});
-SmallGroup.args = Group.args;

package/nationalarchives/components/button/button.stories.js

@@ -1,207 +0,0 @@
-import Button from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  text: { control: "text" },
-  href: { control: "text" },
-  title: { control: "text" },
-  icon: { control: "text" },
-  iconSvg: { control: "text" },
-  accent: { control: "boolean" },
-  small: { control: "boolean" },
-  plain: { control: "boolean" },
-  iconOnly: { control: "boolean" },
-  iconOnlyOnMobile: { control: "boolean" },
-  rightAlignIcon: { control: "boolean" },
-  buttonElement: { control: "boolean" },
-  buttonType: { 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/Button",
-  argTypes,
-};
-
-const Template = ({
-  text,
-  href,
-  title,
-  icon,
-  iconSvg,
-  accent,
-  small,
-  plain,
-  iconOnly,
-  iconOnlyOnMobile,
-  rightAlignIcon,
-  buttonElement,
-  buttonType,
-  classes,
-  attributes,
-}) =>
-  Button({
-    params: {
-      text,
-      href,
-      title,
-      icon,
-      iconSvg,
-      accent,
-      small,
-      plain,
-      iconOnly,
-      iconOnlyOnMobile,
-      rightAlignIcon,
-      buttonElement,
-      buttonType,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Standard.args = {
-  text: "Button",
-  href: "#",
-  classes: "tna-button--demo",
-};
-
-export const Accent = Template.bind({});
-Accent.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Accent.args = {
-  text: "Button",
-  href: "#",
-  accent: true,
-  classes: "tna-button--demo",
-};
-
-export const Icon = Template.bind({});
-Icon.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Icon.args = {
-  text: "Explore the collection",
-  href: "#",
-  icon: "map-location-dot",
-  classes: "tna-button--demo",
-};
-
-export const RightAlignedIcon = Template.bind({});
-RightAlignedIcon.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-RightAlignedIcon.args = {
-  text: "Search",
-  href: "#",
-  icon: "chevron-right",
-  rightAlignIcon: true,
-  classes: "tna-button--demo",
-};
-
-export const IconOnly = Template.bind({});
-IconOnly.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-IconOnly.args = {
-  text: "Show as a list",
-  href: "#",
-  icon: "list",
-  iconOnly: true,
-  classes: "tna-button--demo",
-};
-
-export const Small = Template.bind({});
-Small.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Small.args = {
-  text: "Small button",
-  href: "#",
-  small: true,
-  classes: "tna-button--demo",
-};
-
-export const SmallWithIcon = Template.bind({});
-SmallWithIcon.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-SmallWithIcon.args = {
-  text: "Explore the collection",
-  href: "#",
-  icon: "map-location-dot",
-  small: true,
-  classes: "tna-button--demo",
-};
-
-export const SmallIconOnly = Template.bind({});
-SmallIconOnly.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-SmallIconOnly.args = {
-  text: "Explore the collection",
-  href: "#",
-  icon: "map-location-dot",
-  small: true,
-  iconOnly: true,
-  classes: "tna-button--demo",
-};
-
-export const Plain = Template.bind({});
-Plain.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Plain.args = {
-  text: "Plain button",
-  href: "#",
-  plain: true,
-  classes: "tna-button--demo",
-};
-
-export const SmallPlain = Template.bind({});
-SmallPlain.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-SmallPlain.args = {
-  text: "Plain small button",
-  href: "#",
-  small: true,
-  plain: true,
-  classes: "tna-button--demo",
-};
-
-export const SmallPlainIcon = Template.bind({});
-SmallPlainIcon.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-SmallPlainIcon.args = {
-  text: "Plain small button",
-  href: "#",
-  icon: "map-location-dot",
-  small: true,
-  plain: true,
-  classes: "tna-button--demo",
-};
-
-export const ButtonElement = Template.bind({});
-ButtonElement.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-ButtonElement.args = {
-  text: "Button element",
-  href: "#",
-  buttonElement: true,
-  classes: "tna-button--demo",
-};

package/nationalarchives/components/card/card.stories.js

@@ -1,402 +0,0 @@
-import Card from "./template.njk";
-import macroOptions from "./macro-options.json";
-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"] },
-  href: { control: "text" },
-  hrefClasses: { control: "text" },
-  hrefAttributes: { control: "object" },
-  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" },
-  lazyImage: { control: "boolean" },
-  label: { control: "text" },
-  labelColour: {
-    control: "inline-radio",
-    options: ["accent", "black", "pink", "orange", "yellow", "green", "blue"],
-  },
-  meta: { control: "object" },
-  body: { control: "text" },
-  text: { control: "text" },
-  actions: { control: "object" },
-  horizontal: { control: "boolean" },
-  style: {
-    control: "inline-radio",
-    options: ["none", "contrast", "tint", "accent"],
-  },
-  plainSupertitle: { control: "boolean" },
-  htmlElement: { control: "text" },
-  classes: { control: "text" },
-  attributes: { control: "object" },
-};
-
-Object.keys(argTypes).forEach((argType) => {
-  const macroOption = macroOptions.find((option) => option.name === argType);
-  argTypes[argType] = {
-    ...argTypes[argType],
-    description: macroOption?.description,
-  };
-});
-
-export default {
-  title: "Components/Card",
-  argTypes,
-};
-
-const Template = ({
-  supertitle,
-  title,
-  headingLevel,
-  headingSize,
-  href,
-  hrefClasses,
-  hrefAttributes,
-  imageSrc,
-  imageAlt,
-  imageWidth,
-  imageHeight,
-  imageType,
-  imageSources,
-  lazyImage,
-  label,
-  labelColour,
-  meta,
-  body,
-  text,
-  actions,
-  horizontal,
-  style,
-  plainSupertitle,
-  htmlElement,
-  classes,
-  attributes,
-}) =>
-  Card({
-    params: {
-      supertitle,
-      title,
-      headingLevel,
-      headingSize,
-      href,
-      hrefClasses,
-      hrefAttributes,
-      imageSrc,
-      imageAlt,
-      imageWidth,
-      imageHeight,
-      imageType,
-      imageSources,
-      lazyImage,
-      label,
-      labelColour,
-      meta,
-      body,
-      text,
-      actions,
-      horizontal,
-      style,
-      plainSupertitle,
-      htmlElement,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  href: "#",
-  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,
-  label: "New",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const Simple = Template.bind({});
-Simple.args = {
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  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,
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const Meta = Template.bind({});
-Meta.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  href: "#",
-  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,
-  label: "New",
-  labelColour: "green",
-  meta: [
-    { title: "Event date", text: "24th September 2023", icon: "calendar" },
-    { title: "Cost", text: "From £16", icon: "ticket" },
-    { title: "Location", text: "Online", icon: "location-dot" },
-  ],
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const PlainSupertitle = Template.bind({});
-PlainSupertitle.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  href: "#",
-  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,
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  plainSupertitle: true,
-  classes: "tna-card--demo",
-};
-
-export const Contrast = Template.bind({});
-Contrast.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  href: "#",
-  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,
-  label: "New",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  style: "contrast",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const Accent = Template.bind({});
-Accent.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  href: "#",
-  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,
-  label: "New",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  style: "accent",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const NoImage = Template.bind({});
-NoImage.args = {
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  href: "#",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const Actions = Template.bind({});
-Actions.args = {
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  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,
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  actions: [
-    {
-      text: "Card action 1",
-      href: "#",
-    },
-    {
-      text: "Card action 2",
-      href: "#",
-      title: "Go and do the action",
-    },
-  ],
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  href: "#",
-  headingLevel: 3,
-  headingSize: "l",
-  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,
-  label: "New",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  horizontal: true,
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const HorizontalContrast = Template.bind({});
-HorizontalContrast.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  href: "#",
-  headingLevel: 3,
-  headingSize: "l",
-  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,
-  label: "New",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  horizontal: true,
-  style: "contrast",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const HorizontalAccent = Template.bind({});
-HorizontalAccent.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  href: "#",
-  headingLevel: 3,
-  headingSize: "l",
-  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,
-  label: "New",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  horizontal: true,
-  style: "accent",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const HorizontalMinimal = Template.bind({});
-HorizontalMinimal.args = {
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "l",
-  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,
-  horizontal: true,
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const HorizontalMobile = Template.bind({});
-HorizontalMobile.parameters = {
-  viewport: {
-    defaultViewport: "small",
-  },
-  chromatic: {
-    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
-  },
-};
-HorizontalMobile.args = {
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "l",
-  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,
-  horizontal: true,
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const HorizontalContrastMobile = Template.bind({});
-HorizontalContrastMobile.parameters = {
-  viewport: {
-    defaultViewport: "small",
-  },
-  chromatic: {
-    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
-  },
-};
-HorizontalContrastMobile.args = {
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "l",
-  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,
-  horizontal: true,
-  style: "contrast",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-export const Sources = Template.bind({});
-Sources.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  imageSrc: "https://www.gstatic.com/webp/gallery/2.jpg",
-  imageAlt: "A man in a canoe paddling through white water",
-  imageWidth: 550,
-  imageHeight: 404,
-  imageSources: [
-    {
-      src: "https://www.gstatic.com/webp/gallery/2.webp",
-      type: "image/webp",
-    },
-  ],
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};