@nationalarchives/frontend 0.1.10-prerelease → 0.1.11-prerelease

package/nationalarchives/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = root[\"TNAFrontend\"] || {}, root[\"TNAFrontend\"][\"components/tabs/tabs\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n  constructor($module) {\n    this.$module = $module;\n    this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n    this.$tabListItemLinks =\n      $module &&\n      this.$tabList &&\n      $module.querySelectorAll(\".tna-tabs__list-item-link\");\n    this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n  }\n\n  init() {\n    if (\n      !this.$module ||\n      !this.$tabList ||\n      !this.$tabListItemLinks ||\n      !this.$tabItems ||\n      this.$tabListItemLinks.length !== this.$tabItems.length\n    ) {\n      return;\n    }\n\n    this.sticky = this.$module.classList.contains(\"tna-tabs--sticky\");\n\n    const startingTarget = window.location.hash.replace(/^#/, \"\");\n\n    this.$newTabList = document.createElement(\"div\");\n    this.$newTabList.setAttribute(\"role\", \"tablist\");\n    this.$newTabList.setAttribute(\"class\", this.$tabList.getAttribute(\"class\"));\n\n    this.$tabItems.forEach(($tabItem, index) => {\n      $tabItem.setAttribute(\"role\", \"tabpanel\");\n      $tabItem.setAttribute(\n        \"aria-labelledby\",\n        `${$tabItem.getAttribute(\"id\")}-tab`,\n      );\n      $tabItem.setAttribute(\"tabindex\", \"0\");\n      if (\n        (startingTarget && $tabItem.getAttribute(\"id\") !== startingTarget) ||\n        (!startingTarget && index > 0)\n      ) {\n        $tabItem.setAttribute(\"hidden\", true);\n      }\n    });\n\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      const $replacementButton = document.createElement(\"button\");\n      $replacementButton.innerText = $tabListItemLink.innerText;\n      $replacementButton.setAttribute(\n        \"class\",\n        $tabListItemLink.getAttribute(\"class\"),\n      );\n      $replacementButton.setAttribute(\"role\", \"tab\");\n      $replacementButton.setAttribute(\n        \"id\",\n        $tabListItemLink.getAttribute(\"id\"),\n      );\n      $replacementButton.setAttribute(\n        \"aria-controls\",\n        $tabListItemLink.getAttribute(\"href\").replace(/^#/, \"\"),\n      );\n      $replacementButton.setAttribute(\"tabindex\", \"-1\");\n      this.$newTabList.appendChild($replacementButton);\n    });\n\n    this.$tabList.replaceWith(this.$newTabList);\n\n    this.$tabListItemLinks = this.$module.querySelectorAll(\n      \".tna-tabs__list-item-link\",\n    );\n\n    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n      if (\n        (startingTarget &&\n          $tabListItemLink.getAttribute(\"aria-controls\") ===\n            `${startingTarget}`) ||\n        (!startingTarget && index === 0)\n      ) {\n        $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n      }\n\n      $tabListItemLink.addEventListener(\n        \"keydown\",\n        (e) => this.handleItemLinkKeyDown(e),\n        true,\n      );\n      $tabListItemLink.addEventListener(\n        \"click\",\n        (e) => this.handleItemLinkClick(e),\n        true,\n      );\n    });\n  }\n\n  handleItemLinkClick(itemLinkClickEvent) {\n    itemLinkClickEvent.preventDefault();\n    const targetItem =\n      itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n\n    this.switchTab(targetItem);\n  }\n\n  handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n    const targetItem = itemLinkKeyDownEvent.currentTarget;\n    let overwriteKeyAction = false;\n\n    switch (itemLinkKeyDownEvent.key) {\n      case \"ArrowLeft\":\n        this.setSelectedToPreviousTab(targetItem);\n        overwriteKeyAction = true;\n        break;\n\n      case \"ArrowRight\":\n        this.setSelectedToNextTab(targetItem);\n        overwriteKeyAction = true;\n        break;\n\n      case \"Home\":\n        this.switchTab(this.$tabListItemLinks[0].getAttribute(\"aria-controls\"));\n        overwriteKeyAction = true;\n        break;\n\n      case \"End\":\n        this.switchTab(\n          this.$tabListItemLinks[\n            this.$tabListItemLinks.length - 1\n          ].getAttribute(\"aria-controls\"),\n        );\n        overwriteKeyAction = true;\n        break;\n\n      default:\n        break;\n    }\n\n    if (overwriteKeyAction) {\n      itemLinkKeyDownEvent.stopPropagation();\n      itemLinkKeyDownEvent.preventDefault();\n    }\n  }\n\n  setSelectedToNextTab(targetItem) {\n    console.log(\"setSelectedToNextTab\", targetItem);\n    const currentIndex = [...this.$tabListItemLinks].findIndex(\n      ($tabListItemLink) =>\n        $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n    );\n    let newIndex;\n    if (currentIndex < this.$tabListItemLinks.length - 1) {\n      newIndex = currentIndex + 1;\n    } else {\n      newIndex = 0;\n    }\n    console.log(currentIndex, newIndex);\n    this.switchTab(\n      this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n    );\n  }\n\n  setSelectedToPreviousTab(targetItem) {\n    console.log(\"setSelectedToPreviousTab\", targetItem);\n    const currentIndex = [...this.$tabListItemLinks].findIndex(\n      ($tabListItemLink) =>\n        $tabListItemLink.getAttribute(\"id\") === targetItem.getAttribute(\"id\"),\n    );\n    let newIndex;\n    if (currentIndex >= 1) {\n      newIndex = currentIndex - 1;\n    } else {\n      newIndex = this.$tabListItemLinks.length - 1;\n    }\n    console.log(currentIndex, newIndex);\n    this.switchTab(\n      this.$tabListItemLinks[newIndex].getAttribute(\"aria-controls\"),\n    );\n  }\n\n  switchTab(targetId) {\n    this.$tabListItemLinks.forEach(($tabListItemLink) => {\n      if ($tabListItemLink.getAttribute(\"aria-controls\") === targetId) {\n        $tabListItemLink.classList.add(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", true);\n        $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n        $tabListItemLink.focus();\n      } else {\n        $tabListItemLink.classList.remove(\"tna-tabs__list-item-link--selected\");\n        $tabListItemLink.setAttribute(\"aria-selected\", false);\n        $tabListItemLink.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n\n    this.$tabItems.forEach(($tabItem) => {\n      if ($tabItem.getAttribute(\"id\") === targetId) {\n        $tabItem.removeAttribute(\"hidden\");\n        $tabItem.setAttribute(\"tabindex\", \"0\");\n      } else {\n        $tabItem.setAttribute(\"hidden\", true);\n        $tabItem.setAttribute(\"tabindex\", \"-1\");\n      }\n    });\n\n    if (this.sticky) {\n      if (history.replaceState) {\n        history.replaceState(null, null, `#${targetId}`);\n      } else {\n        location.hash = `#${targetId}`;\n      }\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","$module","_classCallCheck","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","_this","length","sticky","classList","contains","startingTarget","window","location","hash","replace","$newTabList","document","createElement","setAttribute","getAttribute","forEach","$tabItem","index","concat","$tabListItemLink","$replacementButton","innerText","appendChild","replaceWith","add","addEventListener","e","handleItemLinkKeyDown","handleItemLinkClick","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTab","itemLinkKeyDownEvent","overwriteKeyAction","setSelectedToPreviousTab","setSelectedToNextTab","stopPropagation","console","log","newIndex","currentIndex","_toConsumableArray","findIndex","targetId","focus","remove","removeAttribute","history","replaceState"],"sourceRoot":""}

