@nationalarchives/frontend 0.2.5 → 0.2.6

package/nationalarchives/components/header/header.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.r(e),t.d(e,{Header:()=>a});var a=function(){return t=function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-header__navigation-toggle-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return n.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return n.syncState()})):this.mql.addListener((function(){return n.syncState()})),this.$navigation.addEventListener("keyup",(function(t){"Escape"===t.code&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))},(e=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.r(e),t.d(e,{Header:()=>a});var a=function(){return t=function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-header__navigation-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return n.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return n.syncState()})):this.mql.addListener((function(){return n.syncState()})),this.$module.addEventListener("keyup",(function(t){"Escape"===t.code&&n.menuOpened&&n.mql.matches&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))},(e=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/header/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/header/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 Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-header__navigation-toggle-button\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n    if (!this.$module || !this.$toggleButton || !this.$navigation) {\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    this.$navigation.addEventListener(\"keyup\", (e) => {\n      if (e.code === \"Escape\") {\n        this.menuOpened = false;\n        this.syncState();\n        this.$toggleButton.focus();\n      }\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  show() {\n    this.$navigation.classList.add(\"tna-header__navigation--open\");\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\n      \"tna-header__navigation-toggle-button--opened\",\n    );\n\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"0\");\n    }\n  }\n\n  hide() {\n    this.$navigation.classList.remove(\"tna-header__navigation--open\");\n    this.$navigation.hidden = true;\n    this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-header__navigation-toggle-button--opened\",\n    );\n\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"-1\");\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","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","focus","matches","show","hide","classList","add","setAttribute","i","length","remove","hidden"],"sourceRoot":""}
+{"version":3,"file":"components/header/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/header/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 Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-header__navigation-button\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n    if (!this.$module || !this.$toggleButton || !this.$navigation) {\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    this.$module.addEventListener(\"keyup\", (e) => {\n      if (e.code === \"Escape\") {\n        if (this.menuOpened && this.mql.matches) {\n          this.menuOpened = false;\n          this.syncState();\n          this.$toggleButton.focus();\n        }\n      }\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  show() {\n    this.$navigation.classList.add(\"tna-header__navigation--open\");\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\"tna-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  hide() {\n    this.$navigation.classList.remove(\"tna-header__navigation--open\");\n    this.$navigation.hidden = true;\n    this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-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}\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","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","matches","focus","show","hide","classList","add","setAttribute","i","length","remove","hidden"],"sourceRoot":""}

package/nationalarchives/components/header/header.mjs

