@nationalarchives/frontend 0.1.65 → 0.2.1

package/nationalarchives/components/global-header/global-header.stories.js

@@ -1,364 +0,0 @@
-import Header from "./template.njk";
-import macroOptions from "./macro-options.json";
-import { within, userEvent, expect } from "@storybook/test";
-import { customViewports } from "../../../../.storybook/viewports";
-
-const argTypes = {
-  logo: { control: "object" },
-  topNavigation: { control: "object" },
-  navigation: { control: "object" },
-  collapseOnMedium: { 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/Global header",
-  argTypes,
-  parameters: {
-    chromatic: { delay: 1000 },
-  },
-};
-
-const Template = ({
-  logo,
-  topNavigation,
-  navigation,
-  collapseOnMedium,
-  classes,
-  attributes,
-}) =>
-  Header({
-    params: {
-      logo,
-      topNavigation,
-      navigation,
-      collapseOnMedium,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  logo: {
-    href: "#/",
-  },
-  topNavigation: [
-    {
-      text: "Search",
-      href: "https://www.nationalarchives.gov.uk/search/",
-      icon: "search",
-    },
-    {
-      text: "Shop",
-      href: "https://shop.nationalarchives.gov.uk/",
-      icon: "shop",
-    },
-    {
-      text: "Sign in",
-      href: "#/sign-in",
-      icon: "user",
-    },
-  ],
-  navigation: [
-    {
-      text: "Visit",
-      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
-    },
-    {
-      text: "What’s on",
-      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
-    },
-    {
-      text: "Explore the collection",
-      href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
-    },
-    {
-      text: "Help using the archive",
-      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
-    },
-    {
-      text: "Education",
-      href: "https://www.nationalarchives.gov.uk/education/",
-    },
-    {
-      text: "Professional guidance and services",
-      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
-    },
-  ],
-  classes: "tna-global-header--demo",
-};
-Standard.play = async ({ canvasElement }) => {
-  await new Promise((r) => setTimeout(r, 100));
-
-  const $navigationItems = canvasElement.querySelector(
-    `.tna-global-header__navigation`,
-  );
-  const $navigationToggle = canvasElement.querySelector(
-    `.tna-global-header__navigation-button`,
-  );
-
-  await expect($navigationItems).toBeVisible();
-  await expect($navigationToggle).not.toBeVisible();
-};
-
-export const Medium = Template.bind({});
-Medium.parameters = {
-  viewport: {
-    defaultViewport: "medium",
-  },
-  chromatic: {
-    viewports: [customViewports["medium"].styles.width.replace(/px$/, "")],
-  },
-};
-Medium.args = {
-  logo: {
-    strapline: "Design System",
-    href: "#/",
-  },
-  topNavigation: [
-    {
-      text: "Search",
-      href: "https://www.nationalarchives.gov.uk/search/",
-      icon: "search",
-    },
-    {
-      text: "Shop",
-      href: "https://shop.nationalarchives.gov.uk/",
-      icon: "shop",
-    },
-    {
-      text: "Sign in",
-      href: "#/sign-in",
-      icon: "user",
-    },
-  ],
-  navigation: [
-    {
-      text: "Visit",
-      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
-    },
-    {
-      text: "What’s on",
-      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
-    },
-    {
-      text: "Explore the collection",
-      href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
-    },
-    {
-      text: "Help using the archive",
-      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
-    },
-    {
-      text: "Education",
-      href: "https://www.nationalarchives.gov.uk/education/",
-    },
-    {
-      text: "Professional guidance and services",
-      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
-    },
-  ],
-  classes: "tna-global-header--demo",
-};
-Medium.play = async ({ canvasElement }) => {
-  await new Promise((r) => setTimeout(r, 100));
-
-  const $navigationItems = canvasElement.querySelector(
-    `.tna-global-header__navigation`,
-  );
-  const $navigationToggle = canvasElement.querySelector(
-    `.tna-global-header__navigation-button`,
-  );
-
-  await expect($navigationItems).toBeVisible();
-  await expect($navigationToggle).not.toBeVisible();
-};
-
-export const MediumCollapsed = Template.bind({});
-MediumCollapsed.parameters = {
-  viewport: {
-    defaultViewport: "medium",
-  },
-  chromatic: {
-    viewports: [customViewports["medium"].styles.width.replace(/px$/, "")],
-  },
-};
-MediumCollapsed.args = {
-  logo: {
-    strapline: "Design System",
-    href: "#/",
-  },
-  topNavigation: [
-    {
-      text: "Search",
-      href: "https://www.nationalarchives.gov.uk/search/",
-      icon: "search",
-    },
-    {
-      text: "Shop",
-      href: "https://shop.nationalarchives.gov.uk/",
-      icon: "shop",
-    },
-    {
-      text: "Sign in",
-      href: "#/sign-in",
-      icon: "user",
-    },
-  ],
-  navigation: [
-    {
-      text: "Visit",
-      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
-    },
-    {
-      text: "What’s on",
-      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
-    },
-    {
-      text: "Explore the collection",
-      href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
-    },
-    {
-      text: "Help using the archive",
-      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
-    },
-    {
-      text: "Education",
-      href: "https://www.nationalarchives.gov.uk/education/",
-    },
-    {
-      text: "Professional guidance and services",
-      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
-    },
-  ],
-  collapseOnMedium: true,
-  classes: "tna-global-header--demo",
-};
-
-export const Mobile = Template.bind({});
-Mobile.parameters = {
-  viewport: {
-    defaultViewport: "small",
-  },
-  chromatic: {
-    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
-  },
-};
-Mobile.args = {
-  logo: {
-    strapline: "Design System",
-    href: "#/",
-  },
-  topNavigation: [
-    {
-      text: "Search",
-      href: "https://www.nationalarchives.gov.uk/search/",
-      icon: "search",
-    },
-    {
-      text: "Shop",
-      href: "https://shop.nationalarchives.gov.uk/",
-      icon: "shop",
-    },
-    {
-      text: "Sign in",
-      href: "#/sign-in",
-      icon: "user",
-    },
-  ],
-  navigation: [
-    {
-      text: "Visit",
-      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
-    },
-    {
-      text: "What’s on",
-      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
-    },
-    {
-      text: "Explore the collection",
-      href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
-    },
-    {
-      text: "Help using the archive",
-      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
-    },
-    {
-      text: "Education",
-      href: "https://www.nationalarchives.gov.uk/education/",
-    },
-    {
-      text: "Professional guidance and services",
-      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
-    },
-  ],
-  classes: "tna-global-header--demo",
-};
-Mobile.play = async ({ args, canvasElement, step }) => {
-  await new Promise((r) => setTimeout(r, 100));
-
-  const canvas = within(canvasElement);
-
-  const $navigationItems = canvasElement.querySelector(
-    `.tna-global-header__navigation`,
-  );
-  const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
-    canvas.getByText(navigationItem.text),
-  );
-  const $navigationToggle = canvasElement.querySelector(
-    `.tna-global-header__navigation-button`,
-  );
-
-  await step("Initial load", async () => {
-    await expect($navigationItems).not.toBeVisible();
-    await expect($navigationToggle).toBeVisible();
-    await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
-    await expect($linkA).not.toBeVisible();
-    await expect($linkB).not.toBeVisible();
-    await expect($linkC).not.toBeVisible();
-  });
-
-  await step("Open the menu", async () => {
-    await userEvent.click($navigationToggle);
-    await expect($navigationItems).toBeVisible();
-    await expect($navigationToggle).toBeVisible();
-    await expect($navigationToggle).toHaveAttribute("aria-expanded", "true");
-    await expect($linkA).toBeVisible();
-    await expect($linkB).toBeVisible();
-    await expect($linkC).toBeVisible();
-  });
-
-  await step("Close the menu", async () => {
-    await userEvent.click($navigationToggle);
-    await expect($navigationItems).not.toBeVisible();
-    await expect($navigationToggle).toBeVisible();
-    await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
-    await expect($linkA).not.toBeVisible();
-    await expect($linkB).not.toBeVisible();
-    await expect($linkC).not.toBeVisible();
-  });
-
-  // await step("Open the menu", async () => {
-  //   await userEvent.click($navigationToggle);
-  // });
-
-  // TODO
-  // await step("Press the escape key", async () => {
-  //   await expect($navigationItems).not.toBeVisible();
-  //   await expect($navigationToggle).toBeVisible();
-  //   await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
-  //   await expect($linkA).not.toBeVisible();
-  //   await expect($linkB).not.toBeVisible();
-  //   await expect($linkC).not.toBeVisible();
-  // });
-
-  $navigationToggle.blur();
-};

package/nationalarchives/components/grid/_index.scss

@@ -1 +0,0 @@
-@use "grid";

package/nationalarchives/components/grid/grid.css

@@ -1 +0,0 @@
-.tna-container{width:100%;max-width:1280px;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;box-sizing:border-box}.tna-container--no-padding,.tna-container--no-padding-all{max-width:1280px-64px}.tna-container--max{max-width:none}.tna-container--centred{justify-content:center}.tna-column{padding-right:16px;padding-left:16px;box-sizing:border-box}.tna-column--container{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:stretch}.tna-column--align-top{align-self:flex-start}.tna-column--align-centre{align-self:center}.tna-column--align-bottom{align-self:flex-end}.tna-column--full{width:100%;flex:none}.tna-column--width-1-12{width:8.3333333333%;flex:none}.tna-column--margin-right-1-12{margin-right:8.3333333333%}.tna-column--margin-left-1-12{margin-left:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6{margin-right:16.6666666667%}.tna-column--margin-left-1-6{margin-left:16.6666666667%}.tna-column--width-1-4{width:25%;flex:none}.tna-column--margin-right-1-4{margin-right:25%}.tna-column--margin-left-1-4{margin-left:25%}.tna-column--width-1-3{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3{margin-right:33.3333333333%}.tna-column--margin-left-1-3{margin-left:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%;flex:none}.tna-column--margin-right-5-12{margin-right:41.6666666667%}.tna-column--margin-left-5-12{margin-left:41.6666666667%}.tna-column--width-1-2{width:50%;flex:none}.tna-column--margin-right-1-2{margin-right:50%}.tna-column--margin-left-1-2{margin-left:50%}.tna-column--width-7-12{width:58.3333333333%;flex:none}.tna-column--margin-right-7-12{margin-right:58.3333333333%}.tna-column--margin-left-7-12{margin-left:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3{margin-right:66.6666666667%}.tna-column--margin-left-2-3{margin-left:66.6666666667%}.tna-column--width-3-4{width:75%;flex:none}.tna-column--margin-right-3-4{margin-right:75%}.tna-column--margin-left-3-4{margin-left:75%}.tna-column--width-5-6{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6{margin-right:83.3333333333%}.tna-column--margin-left-5-6{margin-left:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%;flex:none}.tna-column--margin-right-11-12{margin-right:91.6666666667%}.tna-column--margin-left-11-12{margin-left:91.6666666667%}.tna-column--flex-1{width:auto;flex:1 0}.tna-column--flex-2{width:auto;flex:2 0}.tna-column--flex-3{width:auto;flex:3 0}.tna-column--order-1{order:1}.tna-column--order-2{order:2}.tna-column--order-3{order:3}.tna-column--order-4{order:4}@media(min-width: 48.0625em)and (max-width: 64em){.tna-column--full-medium{width:100%;flex:none}.tna-column--width-1-6-medium{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6-medium{margin-right:16.6666666667%}.tna-column--margin-left-1-6-medium{margin-left:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3-medium{margin-right:33.3333333333%}.tna-column--margin-left-1-3-medium{margin-left:33.3333333333%}.tna-column--width-1-2-medium{width:50%;flex:none}.tna-column--margin-right-1-2-medium{margin-right:50%}.tna-column--margin-left-1-2-medium{margin-left:50%}.tna-column--width-2-3-medium{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3-medium{margin-right:66.6666666667%}.tna-column--margin-left-2-3-medium{margin-left:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6-medium{margin-right:83.3333333333%}.tna-column--margin-left-5-6-medium{margin-left:83.3333333333%}.tna-column--no-margin-right-medium{margin-right:0}.tna-column--no-margin-left-medium{margin-left:0}.tna-column--flex-1-medium{width:auto;flex:1 0}.tna-column--flex-2-medium{width:auto;flex:2 0}.tna-column--flex-3-medium{width:auto;flex:3 0}.tna-column--order-1-medium{order:1}.tna-column--order-2-medium{order:2}.tna-column--order-3-medium{order:3}.tna-column--order-4-medium{order:4}}@media(max-width: 30em){.tna-container{padding-right:8px;padding-left:8px}.tna-column{padding-right:8px;padding-left:8px}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-column--full-small{width:100%;flex:none}.tna-column--width-1-4-small{width:25%;flex:none}.tna-column--margin-right-1-4-small{margin-right:25%}.tna-column--margin-left-1-4-small{margin-left:25%}.tna-column--width-1-2-small{width:50%;flex:none}.tna-column--margin-right-1-2-small{margin-right:50%}.tna-column--margin-left-1-2-small{margin-left:50%}.tna-column--width-3-4-small{width:75%;flex:none}.tna-column--margin-right-3-4-small{margin-right:75%}.tna-column--margin-left-3-4-small{margin-left:75%}.tna-column--no-margin-right-small{margin-right:0}.tna-column--no-margin-left-small{margin-left:0}.tna-column--flex-1-small{width:auto;flex:1 0}.tna-column--flex-2-small{width:auto;flex:2 0}.tna-column--flex-3-small{width:auto;flex:3 0}.tna-column--order-1-small{order:1}.tna-column--order-2-small{order:2}.tna-column--order-3-small{order:3}.tna-column--order-4-small{order:4}}@media(max-width: 30em){.tna-column--full-tiny{width:100%;flex:none}.tna-column--width-1-2-tiny{width:50%;flex:none}.tna-column--margin-right-1-2-tiny{margin-right:50%}.tna-column--margin-left-1-2-tiny{margin-left:50%}.tna-column--no-margin-right-tiny{margin-right:0}.tna-column--no-margin-left-tiny{margin-left:0}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--order-1-tiny{order:1}.tna-column--order-2-tiny{order:2}.tna-column--order-3-tiny{order:3}.tna-column--order-4-tiny{order:4}}.tna-container--no-padding,.tna-container--no-padding-all,.tna-container--no-padding-all>.tna-column,.tna-column--no-padding,.tna-column--container--no-padding-all,.tna-column--container--no-padding-all>.tna-column{padding-right:0;padding-left:0}/*# sourceMappingURL=grid.css.map */

package/nationalarchives/components/grid/grid.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAKA,eACE,WACA,UCPwB,ODQxB,kBACA,iBACA,mBACA,kBAEA,aACA,eACA,oBACA,2BAEA,sBAEA,0DAEE,sBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,oBACA,wBAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBEtBA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAkCN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,ECnDf,kDDZE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,oCACE,eAGF,mCACE,cAKF,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GCvCf,wBHSA,eACE,kBACA,iBAGF,YACE,kBACA,kBGtBF,kDDlBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,mCACE,eAGF,kCACE,cAKF,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GCvCf,wBDxBE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,kCACE,eAGF,iCACE,cAKF,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GFXjB,uNAME,gBACA","file":"grid.css","sourcesContent":["@use \"sass:math\";\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/media\";\n@use \"../../tools/grid\";\n\n.tna-container {\n  width: 100%;\n  max-width: gridVars.$largest-container-width;\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: grid.gutter-width-half();\n  padding-left: grid.gutter-width-half();\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  justify-content: flex-start;\n\n  box-sizing: border-box;\n\n  &--no-padding,\n  &--no-padding-all {\n    max-width: gridVars.$largest-container-width - grid.gutter-width-double();\n  }\n\n  &--max {\n    max-width: none;\n  }\n\n  &--centred {\n    justify-content: center;\n  }\n}\n\n.tna-column {\n  padding-right: grid.gutter-width-half();\n  padding-left: grid.gutter-width-half();\n\n  box-sizing: border-box;\n\n  &--container {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: stretch;\n    justify-content: stretch;\n  }\n\n  &--align-top {\n    align-self: flex-start;\n  }\n\n  &--align-centre {\n    align-self: center;\n  }\n\n  &--align-bottom {\n    align-self: flex-end;\n  }\n}\n\n@include grid.columns-generator(gridVars.$column-count);\n\n@include media.on-medium {\n  @include grid.columns-generator(gridVars.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n  .tna-container {\n    padding-right: grid.gutter-width-tiny-half();\n    padding-left: grid.gutter-width-tiny-half();\n  }\n\n  .tna-column {\n    padding-right: grid.gutter-width-tiny-half();\n    padding-left: grid.gutter-width-tiny-half();\n  }\n}\n\n@include media.on-small {\n  @include grid.columns-generator(gridVars.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n  @include grid.columns-generator(gridVars.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n  padding-right: 0;\n  padding-left: 0;\n}\n","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"sass:math\";\n@use \"../variables/grid\";\n@use \"spacing\";\n\n@function gutter-width() {\n  @return spacing.space(grid.$gutter-width);\n}\n\n@function gutter-width-half() {\n  @return spacing.space(math.div(grid.$gutter-width, 2));\n}\n\n@function gutter-width-double() {\n  @return spacing.space(grid.$gutter-width * 2);\n}\n\n@function gutter-width-tiny() {\n  @return spacing.space(grid.$gutter-width-tiny);\n}\n\n@function gutter-width-tiny-half() {\n  @return spacing.space(math.div(grid.$gutter-width-tiny, 2));\n}\n\n@function gutter-width-tiny-double() {\n  @return spacing.space(grid.$gutter-width-tiny * 2);\n}\n\n@mixin columns-generator($count, $suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  .tna-column {\n    &--full#{$suffix} {\n      width: 100%;\n      flex: none;\n    }\n\n    @for $i from 1 through $count - 1 {\n      $simplest-fraction-found: false;\n\n      @for $j from math.div($count, 2) through 1 {\n        @if (\n          $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n        ) {\n          &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            width: math.div(100%, $count) * $i;\n            flex: none;\n          }\n\n          &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            margin-right: math.div(100%, $count) * $i;\n          }\n\n          &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            margin-left: math.div(100%, $count) * $i;\n          }\n\n          $simplest-fraction-found: true;\n        }\n      }\n\n      @if $simplest-fraction-found != true {\n        &--width-#{$i}-#{$count}#{$suffix} {\n          width: math.div(100%, $count) * $i;\n          flex: none;\n        }\n\n        &--margin-right-#{$i}-#{$count}#{$suffix} {\n          margin-right: math.div(100%, $count) * $i;\n        }\n\n        &--margin-left-#{$i}-#{$count}#{$suffix} {\n          margin-left: math.div(100%, $count) * $i;\n        }\n      }\n    }\n\n    @if $suffix != \"\" {\n      &--no-margin-right#{$suffix} {\n        margin-right: 0;\n      }\n\n      &--no-margin-left#{$suffix} {\n        margin-left: 0;\n      }\n    }\n\n    @for $i from 1 through 3 {\n      &--flex-#{$i}#{$suffix} {\n        width: auto;\n\n        flex: $i 0;\n      }\n    }\n\n    @for $i from 1 through 4 {\n      &--order-#{$i}#{$suffix} {\n        order: $i;\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}

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

@@ -1,279 +0,0 @@
-import Header from "./template.njk";
-import macroOptions from "./macro-options.json";
-
-const argTypes = {
-  columns: { control: "object" },
-  maxWidth: { control: "boolean" },
-  noPadding: { control: "boolean" },
-  noPaddingAll: { control: "boolean" },
-  htmlElement: { 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/Grid",
-  argTypes,
-};
-
-const Template = ({
-  columns,
-  maxWidth,
-  noPadding,
-  noPaddingAll,
-  htmlElement,
-  classes,
-  attributes,
-}) =>
-  Header({
-    params: {
-      columns,
-      maxWidth,
-      noPadding,
-      noPaddingAll,
-      htmlElement,
-      classes,
-      attributes,
-    },
-  });
-
-export const Standard = Template.bind({});
-Standard.args = {
-  classes: "tna-grid--demo",
-  columns: [
-    {
-      html: "<p>Full width</p>",
-      width: "full",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Two thirds</p>",
-      width: "2-3",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Two thirds</p>",
-      width: "2-3",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Quarter</p>",
-      width: "1-4",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-    {
-      html: "<p>Half</p>",
-      width: "1-2",
-    },
-    {
-      html: "<p>Third</p>",
-      width: "1-3",
-    },
-    {
-      html: "<p>Sixth</p>",
-      width: "1-6",
-    },
-  ],
-};
-
-export const Responsive = Template.bind({});
-const responsiveColumn = {
-  html: "<p>Responsive</p>",
-  width: "1-4",
-  widthMedium: "1-3",
-  widthSmall: "1-2",
-  widthTiny: "full",
-};
-Responsive.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Responsive.args = {
-  classes: "tna-grid--demo tna-grid--demo-tall",
-  columns: Array(12).fill({ ...responsiveColumn }),
-};
-
-export const Flex = Template.bind({});
-Flex.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Flex.args = {
-  classes: "tna-grid--demo",
-  columns: [
-    {
-      html: "<h1>A</h1>",
-      width: "1-4",
-    },
-    {
-      html: "<h1>B</h1>",
-      flex: 1,
-    },
-  ],
-};
-
-export const Order = Template.bind({});
-Order.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Order.args = {
-  classes: "tna-grid--demo tna-grid--demo-tall",
-  columns: [
-    {
-      html: "<h1>A</h1>",
-      width: "1-4",
-      order: 1,
-      orderMedium: 2,
-      orderSmall: 3,
-      orderTiny: 4,
-    },
-    {
-      html: "<h1>B</h1>",
-      width: "1-4",
-      order: 2,
-      orderMedium: 1,
-      orderSmall: 4,
-      orderTiny: 3,
-    },
-    {
-      html: "<h1>C</h1>",
-      width: "1-4",
-      order: 3,
-      orderMedium: 4,
-      orderSmall: 1,
-      orderTiny: 2,
-    },
-    {
-      html: "<h1>D</h1>",
-      width: "1-4",
-      order: 4,
-      orderMedium: 3,
-      orderSmall: 2,
-      orderTiny: 1,
-    },
-  ],
-};
-
-export const Margin = Template.bind({});
-Margin.parameters = {
-  chromatic: { disableSnapshot: true },
-};
-Margin.args = {
-  classes: "tna-grid--demo",
-  columns: [
-    {
-      html: "<h1>A</h1>",
-      width: "1-4",
-    },
-    {
-      html: "<h1>B</h1>",
-      width: "1-4",
-      marginLeft: "1-12",
-    },
-    {
-      html: "<h1>C</h1>",
-      width: "1-4",
-      marginLeft: "1-6",
-    },
-  ],
-};

package/nationalarchives/components/grid/macro.njk

@@ -1,3 +0,0 @@
-{% macro tnaGrid(params) %}
-  {%- include "nationalarchives/components/grid/template.njk" -%}
-{% endmacro %}