@nationalarchives/frontend 0.1.65 → 0.2.0

package/nationalarchives/components/pagination/pagination.stories.js

@@ -1,532 +0,0 @@
-import Pagination from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  previous: { control: "object" },
-  items: { control: "object" },
-  next: { control: "object" },
-  currentItemText: { control: "text" },
-  solid: { control: "boolean" },
-  spaced: { control: "boolean" },
-  landmarkLabel: { 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/Pagination",
-  argTypes,
-};
-
-const Template = ({
-  previous,
-  items,
-  next,
-  currentItemText,
-  solid,
-  spaced,
-  landmarkLabel,
-  classes,
-  attributes,
-}) =>
-  Pagination({
-    params: {
-      previous,
-      items,
-      next,
-      currentItemText,
-      solid,
-      spaced,
-      landmarkLabel,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 6,
-      href: "#",
-    },
-    {
-      number: 7,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 8,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const First = Template.bind({});
-First.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-First.args = {
-  items: [
-    {
-      number: 1,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 2,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const Second = Template.bind({});
-Second.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Second.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      number: 2,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 3,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const Third = Template.bind({});
-Third.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Third.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      number: 2,
-      href: "#",
-    },
-    {
-      number: 3,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 4,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const Forth = Template.bind({});
-Forth.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Forth.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      number: 2,
-      href: "#",
-    },
-    {
-      number: 3,
-      href: "#",
-    },
-    {
-      number: 4,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 5,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const Fifth = Template.bind({});
-Fifth.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Fifth.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 4,
-      href: "#",
-    },
-    {
-      number: 5,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 6,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const LastMinus4 = Template.bind({});
-LastMinus4.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-LastMinus4.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 37,
-      href: "#",
-    },
-    {
-      number: 38,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 39,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const LastMinus3 = Template.bind({});
-LastMinus3.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-LastMinus3.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 38,
-      href: "#",
-    },
-    {
-      number: 39,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 40,
-      href: "#",
-    },
-    {
-      number: 41,
-      href: "#",
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const LastMinus2 = Template.bind({});
-LastMinus2.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-LastMinus2.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 39,
-      href: "#",
-    },
-    {
-      number: 40,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 41,
-      href: "#",
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const LastMinus1 = Template.bind({});
-LastMinus1.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-LastMinus1.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 40,
-      href: "#",
-    },
-    {
-      number: 41,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  classes: "tna-pagination--demo",
-};
-
-export const Last = Template.bind({});
-Last.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Last.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 41,
-      href: "#",
-    },
-    {
-      number: 42,
-      current: true,
-      href: "#",
-    },
-  ],
-  classes: "tna-pagination--demo",
-};
-
-export const Solid = Template.bind({});
-Solid.args = {
-  previous: {
-    href: "#",
-  },
-  items: [
-    {
-      number: 1,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 6,
-      href: "#",
-    },
-    {
-      number: 7,
-      current: true,
-      href: "#",
-    },
-    {
-      number: 8,
-      href: "#",
-    },
-    {
-      ellipsis: true,
-    },
-    {
-      number: 42,
-      href: "#",
-    },
-  ],
-  next: {
-    href: "#",
-  },
-  solid: true,
-  classes: "tna-pagination--demo",
-};
-
-export const NoNumbers = Template.bind({});
-NoNumbers.args = {
-  previous: {
-    href: "#",
-    text: "TS 11/45/166",
-    title: "From the catalogue: TS 11/45/166",
-  },
-  currentItemText: "From the catalogue: TS 11/45/167",
-  next: {
-    href: "#",
-    text: "TS 11/45/168",
-    title: "From the catalogue: TS 11/45/168",
-  },
-  spaced: true,
-  classes: "tna-pagination--demo",
-};

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

@@ -1,39 +0,0 @@
-import PhaseBanner from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  phase: {
-    control: "text",
-  },
-  message: { control: "text" },
-  accent: { 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/Phase banner",
-  argTypes,
-};
-
-const Template = ({ phase, message, classes, attributes }) =>
-  PhaseBanner({
-    params: {
-      phase,
-      message,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  phase: "beta",
-  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
-};

package/nationalarchives/components/picture/picture.stories.js

@@ -1,75 +0,0 @@
-import Picture from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  src: { control: "text" },
-  width: { control: "number" },
-  height: { control: "number" },
-  sources: { control: "object" },
-  caption: { control: "text" },
-  informationLabelOpen: { control: "object" },
-  informationLabelClose: { control: "object" },
-  information: { 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/Picture",
-  argTypes,
-};
-
-const Template = ({
-  src,
-  width,
-  height,
-  sources,
-  caption,
-  informationLabelOpen,
-  informationLabelClose,
-  information,
-  classes,
-  attributes,
-}) =>
-  Picture({
-    params: {
-      src,
-      width,
-      height,
-      sources,
-      caption,
-      informationLabelOpen,
-      informationLabelClose,
-      information,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  alt: "The National Archives office",
-  width: 499,
-  height: 333,
-  caption: "<p>This is a pretty image</p>",
-  information: [
-    {
-      id: "transcript",
-      title: "Transcript",
-      body: "<p>Lorem ipsum transcript</p>",
-    },
-    {
-      id: "translation",
-      title: "Translation",
-      body: "<p>Lorem ipsum translation</p>",
-    },
-  ],
-  classes: "tna-picture--demo",
-};

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

@@ -1,76 +0,0 @@
-import Filters from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  items: { control: "object" },
-  stack: { control: "boolean" },
-  fill: { 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/Quick filters",
-  argTypes,
-};
-
-const Template = ({ items, stack, fill, classes, attributes }) =>
-  Filters({
-    params: {
-      items,
-      stack,
-      fill,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  items: [
-    {
-      label: "All",
-      href: "#?filter=all",
-      selected: true,
-    },
-    {
-      label: "Medieval (974—1485)",
-      href: "#?filter=alpha",
-    },
-    {
-      label: "Early Modern (1485—1714)",
-      href: "#?filter=beta",
-    },
-    {
-      label: "Georgians (1714—1837)",
-      href: "#?filter=gamma",
-    },
-    {
-      label: "Victorians (1837—1901)",
-      href: "#?filter=delta",
-    },
-    {
-      label: "Early 20th century (1901—1918)",
-      href: "#?filter=epsilon",
-    },
-    {
-      label: "Interwar (1918—1939)",
-      href: "#?filter=zeta",
-    },
-    {
-      label: "Second World War (1939—1945)",
-      href: "#?filter=eta",
-    },
-    {
-      label: "Postwar (1945—2000)",
-      href: "#?filter=theta",
-    },
-  ],
-  classes: "tna-quick-filters--demo",
-};