@nationalarchives/frontend 0.1.10-prerelease → 0.1.11-prerelease

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

@@ -0,0 +1,88 @@
+[
+  {
+    "name": "src",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "alt",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "width",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "height",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "sources",
+    "type": "array",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "media",
+        "type": "text",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "src",
+        "type": "text",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "caption",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "transcript",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "translation",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the phase banner."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the phase banner."
+  }
+]

package/nationalarchives/components/picture/macro.njk

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

package/nationalarchives/components/picture/picture.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/picture/picture"]=e())}(self,(()=>(()=>{"use strict";var t={948:(t,e,r)=>{r.d(e,{Z:()=>n});const n=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))}}},e={};function r(n){var i=e[n];if(void 0!==i)return i.exports;var o=e[n]={exports:{}};return t[n](o,o.exports,r),o.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{Picture:()=>o});var t=r(948);function e(t){return e="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},e(t)}function i(t,r){for(var n=0;n<r.length;n++){var i=r[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,(void 0,o=function(t,r){if("object"!==e(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var i=n.call(t,"string");if("object"!==e(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(i.key),"symbol"===e(o)?o:String(o)),i)}var o}var o=function(){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$imageWrapper=t&&t.querySelector(".tna-picture__image-wrapper"),this.$transcript=t&&t.querySelector(".tna-picture__transcript"),this.transcriptOpened=!1}var r,n;return r=e,(n=[{key:"init",value:function(){var e=this;if(this.$module&&this.$imageWrapper&&this.$transcript){var r="tna-picture-".concat((0,t.Z)());this.$transcriptToggle=document.createElement("button"),this.$transcriptToggle.classList.add("tna-picture__toggle-transcript","tna-button"),this.$transcriptToggle.setAttribute("aria-controls",r),this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText="Open transcript",this.$transcriptToggle.addEventListener("click",(function(){return e.handleToggleTranscript()})),this.$imageWrapper.appendChild(this.$transcriptToggle),this.$transcript.setAttribute("id",r),this.$transcript.setAttribute("hidden",!0)}}},{key:"handleToggleTranscript",value:function(){var t="tna-picture__toggle-transcript--opened";this.transcriptOpened=!this.transcriptOpened,this.transcriptOpened?(this.$transcriptToggle.classList.add(t),this.$transcriptToggle.setAttribute("aria-expanded",!0),this.$transcriptToggle.innerText="Close transcript",this.$transcript.removeAttribute("hidden")):(this.$transcriptToggle.classList.remove(t),this.$transcriptToggle.setAttribute("aria-expanded",!1),this.$transcriptToggle.innerText="Open transcript",this.$transcript.setAttribute("hidden",!0))}}])&&i(r.prototype,n),Object.defineProperty(r,"prototype",{writable:!1}),e}()})(),n})()));
+//# sourceMappingURL=picture.js.map

