@nationalarchives/frontend 0.1.41 → 0.1.43

package/nationalarchives/components/global-header/global-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/global-header/global-header.js","mappings":"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","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/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","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 GlobalHeader {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-global-header__navigation-button\");\n    this.$navigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__navigation-wrapper\");\n    this.$topNavigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n    this.$links =\n      $module &&\n      ((this.$navigation &&\n        this.$navigation.querySelectorAll(\"[tabindex='0']\")) ||\n        (this.$topNavigation &&\n          this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 768px)\");\n\n    if (\n      !this.$module ||\n      !this.$toggleButton ||\n      (!this.$navigation && !this.$topNavigation)\n    ) {\n      return;\n    }\n\n    const uniqueId = `tna-menu-content-${uuidv4()}`;\n    const uniqueIdTop = `${uniqueId}-top`;\n    if (this.$navigation) {\n      this.$navigation.setAttribute(\"id\", uniqueId);\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.setAttribute(\"id\", uniqueIdTop);\n    }\n\n    this.$toggleButton.removeAttribute(\"hidden\");\n    this.$toggleButton.setAttribute(\n      \"aria-controls\",\n      [uniqueId, uniqueIdTop].join(\" \"),\n    );\n\n    this.syncState();\n\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n    } else {\n      this.mql.addListener(() => this.syncState());\n    }\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        if (this.$navigation) {\n          this.$navigation.classList.add(\"tna-global-header__navigation--open\");\n          this.$navigation.hidden = false;\n          this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n        }\n        if (this.$topNavigation) {\n          this.$topNavigation.classList.add(\n            \"tna-global-header__top-navigation--open\",\n          );\n          this.$topNavigation.hidden = false;\n          this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n        }\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n        this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n        this.$toggleButton.classList.add(\n          \"tna-global-header__navigation-button--opened\",\n        );\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"0\");\n        }\n      } else {\n        if (this.$navigation) {\n          this.$navigation.classList.remove(\n            \"tna-global-header__navigation--open\",\n          );\n          this.$navigation.hidden = true;\n          this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n        }\n        if (this.$topNavigation) {\n          this.$topNavigation.classList.remove(\n            \"tna-global-header__top-navigation--open\",\n          );\n          this.$topNavigation.hidden = true;\n          this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n        }\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n        this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n        this.$toggleButton.classList.remove(\n          \"tna-global-header__navigation-button--opened\",\n        );\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"-1\");\n        }\n      }\n    } else {\n      if (this.$navigation) {\n        this.$navigation.classList.add(\"tna-global-header__navigation--open\");\n        this.$navigation.hidden = false;\n        this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n      }\n      if (this.$topNavigation) {\n        this.$topNavigation.classList.add(\n          \"tna-global-header__top-navigation--open\",\n        );\n        this.$topNavigation.hidden = false;\n        this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n      }\n      this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n      this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n\n      for (let i = 0; i < this.$links.length; i++) {\n        this.$links[i].setAttribute(\"tabindex\", \"0\");\n      }\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","GlobalHeader","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","uniqueId","concat","uuidv4","uniqueIdTop","setAttribute","removeAttribute","join","syncState","addEventListener","handleToggleNavigation","addListener","matches","classList","add","hidden","i","length","remove"],"sourceRoot":""}
+{"version":3,"file":"components/global-header/global-header.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class GlobalHeader {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-global-header__navigation-button\");\n    this.$navigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__navigation-wrapper\");\n    this.$topNavigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n    this.$links =\n      $module &&\n      ((this.$navigation &&\n        this.$navigation.querySelectorAll(\"[tabindex='0']\")) ||\n        (this.$topNavigation &&\n          this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 768px)\");\n\n    if (\n      !this.$module ||\n      !this.$toggleButton ||\n      (!this.$navigation && !this.$topNavigation)\n    ) {\n      return;\n    }\n\n    this.$toggleButton.removeAttribute(\"hidden\");\n    this.syncState();\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n    } else {\n      this.mql.addListener(() => this.syncState());\n    }\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.show();\n      } else {\n        this.hide();\n      }\n    } else {\n      this.show();\n    }\n  }\n\n  hide() {\n    if (this.$navigation) {\n      this.$navigation.hidden = true;\n      this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.hidden = true;\n      this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n    }\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-global-header__navigation-button--opened\",\n    );\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n\n  show() {\n    if (this.$navigation) {\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.hidden = false;\n      this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n    }\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\n      \"tna-global-header__navigation-button--opened\",\n    );\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"0\");\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","GlobalHeader","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","matches","show","hide","hidden","setAttribute","classList","remove","i","length","add"],"sourceRoot":""}

package/nationalarchives/components/global-header/global-header.mjs