package/nationalarchives/components/tabs/tabs.mjs

@@ -0,0 +1,214 @@
+export class Tabs {
+  constructor($module) {
+    this.$module = $module;
+    this.$tabList = $module && $module.querySelector(".tna-tabs__list");
+    this.$tabListItemLinks =
+      $module &&
+      this.$tabList &&
+      $module.querySelectorAll(".tna-tabs__list-item-link");
+    this.$tabItems = $module && $module.querySelectorAll(".tna-tabs__item");
+  }
+
+  init() {
+    if (
+      !this.$module ||
+      !this.$tabList ||
+      !this.$tabListItemLinks ||
+      !this.$tabItems ||
+      this.$tabListItemLinks.length !== this.$tabItems.length
+    ) {
+      return;
+    }
+
+    this.sticky = this.$module.classList.contains("tna-tabs--sticky");
+
+    const startingTarget = window.location.hash.replace(/^#/, "");
+
+    this.$newTabList = document.createElement("div");
+    this.$newTabList.setAttribute("role", "tablist");
+    this.$newTabList.setAttribute("class", this.$tabList.getAttribute("class"));
+
+    this.$tabItems.forEach(($tabItem, index) => {
+      $tabItem.setAttribute("role", "tabpanel");
+      $tabItem.setAttribute(
+        "aria-labelledby",
+        `${$tabItem.getAttribute("id")}-tab`,
+      );
+      $tabItem.setAttribute("tabindex", "0");
+      if (
+        (startingTarget && $tabItem.getAttribute("id") !== startingTarget) ||
+        (!startingTarget && index > 0)
+      ) {
+        $tabItem.setAttribute("hidden", true);
+      }
+    });
+
+    this.$tabListItemLinks.forEach(($tabListItemLink) => {
+      const $replacementButton = document.createElement("button");
+      $replacementButton.innerText = $tabListItemLink.innerText;
+      $replacementButton.setAttribute(
+        "class",
+        $tabListItemLink.getAttribute("class"),
+      );
+      $replacementButton.setAttribute("role", "tab");
+      $replacementButton.setAttribute(
+        "id",
+        $tabListItemLink.getAttribute("id"),
+      );
+      $replacementButton.setAttribute(
+        "aria-controls",
+        $tabListItemLink.getAttribute("href").replace(/^#/, ""),
+      );
+      $replacementButton.setAttribute("tabindex", "-1");
+      this.$newTabList.appendChild($replacementButton);
+    });
+
+    this.$tabList.replaceWith(this.$newTabList);
+
+    this.$tabListItemLinks = this.$module.querySelectorAll(
+      ".tna-tabs__list-item-link",
+    );
+
+    this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
+      if (
+        (startingTarget &&
+          $tabListItemLink.getAttribute("aria-controls") ===
+            `${startingTarget}`) ||
+        (!startingTarget && index === 0)
+      ) {
+        $tabListItemLink.classList.add("tna-tabs__list-item-link--selected");
+        $tabListItemLink.setAttribute("aria-selected", true);
+        $tabListItemLink.setAttribute("tabindex", "0");
+      } else {
+        $tabListItemLink.setAttribute("aria-selected", false);
+      }
+
+      $tabListItemLink.addEventListener(
+        "keydown",
+        (e) => this.handleItemLinkKeyDown(e),
+        true,
+      );
+      $tabListItemLink.addEventListener(
+        "click",
+        (e) => this.handleItemLinkClick(e),
+        true,
+      );
+    });
+  }
+
+  handleItemLinkClick(itemLinkClickEvent) {
+    itemLinkClickEvent.preventDefault();
+    const targetItem =
+      itemLinkClickEvent.currentTarget.getAttribute("aria-controls");
+
+    this.switchTab(targetItem);
+  }
+
+  handleItemLinkKeyDown(itemLinkKeyDownEvent) {
+    const targetItem = itemLinkKeyDownEvent.currentTarget;
+    let overwriteKeyAction = false;
+
+    switch (itemLinkKeyDownEvent.key) {
+      case "ArrowLeft":
+        this.setSelectedToPreviousTab(targetItem);
+        overwriteKeyAction = true;
+        break;
+
+      case "ArrowRight":
+        this.setSelectedToNextTab(targetItem);
+        overwriteKeyAction = true;
+        break;
+
+      case "Home":
+        this.switchTab(this.$tabListItemLinks[0].getAttribute("aria-controls"));
+        overwriteKeyAction = true;
+        break;
+
+      case "End":
+        this.switchTab(
+          this.$tabListItemLinks[
+            this.$tabListItemLinks.length - 1
+          ].getAttribute("aria-controls"),
+        );
+        overwriteKeyAction = true;
+        break;
+
+      default:
+        break;
+    }
+
+    if (overwriteKeyAction) {
+      itemLinkKeyDownEvent.stopPropagation();
+      itemLinkKeyDownEvent.preventDefault();
+    }
+  }
+
+  setSelectedToNextTab(targetItem) {
+    console.log("setSelectedToNextTab", targetItem);
+    const currentIndex = [...this.$tabListItemLinks].findIndex(
+      ($tabListItemLink) =>
+        $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
+    );
+    let newIndex;
+    if (currentIndex < this.$tabListItemLinks.length - 1) {
+      newIndex = currentIndex + 1;
+    } else {
+      newIndex = 0;
+    }
+    console.log(currentIndex, newIndex);
+    this.switchTab(
+      this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
+    );
+  }
+
+  setSelectedToPreviousTab(targetItem) {
+    console.log("setSelectedToPreviousTab", targetItem);
+    const currentIndex = [...this.$tabListItemLinks].findIndex(
+      ($tabListItemLink) =>
+        $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
+    );
+    let newIndex;
+    if (currentIndex >= 1) {
+      newIndex = currentIndex - 1;
+    } else {
+      newIndex = this.$tabListItemLinks.length - 1;
+    }
+    console.log(currentIndex, newIndex);
+    this.switchTab(
+      this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
+    );
+  }
+
+  switchTab(targetId) {
+    this.$tabListItemLinks.forEach(($tabListItemLink) => {
+      if ($tabListItemLink.getAttribute("aria-controls") === targetId) {
+        $tabListItemLink.classList.add("tna-tabs__list-item-link--selected");
+        $tabListItemLink.setAttribute("aria-selected", true);
+        $tabListItemLink.setAttribute("tabindex", "0");
+        $tabListItemLink.focus();
+      } else {
+        $tabListItemLink.classList.remove("tna-tabs__list-item-link--selected");
+        $tabListItemLink.setAttribute("aria-selected", false);
+        $tabListItemLink.setAttribute("tabindex", "-1");
+      }
+    });
+
+    this.$tabItems.forEach(($tabItem) => {
+      if ($tabItem.getAttribute("id") === targetId) {
+        $tabItem.removeAttribute("hidden");
+        $tabItem.setAttribute("tabindex", "0");
+      } else {
+        $tabItem.setAttribute("hidden", true);
+        $tabItem.setAttribute("tabindex", "-1");
+      }
+    });
+
+    if (this.sticky) {
+      if (history.replaceState) {
+        history.replaceState(null, null, `#${targetId}`);
+      } else {
+        location.hash = `#${targetId}`;
+      }
+    }
+  }
+}