package/nationalarchives/components/picture/picture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/picture/picture.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,KAEzBD,EAAkB,YAAIA,EAAkB,aAAK,CAAC,EAAGA,EAAkB,YAAE,8BAAgCC,IACtG,CATD,CASGK,MAAM,I,yDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,GACf,C,GCLCC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAad,QAGrB,IAAIC,EAASU,EAAyBE,GAAY,CAGjDb,QAAS,CAAC,GAOX,OAHAgB,EAAoBH,GAAUZ,EAAQA,EAAOD,QAASY,GAG/CX,EAAOD,OACf,CCrBAY,EAAoBK,EAAI,CAACjB,EAASkB,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEpB,EAASmB,IAC5EE,OAAOC,eAAetB,EAASmB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFd,EAAoBkB,EAAK9B,IACH,oBAAX+B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAetB,EAAS+B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAetB,EAAS,aAAc,CAAEiC,OAAO,GAAO,E,muBCHvD,IAAMC,EAAO,WAClB,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,cACHH,GAAWA,EAAQI,cAAc,+BACnCF,KAAKG,YACHL,GAAWA,EAAQI,cAAc,4BACnCF,KAAKI,kBAAmB,CAC1B,C,QA6CC,O,EA7CAP,G,EAAA,EAAAf,IAAA,OAAAc,MAED,WAAO,IAAAS,EAAA,KACL,GAAKL,KAAKF,SAAYE,KAAKC,eAAkBD,KAAKG,YAAlD,CAIA,IAAMG,EAAW,eAAHC,QAAkBC,EAAAA,EAAAA,MAEhCR,KAAKS,kBAAoBC,SAASC,cAAc,UAChDX,KAAKS,kBAAkBG,UAAUC,IAC/B,iCACA,cAEFb,KAAKS,kBAAkBK,aAAa,gBAAiBR,GACrDN,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,kBACnCf,KAAKS,kBAAkBO,iBAAiB,SAAS,kBAC/CX,EAAKY,wBAAwB,IAE/BjB,KAAKC,cAAciB,YAAYlB,KAAKS,mBAEpCT,KAAKG,YAAYW,aAAa,KAAMR,GACpCN,KAAKG,YAAYW,aAAa,UAAU,EAlBxC,CAoBF,GAAC,CAAAhC,IAAA,yBAAAc,MAED,WACE,IAAMuB,EACJ,yCACFnB,KAAKI,kBAAoBJ,KAAKI,iBAC1BJ,KAAKI,kBACPJ,KAAKS,kBAAkBG,UAAUC,IAAIM,GACrCnB,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,mBACnCf,KAAKG,YAAYiB,gBAAgB,YAIjCpB,KAAKS,kBAAkBG,UAAUS,OAAOF,GACxCnB,KAAKS,kBAAkBK,aAAa,iBAAiB,GACrDd,KAAKS,kBAAkBM,UAAY,kBACnCf,KAAKG,YAAYW,aAAa,UAAU,GAG5C,M,oEAACjB,CAAA,CArDiB,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","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/picture/picture.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/picture/picture\"] = factory();\n})(self, () => {\nreturn ","const uuidv4 = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n    ).toString(16),\n  );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\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};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Picture {\n  constructor($module) {\n    this.$module = $module;\n    this.$imageWrapper =\n      $module && $module.querySelector(\".tna-picture__image-wrapper\");\n    this.$transcript =\n      $module && $module.querySelector(\".tna-picture__transcript\");\n    this.transcriptOpened = false;\n  }\n\n  init() {\n    if (!this.$module || !this.$imageWrapper || !this.$transcript) {\n      return;\n    }\n\n    const uniqueId = `tna-picture-${uuidv4()}`;\n\n    this.$transcriptToggle = document.createElement(\"button\");\n    this.$transcriptToggle.classList.add(\n      \"tna-picture__toggle-transcript\",\n      \"tna-button\",\n    );\n    this.$transcriptToggle.setAttribute(\"aria-controls\", uniqueId);\n    this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n    this.$transcriptToggle.innerText = \"Open transcript\";\n    this.$transcriptToggle.addEventListener(\"click\", () =>\n      this.handleToggleTranscript(),\n    );\n    this.$imageWrapper.appendChild(this.$transcriptToggle);\n\n    this.$transcript.setAttribute(\"id\", uniqueId);\n    this.$transcript.setAttribute(\"hidden\", true);\n    // this.$transcript.setAttribute(\"tabindex\", \"-1\");\n  }\n\n  handleToggleTranscript() {\n    const transcriptToggleOpenedClass =\n      \"tna-picture__toggle-transcript--opened\";\n    this.transcriptOpened = !this.transcriptOpened;\n    if (this.transcriptOpened) {\n      this.$transcriptToggle.classList.add(transcriptToggleOpenedClass);\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", true);\n      this.$transcriptToggle.innerText = \"Close transcript\";\n      this.$transcript.removeAttribute(\"hidden\");\n      // this.$transcript.setAttribute(\"tabindex\", \"0\");\n      // this.$transcript.focus();\n    } else {\n      this.$transcriptToggle.classList.remove(transcriptToggleOpenedClass);\n      this.$transcriptToggle.setAttribute(\"aria-expanded\", false);\n      this.$transcriptToggle.innerText = \"Open transcript\";\n      this.$transcript.setAttribute(\"hidden\", true);\n      // this.$transcript.setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Picture","$module","_classCallCheck","this","$imageWrapper","querySelector","$transcript","transcriptOpened","_this","uniqueId","concat","uuidv4","$transcriptToggle","document","createElement","classList","add","setAttribute","innerText","addEventListener","handleToggleTranscript","appendChild","transcriptToggleOpenedClass","removeAttribute","remove"],"sourceRoot":""}