@@ -1,5 +1,3 @@
-import uuidv4 from "../../lib/uuid.mjs";
-
 export class GlobalHeader {
   constructor($module) {
     this.$module = $module;
@@ -28,27 +26,11 @@ export class GlobalHeader {
       return;
     }
 
-    const uniqueId = `tna-menu-content-${uuidv4()}`;
-    const uniqueIdTop = `${uniqueId}-top`;
-    if (this.$navigation) {
-      this.$navigation.setAttribute("id", uniqueId);
-    }
-    if (this.$topNavigation) {
-      this.$topNavigation.setAttribute("id", uniqueIdTop);
-    }
-
     this.$toggleButton.removeAttribute("hidden");
-    this.$toggleButton.setAttribute(
-      "aria-controls",
-      [uniqueId, uniqueIdTop].join(" "),
-    );
-
     this.syncState();
-
     this.$toggleButton.addEventListener("click", () =>
       this.handleToggleNavigation(),
     );
-
     if ("addEventListener" in this.mql) {
       this.mql.addEventListener("change", () => this.syncState());
     } else {
@@ -64,71 +46,50 @@ export class GlobalHeader {
   syncState() {
     if (this.mql.matches) {
       if (this.menuOpened) {
-        if (this.$navigation) {
-          this.$navigation.classList.add("tna-global-header__navigation--open");
-          this.$navigation.hidden = false;
-          this.$navigation.setAttribute("aria-hidden", "false");
-        }
-        if (this.$topNavigation) {
-          this.$topNavigation.classList.add(
-            "tna-global-header__top-navigation--open",
-          );
-          this.$topNavigation.hidden = false;
-          this.$topNavigation.setAttribute("aria-hidden", "false");
-        }
-        this.$toggleButton.setAttribute("aria-expanded", "true");
-        this.$toggleButton.setAttribute("title", "Close menu");
-        this.$toggleButton.classList.add(
-          "tna-global-header__navigation-button--opened",
-        );
-
-        for (let i = 0; i < this.$links.length; i++) {
-          this.$links[i].setAttribute("tabindex", "0");
-        }
+        this.show();
       } else {
-        if (this.$navigation) {
-          this.$navigation.classList.remove(
-            "tna-global-header__navigation--open",
-          );
-          this.$navigation.hidden = true;
-          this.$navigation.setAttribute("aria-hidden", "true");
-        }
-        if (this.$topNavigation) {
-          this.$topNavigation.classList.remove(
-            "tna-global-header__top-navigation--open",
-          );
-          this.$topNavigation.hidden = true;
-          this.$topNavigation.setAttribute("aria-hidden", "true");
-        }
-        this.$toggleButton.setAttribute("aria-expanded", "false");
-        this.$toggleButton.setAttribute("title", "Open menu");
-        this.$toggleButton.classList.remove(
-          "tna-global-header__navigation-button--opened",
-        );
-
-        for (let i = 0; i < this.$links.length; i++) {
-          this.$links[i].setAttribute("tabindex", "-1");
-        }
+        this.hide();
       }
     } else {
-      if (this.$navigation) {
-        this.$navigation.classList.add("tna-global-header__navigation--open");
-        this.$navigation.hidden = false;
-        this.$navigation.setAttribute("aria-hidden", "false");
-      }
-      if (this.$topNavigation) {
-        this.$topNavigation.classList.add(
-          "tna-global-header__top-navigation--open",
-        );
-        this.$topNavigation.hidden = false;
-        this.$topNavigation.setAttribute("aria-hidden", "false");
-      }
-      this.$toggleButton.setAttribute("aria-expanded", "true");
-      this.$toggleButton.setAttribute("title", "Close menu");
+      this.show();
+    }
+  }
 
-      for (let i = 0; i < this.$links.length; i++) {
-        this.$links[i].setAttribute("tabindex", "0");
-      }
+  hide() {
+    if (this.$navigation) {
+      this.$navigation.hidden = true;
+      this.$navigation.setAttribute("aria-hidden", "true");
+    }
+    if (this.$topNavigation) {
+      this.$topNavigation.hidden = true;
+      this.$topNavigation.setAttribute("aria-hidden", "true");
+    }
+    this.$toggleButton.setAttribute("aria-expanded", "false");
+    this.$toggleButton.setAttribute("title", "Open menu");
+    this.$toggleButton.classList.remove(
+      "tna-global-header__navigation-button--opened",
+    );
+    for (let i = 0; i < this.$links.length; i++) {
+      this.$links[i].setAttribute("tabindex", "-1");
+    }
+  }
+
+  show() {
+    if (this.$navigation) {
+      this.$navigation.hidden = false;
+      this.$navigation.setAttribute("aria-hidden", "false");
+    }
+    if (this.$topNavigation) {
+      this.$topNavigation.hidden = false;
+      this.$topNavigation.setAttribute("aria-hidden", "false");
+    }
+    this.$toggleButton.setAttribute("aria-expanded", "true");
+    this.$toggleButton.setAttribute("title", "Close menu");
+    this.$toggleButton.classList.add(
+      "tna-global-header__navigation-button--opened",
+    );
+    for (let i = 0; i < this.$links.length; i++) {
+      this.$links[i].setAttribute("tabindex", "0");
     }
   }
 }

package/nationalarchives/components/global-header/global-header.scss

@@ -3,10 +3,6 @@
 @use "../../tools/colour";
 @use "../../tools/typography";
 @use "../../tools/media";
-@use "../../utilities/colour" as colourUtils;
-@use "../../utilities/global";
-// @use "../../utilities/typography" as typographyUtils;
-@use "../grid";
 
 .tna-global-header {
   padding-top: 1rem;
@@ -154,6 +150,9 @@
     }
   }
 
+  &__navigation-wrapper {
+  }
+
   &__navigation {
     margin: 0.5rem 0 0;
     height: 100%;
@@ -231,6 +230,10 @@
   }
 
   @include media.on-medium {
+    &__navigation {
+      column-gap: 1rem;
+    }
+
     &__navigation-item-link {
       @include typography.relative-font-size(16);
     }
@@ -310,8 +313,8 @@
 
       background-color: rgb(255 255 255 / 10%);
 
-      @include colour.colour-border("keyline-dark", 3px, solid, top);
-      @include colour.colour-border("keyline-dark", 3px, solid, bottom);
+      @include colour.colour-border("keyline-dark", 2px, solid, top);
+      @include colour.colour-border("keyline-dark", 2px, solid, bottom);
     }
 
     &__navigation-item {

package/nationalarchives/components/global-header/global-header.stories.js

@@ -69,10 +69,13 @@ Standard.args = {
     },
   ],
   navigation: [
-    { text: "Visit", href: "www.nationalarchives.gov.uk/about/visit-us/" },
+    {
+      text: "Visit",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
+    },
     {
       text: "What's on",
-      href: "www.nationalarchives.gov.uk/about/visit-us/whats-on/",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
     },
     {
       text: "Explore the collection",
@@ -80,12 +83,12 @@ Standard.args = {
     },
     {
       text: "Using the archive",
-      href: "www.nationalarchives.gov.uk/help-with-your-research/",
+      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
     },
-    { text: "Learn", href: "www.nationalarchives.gov.uk/education/" },
+    { text: "Learn", href: "https://www.nationalarchives.gov.uk/education/" },
     {
       text: "Professional guidance and services",
-      href: "www.nationalarchives.gov.uk/professional-guidance-and-services/",
+      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
     },
   ],
   classes: "tna-global-header--demo",
@@ -136,10 +139,13 @@ Medium.args = {
     },
   ],
   navigation: [
-    { text: "Visit", href: "www.nationalarchives.gov.uk/about/visit-us/" },
+    {
+      text: "Visit",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
+    },
     {
       text: "What's on",
-      href: "www.nationalarchives.gov.uk/about/visit-us/whats-on/",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
     },
     {
       text: "Explore the collection",
@@ -147,12 +153,12 @@ Medium.args = {
     },
     {
       text: "Using the archive",
-      href: "www.nationalarchives.gov.uk/help-with-your-research/",
+      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
     },
-    { text: "Learn", href: "www.nationalarchives.gov.uk/education/" },
+    { text: "Learn", href: "https://www.nationalarchives.gov.uk/education/" },
     {
       text: "Professional guidance and services",
-      href: "www.nationalarchives.gov.uk/professional-guidance-and-services/",
+      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
     },
   ],
   classes: "tna-global-header--demo",
@@ -203,10 +209,13 @@ MediumCollapsed.args = {
     },
   ],
   navigation: [
-    { text: "Visit", href: "www.nationalarchives.gov.uk/about/visit-us/" },
+    {
+      text: "Visit",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
+    },
     {
       text: "What's on",
-      href: "www.nationalarchives.gov.uk/about/visit-us/whats-on/",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
     },
     {
       text: "Explore the collection",
@@ -214,12 +223,12 @@ MediumCollapsed.args = {
     },
     {
       text: "Using the archive",
-      href: "www.nationalarchives.gov.uk/help-with-your-research/",
+      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
     },
-    { text: "Learn", href: "www.nationalarchives.gov.uk/education/" },
+    { text: "Learn", href: "https://www.nationalarchives.gov.uk/education/" },
     {
       text: "Professional guidance and services",
-      href: "www.nationalarchives.gov.uk/professional-guidance-and-services/",
+      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
     },
   ],
   collapseOnMedium: true,
@@ -258,10 +267,13 @@ Mobile.args = {
     },
   ],
   navigation: [
-    { text: "Visit", href: "www.nationalarchives.gov.uk/about/visit-us/" },
+    {
+      text: "Visit",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
+    },
     {
       text: "What's on",
-      href: "www.nationalarchives.gov.uk/about/visit-us/whats-on/",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
     },
     {
       text: "Explore the collection",
@@ -269,12 +281,12 @@ Mobile.args = {
     },
     {
       text: "Using the archive",
-      href: "www.nationalarchives.gov.uk/help-with-your-research/",
+      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
     },
-    { text: "Learn", href: "www.nationalarchives.gov.uk/education/" },
+    { text: "Learn", href: "https://www.nationalarchives.gov.uk/education/" },
     {
       text: "Professional guidance and services",
-      href: "www.nationalarchives.gov.uk/professional-guidance-and-services/",
+      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
     },
   ],
   classes: "tna-global-header--demo",

package/nationalarchives/components/global-header/macro-options.json

@@ -83,6 +83,18 @@
       }
     ]
   },
