@nationalarchives/frontend 0.1.20-prerelease → 0.1.21-prerelease

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

@@ -1 +1 @@
-{"version":3,"file":"components/tabs/tabs.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,m7CCLvD,IAAMC,EAAI,WACf,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,SAAWH,GAAWA,EAAQI,cAAc,mBACjDF,KAAKG,kBACHL,GACAE,KAAKC,UACLH,EAAQM,iBAAiB,6BAC3BJ,KAAKK,UAAYP,GAAWA,EAAQM,iBAAiB,kBACvD,C,QA6MC,O,EA7MAP,G,EAAA,EAAAd,IAAA,OAAAa,MAED,WAAO,IAAAU,EAAA,KACL,GACGN,KAAKF,SACLE,KAAKC,UACLD,KAAKG,mBACLH,KAAKK,WACNL,KAAKG,kBAAkBI,SAAWP,KAAKK,UAAUE,OALnD,CAUAP,KAAKQ,OAASR,KAAKF,QAAQW,UAAUC,SAAS,oBAE9C,IAAMC,EAAiBC,OAAOC,SAASC,KAAKC,QAAQ,KAAM,IAE1Df,KAAKgB,YAAcC,SAASC,cAAc,OAC1ClB,KAAKgB,YAAYG,aAAa,OAAQ,WACtCnB,KAAKgB,YAAYG,aAAa,QAASnB,KAAKC,SAASmB,aAAa,UAElEpB,KAAKK,UAAUgB,SAAQ,SAACC,EAAUC,GAChCD,EAASH,aAAa,OAAQ,YAC9BG,EAASH,aACP,kBAAiB,GAAAK,OACdF,EAASF,aAAa,MAAK,SAEhCE,EAASH,aAAa,WAAY,MAE/BR,GAAkBW,EAASF,aAAa,QAAUT,IACjDA,GAAkBY,EAAQ,IAE5BD,EAASH,aAAa,UAAU,EAEpC,IAEAnB,KAAKG,kBAAkBkB,SAAQ,SAACI,GAC9B,IAAMC,EAAqBT,SAASC,cAAc,UAClDQ,EAAmBC,UAAYF,EAAiBE,UAChDD,EAAmBP,aACjB,QACAM,EAAiBL,aAAa,UAEhCM,EAAmBP,aAAa,OAAQ,OACxCO,EAAmBP,aACjB,KACAM,EAAiBL,aAAa,OAEhCM,EAAmBP,aACjB,gBACAM,EAAiBL,aAAa,QAAQL,QAAQ,KAAM,KAEtDW,EAAmBP,aAAa,WAAY,MAC5Cb,EAAKU,YAAYY,YAAYF,EAC/B,IAEA1B,KAAKC,SAAS4B,YAAY7B,KAAKgB,aAE/BhB,KAAKG,kBAAoBH,KAAKF,QAAQM,iBACpC,6BAGFJ,KAAKG,kBAAkBkB,SAAQ,SAACI,EAAkBF,GAE7CZ,GACCc,EAAiBL,aAAa,mBAAgB,GAAAI,OACzCb,KACLA,GAA4B,IAAVY,GAEpBE,EAAiBhB,UAAUqB,IAAI,sCAC/BL,EAAiBN,aAAa,iBAAiB,GAC/CM,EAAiBN,aAAa,WAAY,MAE1CM,EAAiBN,aAAa,iBAAiB,GAGjDM,EAAiBM,iBACf,WACA,SAACC,GAAC,OAAK1B,EAAK2B,sBAAsBD,EAAE,IACpC,GAEFP,EAAiBM,iBACf,SACA,SAACC,GAAC,OAAK1B,EAAK4B,oBAAoBF,EAAE,IAClC,EAEJ,GA3EA,CA4EF,GAAC,CAAAjD,IAAA,sBAAAa,MAED,SAAoBuC,GAClBA,EAAmBC,iBACnB,IAAMC,EACJF,EAAmBG,cAAclB,aAAa,iBAEhDpB,KAAKuC,UAAUF,EACjB,GAAC,CAAAtD,IAAA,wBAAAa,MAED,SAAsB4C,GACpB,IAAMH,EAAaG,EAAqBF,cACpCG,GAAqB,EAEzB,OAAQD,EAAqBzD,KAC3B,IAAK,YACL,IAAK,UACHiB,KAAK0C,yBAAyBL,GAC9BI,GAAqB,EACrB,MAEF,IAAK,aACL,IAAK,YACHzC,KAAK2C,qBAAqBN,GAC1BI,GAAqB,EACrB,MAEF,IAAK,OACHzC,KAAKuC,UAAUvC,KAAKG,kBAAkB,GAAGiB,aAAa,kBACtDqB,GAAqB,EACrB,MAEF,IAAK,MACHzC,KAAKuC,UACHvC,KAAKG,kBACHH,KAAKG,kBAAkBI,OAAS,GAChCa,aAAa,kBAEjBqB,GAAqB,EAOrBA,IACFD,EAAqBI,kBACrBJ,EAAqBJ,iBAEzB,GAAC,CAAArD,IAAA,uBAAAa,MAED,SAAqByC,GACnBQ,QAAQC,IAAI,uBAAwBT,GACpC,IAIIU,EAJEC,EAAeC,EAAIjD,KAAKG,mBAAmB+C,WAC/C,SAACzB,GAAgB,OACfA,EAAiBL,aAAa,QAAUiB,EAAWjB,aAAa,KAAK,IAIvE2B,EADEC,EAAehD,KAAKG,kBAAkBI,OAAS,EACtCyC,EAAe,EAEf,EAEbH,QAAQC,IAAIE,EAAcD,GAC1B/C,KAAKuC,UACHvC,KAAKG,kBAAkB4C,GAAU3B,aAAa,iBAElD,GAAC,CAAArC,IAAA,2BAAAa,MAED,SAAyByC,GACvBQ,QAAQC,IAAI,2BAA4BT,GACxC,IAIIU,EAJEC,EAAeC,EAAIjD,KAAKG,mBAAmB+C,WAC/C,SAACzB,GAAgB,OACfA,EAAiBL,aAAa,QAAUiB,EAAWjB,aAAa,KAAK,IAIvE2B,EADEC,GAAgB,EACPA,EAAe,EAEfhD,KAAKG,kBAAkBI,OAAS,EAE7CsC,QAAQC,IAAIE,EAAcD,GAC1B/C,KAAKuC,UACHvC,KAAKG,kBAAkB4C,GAAU3B,aAAa,iBAElD,GAAC,CAAArC,IAAA,YAAAa,MAED,SAAUuD,GACRnD,KAAKG,kBAAkBkB,SAAQ,SAACI,GAC1BA,EAAiBL,aAAa,mBAAqB+B,GACrD1B,EAAiBhB,UAAUqB,IAAI,sCAC/BL,EAAiBN,aAAa,iBAAiB,GAC/CM,EAAiBN,aAAa,WAAY,KAC1CM,EAAiB2B,UAEjB3B,EAAiBhB,UAAU4C,OAAO,sCAClC5B,EAAiBN,aAAa,iBAAiB,GAC/CM,EAAiBN,aAAa,WAAY,MAE9C,IAEAnB,KAAKK,UAAUgB,SAAQ,SAACC,GAClBA,EAASF,aAAa,QAAU+B,GAClC7B,EAASgC,gBAAgB,UACzBhC,EAASH,aAAa,WAAY,OAElCG,EAASH,aAAa,UAAU,GAChCG,EAASH,aAAa,WAAY,MAEtC,IAEInB,KAAKQ,SACH+C,QAAQC,aACVD,QAAQC,aAAa,KAAM,KAAM,IAAFhC,OAAM2B,IAErCtC,SAASC,KAAO,IAAHU,OAAO2B,GAG1B,M,oEAACtD,CAAA,CAtNc,G","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\"] = 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      case \"ArrowUp\":\n        this.setSelectedToPreviousTab(targetItem);\n        overwriteKeyAction = true;\n        break;\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\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":""}
+{"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\"] = 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    const doesStartingTargetExist = [...this.$tabItems].some(\n      ($tabItem) => $tabItem.getAttribute(\"id\") === startingTarget,\n    );\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        (doesStartingTargetExist &&\n          $tabItem.getAttribute(\"id\") !== startingTarget) ||\n        (!doesStartingTargetExist && 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      case \"ArrowUp\":\n        this.setSelectedToPreviousTab(targetItem);\n        overwriteKeyAction = true;\n        break;\n\n      case \"ArrowRight\":\n      case \"ArrowDown\":\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","doesStartingTargetExist","_toConsumableArray","some","$tabItem","getAttribute","$newTabList","document","createElement","setAttribute","forEach","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","findIndex","targetId","focus","remove","removeAttribute","history","replaceState"],"sourceRoot":""}

