@nationalarchives/frontend 0.1.15-prerelease → 0.1.17-prerelease

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

@@ -1 +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":""}
+{"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,QA+CC,O,EA/CAP,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,aACA,qBACA,2BAEFb,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,EApBxC,CAsBF,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,CAvDiB,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      \"tna-button--accent\",\n      \"tna-button--solid-hover\",\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

@@ -21,6 +21,8 @@ export class Picture {
     this.$transcriptToggle.classList.add(
       "tna-picture__toggle-transcript",
       "tna-button",
+      "tna-button--accent",
+      "tna-button--solid-hover",
     );
     this.$transcriptToggle.setAttribute("aria-controls", uniqueId);
     this.$transcriptToggle.setAttribute("aria-expanded", false);

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

@@ -34,8 +34,8 @@ const Template = ({
   translation,
   classes,
   attributes,
-}) => {
-  return Picture({
+}) =>
+  Picture({
     params: {
       src,
       width,
@@ -48,7 +48,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

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

@@ -17,14 +17,13 @@ export default {
   argTypes,
 };
 
-const Template = ({ classes, attributes }) => {
-  return Profile({
+const Template = ({ classes, attributes }) =>
+  Profile({
     params: {
       classes,
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

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

@@ -19,12 +19,12 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Experimental/Sensitive image",
+  title: "Components/Sensitive image",
   argTypes,
 };
 
-const Template = ({ image, warning, action, classes, attributes }) => {
-  return SensitiveImage({
+const Template = ({ image, warning, action, classes, attributes }) =>
+  SensitiveImage({
     params: {
       image,
       warning,
@@ -33,7 +33,6 @@ const Template = ({ image, warning, action, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/skip-link/_index.scss

@@ -0,0 +1,63 @@
+@use "../../tools/colour";
+
+.tna-skip-link {
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 1rem !important;
+
+  display: block !important;
+
+  position: absolute !important;
+
+  overflow: hidden !important;
+
+  white-space: nowrap !important;
+
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+
+  &,
+  &:link,
+  &:visited {
+    @include colour.colour-font("button-primary-text", $important: true);
+  }
+
+  &:active,
+  &:focus {
+    width: auto !important;
+    height: auto !important;
+    margin: inherit !important;
+
+    position: static !important;
+
+    overflow: visible !important;
+
+    white-space: inherit !important;
+
+    clip: auto !important;
+    -webkit-clip-path: none !important;
+    clip-path: none !important;
+  }
+
+  &:focus {
+    @include colour.colour-background(
+      "button-primary-background",
+      $important: true
+    );
+
+    @include colour.colour-border("focus-outline", 0.3125rem, $important: true);
+
+    outline: none !important;
+  }
+
+  &:hover {
+    @include colour.colour-font("button-primary-hover-text", $important: true);
+
+    @include colour.colour-background(
+      "button-primary-hover-background",
+      $important: true
+    );
+  }
+}

package/nationalarchives/components/skip-link/fixtures.json

@@ -0,0 +1,11 @@
+{
+  "component": "skip link",
+  "fixtures": [
+    {
+      "name": "minimal",
+      "options": {},
+      "html": "<a href=\"#main-content\" class=\"tna-skip-link \">Skip to main content</a>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/{patterns/featured-collection → components/skip-link}/macro-options.json

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

package/nationalarchives/components/skip-link/macro.njk

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

package/nationalarchives/{patterns/featured-collection/featured-collection.stories.js → components/skip-link/skip-link.stories.js}

@@ -1,8 +1,7 @@
-import FeaturedCollection from "./template.njk";
+import SkipLink from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  heading: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -14,22 +13,20 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Patterns/Experimental/Featured collection",
+  title: "Components/Skip link",
   argTypes,
 };
 
-const Template = ({ heading, classes, attributes }) => {
-  return FeaturedCollection({
+const Template = ({ classes, attributes }) =>
+  `<p>To view the skip link component tab to this example, or click inside this example and press tab.</p>
+  ${SkipLink({
     params: {
-      heading,
       classes,
       attributes,
     },
-  });
-};
+  })}`;
 
 export const Standard = Template.bind({});
 Standard.args = {
-  heading: "Records from the collection",
-  classes: "tna-featured-collection--demo",
+  classes: "tna-skip-link--demo",
 };

package/nationalarchives/components/skip-link/template.njk

@@ -0,0 +1,4 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<a href="#{{ params.href if params.href else 'main-content' }}" class="tna-skip-link {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{ params.text if params.text else 'Skip to main content' }}
+</a>

package/nationalarchives/components/tabs/_index.scss

@@ -1,4 +1,5 @@
 @use "../../tools/colour";
+@use "../../tools/typography";
 
 .tna-tabs {
   margin-bottom: 2rem;
@@ -34,9 +35,11 @@
     position: relative;
 
     @include colour.colour-font("font-dark");
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: 700;
+    // font-size: inherit;
+    @include typography.relative-font-size(20);
+    // font-family: inherit;
+    @include typography.heading-font;
+    // font-weight: 700;
     text-decoration: none;
     line-height: 1.5;
     text-align: center;
@@ -135,8 +138,7 @@
 
       overflow: hidden;
 
-      border: 1px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 1px);
     }
   }
 }

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

@@ -22,8 +22,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ title, items, sticky, classes, attributes }) => {
-  return Tabs({
+const Template = ({ title, items, sticky, classes, attributes }) =>
+  Tabs({
     params: {
       title,
       items,
@@ -32,7 +32,6 @@ const Template = ({ title, items, sticky, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {
@@ -41,17 +40,17 @@ Standard.args = {
     {
       id: "unique-id-a",
       title: "Alpha section",
-      body: "<h2>Alpha title</h2><p>Lorem ipsum</p>",
+      body: '<h2 class="tna-heading">Alpha title</h2><p>Lorem ipsum</p>',
     },
     {
       id: "unique-id-b",
       title: "Beta section",
-      body: "<h2>Beta title</h2><p>Lorem ipsum</p>",
+      body: '<h2 class="tna-heading">Beta title</h2><p>Lorem ipsum</p>',
     },
     {
       id: "unique-id-c",
       title: "Gamma section",
-      body: "<h2>Gamma title</h2><p>Lorem ipsum</p>",
+      body: '<h2 class="tna-heading">Gamma title</h2><p>Lorem ipsum</p>',
     },
   ],
   classes: "tna-tabs--demo",
@@ -64,17 +63,17 @@ Test.args = {
     {
       id: "unique-id-a",
       title: "Alpha section",
-      body: "<h2>Alpha title</h2><p>Lorem ipsum</p>",
+      body: '<h2 class="tna-heading">Alpha title</h2><p>Lorem ipsum</p>',
     },
     {
       id: "unique-id-b",
       title: "Beta section",
-      body: "<h2>Beta title</h2><p>Lorem ipsum</p>",
+      body: '<h2 class="tna-heading">Beta title</h2><p>Lorem ipsum</p>',
     },
     {
       id: "unique-id-c",
       title: "Gamma section",
-      body: "<h2>Gamma title</h2><p>Lorem ipsum</p>",
+      body: '<h2 class="tna-heading">Gamma title</h2><p>Lorem ipsum</p>',
     },
   ],
   classes: "tna-tabs--demo",

package/nationalarchives/lib/font-awesome/_animated.scss

@@ -0,0 +1,276 @@
+// animating icons
+// --------------------------
+
+.#{$fa-css-prefix}-beat {
+  animation-name: #{$fa-css-prefix}-beat;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(
+    --#{$fa-css-prefix}-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(
+    --#{$fa-css-prefix}-animation-timing,
+    ease-in-out
+  );
+}
+
+.#{$fa-css-prefix}-bounce {
+  animation-name: #{$fa-css-prefix}-bounce;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(
+    --#{$fa-css-prefix}-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(
+    --#{$fa-css-prefix}-animation-timing,
+    cubic-bezier(0.28, 0.84, 0.42, 1)
+  );
+}
+
+.#{$fa-css-prefix}-fade {
+  animation-name: #{$fa-css-prefix}-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(
+    --#{$fa-css-prefix}-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(
+    --#{$fa-css-prefix}-animation-timing,
+    cubic-bezier(0.4, 0, 0.6, 1)
+  );
+}
+
+.#{$fa-css-prefix}-beat-fade {
+  animation-name: #{$fa-css-prefix}-beat-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(
+    --#{$fa-css-prefix}-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(
+    --#{$fa-css-prefix}-animation-timing,
+    cubic-bezier(0.4, 0, 0.6, 1)
+  );
+}
+
+.#{$fa-css-prefix}-flip {
+  animation-name: #{$fa-css-prefix}-flip;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(
+    --#{$fa-css-prefix}-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(
+    --#{$fa-css-prefix}-animation-timing,
+    ease-in-out
+  );
+}
+
+.#{$fa-css-prefix}-shake {
+  animation-name: #{$fa-css-prefix}-shake;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(
+    --#{$fa-css-prefix}-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
+.#{$fa-css-prefix}-spin {
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
+  animation-iteration-count: var(
+    --#{$fa-css-prefix}-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
+.#{$fa-css-prefix}-spin-reverse {
+  --#{$fa-css-prefix}-animation-direction: reverse;
+}
+
+.#{$fa-css-prefix}-pulse,
+.#{$fa-css-prefix}-spin-pulse {
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(
+    --#{$fa-css-prefix}-animation-iteration-count,
+    infinite
+  );
+  animation-timing-function: var(
+    --#{$fa-css-prefix}-animation-timing,
+    steps(8)
+  );
+}
+
+// if agent or operating system prefers reduced motion, disable animations
+// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
+// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+@media (prefers-reduced-motion: reduce) {
+  .#{$fa-css-prefix}-beat,
+  .#{$fa-css-prefix}-bounce,
+  .#{$fa-css-prefix}-fade,
+  .#{$fa-css-prefix}-beat-fade,
+  .#{$fa-css-prefix}-flip,
+  .#{$fa-css-prefix}-pulse,
+  .#{$fa-css-prefix}-shake,
+  .#{$fa-css-prefix}-spin,
+  .#{$fa-css-prefix}-spin-pulse {
+    animation-delay: -1ms;
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s;
+  }
+}
+
+@keyframes #{$fa-css-prefix}-beat {
+  0%,
+  90% {
+    transform: scale(1);
+  }
+
+  45% {
+    transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-bounce {
+  0% {
+    transform: scale(1, 1) translateY(0);
+  }
+
+  10% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),
+        var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)
+      )
+      translateY(0);
+  }
+
+  30% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),
+        var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)
+      )
+      translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em));
+  }
+
+  50% {
+    transform: scale(
+        var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),
+        var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)
+      )
+      translateY(0);
+  }
+
+  57% {
+    transform: scale(1, 1)
+      translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em));
+  }
+
+  64% {
+    transform: scale(1, 1) translateY(0);
+  }
+
+  100% {
+    transform: scale(1, 1) translateY(0);
+  }
+}
+
+@keyframes #{$fa-css-prefix}-fade {
+  50% {
+    opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4);
+  }
+}
+
+@keyframes #{$fa-css-prefix}-beat-fade {
+  0%,
+  100% {
+    opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-flip {
+  50% {
+    transform: rotate3d(
+      var(--#{$fa-css-prefix}-flip-x, 0),
+      var(--#{$fa-css-prefix}-flip-y, 1),
+      var(--#{$fa-css-prefix}-flip-z, 0),
+      var(--#{$fa-css-prefix}-flip-angle, -180deg)
+    );
+  }
+}
+
+@keyframes #{$fa-css-prefix}-shake {
+  0% {
+    transform: rotate(-15deg);
+  }
+
+  4% {
+    transform: rotate(15deg);
+  }
+
+  8%,
+  24% {
+    transform: rotate(-18deg);
+  }
+
+  12%,
+  28% {
+    transform: rotate(18deg);
+  }
+
+  16% {
+    transform: rotate(-22deg);
+  }
+
+  20% {
+    transform: rotate(22deg);
+  }
+
+  32% {
+    transform: rotate(-12deg);
+  }
+
+  36% {
+    transform: rotate(12deg);
+  }
+
+  40%,
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes #{$fa-css-prefix}-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/nationalarchives/lib/font-awesome/_bordered-pulled.scss

@@ -0,0 +1,20 @@
+// bordered + pulled icons
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
+  border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
+  border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
+  border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
+  padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
+}
+
+.#{$fa-css-prefix}-pull-left {
+  float: left;
+  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
+}
+
+.#{$fa-css-prefix}-pull-right {
+  float: right;
+  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
+}