@@ -2,7 +2,7 @@ export class Header {
   constructor($module) {
     this.$module = $module;
     this.$toggleButton =
-      $module && $module.querySelector(".tna-header__navigation-toggle-button");
+      $module && $module.querySelector(".tna-header__navigation-button");
     this.$navigation =
       $module && $module.querySelector(".tna-header__navigation");
     this.$links =
@@ -27,11 +27,13 @@ export class Header {
       this.mql.addListener(() => this.syncState());
     }
 
-    this.$navigation.addEventListener("keyup", (e) => {
+    this.$module.addEventListener("keyup", (e) => {
       if (e.code === "Escape") {
-        this.menuOpened = false;
-        this.syncState();
-        this.$toggleButton.focus();
+        if (this.menuOpened && this.mql.matches) {
+          this.menuOpened = false;
+          this.syncState();
+          this.$toggleButton.focus();
+        }
       }
     });
   }
@@ -59,9 +61,7 @@ export class Header {
     this.$navigation.setAttribute("aria-hidden", "false");
     this.$toggleButton.setAttribute("aria-expanded", "true");
     this.$toggleButton.setAttribute("title", "Close menu");
-    this.$toggleButton.classList.add(
-      "tna-header__navigation-toggle-button--opened",
-    );
+    this.$toggleButton.classList.add("tna-header__navigation-button--opened");
 
     for (let i = 0; i < this.$links.length; i++) {
       this.$links[i].setAttribute("tabindex", "0");
@@ -75,7 +75,7 @@ export class Header {
     this.$toggleButton.setAttribute("aria-expanded", "false");
     this.$toggleButton.setAttribute("title", "Open menu");
     this.$toggleButton.classList.remove(
-      "tna-header__navigation-toggle-button--opened",
+      "tna-header__navigation-button--opened",
     );
 
     for (let i = 0; i < this.$links.length; i++) {

package/nationalarchives/components/header/header.scss

@@ -26,34 +26,6 @@
     }
   }
 
-  &__exit {
-    padding-top: spacing.space(0.5);
-    padding-bottom: spacing.space(0.5);
-
-    text-align: right;
-
-    @include colour.contrast;
-  }
-
-  &__exit-link {
-    text-decoration: none;
-    @include typography.font-size(16);
-
-    &,
-    &:link,
-    &:visited {
-      @include colour.colour-font("font-base");
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    .fa-solid {
-      margin-left: spacing.space(0.5);
-    }
-  }
-
   &__contents {
     &.tna-container {
       justify-content: space-between;
@@ -61,8 +33,8 @@
   }
 
   &__logo {
-    padding-top: spacing.space(1.5);
-    padding-bottom: spacing.space(1.5);
+    padding-top: spacing.space(1.25);
+    padding-bottom: spacing.space(1.25);
   }
 
   &__logo-contents {
@@ -89,8 +61,8 @@
   }
 
   .tna-logo {
-    width: 6rem;
-    height: 6rem;
+    width: 5rem;
+    height: 5rem;
 
     display: inline-block;
 
@@ -102,13 +74,13 @@
 
     display: inline-block;
 
-    line-height: 2rem;
+    line-height: 1.625rem;
     @include typography.heading-font;
     @include typography.font-size(20);
     text-transform: uppercase;
   }
 
-  &__navigation-toggle {
+  &__navigation-button-wrapper {
     align-self: center;
 
     display: none;
@@ -118,7 +90,7 @@
     width: 2rem;
     height: 0.25rem;
 
-    display: block;
+    display: inline-block;
 
     @include colour.colour-background("font-dark");
 
@@ -126,13 +98,13 @@
     &::after {
       content: "";
 
+      width: 2rem;
       height: 0.25rem;
 
       display: block;
 
       position: absolute;
       right: 0;
-      left: 0;
 
       background-color: inherit;
     }
@@ -146,17 +118,21 @@
     }
   }
 
-  &__navigation-toggle-button {
+  &__navigation-button {
     height: 2rem;
     padding: 0;
 
     appearance: none;
 
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 
     position: relative;
 
-    font-size: 0;
+    color: inherit;
+    @include typography.main-font-weight-bold;
+    @include typography.font-size(16);
 
     background: none;
 
@@ -165,6 +141,10 @@
 
     cursor: pointer;
 
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
+
     &--opened {
       .tna-header__hamburger {
         height: 0;
@@ -305,17 +285,6 @@
     @include colour.contrast-on-mobile;
   }
 
-  @include media.on-medium {
-    .tna-logo {
-      width: 5rem;
-      height: 5rem;
-    }
-
-    &__logo-strapline {
-      line-height: 1.625rem;
-    }
-  }
-
   @include media.on-mobile {
     &__logo {
       padding-top: spacing.space(1);
@@ -329,7 +298,7 @@
       }
     }
 
-    &__navigation-toggle {
+    &__navigation-button-wrapper {
       display: block;
 
       &.tna-column {
@@ -357,10 +326,11 @@
 
     &__top-navigation-item {
       margin: 0;
-      padding: spacing.space(0.5);
     }
 
     &__top-navigation-item-link {
+      padding: spacing.space(0.5);
+
       &,
       &:link,
       &:visited {
@@ -430,13 +400,13 @@
       line-height: 1.25rem;
     }
 
-    &__logo.tna-column,
+    &__logo,
     &__navigation-item-link,
-    &__navigation-toggle.tna-column {
+    &__navigation-button-wrapper {
       padding-right: grid.gutter-width();
     }
 
-    &__logo.tna-column,
+    &__logo,
     &__navigation-item-link {
       padding-left: grid.gutter-width();
     }
@@ -448,13 +418,14 @@
   }
 
   @include media.on-tiny {
-    &__navigation-toggle.tna-column,
-    &__logo.tna-column {
+    &__navigation-button-wrapper,
+    &__logo {
       padding-right: grid.gutter-width-tiny();
     }
 
-    &__logo.tna-column {
+    &__logo {
       padding-left: grid.gutter-width-tiny();
+      flex: 1;
     }
 
     .tna-logo {
@@ -466,6 +437,10 @@
       line-height: 1;
     }
 
+    &__navigation-button {
+      @include typography.font-size(14);
+    }
+
     &__top-navigation-items {
       gap: 0.5rem;
     }
@@ -484,7 +459,7 @@
   }
 
   @include colour.on-forced-colours {
-    &__navigation-toggle-button {
+    &__navigation-button {
       height: auto;
 
       line-height: 2;

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

@@ -95,32 +95,6 @@
     "required": false,
     "description": ""
   },
-  {
-    "name": "exit",
-    "type": "object",
-    "required": false,
-    "description": "",
-    "params": [
-      {
-        "name": "text",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "href",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "target",
-        "type": "string",
-        "required": false,
-        "description": ""
-      }
-    ]
-  },
   {
     "name": "navigationId",
     "type": "string",

package/nationalarchives/components/header/template.njk

@@ -4,17 +4,6 @@
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <header class="tna-header{% if classes %} {{ classes }}{% endif %}" data-module="tna-header"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-  {%- if params.exit -%}
-  <div class="tna-header__exit">
-    <div class="tna-container">
-      <div class="tna-column tna-column--full">
-        <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target %} target="{{ params.exit.target }}" title="{{ params.exit.text }} (opens in new tab)"{% endif %}>
-          {{ params.exit.text }}
-        </a>
-      </div>
-    </div>
-  </div>
-  {%- endif -%}
   <div class="tna-container tna-header__contents">
     <div class="tna-column tna-header__logo">
       <{%- if params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-contents tna-header__logo-contents--link" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-contents"{%- endif -%}>
@@ -32,8 +21,8 @@
       </{%- if params.logo.href -%}a{%- else -%}span{%- endif -%}>
     </div>
     {%- if params.navigation or params.topNavigation %}
-    <div class="tna-column tna-header__navigation-toggle">
-      <button class="tna-header__navigation-toggle-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }}" hidden>
+    <div class="tna-column tna-header__navigation-button-wrapper">
+      <button class="tna-header__navigation-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }}" hidden>
         Menu
         <span class="tna-header__hamburger"></span>
       </button>