package/nationalarchives/components/tabs/tabs.mjs

@@ -23,6 +23,9 @@ export class Tabs {
     this.sticky = this.$module.classList.contains("tna-tabs--sticky");
 
     const startingTarget = window.location.hash.replace(/^#/, "");
+    const doesStartingTargetExist = [...this.$tabItems].some(
+      ($tabItem) => $tabItem.getAttribute("id") === startingTarget,
+    );
 
     this.$newTabList = document.createElement("div");
     this.$newTabList.setAttribute("role", "tablist");
@@ -36,8 +39,9 @@ export class Tabs {
       );
       $tabItem.setAttribute("tabindex", "0");
       if (
-        (startingTarget && $tabItem.getAttribute("id") !== startingTarget) ||
-        (!startingTarget && index > 0)
+        (doesStartingTargetExist &&
+          $tabItem.getAttribute("id") !== startingTarget) ||
+        (!doesStartingTargetExist && index > 0)
       ) {
         $tabItem.setAttribute("hidden", true);
       }

package/nationalarchives/components/tabs/tabs.scss

@@ -1,6 +1,7 @@
 @use "../../tools/colour";
-@use "../../tools/typography";
+@use "../../tools/media";
 @use "../../tools/spacing";
+@use "../../tools/typography";
 @use "../../utilities";
 
 .tna-tabs {
@@ -140,4 +141,18 @@
       @include colour.colour-border("keyline-dark", 1px);
     }
   }
+
+  @include media.on-print {
+    &__list {
+      display: none;
+    }
+
+    &__item {
+      display: block !important;
+
+      & + & {
+        margin-top: 2rem;
+      }
+    }
+  }
 }