+  {
+    "name": "navigationId",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "topNavigationId",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "classes",
     "type": "string",

package/nationalarchives/components/global-header/template.njk

@@ -30,25 +30,25 @@
       </span>
     </div>
     <div class="tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper">
-      <button class="tna-global-header__navigation-button" type="button" hidden>
+      <button class="tna-global-header__navigation-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }} {{ 'tna-header__top-navigation' or params.topNavigationId }}" hidden>
         Menu
         <span class="tna-global-header__hamburger"></span>
       </button>
     </div>
     {%- if params.navigation %}
-    <nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" aria-label="Main site navigation">
-      <ul class="tna-global-header__navigation">
+    <nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" id="{{ 'tna-header__navigation' or params.navigationId }}" aria-label="Main site navigation">
+      <menu class="tna-global-header__navigation">
         {%- for item in params.navigation %}
         <li class="tna-global-header__navigation-item">
           <a href="{{ item.href }}" class="tna-global-header__navigation-item-link" {%- if item.title %} title="{{ item.title }}"{% endif %} tabindex="0">{{ item.text }}</a>
         </li>
         {%- endfor %}
-      </ul>
+      </menu>
     </nav>
     {%- endif %}
     {%- if params.topNavigation %}
-    <nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" aria-label="Secondary site navigation">
-      <ul class="tna-global-header__top-navigation">
+    <nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" id="{{ 'tna-header__top-navigation' or params.topNavigationId }}" aria-label="Secondary site navigation">
+      <menu class="tna-global-header__top-navigation">
         {%- for item in params.topNavigation %}
         <li class="tna-global-header__top-navigation-item">
           <a href="{{ item.href }}" class="tna-global-header__top-navigation-link" {%- if item.title %} title="{{ item.title }}"{% endif %} tabindex="0">
@@ -63,7 +63,7 @@
           </a>
         </li>
         {%- endfor %}
-      </ul>
+      </menu>
     </nav>
     {%- endif %}
   </div>

package/nationalarchives/components/grid/fixtures.json

@@ -4,8 +4,7 @@
     {
       "name": "container only",
       "options": {},
-      "html": "<div class=\"tna-container \"></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \"></div>"
     },
     {
       "name": "container max width",
@@ -18,8 +17,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container tna-container--max\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container tna-container--max\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>"
     },
     {
       "name": "container no padding",
@@ -32,8 +30,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container tna-container--no-padding\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container tna-container--no-padding\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>"
     },
     {
       "name": "container element",
@@ -46,8 +43,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-container \"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></article>",
-      "hidden": false
+      "html": "<article class=\"tna-container \"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></article>"
     },
     {
       "name": "container classes",
@@ -60,8 +56,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container container__test-class\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container container__test-class\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>"
     },
     {
       "name": "container attributes",
@@ -76,8 +71,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \" data-testattribute=\"foobar\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \" data-testattribute=\"foobar\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>"
     },
     {
       "name": "different columns",
@@ -177,8 +171,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full\"><p>Full width</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-2-3\"><p>Two thirds</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-2-3\"><p>Two thirds</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full\"><p>Full width</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-2-3\"><p>Two thirds</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-2-3\"><p>Two thirds</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div></div>"
     },
     {
       "name": "column widths",
@@ -193,8 +186,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full tna-column--full-medium tna-column--full-small tna-column--full-tiny\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full tna-column--full-medium tna-column--full-small tna-column--full-tiny\"><p>Full width</p></div></div>"
     },
     {
       "name": "responsive column widths",
@@ -209,8 +201,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--width-1-5 tna-column--width-1-4-medium tna-column--width-1-3-small tna-column--width-1-2-tiny\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--width-1-5 tna-column--width-1-4-medium tna-column--width-1-3-small tna-column--width-1-2-tiny\"><p>Full width</p></div></div>"
     },
     {
       "name": "flexible column widths",
@@ -225,8 +216,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--flex-4 tna-column--flex-3-medium tna-column--flex-2-small tna-column--flex-1-tiny\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--flex-4 tna-column--flex-3-medium tna-column--flex-2-small tna-column--flex-1-tiny\"><p>Full width</p></div></div>"
     },
     {
       "name": "column element",
@@ -238,8 +228,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column \"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \"><div class=\"tna-column \"><p>Full width</p></div></div>"
     },
     {
       "name": "column classes",
@@ -251,8 +240,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column column--test-class\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \"><div class=\"tna-column column--test-class\"><p>Full width</p></div></div>"
     },
     {
       "name": "column attributes",
@@ -266,8 +254,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column \" data-testattribute=\"foobar\"><p>Full width</p></div></div>",
-      "hidden": false
+      "html": "<div class=\"tna-container \"><div class=\"tna-column \" data-testattribute=\"foobar\"><p>Full width</p></div></div>"
     }
   ]
 }

