@nationalarchives/frontend 0.1.9-prerelease → 0.1.11-prerelease

package/nationalarchives/components/profile/macro-options.json

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

package/nationalarchives/components/profile/macro.njk

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

package/nationalarchives/components/profile/profile.stories.js

@@ -0,0 +1,32 @@
+import Profile from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  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/Profile",
+  argTypes,
+};
+
+const Template = ({ classes, attributes }) => {
+  return Profile({
+    params: {
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  classes: "tna-profile--demo",
+};

package/nationalarchives/components/profile/template.njk

@@ -0,0 +1,15 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<div class="tna-profile tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="tna-column tna-column--order-2">
+    <img src="https://avatar.iran.liara.run/public" width="200" height="200" />
+  </div>
+  <div class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-column--order-1 tna-column--order-3-small tna-column--order-3-tiny">
+    <hgroup class="tna-hgroup tna-hgroup--xl">
+      <p class="tna-hgroup__supertitle">Profile</p>
+      <h1 class="tna-hgroup__title tna-heading">Max Smith</h1>
+    </hgroup>
+    <p>
+      Master of Documents
+    </p>
+  </div>
+</div>

package/nationalarchives/components/sensitive-image/fixtures.json

@@ -13,7 +13,7 @@
         "warning": "This is a gory photo",
         "action": "Show me the gory photo"
       },
-      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\">\n  <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n  <details class=\"tna-sensitive-image__details\">\n    <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n    <div class=\"tna-sensitive-image__container\">\n      <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n    </div>\n  </details>\n</div>",
+      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" /></div></details></div>",
       "hidden": false
     },
     {
@@ -29,7 +29,7 @@
         "action": "Show me the gory photo",
         "classes": "sensitive-image__test-class"
       },
-      "html": "<div class=\"tna-sensitive-image sensitive-image__test-class\" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\">\n  <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n  <details class=\"tna-sensitive-image__details\">\n    <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n    <div class=\"tna-sensitive-image__container\">\n      <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n    </div>\n  </details>\n</div>",
+      "html": "<div class=\"tna-sensitive-image sensitive-image__test-class\" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" /></div></details></div>",
       "hidden": false
     },
     {
@@ -47,7 +47,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\" data-testattribute=\"foobar\">\n  <p class=\"tna-sensitive-image__warning\">This is a gory photo</p>\n  <details class=\"tna-sensitive-image__details\">\n    <summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary>\n    <div class=\"tna-sensitive-image__container\">\n      <img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" />\n    </div>\n  </details>\n</div>",
+      "html": "<div class=\"tna-sensitive-image \" data-module=\"tna-sensitive-image\" style=\"--sensitive-image: url('https://picsum.photos/id/237/800/600'); --sensitive-image-width: 800; --sensitive-image-height: 600\" data-testattribute=\"foobar\"><p class=\"tna-sensitive-image__warning\">This is a gory photo</p><details class=\"tna-sensitive-image__details\"><summary class=\"tna-sensitive-image__show\" data-action=\"Show me the gory photo\">Show me the gory photo</summary><div class=\"tna-sensitive-image__container\"><img src=\"https://picsum.photos/id/237/800/600\" alt=\"A placeholder image\" class=\"tna-sensitive-image__image\" /></div></details></div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/sensitive-image/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaSensitiveImage(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/sensitive-image/template.njk" -%}
 {% endmacro %}

package/nationalarchives/components/sensitive-image/sensitive-image.stories.js

@@ -1,5 +1,4 @@
 import SensitiveImage from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 import { expect } from "@storybook/jest";
 import { within, userEvent } from "@storybook/testing-library";
@@ -20,7 +19,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Experimental/Sensitive image",
+  title: "Experimental/Components/Sensitive image",
   argTypes,
 };
 

package/nationalarchives/components/tabs/_index.scss

@@ -0,0 +1,148 @@
+@use "../../tools/colour";
+
+.tna-tabs {
+  margin-bottom: 1rem;
+
+  &__list {
+    margin: 0 0 1rem;
+    padding: 0;
+
+    display: flex;
+    align-items: stretch;
+
+    list-style: none;
+  }
+
+  &__list-item {
+    display: inline-flex;
+
+    & + & {
+      margin-left: 1rem;
+    }
+  }
+
+  &__list-item-link {
+    padding: 0.5rem 0;
+
+    display: flex;
+
+    align-items: center;
+    position: relative;
+
+    @include colour.colour-font("font-dark");
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: 700;
+    text-decoration: none;
+    line-height: 1.5;
+    text-align: center;
+
+    background: transparent;
+
+    border: none;
+
+    cursor: pointer;
+
+    & + & {
+      margin-left: 1.5rem;
+    }
+
+    &::after {
+      height: 0;
+
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      @include colour.colour-background("keyline-dark");
+
+      content: "";
+    }
+
+    &:hover,
+    &--selected,
+    &--selected:hover {
+      &::after {
+        height: 0.25rem;
+      }
+    }
+
+    .tna-template--js-enabled & {
+      @include colour.colour-font("font-light");
+
+      &:hover {
+        &::after {
+          height: 0.125rem;
+        }
+      }
+
+      &--selected {
+        @include colour.colour-font("font-dark");
+
+        &::after,
+        &:hover::after {
+          height: 0.25rem;
+        }
+      }
+    }
+  }
+
+  &__items {
+    // &:not(:target-within) {
+    //   .tna-tabs__item:first-child {
+    //     display: block;
+    //   }
+    // }
+  }
+
+  &__item {
+    display: none;
+
+    &:first-child {
+      display: block;
+    }
+
+    &:has(~ :target) {
+      display: none;
+    }
+
+    &:target {
+      display: block;
+    }
+
+    .tna-template--js-enabled & {
+      display: block;
+
+      &[hidden] {
+        display: none;
+      }
+    }
+
+    .tna-template--clicked &:focus {
+      outline: none;
+    }
+  }
+
+  @mixin high-contrast {
+    &__list-item-link {
+      padding-right: 1rem;
+      padding-left: 1rem;
+
+      overflow: hidden;
+
+      border: 1px transparent solid;
+      @include colour.colour-border("keyline-dark");
+    }
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include high-contrast;
+  }
+
+  @media (prefers-contrast: more) {
+    .tna-template--system-theme & {
+      @include high-contrast;
+    }
+  }
+}