package/nationalarchives/lib/_font-awesome.scss

@@ -1,5 +1,6 @@
-@import "../variables/assets";
-$fa-font-path: $tna-font-path !default;
+@use "../variables/assets";
+
+$fa-font-path: assets.$fa-font-path;
 @import "font-awesome/fontawesome";
 @import "font-awesome/solid";
 @import "font-awesome/brands";

package/nationalarchives/lib/cookies.mjs

@@ -1,32 +1,43 @@
+/**
+ * Class to handle cookies.
+ * @class Cookies
+ * @constructor
+ * @public
+ */
 export default class Cookies {
+  /** @protected */
   #policies = {};
 
+  /**
+   * Create a cookie handler.
+   * @param {string[]} [policies=usage,settings] - The cookie policies to manage.
+   * @param {string} [cookiesPolicyKey=cookies_policy] - The name of the cookie.
+   */
   constructor(
-    policies = ["analytics", "settings"],
+    policies = ["usage", "settings"],
     cookiesPolicyKey = "cookies_policy",
-    crossDomain = false,
   ) {
     this.cookiesPolicyKey = cookiesPolicyKey;
-    this.crossDomain = crossDomain;
     policies.forEach((policy) => {
-      this.#policies[policy] = false;
+      this.#policies[policy.toLowerCase()] = false;
     });
-    this.#getPolicies();
+    this.#policies.essential = true;
   }
 
-  #getPolicies() {
-    if (this.exists(this.cookiesPolicyKey)) {
-      this.#policies = {
-        ...this.#policies,
-        ...this.allPolicies,
-      };
-    }
+  get policies() {
+    return this.exists(this.cookiesPolicyKey)
+      ? (this.#policies = {
+          ...this.#policies,
+          ...this.allPolicies,
+        })
+      : this.#policies;
   }
 