package/nationalarchives/components/grid/grid.css

@@ -1 +1 @@
-.tna-container{max-width:75.25rem;width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch}.tna-container--no-padding,.tna-container--no-padding-all{max-width:71.25rem}.tna-container--max{max-width:none}.tna-container--centred{justify-content:center}.tna-column{margin:0;padding-right:1rem;padding-left:1rem;box-sizing:border-box}.tna-column--container{display:flex;flex-wrap:wrap;justify-content:stretch;align-items:stretch}.tna-column--align-top{align-self:flex-start}.tna-column--align-centre{align-self:center}.tna-column--align-bottom{align-self:flex-end}.tna-column--full{width:100%;flex:none}.tna-column--width-1-12{width:8.3333333333%;flex:none}.tna-column--margin-right-1-12{margin-right:8.3333333333%}.tna-column--margin-left-1-12{margin-left:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6{margin-right:16.6666666667%}.tna-column--margin-left-1-6{margin-left:16.6666666667%}.tna-column--width-1-4{width:25%;flex:none}.tna-column--margin-right-1-4{margin-right:25%}.tna-column--margin-left-1-4{margin-left:25%}.tna-column--width-1-3{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3{margin-right:33.3333333333%}.tna-column--margin-left-1-3{margin-left:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%;flex:none}.tna-column--margin-right-5-12{margin-right:41.6666666667%}.tna-column--margin-left-5-12{margin-left:41.6666666667%}.tna-column--width-1-2{width:50%;flex:none}.tna-column--margin-right-1-2{margin-right:50%}.tna-column--margin-left-1-2{margin-left:50%}.tna-column--width-7-12{width:58.3333333333%;flex:none}.tna-column--margin-right-7-12{margin-right:58.3333333333%}.tna-column--margin-left-7-12{margin-left:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3{margin-right:66.6666666667%}.tna-column--margin-left-2-3{margin-left:66.6666666667%}.tna-column--width-3-4{width:75%;flex:none}.tna-column--margin-right-3-4{margin-right:75%}.tna-column--margin-left-3-4{margin-left:75%}.tna-column--width-5-6{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6{margin-right:83.3333333333%}.tna-column--margin-left-5-6{margin-left:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%;flex:none}.tna-column--margin-right-11-12{margin-right:91.6666666667%}.tna-column--margin-left-11-12{margin-left:91.6666666667%}.tna-column--flex-1{width:auto;flex:1 0}.tna-column--flex-2{width:auto;flex:2 0}.tna-column--flex-3{width:auto;flex:3 0}.tna-column--order-1{order:1}.tna-column--order-2{order:2}.tna-column--order-3{order:3}.tna-column--order-4{order:4}@media(min-width: 48.0625em)and (max-width: 64em){.tna-column--full-medium{width:100%;flex:none}.tna-column--width-1-6-medium{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6-medium{margin-right:16.6666666667%}.tna-column--margin-left-1-6-medium{margin-left:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3-medium{margin-right:33.3333333333%}.tna-column--margin-left-1-3-medium{margin-left:33.3333333333%}.tna-column--width-1-2-medium{width:50%;flex:none}.tna-column--margin-right-1-2-medium{margin-right:50%}.tna-column--margin-left-1-2-medium{margin-left:50%}.tna-column--width-2-3-medium{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3-medium{margin-right:66.6666666667%}.tna-column--margin-left-2-3-medium{margin-left:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6-medium{margin-right:83.3333333333%}.tna-column--margin-left-5-6-medium{margin-left:83.3333333333%}.tna-column--flex-1-medium{width:auto;flex:1 0}.tna-column--flex-2-medium{width:auto;flex:2 0}.tna-column--flex-3-medium{width:auto;flex:3 0}.tna-column--order-1-medium{order:1}.tna-column--order-2-medium{order:2}.tna-column--order-3-medium{order:3}.tna-column--order-4-medium{order:4}}@media(max-width: 30em){.tna-container{padding-right:.5rem;padding-left:.5rem}.tna-column{padding-right:.5rem;padding-left:.5rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-column--full-small{width:100%;flex:none}.tna-column--width-1-4-small{width:25%;flex:none}.tna-column--margin-right-1-4-small{margin-right:25%}.tna-column--margin-left-1-4-small{margin-left:25%}.tna-column--width-1-2-small{width:50%;flex:none}.tna-column--margin-right-1-2-small{margin-right:50%}.tna-column--margin-left-1-2-small{margin-left:50%}.tna-column--width-3-4-small{width:75%;flex:none}.tna-column--margin-right-3-4-small{margin-right:75%}.tna-column--margin-left-3-4-small{margin-left:75%}.tna-column--flex-1-small{width:auto;flex:1 0}.tna-column--flex-2-small{width:auto;flex:2 0}.tna-column--flex-3-small{width:auto;flex:3 0}.tna-column--order-1-small{order:1}.tna-column--order-2-small{order:2}.tna-column--order-3-small{order:3}.tna-column--order-4-small{order:4}}@media(max-width: 30em){.tna-column--full-tiny{width:100%;flex:none}.tna-column--width-1-2-tiny{width:50%;flex:none}.tna-column--margin-right-1-2-tiny{margin-right:50%}.tna-column--margin-left-1-2-tiny{margin-left:50%}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--order-1-tiny{order:1}.tna-column--order-2-tiny{order:2}.tna-column--order-3-tiny{order:3}.tna-column--order-4-tiny{order:4}}.tna-container--no-padding,.tna-container--no-padding-all,.tna-container--no-padding-all>.tna-column,.tna-column--no-padding,.tna-column--container--no-padding-all,.tna-column--container--no-padding-all>.tna-column{padding-right:0;padding-left:0}/*# sourceMappingURL=grid.css.map */
+.tna-container{max-width:75.25rem;width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch}.tna-container--no-padding,.tna-container--no-padding-all{max-width:71.25rem}.tna-container--max{max-width:none}.tna-container--centred{justify-content:center}.tna-column{padding-right:1rem;padding-left:1rem;box-sizing:border-box}.tna-column--container{display:flex;flex-wrap:wrap;justify-content:stretch;align-items:stretch}.tna-column--align-top{align-self:flex-start}.tna-column--align-centre{align-self:center}.tna-column--align-bottom{align-self:flex-end}.tna-column--full{width:100%;flex:none}.tna-column--width-1-12{width:8.3333333333%;flex:none}.tna-column--margin-right-1-12{margin-right:8.3333333333%}.tna-column--margin-left-1-12{margin-left:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6{margin-right:16.6666666667%}.tna-column--margin-left-1-6{margin-left:16.6666666667%}.tna-column--width-1-4{width:25%;flex:none}.tna-column--margin-right-1-4{margin-right:25%}.tna-column--margin-left-1-4{margin-left:25%}.tna-column--width-1-3{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3{margin-right:33.3333333333%}.tna-column--margin-left-1-3{margin-left:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%;flex:none}.tna-column--margin-right-5-12{margin-right:41.6666666667%}.tna-column--margin-left-5-12{margin-left:41.6666666667%}.tna-column--width-1-2{width:50%;flex:none}.tna-column--margin-right-1-2{margin-right:50%}.tna-column--margin-left-1-2{margin-left:50%}.tna-column--width-7-12{width:58.3333333333%;flex:none}.tna-column--margin-right-7-12{margin-right:58.3333333333%}.tna-column--margin-left-7-12{margin-left:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3{margin-right:66.6666666667%}.tna-column--margin-left-2-3{margin-left:66.6666666667%}.tna-column--width-3-4{width:75%;flex:none}.tna-column--margin-right-3-4{margin-right:75%}.tna-column--margin-left-3-4{margin-left:75%}.tna-column--width-5-6{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6{margin-right:83.3333333333%}.tna-column--margin-left-5-6{margin-left:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%;flex:none}.tna-column--margin-right-11-12{margin-right:91.6666666667%}.tna-column--margin-left-11-12{margin-left:91.6666666667%}.tna-column--flex-1{width:auto;flex:1 0}.tna-column--flex-2{width:auto;flex:2 0}.tna-column--flex-3{width:auto;flex:3 0}.tna-column--order-1{order:1}.tna-column--order-2{order:2}.tna-column--order-3{order:3}.tna-column--order-4{order:4}@media(min-width: 48.0625em)and (max-width: 64em){.tna-column--full-medium{width:100%;flex:none}.tna-column--width-1-6-medium{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6-medium{margin-right:16.6666666667%}.tna-column--margin-left-1-6-medium{margin-left:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3-medium{margin-right:33.3333333333%}.tna-column--margin-left-1-3-medium{margin-left:33.3333333333%}.tna-column--width-1-2-medium{width:50%;flex:none}.tna-column--margin-right-1-2-medium{margin-right:50%}.tna-column--margin-left-1-2-medium{margin-left:50%}.tna-column--width-2-3-medium{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3-medium{margin-right:66.6666666667%}.tna-column--margin-left-2-3-medium{margin-left:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6-medium{margin-right:83.3333333333%}.tna-column--margin-left-5-6-medium{margin-left:83.3333333333%}.tna-column--flex-1-medium{width:auto;flex:1 0}.tna-column--flex-2-medium{width:auto;flex:2 0}.tna-column--flex-3-medium{width:auto;flex:3 0}.tna-column--order-1-medium{order:1}.tna-column--order-2-medium{order:2}.tna-column--order-3-medium{order:3}.tna-column--order-4-medium{order:4}}@media(max-width: 30em){.tna-container{padding-right:.5rem;padding-left:.5rem}.tna-column{padding-right:.5rem;padding-left:.5rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-column--full-small{width:100%;flex:none}.tna-column--width-1-4-small{width:25%;flex:none}.tna-column--margin-right-1-4-small{margin-right:25%}.tna-column--margin-left-1-4-small{margin-left:25%}.tna-column--width-1-2-small{width:50%;flex:none}.tna-column--margin-right-1-2-small{margin-right:50%}.tna-column--margin-left-1-2-small{margin-left:50%}.tna-column--width-3-4-small{width:75%;flex:none}.tna-column--margin-right-3-4-small{margin-right:75%}.tna-column--margin-left-3-4-small{margin-left:75%}.tna-column--flex-1-small{width:auto;flex:1 0}.tna-column--flex-2-small{width:auto;flex:2 0}.tna-column--flex-3-small{width:auto;flex:3 0}.tna-column--order-1-small{order:1}.tna-column--order-2-small{order:2}.tna-column--order-3-small{order:3}.tna-column--order-4-small{order:4}}@media(max-width: 30em){.tna-column--full-tiny{width:100%;flex:none}.tna-column--width-1-2-tiny{width:50%;flex:none}.tna-column--margin-right-1-2-tiny{margin-right:50%}.tna-column--margin-left-1-2-tiny{margin-left:50%}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--order-1-tiny{order:1}.tna-column--order-2-tiny{order:2}.tna-column--order-3-tiny{order:3}.tna-column--order-4-tiny{order:4}}.tna-container--no-padding,.tna-container--no-padding-all,.tna-container--no-padding-all>.tna-column,.tna-column--no-padding,.tna-column--container--no-padding-all,.tna-column--container--no-padding-all>.tna-column{padding-right:0;padding-left:0}/*# sourceMappingURL=grid.css.map */

package/nationalarchives/components/grid/grid.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAKA,eACE,UCNwB,SDOxB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,aACA,eACA,2BACA,oBAEA,0DAEE,mBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,SACA,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,wBACA,oBAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBEhDA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAwBN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,ECvCf,kDDdE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GC3Bf,wBHiCA,eACE,oBACA,mBAGF,YACE,oBACA,oBG9CF,kDDpBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GC3Bf,wBD1BE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GFyBjB,uNAME,gBACA","file":"grid.css","sourcesContent":["@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as gridTools;\n\n.tna-container {\n  max-width: grid.$largest-container-width;\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: math.div(grid.$gutter-width, 2);\n  padding-left: math.div(grid.$gutter-width, 2);\n\n  box-sizing: border-box;\n\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: stretch;\n\n  &--no-padding,\n  &--no-padding-all {\n    max-width: grid.$largest-container-width - (grid.$gutter-width * 2);\n  }\n\n  &--max {\n    max-width: none;\n  }\n\n  &--centred {\n    justify-content: center;\n  }\n}\n\n.tna-column {\n  margin: 0;\n  padding-right: math.div(grid.$gutter-width, 2);\n  padding-left: math.div(grid.$gutter-width, 2);\n\n  box-sizing: border-box;\n\n  &--container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: stretch;\n    align-items: stretch;\n  }\n\n  &--align-top {\n    align-self: flex-start;\n  }\n\n  &--align-centre {\n    align-self: center;\n  }\n\n  &--align-bottom {\n    align-self: flex-end;\n  }\n}\n\n@include gridTools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n  @include gridTools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n  .tna-container {\n    padding-right: math.div(grid.$gutter-width-tiny, 2);\n    padding-left: math.div(grid.$gutter-width-tiny, 2);\n  }\n\n  .tna-column {\n    padding-right: math.div(grid.$gutter-width-tiny, 2);\n    padding-left: math.div(grid.$gutter-width-tiny, 2);\n  }\n}\n\n@include media.on-small {\n  @include gridTools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n  @include gridTools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n  padding-right: 0;\n  padding-left: 0;\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  .tna-column {\n    &--full#{$suffix} {\n      width: 100%;\n      flex: none;\n    }\n\n    @for $i from 1 through $count - 1 {\n      $simplest-fraction-found: false;\n\n      @for $j from math.div($count, 2) through 1 {\n        @if (\n          $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n        ) {\n          &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            width: math.div(100%, $count) * $i;\n            flex: none;\n          }\n\n          &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            margin-right: math.div(100%, $count) * $i;\n          }\n\n          &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            margin-left: math.div(100%, $count) * $i;\n          }\n\n          $simplest-fraction-found: true;\n        }\n      }\n\n      @if $simplest-fraction-found != true {\n        &--width-#{$i}-#{$count}#{$suffix} {\n          width: math.div(100%, $count) * $i;\n          flex: none;\n        }\n\n        &--margin-right-#{$i}-#{$count}#{$suffix} {\n          margin-right: math.div(100%, $count) * $i;\n        }\n\n        &--margin-left-#{$i}-#{$count}#{$suffix} {\n          margin-left: math.div(100%, $count) * $i;\n        }\n      }\n    }\n\n    @for $i from 1 through 3 {\n      &--flex-#{$i}#{$suffix} {\n        width: auto;\n\n        flex: $i 0;\n      }\n    }\n\n    @for $i from 1 through 4 {\n      &--order-#{$i}#{$suffix} {\n        order: $i;\n      }\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAKA,eACE,UCNwB,SDOxB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,aACA,eACA,2BACA,oBAEA,0DAEE,mBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,wBACA,oBAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBE/CA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAwBN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,ECvCf,kDDdE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GC3Bf,wBHgCA,eACE,oBACA,mBAGF,YACE,oBACA,oBG7CF,kDDpBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GC3Bf,wBD1BE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GFwBjB,uNAME,gBACA","file":"grid.css","sourcesContent":["@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as gridTools;\n\n.tna-container {\n  max-width: grid.$largest-container-width;\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: math.div(grid.$gutter-width, 2);\n  padding-left: math.div(grid.$gutter-width, 2);\n\n  box-sizing: border-box;\n\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: stretch;\n\n  &--no-padding,\n  &--no-padding-all {\n    max-width: grid.$largest-container-width - (grid.$gutter-width * 2);\n  }\n\n  &--max {\n    max-width: none;\n  }\n\n  &--centred {\n    justify-content: center;\n  }\n}\n\n.tna-column {\n  padding-right: math.div(grid.$gutter-width, 2);\n  padding-left: math.div(grid.$gutter-width, 2);\n\n  box-sizing: border-box;\n\n  &--container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: stretch;\n    align-items: stretch;\n  }\n\n  &--align-top {\n    align-self: flex-start;\n  }\n\n  &--align-centre {\n    align-self: center;\n  }\n\n  &--align-bottom {\n    align-self: flex-end;\n  }\n}\n\n@include gridTools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n  @include gridTools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n  .tna-container {\n    padding-right: math.div(grid.$gutter-width-tiny, 2);\n    padding-left: math.div(grid.$gutter-width-tiny, 2);\n  }\n\n  .tna-column {\n    padding-right: math.div(grid.$gutter-width-tiny, 2);\n    padding-left: math.div(grid.$gutter-width-tiny, 2);\n  }\n}\n\n@include media.on-small {\n  @include gridTools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n  @include gridTools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n  padding-right: 0;\n  padding-left: 0;\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  .tna-column {\n    &--full#{$suffix} {\n      width: 100%;\n      flex: none;\n    }\n\n    @for $i from 1 through $count - 1 {\n      $simplest-fraction-found: false;\n\n      @for $j from math.div($count, 2) through 1 {\n        @if (\n          $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n        ) {\n          &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            width: math.div(100%, $count) * $i;\n            flex: none;\n          }\n\n          &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            margin-right: math.div(100%, $count) * $i;\n          }\n\n          &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            margin-left: math.div(100%, $count) * $i;\n          }\n\n          $simplest-fraction-found: true;\n        }\n      }\n\n      @if $simplest-fraction-found != true {\n        &--width-#{$i}-#{$count}#{$suffix} {\n          width: math.div(100%, $count) * $i;\n          flex: none;\n        }\n\n        &--margin-right-#{$i}-#{$count}#{$suffix} {\n          margin-right: math.div(100%, $count) * $i;\n        }\n\n        &--margin-left-#{$i}-#{$count}#{$suffix} {\n          margin-left: math.div(100%, $count) * $i;\n        }\n      }\n    }\n\n    @for $i from 1 through 3 {\n      &--flex-#{$i}#{$suffix} {\n        width: auto;\n\n        flex: $i 0;\n      }\n    }\n\n    @for $i from 1 through 4 {\n      &--order-#{$i}#{$suffix} {\n        order: $i;\n      }\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}

package/nationalarchives/components/grid/grid.scss

@@ -33,7 +33,6 @@
 }
 
 .tna-column {
-  margin: 0;
   padding-right: math.div(grid.$gutter-width, 2);
   padding-left: math.div(grid.$gutter-width, 2);