package/nationalarchives/components/picture/picture.mjs

@@ -0,0 +1,57 @@
+import uuidv4 from "../../lib/uuid.mjs";
+
+export class Picture {
+  constructor($module) {
+    this.$module = $module;
+    this.$imageWrapper =
+      $module && $module.querySelector(".tna-picture__image-wrapper");
+    this.$transcript =
+      $module && $module.querySelector(".tna-picture__transcript");
+    this.transcriptOpened = false;
+  }
+
+  init() {
+    if (!this.$module || !this.$imageWrapper || !this.$transcript) {
+      return;
+    }
+
+    const uniqueId = `tna-picture-${uuidv4()}`;
+
+    this.$transcriptToggle = document.createElement("button");
+    this.$transcriptToggle.classList.add(
+      "tna-picture__toggle-transcript",
+      "tna-button",
+    );
+    this.$transcriptToggle.setAttribute("aria-controls", uniqueId);
+    this.$transcriptToggle.setAttribute("aria-expanded", false);
+    this.$transcriptToggle.innerText = "Open transcript";
+    this.$transcriptToggle.addEventListener("click", () =>
+      this.handleToggleTranscript(),
+    );
+    this.$imageWrapper.appendChild(this.$transcriptToggle);
+
+    this.$transcript.setAttribute("id", uniqueId);
+    this.$transcript.setAttribute("hidden", true);
+    // this.$transcript.setAttribute("tabindex", "-1");
+  }
+
+  handleToggleTranscript() {
+    const transcriptToggleOpenedClass =
+      "tna-picture__toggle-transcript--opened";
+    this.transcriptOpened = !this.transcriptOpened;
+    if (this.transcriptOpened) {
+      this.$transcriptToggle.classList.add(transcriptToggleOpenedClass);
+      this.$transcriptToggle.setAttribute("aria-expanded", true);
+      this.$transcriptToggle.innerText = "Close transcript";
+      this.$transcript.removeAttribute("hidden");
+      // this.$transcript.setAttribute("tabindex", "0");
+      // this.$transcript.focus();
+    } else {
+      this.$transcriptToggle.classList.remove(transcriptToggleOpenedClass);
+      this.$transcriptToggle.setAttribute("aria-expanded", false);
+      this.$transcriptToggle.innerText = "Open transcript";
+      this.$transcript.setAttribute("hidden", true);
+      // this.$transcript.setAttribute("tabindex", "-1");
+    }
+  }
+}

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

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

package/nationalarchives/components/picture/template.njk

@@ -0,0 +1,42 @@
+{% from "nationalarchives/components/tabs/macro.njk" import tnaTabs %}
+
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<figure class="tna-picture {{ containerClasses | join(' ') }}" data-module="tna-picture" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="tna-picture__image-wrapper">
+    <picture>
+    {%- for source in params.sources -%}
+      <source class="tna-picture__image" media="{{ source.media }}" srcset="{{ source.src }}" width="{{ source.width }}" height="{{ source.height }}">
+    {%- endfor -%}
+      <img class="tna-picture__image" width="{{ params.width }}" height="{{ params.height }}" src="{{ params.src }}" alt="{{ params.alt }}">
+    </picture>
+  </div>
+{%- if params.transcript or params.translation -%}
+  <div class="tna-picture__transcript">
+  {%- if params.transcript and params.translation -%}
+    {{ tnaTabs({
+      items: [
+        {
+          id: "test1",
+          title: "Transcript",
+          body: params.transcript
+        },
+        {
+          id: "test2",
+          title: "English translation",
+          body: params.translation
+        }
+      ]
+    }) }}
+  {%- elseif params.transcript -%}
+    {{ params.transcript | safe }}
+  {%- else -%}
+    {{ params.translation | safe }}
+  {%- endif -%}
+  </div>
+{%- endif -%}
+{%- if params.caption -%}
+  <figcaption class="tna-picture__caption">
+      {{ params.caption | safe }}
+  </figcaption>
+{%- endif -%}
+</figure>

package/nationalarchives/components/profile/_index.scss

@@ -0,0 +1,2 @@
+.tna-profile {
+}

package/nationalarchives/components/profile/fixtures.json

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

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

@@ -19,7 +19,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/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