-  get data() {
-    return this.#deserialise(document.cookie);
+  set policies(newPolicyValues) {
+    this.#policies = newPolicyValues;
   }
 
+  /** @protected */
   #deserialise(cookieString) {
     const deserialised = {};
     cookieString.split(";").forEach((cookie) => {
@@ -37,74 +48,135 @@ export default class Cookies {
   }
 
   get all() {
-    return this.data;
-  }
-
-  get allPolicies() {
-    return JSON.parse(this.get(this.cookiesPolicyKey));
+    return this.#deserialise(document.cookie);
   }
 
+  /**
+   * Check to see whether a cookie exists or not.
+   * @param {string} key - The cookie name.
+   * @returns {boolean}
+   */
   exists(key) {
-    return Object.prototype.hasOwnProperty.call(this.data, key);
+    return Object.prototype.hasOwnProperty.call(this.all, key);
   }
 
+  /**
+   * Check to see whether a cookie has a particular value.
+   * @param {string} key - The cookie name.
+   * @param {string|number|boolean} value - The value to check against.
+   * @returns
+   */
   hasValue(key, value) {
-    return this.get(key) === value;
+    return this.get(key) == value;
   }
 
+  /**
+   * Get a cookie.
+   * @param {string} key - The cookie name.
+   * @returns {string|number|boolean}
+   */
   get(key) {
-    return decodeURIComponent(this.data[key]);
+    return this.exists(key) ? decodeURIComponent(this.all[key]) : null;
+  }
+
+  /**
+   * Set a cookie.
+   * @param {string} key - The cookie name.
+   * @param {string|number|boolean} value - The cookie value.
+   * @param {Object} options
+   * @param {number} [options.maxAge=31536000] - The maximum age of the cookie in seconds.
+   * @param {string} [options.path=/] - The path to register the cookie for.
+   * @param {string} [options.sameSite=Lax] - The sameSite attribute.
+   */
+  set(key, value, options = {}) {
+    const {
+      maxAge = 60 * 60 * 24 * 365,
+      path = "/",
+      sameSite = "Lax",
+    } = options;
+    document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(
+      value,
+    )}; SameSite=${sameSite}; path=${path}; max-age=${maxAge}; Secure`;
   }
 
+  /**
+   * Delete a cookie.
+   * @param {string} key - The cookie name.
+   * @param {string} [path=/] - The path to the cookie is registered on.
+   */
   delete(key, path = "/") {
     this.set(key, "", 0, path);
   }
 
+  get allPolicies() {
+    return JSON.parse(this.get(this.cookiesPolicyKey) || "{}");
+  }
+
+  /**
+   * Accept a policy.
+   * @param {string} policy - The name of the policy.
+   */
   acceptPolicy(policy) {
-    this.setPolicy(policy, true);
+    this.#setPolicy(policy, true);
+    this.savePolicies();
   }
 
+  /**
+   * Reject a policy.
+   * @param {string} policy - The name of the policy.
+   */
   rejectPolicy(policy) {
-    this.setPolicy(policy, false);
+    if (policy === "essential") {
+      return;
+    }
+    this.#setPolicy(policy, false);
+    this.savePolicies();
   }
 
-  setPolicy(policy, accepted) {
-    this.#policies = {
-      ...this.#policies,
+  /** @protected */
+  #setPolicy(policy, accepted) {
+    this.policies = {
+      ...this.policies,
       [policy]: accepted,
+      essential: true,
     };
-    this.set(this.cookiesPolicyKey, JSON.stringify(this.#policies));
   }
 
+  /**
+   * Commit the policy preferences to the browser.
+   */
+  savePolicies() {
+    this.set(this.cookiesPolicyKey, JSON.stringify(this.policies));
+  }
+
+  /**
+   * Accept all the cookie policies.
+   */
   acceptAllPolicies() {
-    Object.keys(this.#policies)
-      .filter((policy) => this.#policies[policy] === false)
-      .forEach((policy) => this.acceptPolicy(policy));
+    Object.keys(this.policies).forEach((policy) =>
+      this.#setPolicy(policy, true),
+    );
+    this.savePolicies();
   }
 
+  /**
+   * Reject all the cookie policies.
+   */
   rejectAllPolicies() {
-    Object.keys(this.#policies)
-      .filter((policy) => this.#policies[policy] === true)
-      .forEach((policy) => this.rejectPolicy(policy));
+    Object.keys(this.policies).forEach((policy) =>
+      this.#setPolicy(policy, false),
+    );
+    this.savePolicies();
   }
 
+  /**
+   * Get the acceptance status of a policy.
+   * @param {string} policy - The name of the policy.
+   * @returns {boolean}
+   */
   isPolicyAccepted(policy) {
-    this.#getPolicies();
-    return Object.prototype.hasOwnProperty.call(this.#policies, policy)
-      ? this.#policies[policy] === true
+    return Object.prototype.hasOwnProperty.call(this.policies, policy)
+      ? this.policies[policy] === true
       : null;
   }
-
-  set(key, value, maxAge = 60 * 60 * 24 * 365, path = "/") {
-    document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(
-      value,
-    )}; SameSite=${
-      this.crossDomain ? "None" : "Lax"
-    }; path=${path}; max-age=${maxAge}; Secure`;
-    this.#getPolicies();
-  }
-
-  policy(policy) {
-    return this.#policies[policy];
-  }
 }

package/nationalarchives/stories/development/contributing.mdx

@@ -30,13 +30,3 @@ import { Meta } from "@storybook/blocks";
 1. Import and initialise your component as part of the `initAll` function in `src/nationalarchives/all.mjs`
 1. Update the check in `tasks/test-package.js` to add the JavaScript class to check for
 1. If your component uses JavaScript, ensure you add interaction tests using `@storybook/testing-library`
-
-### Best practices
-
-- [HTML standards](https://nationalarchives.github.io/developer-handbook/technology/html/)
-- [JavaScript standards](https://nationalarchives.github.io/developer-handbook/technology/javascript/)
-- [CSS standards](https://nationalarchives.github.io/developer-handbook/technology/css/)
-
-## Updating a component
-
-[TODO]

package/nationalarchives/stories/development/cookies.mdx

@@ -0,0 +1,82 @@
+import { Meta } from "@storybook/blocks";
+import { Mermaid } from 'mdx-mermaid/Mermaid';
+
+<Meta title="Development/Cookies" />
+
+# Cookies handling
+
+The principles of cookie handling are:
+
+- Create cookies on the client side (apart from session cookies)
+- Update cookies on the client side (apart from session cookies)
+- Reject by default (don't assume acceptance and don't add tracking until after they agree)
+
+## Policies
+
+As standard we should use at least these three classes of cookies:
+
+- `essential` - we don't need to ask permission for these
+- `usage` - analytics, tracking, data gathering
+- `settings` - configured options for the site (e.g. default results view or static light/dark mode)
+
+## Process
+
+### First visit
+
+<Mermaid chart={`sequenceDiagram
+    User->>Browser: Request page
+    Browser->>Server: HTTP request with no cookies
+    Server->>Browser: Rendered HTML with cookie banner and no analytics
+    Browser->>User: Accept cookies?
+    alt Accept
+        User->>Browser: Accept cookies
+        Browser->>Browser: Create cookie policy with all accepted
+        Browser->>Browser: Add analytics code with JavaScript
+    else Reject
+        User->>Browser: Reject cookies
+        Browser->>Browser: Create cookie policy with all rejected
+    end
+    opt Next request
+        User->>Browser: Request page
+        Browser->>Server: HTTP request with cookie policy
+        Server->>Browser: Rendered HTML with analytics but no cookie banner
+    end
+`} />
+
+### Repeat visit
+
+<Mermaid chart={`sequenceDiagram
+    User->>Browser: Request page
+    Browser->>Server: HTTP request with cookie policy
+    Server->>Browser: Rendered HTML with analytics but no cookie banner
+`} />
+
+## Cookie library
+
+When you load in the tna-frontend JavaScript, it comes with a [cookie library](https://github.com/nationalarchives/tna-frontend/blob/main/src/nationalarchives/lib/cookies.mjs).
+
+This is loaded into the `window` object as `TNAFrontend.Cookies`:
+
+```JavaScript
+// Initialise a new Cookie instance
+const cookies = new TNAFrontend.Cookies();
+
+// Log all the cookies to the console
+console.log(cookies.all);
+```
+
+### Functions
+
+- `cookies.all` - Returns all the cookies
+- `cookies.exists(key)` - Returns `true` if a cookie exists with the name `key`
+- `cookies.hasValue(key, value)` - Returns `true` if the cookie with the name `key` is equal to `value`
+- `cookies.get(key)` - Returns the cookie with the name `key`
+- `cookies.set(key, value, maxAge, path)` - Set a cookie (max age default is one year, default path is `/`)
+- `cookies.delete(key)` - Deletes the cookie with the name `key`
+- `cookies.allPolicies` - Returns all the cookie policies
+- `cookies.acceptPolicy(policy)` - Accepts the policy with the name `policy`
+- `cookies.rejectPolicy(policy)` - Rejects the policy with the name `policy`
+- `cookies.setPolicy(policy, accepted)` - Accepts or rejects the policy with the name `policy` depending on the value of `accepted`
+- `cookies.acceptAllPolicies()` - Accepts all policies
+- `cookies.rejectAllPolicies()` - Rejects all policies
+- `cookies.isPolicyAccepted(policy)` - Returns `true` or `false` depending on whether the policy has been accepted

package/nationalarchives/stories/development/structure.mdx

@@ -0,0 +1,88 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Development/Structure" />
+
+# Structure
+
+The layers of the TNA frontend SCSS library is built as:
+
+1. [Variables](#variables)
+1. [Tools](#tools)
+1. [Libraries](#libraries)/[Utilities](#utilities)
+1. [Components](#components)
+1. [Overrides](#overrides)
+
+## Variables
+
+TNA frontend variables are defined in `src/nationalarchives/variables`.
+
+Lots of variables can be modified but some are fixed, such as our brand colours.
+
+An example fixed variable is `$relative-1rem-px` where we set the value of `1rem` to `16px` which makes it easier to define widths as a function of `1rem` as we mostly work on a 4px grid:
+
+| Pixels | REM         |
+| ------ | ----------- |
+| `1px`  | `0.0625rem` |
+| `2px`  | `0.125rem`  |
+| `4px`  | `0.25rem`   |
+| `8px`  | `0.5rem`    |
+| `16px` | `1rem`      |
+| `32px` | `2rem`      |
+| `64px` | `4rem`      |
+
+An example of a variable that can be modified is `$body-font-size-px` which we set to `18px` by default. This font size might not be right for all services so we have allowed it to be modified.
+
+## Tools
+
+The tools provided are reusable `@mixin` and `@function` blocks to make writing styles easier. They are defined in `src/nationalarchives/tools`.
+
+Tools rely directly on variables and can be used throughout the frontend library.
+
+As an exmaple, `colour-font()` will apply a font colour in a way that should work for all browsers and takes into consideration the light/dark theme used.
+
+## Libraries
+
+The libraries in `src/nationalarchives/lib` are a mix of third party libraries as well as some TNA ones.
+
+They can join up tools to make larger, more useful elements.
+
+## Utilities
+
+The utilities in `src/nationalarchives/utilities` are some global styles that aren't associated with a specific component.
+
+This layer is where we define some general purpose elements such as:
+
+- The `tna-template` and `tna-template__body` elements
+- Headings
+- Lists
+- Chips
+- `<p>` elements
+- General media elements like `<img>`, `<svg>`, `<picture>`, `<video>` and `<canvas>`
+- Columns
+- General form elements
+
+These elements all still adhere to the [BEM methodology](https://getbem.com/).
+
+Utilities should not implement any `!important` rules.
+
+## Components
+
+The most prominent layer of styling, the components in `src/nationalarchives/components` should use the tools already defined.
+
+Components shouldn't use variables directly. They shouldn't use static values for colour unless the colour of that component will never change, for example the message component which is always yellow.
+
+Some components may use utilities such as headings. Where these styles have already been defined, they should not be redefined. The heading in a cookie banner should use the existing `tna-heading` and `tna-heading--m` styles that already exist rather than implimenting its own.
+
+Components should not implement any `!important` rules. There are exceptions such as the skip link that needs to be visually hidden in a way that it is still available for someone navigating a site with a keyboard.
+
+Components should not care about the context or layout within which they are used. As an example, a breadcrumb *could* be placed within a card or a footer element although in reality we wouldn't allow this.
+
+## Overrides
+
+Overrides start with `tna-!--` and can only be used in HTML classes. They have `!important` rules.
+
+Examples of overrides are:
+
+- Spacing (margin, padding etc.)
+- No focus style (`.tna-!--no-focus-style`) for items such as the target element of a skip link
+- Visibly hidden content (used to add extra descriptions which appear for screenreaders only)

package/nationalarchives/stories/development/using/compiled.mdx

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Development/Using/Compiled" />
+
+# Using the compiled files
+
+Each release (as of `v0.1.21-prerelease`) should contain a ZIP of the package.
+
+Find the release you want on the `tna-frontend` [releases page](https://github.com/nationalarchives/tna-frontend/releases) and download the package from the "Assets" dropdown.

package/nationalarchives/stories/development/using/hosted.mdx

@@ -0,0 +1,53 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Development/Using/Hosted" />
+
+# Using with a hosted solution
+
+The `@nationalarchives/frontend` package is available on [jsdelivr.com](https://www.jsdelivr.com/package/npm/@nationalarchives/frontend).
+
+While you can use the CSS and JavaScript from there, the font files which includes the icon font will have to be hosted from your web application.
+
+As a result, **using a hosted solution is not the preferred method for using the `tna-frontend` library**.
+
+## All components and styles
+
+Include the CSS in the `<head>` element of your page:
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.css" rel="stylesheet" integrity="sha384-6Egfw6aX1Jrwuf+APn+BMPswroudkIQ6StU095OPkNCKLEzj7ksWGmYxjend8P7g" crossorigin="anonymous">
+```
+
+### JavaScript
+
+Add the JavaScript to the end of your page just before your closing `</body>` tag:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.js" integrity="sha384-sBkiMlxl9svXopGxNSMVAdALjzyvh6sQHp+21PE3LGfTxAEbG4EIpK" crossorigin="anonymous"></script>
+<script>
+  // Initialise all TNA components
+  window.TNAFrontend.initAll();
+</script>
+```
+
+...or use the module syntax:
+
+```
+<script type="module">
+  import { initAll } from "https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/all.js";
+  initAll();
+</script>
+```
+
+## Specific components
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/components/tabs.css" rel="stylesheet" integrity="sha384-hkx4svJn1A7pWYlzaDRMmtIBBijZdEop+M1Y/H4Hdg8aAqZRJHG56RokLk/eqJYl" crossorigin="anonymous">
+```
+
+### JavaScript
+
+```html
+<!-- JavaScript for a single component -->
+<script src="https://cdn.jsdelivr.net/npm/@nationalarchives/frontend@0.1.18-prerelease/nationalarchives/components/tabs.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+```