package/nationalarchives/components/tabs/tabs.stories.js

@@ -0,0 +1,302 @@
+import Tabs from "./template.njk";
+import macroOptions from "./macro-options.json";
+import { expect } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+
+const argTypes = {
+  title: { control: "text" },
+  items: { control: "array" },
+  sticky: { 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: "Work in progress/Components/Tabs",
+  argTypes,
+};
+
+const Template = ({ title, items, sticky, classes, attributes }) => {
+  return Tabs({
+    params: {
+      title,
+      items,
+      sticky,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  title: "Example tabs",
+  items: [
+    {
+      id: "unique-id-a",
+      title: "Alpha section",
+      body: "<h2>Alpha title</h2><p>Lorem ipsum</p>",
+    },
+    {
+      id: "unique-id-b",
+      title: "Beta section",
+      body: "<h2>Beta title</h2><p>Lorem ipsum</p>",
+    },
+    {
+      id: "unique-id-c",
+      title: "Gamma section",
+      body: "<h2>Gamma title</h2><p>Lorem ipsum</p>",
+    },
+  ],
+  classes: "tna-tabs--demo",
+};
+
+export const Test = Template.bind({});
+Test.args = {
+  title: "Example tabs",
+  items: [
+    {
+      id: "unique-id-a",
+      title: "Alpha section",
+      body: "<h2>Alpha title</h2><p>Lorem ipsum</p>",
+    },
+    {
+      id: "unique-id-b",
+      title: "Beta section",
+      body: "<h2>Beta title</h2><p>Lorem ipsum</p>",
+    },
+    {
+      id: "unique-id-c",
+      title: "Gamma section",
+      body: "<h2>Gamma title</h2><p>Lorem ipsum</p>",
+    },
+  ],
+  classes: "tna-tabs--demo",
+};
+
+Test.play = async ({ args, canvasElement, step }) => {
+  const canvas = within(canvasElement);
+
+  const tablist = canvas.getByRole("tablist");
+  const [buttonA, buttonB, buttonC] = args.items.map((item) =>
+    canvas.getByText(item.title),
+  );
+  const [sectionA, sectionB, sectionC] = args.items.map((item) =>
+    canvasElement.querySelector(`#${item.id}`),
+  );
+
+  const expectButtonToBeCurrent = async (button) => {
+    await expect(button).toHaveAttribute("tabindex", "0");
+    await expect(button).toHaveAttribute("aria-selected", "true");
+    await expect(button).toHaveFocus();
+  };
+
+  const expectButtonNotToBeCurrent = async (button) => {
+    await expect(button).toHaveAttribute("tabindex", "-1");
+    await expect(button).toHaveAttribute("aria-selected", "false");
+  };
+
+  const expectSectionToBeCurrent = async (section) => {
+    await expect(section).toBeVisible();
+    await expect(section).toHaveAttribute("tabindex", "0");
+  };
+
+  const expectSectionNotToBeCurrent = async (section) => {
+    await expect(section).not.toBeVisible();
+    await expect(section).toHaveAttribute("tabindex", "-1");
+  };
+
+  const expectButtonAndSectionAToBeCurrent = async (section) => {
+    await step("Test tab buttons", async () => {
+      await expectButtonToBeCurrent(buttonA);
+      await expectButtonNotToBeCurrent(buttonB);
+      await expectButtonNotToBeCurrent(buttonC);
+    });
+
+    await step("Test tab sections", async () => {
+      await expectSectionToBeCurrent(sectionA);
+      await expectSectionNotToBeCurrent(sectionB);
+      await expectSectionNotToBeCurrent(sectionC);
+    });
+  };
+
+  const expectButtonAndSectionBToBeCurrent = async (section) => {
+    await step("Test tab buttons", async () => {
+      await expectButtonNotToBeCurrent(buttonA);
+      await expectButtonToBeCurrent(buttonB);
+      await expectButtonNotToBeCurrent(buttonC);
+    });
+
+    await step("Test tab sections", async () => {
+      await expectSectionNotToBeCurrent(sectionA);
+      await expectSectionToBeCurrent(sectionB);
+      await expectSectionNotToBeCurrent(sectionC);
+    });
+  };
+
+  const expectButtonAndSectionCToBeCurrent = async (section) => {
+    await step("Test tab buttons", async () => {
+      await expectButtonNotToBeCurrent(buttonA);
+      await expectButtonNotToBeCurrent(buttonB);
+      await expectButtonToBeCurrent(buttonC);
+    });
+
+    await step("Test tab sections", async () => {
+      await expectSectionNotToBeCurrent(sectionA);
+      await expectSectionNotToBeCurrent(sectionB);
+      await expectSectionToBeCurrent(sectionC);
+    });
+  };
+
+  await step("Initial load", async () => {
+    await step("Test tablist", async () => {
+      await expect(tablist).toBeDefined();
+      await expect(tablist).toBeVisible();
+    });
+
+    await step("Test tab buttons", async () => {
+      await step("First tab button", async () => {
+        await expect(buttonA).toBeVisible();
+        await expect(buttonA).toHaveAttribute("id", `${args.items[0].id}-tab`);
+        await expect(buttonA).toHaveAttribute("role", "tab");
+        await expect(buttonA).toHaveAttribute("tabindex", "0");
+        await expect(buttonA).toHaveAttribute("aria-selected", "true");
+        await expect(buttonA).toHaveAttribute(
+          "aria-controls",
+          args.items[0].id,
+        );
+      });
+
+      await step("Second tab button", async () => {
+        await expect(buttonB).toBeVisible();
+        await expect(buttonB).toHaveAttribute("id", `${args.items[1].id}-tab`);
+        await expect(buttonB).toHaveAttribute("role", "tab");
+        await expect(buttonB).toHaveAttribute("tabindex", "-1");
+        await expect(buttonB).toHaveAttribute("aria-selected", "false");
+        await expect(buttonB).toHaveAttribute(
+          "aria-controls",
+          args.items[1].id,
+        );
+      });
+
+      await step("Third tab button", async () => {
+        await expect(buttonC).toBeVisible();
+        await expect(buttonC).toHaveAttribute("id", `${args.items[2].id}-tab`);
+        await expect(buttonC).toHaveAttribute("role", "tab");
+        await expect(buttonC).toHaveAttribute("tabindex", "-1");
+        await expect(buttonC).toHaveAttribute("aria-selected", "false");
+        await expect(buttonC).toHaveAttribute(
+          "aria-controls",
+          args.items[2].id,
+        );
+      });
+    });
+
+    await step("Test tab sections", async () => {
+      await expect(sectionA).toBeVisible();
+      await expect(sectionA).toHaveAttribute("id", args.items[0].id);
+      await expect(sectionA).toHaveAttribute("role", "tabpanel");
+      await expect(sectionA).toHaveAttribute(
+        "aria-labelledby",
+        `${args.items[0].id}-tab`,
+      );
+      await expect(sectionA).toHaveAttribute("tabindex", "0");
+
+      await expect(sectionB).not.toBeVisible();
+      await expect(sectionB).toHaveAttribute("id", args.items[1].id);
+      await expect(sectionB).toHaveAttribute("role", "tabpanel");
+      await expect(sectionB).toHaveAttribute(
+        "aria-labelledby",
+        `${args.items[1].id}-tab`,
+      );
+      await expect(sectionB).toHaveAttribute("tabindex", "0");
+
+      await expect(sectionC).not.toBeVisible();
+      await expect(sectionC).toHaveAttribute("id", args.items[2].id);
+      await expect(sectionC).toHaveAttribute("role", "tabpanel");
+      await expect(sectionC).toHaveAttribute(
+        "aria-labelledby",
+        `${args.items[2].id}-tab`,
+      );
+      await expect(sectionC).toHaveAttribute("tabindex", "0");
+    });
+  });
+
+  await userEvent.click(buttonA);
+
+  await step("First tab (already selected)", async () => {
+    await userEvent.click(buttonA);
+    await expectButtonAndSectionAToBeCurrent();
+  });
+
+  await step("Second tab", async () => {
+    await userEvent.click(buttonB);
+    await expectButtonAndSectionBToBeCurrent();
+  });
+
+  await step("Third tab", async () => {
+    await userEvent.click(buttonC);
+    await expectButtonAndSectionCToBeCurrent();
+  });
+
+  await step("First tab", async () => {
+    await userEvent.click(buttonA);
+    await expectButtonAndSectionAToBeCurrent();
+  });
+
+  await step("Keyboard interaciton", async () => {
+    await step("Left/right", async () => {
+      await userEvent.click(buttonA);
+      await expectButtonAndSectionAToBeCurrent();
+
+      await userEvent.keyboard("[ArrowRight]");
+      await expectButtonAndSectionBToBeCurrent();
+
+      await userEvent.keyboard("[ArrowRight]");
+      await expectButtonAndSectionCToBeCurrent();
+
+      await userEvent.keyboard("[ArrowRight]");
+      await expectButtonAndSectionAToBeCurrent();
+
+      await userEvent.keyboard("[ArrowRight]");
+      await expectButtonAndSectionBToBeCurrent();
+
+      await userEvent.keyboard("[ArrowLeft]");
+      await expectButtonAndSectionAToBeCurrent();
+
+      await userEvent.keyboard("[ArrowLeft]");
+      await expectButtonAndSectionCToBeCurrent();
+
+      await userEvent.keyboard("[ArrowLeft]");
+      await expectButtonAndSectionBToBeCurrent();
+
+      await userEvent.keyboard("[ArrowLeft]");
+      await expectButtonAndSectionAToBeCurrent();
+    });
+
+    await step("Home/end", async () => {
+      await userEvent.click(buttonA);
+      await expectButtonAndSectionAToBeCurrent();
+
+      await userEvent.keyboard("[Home]");
+      await expectButtonAndSectionAToBeCurrent();
+
+      await userEvent.keyboard("[End]");
+      await expectButtonAndSectionCToBeCurrent();
+
+      await userEvent.keyboard("[End]");
+      await expectButtonAndSectionCToBeCurrent();
+
+      await userEvent.keyboard("[Home]");
+      await expectButtonAndSectionAToBeCurrent();
+    });
+
+    buttonA.blur();
+  });
+};

package/nationalarchives/components/tabs/template.njk

@@ -0,0 +1,20 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- if params.sticky -%}
+  {%- set containerClasses = containerClasses.concat('tna-tabs--sticky') -%}
+{%- endif -%}
+<div class="tna-tabs {{ containerClasses | join(' ') }}" data-module="tna-tabs" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <ul class="tna-tabs__list" aria-label="{{ params.title }}">
+  {% for item in params.items %}
+    <li class="tna-tabs__list-item">
+      <a href="#{{ item.id }}" class="tna-tabs__list-item-link" id="{{ item.id }}-tab">{{ item.title }}</a>
+    </li>
+  {% endfor %}
+  </ul>
+  <div class="tna-tabs__items">
+  {% for item in params.items %}
+    <section id="{{ item.id }}" class="tna-tabs__item">
+      {{ item.body | safe }}
+    </section>
+  {% endfor %}
+  </div>
+</div>

package/nationalarchives/patterns/_index.scss

@@ -0,0 +1 @@
+@forward "featured-collection/index";

package/nationalarchives/patterns/featured-collection/_index.scss

@@ -0,0 +1,13 @@
+@use "../../variables/colour" as colourVars;
+
+.tna-featured-collection {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+
+  background-color: colourVars.$tna-cream;
+
+  .tna-card {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+}

package/nationalarchives/patterns/featured-collection/featured-collection.stories.js

@@ -0,0 +1,35 @@
+import FeaturedCollection from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  heading: { 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: "Experimental/Patterns/Featured collection",
+  argTypes,
+};
+
+const Template = ({ heading, classes, attributes }) => {
+  return FeaturedCollection({
+    params: {
+      heading,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  heading: "Records from the collection",
+  classes: "tna-featured-collection--demo",
+};

package/nationalarchives/patterns/featured-collection/macro-options.json

@@ -0,0 +1,20 @@
+[
+  {
+    "name": "heading",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the featured collection."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the featured collection."
+  }
+]

package/nationalarchives/patterns/featured-collection/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaFeaturedCollection(params) %}
+  {%- include "nationalarchives/patterns/featured-collection/template.njk" -%}
+{% endmacro %}