@nationalarchives/frontend 0.1.8-prerelease → 0.1.10-prerelease

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\">\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>",
       "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\">\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>",
       "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\">\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>",
       "hidden": false
     }
   ]

package/nationalarchives/components/sensitive-image/macro-options.json

@@ -47,12 +47,12 @@
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the card."
+    "description": "Classes to add to the sensitive image."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the card."
+    "description": "HTML attributes (for example data attributes) to add to the sensitive image."
   }
 ]

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

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():(e.TNAFrontend=e.TNAFrontend||{},e.TNAFrontend["components/sensitive-image/sensitive-image"]=t())}(self,(()=>(()=>{"use strict";var e={d:(t,i)=>{for(var o in i)e.o(i,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:i[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function i(e){this.$module=e,this.$imageDetails=e&&e.querySelector(".tna-sensitive-image__details"),this.$image=e&&e.querySelector(".tna-sensitive-image__image"),this.imageIsVisible=!1}e.r(t),e.d(t,{default:()=>o}),i.prototype.init=function(){console.log(this),this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",this.handleImageDetailsToggle.bind(this))},i.prototype.handleImageDetailsToggle=function(){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})};const o=i;return t})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():(e.TNAFrontend=e.TNAFrontend||{},e.TNAFrontend["components/sensitive-image/sensitive-image"]=t())}(self,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function i(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,(void 0,r=function(e,t){if("object"!==o(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var n=i.call(e,"string");if("object"!==o(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(n.key),"symbol"===o(r)?r:String(r)),n)}var r}e.r(t),e.d(t,{SensitiveImage:()=>n});var n=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$imageDetails=t&&t.querySelector(".tna-sensitive-image__details"),this.$image=t&&t.querySelector(".tna-sensitive-image__image"),this.imageIsVisible=!1}var t,o;return t=e,(o=[{key:"init",value:function(){var e=this;this.$module&&this.$imageDetails&&this.$image&&this.$imageDetails.addEventListener("toggle",(function(){return e.handleImageDetailsToggle()}))}},{key:"handleImageDetailsToggle",value:function(){this.$imageDetails.hasAttribute("open")&&this.$image.focus({preventScroll:!0,focusVisible:!0})}}])&&i(t.prototype,o),Object.defineProperty(t,"prototype",{writable:!1}),e}();return t})()));
 //# sourceMappingURL=sensitive-image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/sensitive-image/sensitive-image.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,8CAAgDC,IACtH,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,KCL9D,SAASC,EAAeC,GACtBC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,iCACnCF,KAAKG,OAASJ,GAAWA,EAAQG,cAAc,+BAC/CF,KAAKI,gBAAiB,CACxB,C,8BAEAN,EAAeN,UAAUa,KAAO,WAC9BC,QAAQC,IAAIP,MACPA,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcO,iBACjB,SACAR,KAAKS,yBAAyBC,KAAKV,MAEvC,EAEAF,EAAeN,UAAUiB,yBAA2B,WAC9CT,KAAKC,cAAcU,aAAa,SAClCX,KAAKG,OAAOS,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,EAEA,U","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/sensitive-image/sensitive-image.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/sensitive-image/sensitive-image\"] = 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};","function SensitiveImage($module) {\n  this.$module = $module;\n  this.$imageDetails =\n    $module && $module.querySelector(\".tna-sensitive-image__details\");\n  this.$image = $module && $module.querySelector(\".tna-sensitive-image__image\");\n  this.imageIsVisible = false;\n}\n\nSensitiveImage.prototype.init = function () {\n  console.log(this);\n  if (!this.$module || !this.$imageDetails || !this.$image) {\n    return;\n  }\n  this.$imageDetails.addEventListener(\n    \"toggle\",\n    this.handleImageDetailsToggle.bind(this)\n  );\n};\n\nSensitiveImage.prototype.handleImageDetailsToggle = function () {\n  if (this.$imageDetails.hasAttribute(\"open\")) {\n    this.$image.focus({ preventScroll: true, focusVisible: true });\n  }\n};\n\nexport default SensitiveImage;\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","SensitiveImage","$module","this","$imageDetails","querySelector","$image","imageIsVisible","init","console","log","addEventListener","handleImageDetailsToggle","bind","hasAttribute","focus","preventScroll","focusVisible"],"sourceRoot":""}
+{"version":3,"file":"components/sensitive-image/sensitive-image.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,8CAAgDC,IACtH,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,6sBCLvD,IAAMC,EAAc,WACzB,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,cACHH,GAAWA,EAAQI,cAAc,iCACnCF,KAAKG,OACHL,GAAWA,EAAQI,cAAc,+BACnCF,KAAKI,gBAAiB,CACxB,C,QAeC,O,EAfAP,G,EAAA,EAAAd,IAAA,OAAAa,MAED,WAAO,IAAAS,EAAA,KACAL,KAAKF,SAAYE,KAAKC,eAAkBD,KAAKG,QAGlDH,KAAKC,cAAcK,iBAAiB,UAAU,kBAC5CD,EAAKE,0BAA0B,GAEnC,GAAC,CAAAxB,IAAA,2BAAAa,MAED,WACMI,KAAKC,cAAcO,aAAa,SAClCR,KAAKG,OAAOM,MAAM,CAAEC,eAAe,EAAMC,cAAc,GAE3D,M,oEAACd,CAAA,CAvBwB,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/sensitive-image/sensitive-image.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/sensitive-image/sensitive-image\"] = 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 SensitiveImage {\n  constructor($module) {\n    this.$module = $module;\n    this.$imageDetails =\n      $module && $module.querySelector(\".tna-sensitive-image__details\");\n    this.$image =\n      $module && $module.querySelector(\".tna-sensitive-image__image\");\n    this.imageIsVisible = false;\n  }\n\n  init() {\n    if (!this.$module || !this.$imageDetails || !this.$image) {\n      return;\n    }\n    this.$imageDetails.addEventListener(\"toggle\", () =>\n      this.handleImageDetailsToggle(),\n    );\n  }\n\n  handleImageDetailsToggle() {\n    if (this.$imageDetails.hasAttribute(\"open\")) {\n      this.$image.focus({ preventScroll: true, focusVisible: true });\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","SensitiveImage","$module","_classCallCheck","this","$imageDetails","querySelector","$image","imageIsVisible","_this","addEventListener","handleImageDetailsToggle","hasAttribute","focus","preventScroll","focusVisible"],"sourceRoot":""}

package/nationalarchives/components/sensitive-image/sensitive-image.mjs

@@ -1,26 +1,25 @@
-function SensitiveImage($module) {
-  this.$module = $module;
-  this.$imageDetails =
-    $module && $module.querySelector(".tna-sensitive-image__details");
-  this.$image = $module && $module.querySelector(".tna-sensitive-image__image");
-  this.imageIsVisible = false;
-}
-
-SensitiveImage.prototype.init = function () {
-  console.log(this);
-  if (!this.$module || !this.$imageDetails || !this.$image) {
-    return;
+export class SensitiveImage {
+  constructor($module) {
+    this.$module = $module;
+    this.$imageDetails =
+      $module && $module.querySelector(".tna-sensitive-image__details");
+    this.$image =
+      $module && $module.querySelector(".tna-sensitive-image__image");
+    this.imageIsVisible = false;
   }
-  this.$imageDetails.addEventListener(
-    "toggle",
-    this.handleImageDetailsToggle.bind(this)
-  );
-};
 
-SensitiveImage.prototype.handleImageDetailsToggle = function () {
-  if (this.$imageDetails.hasAttribute("open")) {
-    this.$image.focus({ preventScroll: true, focusVisible: true });
+  init() {
+    if (!this.$module || !this.$imageDetails || !this.$image) {
+      return;
+    }
+    this.$imageDetails.addEventListener("toggle", () =>
+      this.handleImageDetailsToggle(),
+    );
   }
-};
 
-export default SensitiveImage;
+  handleImageDetailsToggle() {
+    if (this.$imageDetails.hasAttribute("open")) {
+      this.$image.focus({ preventScroll: true, focusVisible: true });
+    }
+  }
+}

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";
@@ -15,12 +14,12 @@ const argTypes = {
 
 Object.keys(argTypes).forEach((argType) => {
   argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType
+    (option) => option.name === argType,
   )?.description;
 });
 
 export default {
-  title: "Components/Sensitive image",
+  title: "Components/Experimental/Sensitive image",
   argTypes,
 };
 

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

@@ -1,10 +1,10 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-sensitive-image {{ containerClasses | join(' ') }}" data-module="tna-sensitive-image" style="--sensitive-image: url('{{ params.image.src }}'); --sensitive-image-width: {{ params.image.width }}; --sensitive-image-height: {{ params.image.height }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    <p class="tna-sensitive-image__warning">{{ params.warning }}</p>
-    <details class="tna-sensitive-image__details">
-        <summary class="tna-sensitive-image__show" data-action="{{ params.action }}">{{ params.action }}</summary>
-        <div class="tna-sensitive-image__container">
-            <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image" />
-        </div>
-    </details>
+  <p class="tna-sensitive-image__warning">{{ params.warning }}</p>
+  <details class="tna-sensitive-image__details">
+    <summary class="tna-sensitive-image__show" data-action="{{ params.action }}">{{ params.action }}</summary>
+    <div class="tna-sensitive-image__container">
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-sensitive-image__image" />
+    </div>
+  </details>
 </div>

package/nationalarchives/lib/uuid.mjs

@@ -0,0 +1,9 @@
+const uuidv4 = () =>
+  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16),
+  );
+
+export default uuidv4;

package/nationalarchives/stories/development/contributing.mdx

@@ -0,0 +1,38 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Development/Contributing" />
+
+# Contributing to the frontend styles
+
+## Adding a new component
+
+1. Create a new directory in `src/nationalarchives/components`
+1. Create an `_index.scss`, `fixtures.json`, `macro-options.json`, `macro.njk`, `template.njk` and a `[myComponent].stories.js` in the directory using other components as a guide
+1. Add the component SCSS to src/nationalarchives/components/_all.scss
+1. Update `tasks/test-package.js` to check for the files as part of the CI (`...componentFiles("myComponent", true)` where `true` ignores the check for any JavaScript files)
+1. Set the macro in `macro.njk` to be `tnaMyComponent` where "MyComponent" is the name of your component
+
+### Files
+
+- `_index.scss` - where you can add your [BEM](https://getbem.com/) SCSS styles for the component
+- `fixtures.json` - these are snapshots of the rendered component's HTML in different scenarios which can be used by other implementations to test against
+- `macro-options.json` - the options for the component which are rendered in the Design System as well as being copied in to the Storybook controls
+- `macro.njk` - the Nunjucks macro easily allows us to include components in the prototype kit and other applications such as the Design System
+- `template.njk` - this is the HTML for the component, written in [Nunjucks](https://mozilla.github.io/nunjucks/)
+- `[myComponent].stories.js` - the stories that get rendered to Storybook
+
+### If you need JavaScript
+
+1. Create a `[myComponent].mjs` file in the component directory
+1. Ensure the top level element in your component has the attribute `data-module="tna-my-component"`
+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 remove the `true` and enable checking of the JavaScript file (`...componentFiles("myComponent")`)
+1. If your component uses JavaScript, ensure you add interaction tests using `@storybook/testing-library`
+
+### Best practices
+
+[TODO]
+
+## Updating a component
+
+[TODO]

package/nationalarchives/stories/development/dependencies.mdx

@@ -6,4 +6,6 @@ import { Meta } from "@storybook/blocks";
 
 ```sh
 npx sb upgrade
+# or
+npx storybook@latest upgrade
 ```

package/nationalarchives/stories/development/publishing.mdx

@@ -15,3 +15,12 @@ import { Meta } from "@storybook/blocks";
 1. Create a [new release on GitHub](https://github.com/nationalarchives/tna-frontend/releases/new) using the tag you just created
 
 Once a release is created, the [publish pipeline](https://github.com/nationalarchives/tna-frontend/blob/main/.github/workflows/npm-publish.yml) will be triggered.
+
+## Oops!
+
+To delete a tag:
+
+```sh
+git tag -d v0.1.0
+git push --delete origin v0.1.0
+```

package/nationalarchives/stories/development/technologies.mdx

@@ -0,0 +1,65 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Development/Technologies" />
+
+# Technologies
+
+## Storybook
+
+Most widely supported open source frontend workshop for building UI components, constantly updated, also used by TDR
+
+## ESNext JavaScript (not TypeScript)
+
+JavaScript over TypeScript to allow in-project compilation and possible tree-shaking without extra libraries
+
+## Babel
+
+De facto JavaScript compiler and transpiler, allows us to use most up-to-date JavaScript for increased efficiency and cleaner source code
+
+## SCSS
+
+Most mature CSS preprocessor, used in other TNA projects, huge support
+
+## BEM
+
+Agreed CSS methodology within TNA
+
+## Webpack
+
+Already used in many TNA projects, most mature offering although arguably not the fastest - we could consider changing in the future
+
+## Nunjucks
+
+Used by GDS and made by Mozilla, Nunjucks is simple and expandable and allows us to use components in the GOV.UK prototype kit
+
+## npm
+
+Used by many TNA projects and provides highly available package repository, de facto standard for JavaScript packages
+
+## GitHub actions
+
+Free actions not relying on external services, used on some TNA projects but will allow us to have more of a CI/CD methodology
+
+## Prettier
+
+Opinionated code formatter for (S)CSS, JavaScript, JSON and other file types, intended to reduce bikeshedding
+
+## ESLint
+
+De facto linter for JavaScript to catch potential issues
+
+## Stylelint
+
+Most widely supported and mature (S)CSS linter
+
+## Jest
+
+Lightweight and fast testing library, support for Storybook, easy learning curve
+
+## NVM
+
+Ensures all developers can work on the same version of NodeJS, reduces differences between development environments
+
+## Chromatic.com
+
+Suggested by Storybook for visual regression testing

package/nationalarchives/stories/utilities/lists.stories.js

@@ -10,7 +10,7 @@ export default {
 const UnorderedListTemplate = ({ items, plain }) =>
   `<ul class="tna-ul${plain ? " tna-ul--plain" : ""}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
-    ""
+    "",
   )}</ul>`;
 export const UnorderedList = UnorderedListTemplate.bind({});
 UnorderedList.args = {
@@ -25,7 +25,7 @@ UnorderedListPlain.args = {
 const OrderedListTemplate = ({ items, plain }) =>
   `<ol class="tna-ol${plain ? " tna-ol--plain" : ""}">${items.reduce(
     (list, item) => `${list}<li>${item}</li>`,
-    ""
+    "",
   )}</ol>`;
 export const OrderedList = OrderedListTemplate.bind({});
 OrderedList.args = {

package/nationalarchives/stories/utilities/typography.mdx

@@ -10,11 +10,26 @@ import * as ListStories from './lists.stories';
 
 We use a set of typefaces...
 
+## Headings
+
 <Canvas of={HeadingStories.Heading1} />
 <Canvas of={HeadingStories.Heading2} />
 <Canvas of={HeadingStories.Heading3} />
+
+## Heading groups
+
+Although visually identical, there are two types of header groups based on whether the group should be read as a single sentence or not.
+
+In the first example, the heading will be read by screen readers as `The story of Alice Hawkins.`
+
 <Canvas of={HeadingGroupStories.HeadingGroup} />
+
+In the second example, the heading will be read as two separate sentences; `Record revealed. The Monteagle Letter.`
+
 <Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
+
+## General typography
+
 <Canvas of={TypographyStories.Paragraph} />
 <Canvas of={ListStories.UnorderedList} />
 <Canvas of={ListStories.UnorderedListPlain} />

package/nationalarchives/templates/homepage.njk

@@ -1,63 +1,63 @@
-{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+{% from "../components/card/macro.njk" import tnaCard %}
 
-{% extends "nationalarchives/templates/layouts/_generic.njk" %}
+{% extends "./layouts/_prototype-kit.njk" %}
 
 {% block pageTitle %}The National Archives | Welcome{% endblock %}
 
 {% block content %}
 <div class="tna-container">
   <div class="tna-column tna-column--full">
-    <h1 class="tna-heading tna-heading--xl">
-      Welcome
-    </h1>
+  <h1 class="tna-heading tna-heading--xl">
+    Welcome
+  </h1>
   </div>
   <div class="tna-column tna-column--full">
-    {{ tnaCard({
-      "heading": {
-        "supertitle": "Card supertitle",
-        "title": "Card title",
-        "level": 2,
-        "size": "m"
-      },
+  {{ tnaCard({
+    "heading": {
+    "supertitle": "Card supertitle",
+    "title": "Card title",
+    "level": 2,
+    "size": "m"
+    },
+    "href": "#",
+    "image": {
+    "src": "https://loremflickr.com/640/360",
+    "alt": "A placeholder image"
+    },
+    "body": "<p>Card body</p>",
+    "actions": [
+    {
+      "text": "Card action",
       "href": "#",
-      "image": {
-        "src": "https://loremflickr.com/640/360",
-        "alt": "A placeholder image"
-      },
-      "body": "<p>Card body</p>",
-      "actions": [
-        {
-          "text": "Card action",
-          "href": "#",
-          "title": "Go and do the action"
-        }
-      ],
-      "featured": true,
-      "htmlElement": "article"
-    }) }}
+      "title": "Go and do the action"
+    }
+    ],
+    "featured": true,
+    "htmlElement": "article"
+  }) }}
   </div>
   {% for item in range(0, 6) -%}
   <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny">
-    {{ tnaCard({
-      "heading": {
-        "supertitle": "Card supertitle",
-        "title": "Card title",
-        "level": 3
-      },
+  {{ tnaCard({
+    "heading": {
+    "supertitle": "Card supertitle",
+    "title": "Card title",
+    "level": 3
+    },
+    "href": "#",
+    "image": {
+    "src": "https://loremflickr.com/640/360",
+    "alt": "A placeholder image"
+    },
+    "body": "<p>Card body</p>",
+    "actions": [
+    {
+      "text": "Card action",
       "href": "#",
-      "image": {
-        "src": "https://loremflickr.com/640/360",
-        "alt": "A placeholder image"
-      },
-      "body": "<p>Card body</p>",
-      "actions": [
-        {
-          "text": "Card action",
-          "href": "#",
-          "title": "Go and do the action"
-        }
-      ]
-    }) }}
+      "title": "Go and do the action"
+    }
+    ]
+  }) }}
   </div>
   {%- endfor %}
 </div>

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,60 +1,57 @@
 {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
 {#% from "./components/skip-link/macro.njk" import tnaSkipLink -%#}
 <!DOCTYPE html>
-<html lang="{{ htmlLang | default('en') }}" class="tna-template {{ htmlClasses }}">
+<html lang="{{ htmlLang | default('en') }}" class="tna-template tna-template--js-disabled {{ htmlClasses }}">
   <head>
-    <meta charset="utf-8">
-    <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}The National Archives{% endblock %}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-    {% block headIcons %}
-      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon">
-      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
-      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
-      <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
-      <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
-      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
-    {% endblock %}
-
-    {% block head %}{% endblock %}
-
-    {% block stylesheets %}
-        {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
-    {% endblock %}
-
-    {# OpenGraph images needs to be absolute, so we need either a URL for the image or for assetUrl to be set #}
-    {% if opengraphImageUrl or assetUrl %}
-    <meta property="og:image" content="{{ opengraphImageUrl | default(assetUrl + '/images/govuk-opengraph-image.png') }}">
-    {% endif %}
+  <meta charset="utf-8">
+  <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}The National Archives{% endblock %}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+  {% block headIcons %}
+  <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon">
+  <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
+  <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
+  {% endblock %}
+
+  {% block head %}{% endblock %}
+
+  {% block stylesheets %}{% endblock %}
+
+  {# OpenGraph images needs to be absolute, so we need either a URL for the image or for assetUrl to be set #}
+  {% if opengraphImageUrl or assetUrl %}
+  <meta property="og:image" content="{{ opengraphImageUrl | default(assetUrl + '/images/govuk-opengraph-image.png') }}">
+  {% endif %}
   </head>
   <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-    
-    {% block bodyStart %}{% endblock %}
-
-    {% block skipLink %}
-      {#{ govukSkipLink({
-        href: '#main-content',
-        text: 'Skip to main content'
-      }) }#}
-    {% endblock %}
-
-    {% block header %}
-      <h1>HEADER</h1>
-    {% endblock %}
-
-    {% block main %}
-        {% block beforeContent %}{% endblock %}
-        <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
-          {% block content %}{% endblock %}
-        </main>
-    {% endblock %}
-
-    {% block footer %}
-      <h1>FOOTER</h1>
-    {% endblock %}
-
-    {% block bodyEnd %}{% endblock %}
+  {% block bodyStart %}{% endblock %}
+
+  {% block skipLink %}
+  {#{ govukSkipLink({
+    href: '#main-content',
+    text: 'Skip to main content'
+  }) }#}
+  {% endblock %}
+
+  {% block header %}
+  <h1>HEADER</h1>
+  {% endblock %}
+
+  {% block main %}
+  {% block beforeContent %}{% endblock %}
+  <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
+    {% block content %}{% endblock %}
+  </main>
+  {% endblock %}
+
+  {% block footer %}
+  <h1>FOOTER</h1>
+  {% endblock %}
+
+  {% block bodyEnd %}{% endblock %}
   </body>
 </html>

package/nationalarchives/templates/layouts/_prototype-kit.njk

@@ -0,0 +1,5 @@
+{% extends "./_generic.njk" %}
+
+{% block stylesheets %}
+{% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+{% endblock %}