package/nationalarchives/components/tabs/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "tabs",
+  "fixtures": []
+}

package/nationalarchives/components/tabs/macro-options.json

@@ -0,0 +1,52 @@
+[
+  {
+    "name": "title",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "id",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "body",
+        "type": "string",
+        "required": true,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "sticky",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the tabs."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the tabs."
+  }
+]

package/nationalarchives/components/tabs/macro.njk

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

package/nationalarchives/components/tabs/tabs.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():(t.TNAFrontend=t.TNAFrontend||{},t.TNAFrontend["components/tabs/tabs"]=e())}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?r(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function s(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,(void 0,s=function(t,e){if("object"!==i(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,"string");if("object"!==i(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(r.key),"symbol"===i(s)?s:String(s)),r)}var s}t.r(e),t.d(e,{Tabs:()=>a});var a=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$tabList=e&&e.querySelector(".tna-tabs__list"),this.$tabListItemLinks=e&&this.$tabList&&e.querySelectorAll(".tna-tabs__list-item-link"),this.$tabItems=e&&e.querySelectorAll(".tna-tabs__item")}var e,i;return e=t,(i=[{key:"init",value:function(){var t=this;if(this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length){this.sticky=this.$module.classList.contains("tna-tabs--sticky");var e=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((function(t,i){t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby","".concat(t.getAttribute("id"),"-tab")),t.setAttribute("tabindex","0"),(e&&t.getAttribute("id")!==e||!e&&i>0)&&t.setAttribute("hidden",!0)})),this.$tabListItemLinks.forEach((function(e){var i=document.createElement("button");i.innerText=e.innerText,i.setAttribute("class",e.getAttribute("class")),i.setAttribute("role","tab"),i.setAttribute("id",e.getAttribute("id")),i.setAttribute("aria-controls",e.getAttribute("href").replace(/^#/,"")),i.setAttribute("tabindex","-1"),t.$newTabList.appendChild(i)})),this.$tabList.replaceWith(this.$newTabList),this.$tabListItemLinks=this.$module.querySelectorAll(".tna-tabs__list-item-link"),this.$tabListItemLinks.forEach((function(i,n){e&&i.getAttribute("aria-controls")==="".concat(e)||!e&&0===n?(i.classList.add("tna-tabs__list-item-link--selected"),i.setAttribute("aria-selected",!0),i.setAttribute("tabindex","0")):i.setAttribute("aria-selected",!1),i.addEventListener("keydown",(function(e){return t.handleItemLinkKeyDown(e)}),!0),i.addEventListener("click",(function(e){return t.handleItemLinkClick(e)}),!0)}))}}},{key:"handleItemLinkClick",value:function(t){t.preventDefault();var e=t.currentTarget.getAttribute("aria-controls");this.switchTab(e)}},{key:"handleItemLinkKeyDown",value:function(t){var e=t.currentTarget,i=!1;switch(t.key){case"ArrowLeft":this.setSelectedToPreviousTab(e),i=!0;break;case"ArrowRight":this.setSelectedToNextTab(e),i=!0;break;case"Home":this.switchTab(this.$tabListItemLinks[0].getAttribute("aria-controls")),i=!0;break;case"End":this.switchTab(this.$tabListItemLinks[this.$tabListItemLinks.length-1].getAttribute("aria-controls")),i=!0}i&&(t.stopPropagation(),t.preventDefault())}},{key:"setSelectedToNextTab",value:function(t){console.log("setSelectedToNextTab",t);var e,i=n(this.$tabListItemLinks).findIndex((function(e){return e.getAttribute("id")===t.getAttribute("id")}));e=i<this.$tabListItemLinks.length-1?i+1:0,console.log(i,e),this.switchTab(this.$tabListItemLinks[e].getAttribute("aria-controls"))}},{key:"setSelectedToPreviousTab",value:function(t){console.log("setSelectedToPreviousTab",t);var e,i=n(this.$tabListItemLinks).findIndex((function(e){return e.getAttribute("id")===t.getAttribute("id")}));e=i>=1?i-1:this.$tabListItemLinks.length-1,console.log(i,e),this.switchTab(this.$tabListItemLinks[e].getAttribute("aria-controls"))}},{key:"switchTab",value:function(t){this.$tabListItemLinks.forEach((function(e){e.getAttribute("aria-controls")===t?(e.classList.add("tna-tabs__list-item-link--selected"),e.setAttribute("aria-selected",!0),e.setAttribute("tabindex","0"),e.focus()):(e.classList.remove("tna-tabs__list-item-link--selected"),e.setAttribute("aria-selected",!1),e.setAttribute("tabindex","-1"))})),this.$tabItems.forEach((function(e){e.getAttribute("id")===t?(e.removeAttribute("hidden"),e.setAttribute("tabindex","0")):(e.setAttribute("hidden",!0),e.setAttribute("tabindex","-1"))})),this.sticky&&(history.replaceState?history.replaceState(null,null,"#".concat(t)):location.hash="#".concat(t))}}])&&s(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
+//# sourceMappingURL=tabs.js.map

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}`;
+      }
+    }
+  }
+}