@nationalarchives/frontend 0.1.9-prerelease → 0.1.11-prerelease

package/nationalarchives/components/header/_index.scss

@@ -1,13 +1,95 @@
 @use "sass:math";
-@use "../../variables/colour";
+@use "../../utilities/global"; // To get %tna-invert
+@use "../../tools/colour";
+@use "../../variables/colour" as colourVars; // TODO
 @use "../../variables/grid";
-@use "../../variables/typography";
+@use "../../tools/typography";
 @use "../../tools/media";
 
 .tna-header {
   color: #fff;
 
-  background-color: colour.$tna-black;
+  background-color: colourVars.$tna-black;
+
+  // @include colour.invert;
+
+  &__exit {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+
+    text-align: right;
+
+    background-color: colourVars.$dark-grey;
+  }
+
+  &__exit-link {
+    color: #fff;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+
+      // .tna-header__exit-link-icon {
+      //   border-color: colour.$tna-yellow;
+
+      //   &::before {
+      //     border-top-color: colour.$tna-yellow;
+      //     border-right-color: colour.$tna-yellow;
+      //   }
+
+      //   &::after {
+      //     background-color: colour.$tna-yellow;
+      //   }
+      // }
+    }
+  }
+
+  &__exit-link-icon {
+    width: 0.825rem;
+    height: 0.825rem;
+    margin-right: 0.125rem;
+    margin-left: 0.5rem;
+
+    display: inline-block;
+
+    position: relative;
+
+    vertical-align: middle;
+
+    border: 0.125rem #fff solid;
+
+    &::before {
+      position: absolute;
+      top: -0.25rem;
+      right: -0.25rem;
+      z-index: 2;
+
+      border: 0.25rem transparent solid;
+      border-top-color: #fff;
+      border-right-color: #fff;
+
+      content: "";
+    }
+
+    &::after {
+      width: 0.25rem;
+      height: 0.825rem;
+
+      position: absolute;
+      top: -0.125rem;
+      right: -0.125rem;
+      z-index: 1;
+
+      background-color: #fff;
+
+      outline: 0.2rem colourVars.$dark-grey solid;
+
+      transform: rotate(45deg) translateX(50%);
+      transform-origin: 100% 0;
+
+      content: "";
+    }
+  }
 
   &__contents {
     &.tna-container {
@@ -16,26 +98,27 @@
   }
 
   &__logo {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
   }
 
   &__logo-link {
-    display: -ms-flexbox;
     display: flex;
     align-items: flex-end;
 
     color: inherit;
     text-decoration: none;
 
-    &:hover {
-      outline: 0.375rem #fff solid;
+    &--href {
+      &:hover {
+        outline: 0.375rem #fff solid;
+      }
     }
   }
 
   .tna-logo {
-    width: 100px;
-    height: 100px;
+    width: 6.25rem;
+    height: 6.25rem;
 
     display: inline-block;
   }
@@ -45,6 +128,7 @@
   }
 
   .tna-logo__background {
+    fill: none;
   }
 
   &__logo-strapline {
@@ -52,31 +136,12 @@
 
     display: inline-block;
 
-    line-height: 2.125rem;
+    line-height: 2.125;
     text-transform: uppercase;
   }
 
   &__navigation-toggle {
-  }
-
-  &__navigation-toggle-button {
-    height: 2rem;
-    padding: 0;
-
-    display: block;
-
-    position: relative;
-
-    appearance: none;
-
-    font-size: 0;
-
-    background: none;
-
-    border: 0 transparent solid;
-    border-width: 0.25rem 0;
-
-    cursor: pointer;
+    align-self: center;
   }
 
   &__hamburger {
@@ -87,6 +152,8 @@
 
     background-color: #fff;
 
+    transition: height 1ms 200ms;
+
     &::before,
     &::after {
       height: 0.25rem;
@@ -99,6 +166,11 @@
 
       background-color: inherit;
 
+      transition:
+        top 200ms 200ms,
+        bottom 200ms 200ms,
+        transform 200ms;
+
       content: "";
     }
 
@@ -111,12 +183,58 @@
     }
   }
 
+  &__navigation-toggle-button {
+    height: 2rem;
+    padding: 0;
+
+    display: block;
+
+    position: relative;
+
+    appearance: none;
+
+    font-size: 0;
+
+    background: none;
+
+    border: 0 transparent solid;
+    border-width: 0.25rem 0;
+
+    cursor: pointer;
+
+    &--opened {
+      .tna-header__hamburger {
+        height: 0;
+
+        &::before,
+        &::after {
+          transition:
+            top 200ms,
+            bottom 200ms,
+            transform 200ms 200ms;
+        }
+
+        &::before {
+          top: 0.625rem;
+
+          transform: rotate(-135deg);
+        }
+
+        &::after {
+          bottom: 0.625rem;
+
+          transform: rotate(135deg);
+        }
+      }
+    }
+  }
+
   &--yellow,
   &--pink,
   &--orange,
   &--green,
   &--blue {
-    color: colour.$tna-black;
+    color: colourVars.$tna-black;
 
     .tna-header__logo-link {
       &:hover {
@@ -129,41 +247,82 @@
     }
 
     .tna-header__hamburger {
-      background-color: colour.$tna-black;
+      background-color: colourVars.$tna-black;
     }
   }
 
   &--yellow {
-    background-color: colour.$tna-yellow;
+    background-color: colourVars.$tna-yellow;
   }
 
   &--pink {
-    background-color: colour.$tna-pink;
+    background-color: colourVars.$tna-pink;
   }
 
   &--orange {
-    background-color: colour.$tna-orange;
+    background-color: colourVars.$tna-orange;
   }
 
   &--green {
-    background-color: colour.$tna-green;
+    background-color: colourVars.$tna-green;
   }
 
   &--blue {
-    background-color: colour.$tna-blue;
+    background-color: colourVars.$tna-blue;
   }
 
   &__navigation {
-    display: -ms-flexbox;
     display: flex;
-    justify-content: flex-end;
+    flex-direction: column-reverse;
+    justify-content: space-between;
     align-items: flex-end;
   }
 
+  &__top-navigation-items {
+    margin: 0;
+    padding: 1.25rem 0;
+
+    // order: 1;
+
+    list-style: none;
+
+    line-height: 1;
+  }
+
+  &__top-navigation-item {
+    margin-left: 0.75rem;
+
+    display: inline-block;
+  }
+
+  &__top-navigation-item-link {
+    display: inline-block;
+
+    text-decoration: none;
+
+    &,
+    &:link,
+    &:visited {
+      color: inherit;
+    }
+
+    &:hover,
+    &--selected {
+      &,
+      &:link,
+      &:visited {
+        text-decoration: underline;
+        text-decoration-thickness: 3px;
+      }
+    }
+  }
+
   &__navigation-items {
     margin: 0;
     padding: 0;
 
+    // order: 2;
+
     list-style: none;
 
     white-space: nowrap;
@@ -180,24 +339,32 @@
 
     display: inline-block;
 
-    color: inherit;
-    font-family: typography.$font-family-heading;
-    font-weight: typography.$font-weight-heading;
+    @include typography.heading-font;
     text-decoration: none;
+    line-height: 2;
+
+    // transition:
+    //   color 200ms,
+    //   background-color 200ms;
 
-    transition:
-      color 200ms,
-      background-color 200ms;
+    &,
+    &:link,
+    &:visited {
+      color: inherit;
+    }
 
     &:hover,
     &--selected {
-      color: colour.$tna-black;
-
-      background-color: #fff;
+      &,
+      &:link,
+      &:visited {
+        @include colour.colour-font("font-dark");
 
-      transition:
-        color 50ms,
-        background-color 50ms;
+        @include colour.colour-background("page-background");
+      }
+      // transition:
+      //   color 50ms,
+      //   background-color 50ms;
     }
   }
 
@@ -227,23 +394,32 @@
       }
     }
 
+    .tna-logo {
+      width: 4.5rem;
+      height: 4.5rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.55;
+    }
+
     &__navigation-toggle {
       &.tna-column {
-        padding-top: 1rem;
         padding-right: $compensated-container-padding;
         padding-left: 0;
       }
     }
 
     &__navigation {
-      color: colour.$base-font-colour;
+      @include colour.colour-font("font-base");
+      @include typography.relative-font-size(20);
 
       &.tna-column {
         padding-right: 0;
         padding-left: 0;
       }
 
-      .js-enabled & {
+      .tna-template--js-enabled & {
         display: none;
 
         &--open {
@@ -252,10 +428,29 @@
       }
     }
 
+    &__top-navigation-items {
+      padding: 0.5rem 1rem;
+
+      // text-align: center;
+
+      @include colour.colour-background("page-background");
+
+      border-bottom: 1px solid;
+      @include colour.colour-border("keyline");
+    }
+
+    &__top-navigation-item {
+      margin: 0;
+      padding: 0.5rem;
+    }
+
+    &__top-navigation-item-link {
+    }
+
     &__navigation-items {
       width: 100%;
 
-      background-color: #fff;
+      @include colour.colour-background("page-background");
     }
 
     &__navigation-item {
@@ -263,7 +458,8 @@
 
       display: block;
 
-      border-bottom: 1px colour.$keyline-colour solid;
+      border-bottom: 1px solid;
+      @include colour.colour-border("keyline");
     }
 
     &__navigation-item-link {
@@ -274,6 +470,8 @@
 
       position: relative;
 
+      line-height: 1.6;
+
       &::after {
         width: 0;
 
@@ -282,9 +480,9 @@
         bottom: 0;
         left: 0;
 
-        background-color: colour.$tna-black;
+        @include colour.colour-background("font-dark");
 
-        transition: width 200ms;
+        // transition: width 200ms;
 
         content: "";
       }
@@ -293,7 +491,7 @@
         &::after {
           width: 0.25rem;
 
-          transition: width 50ms;
+          // transition: width 50ms;
         }
       }
 
@@ -305,4 +503,15 @@
       }
     }
   }
+
+  @include media.on-tiny {
+    .tna-logo {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.25;
+    }
+  }
 }

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=t.TNAFrontend||{},t.TNAFrontend["components/header/header"]=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={};t.r(e),t.d(e,{Header:()=>o});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 i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,(void 0,a=function(t,e){if("object"!==n(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!==n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(o.key),"symbol"===n(a)?a:String(a)),o)}var a}var o=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButtonWrapper=e&&e.querySelector(".tna-header__navigation-toggle"),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: 768px)")}var e,n;return e=t,(n=[{key:"init",value:function(){var t=this;if(this.$module&&this.$toggleButtonWrapper&&this.$navigation){var e="menu-content-".concat(([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})));this.$navigation.setAttribute("id",e),this.$toggleButton=document.createElement("button"),this.$toggleButton.innerText="Menu",this.$toggleButton.setAttribute("aria-controls",e),this.$toggleButton.setAttribute("aria-haspopup","true"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button"),this.$hamburger=document.createElement("div"),this.$hamburger.classList.add("tna-header__hamburger"),this.$toggleButton.appendChild(this.$hamburger),this.$toggleButtonWrapper.appendChild(this.$toggleButton),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return t.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return t.syncState()})):this.mql.addListener((function(){return t.syncState()}))}}},{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){if(this.mql.matches)if(this.menuOpened){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}else{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");for(var e=0;e<this.$links.length;e++)this.$links[e].setAttribute("tabindex","-1")}else{this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var n=0;n<this.$links.length;n++)this.$links[n].setAttribute("tabindex","0")}}}])&&i(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),t}();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=t.TNAFrontend||{},t.TNAFrontend["components/header/header"]=e())}(self,(()=>(()=>{"use strict";var t={948:(t,e,n)=>{n.d(e,{Z:()=>i});const i=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))}}},e={};function n(i){var o=e[i];if(void 0!==o)return o.exports;var a=e[i]={exports:{}};return t[i](a,a.exports,n),a.exports}n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};return(()=>{n.r(i),n.d(i,{Header:()=>a});var t=n(948);function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(t)}function o(t,n){for(var i=0;i<n.length;i++){var o=n[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,(void 0,a=function(t,n){if("object"!==e(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(o.key),"symbol"===e(a)?a:String(a)),o)}var a}var a=function(){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$toggleButtonWrapper=t&&t.querySelector(".tna-header__navigation-toggle"),this.$navigation=t&&t.querySelector(".tna-header__navigation"),this.$links=t&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)")}var n,i;return n=e,(i=[{key:"init",value:function(){var e=this;if(this.$module&&this.$toggleButtonWrapper&&this.$navigation){var n="tna-menu-content-".concat((0,t.Z)());this.$navigation.setAttribute("id",n),this.$toggleButton=document.createElement("button"),this.$toggleButton.innerText="Menu",this.$toggleButton.setAttribute("aria-controls",n),this.$toggleButton.setAttribute("aria-haspopup","true"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button"),this.$hamburger=document.createElement("div"),this.$hamburger.classList.add("tna-header__hamburger"),this.$toggleButton.appendChild(this.$hamburger),this.$toggleButtonWrapper.appendChild(this.$toggleButton),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return e.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return e.syncState()})):this.mql.addListener((function(){return e.syncState()}))}}},{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){if(this.mql.matches)if(this.menuOpened){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,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")}else{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 e=0;e<this.$links.length;e++)this.$links[e].setAttribute("tabindex","-1")}else{this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var n=0;n<this.$links.length;n++)this.$links[n].setAttribute("tabindex","0")}}}])&&o(n.prototype,i),Object.defineProperty(n,"prototype",{writable:!1}),e}()})(),i})()));
 //# 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","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.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/header/header\"] = 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};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButtonWrapper =\n      $module && $module.querySelector(\".tna-header__navigation-toggle\");\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: 768px)\");\n  }\n\n  init() {\n    if (!this.$module || !this.$toggleButtonWrapper || !this.$navigation) {\n      return;\n    }\n\n    // const uniqueLinkIds = []\n\n    // for (let i = 0; i < this.$links.length; i++) {\n    //   const uniqueLinkId = uuidv4()\n    //   this.$links[i].setAttribute(\"id\", uniqueLinkId);\n    //   uniqueLinkIds.push(uniqueLinkId)\n    // }\n\n    const uniqueId = `menu-content-${uuidv4()}`;\n    this.$navigation.setAttribute(\"id\", uniqueId);\n    // this.$navigation.setAttribute(\"aria-owns\", uniqueLinkIds.join(\",\"));\n\n    this.$toggleButton = document.createElement(\"button\");\n    this.$toggleButton.innerText = \"Menu\";\n    this.$toggleButton.setAttribute(\"aria-controls\", uniqueId);\n    this.$toggleButton.setAttribute(\"aria-haspopup\", \"true\");\n    this.$toggleButton.classList.add(\"tna-header__navigation-toggle-button\");\n\n    this.$hamburger = document.createElement(\"div\");\n    this.$hamburger.classList.add(\"tna-header__hamburger\");\n\n    this.$toggleButton.appendChild(this.$hamburger);\n    this.$toggleButtonWrapper.appendChild(this.$toggleButton);\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      // this.mql.addEventListener(\"change\", this.syncState.bind(this));\n    } else {\n      this.mql.addListener(() => this.syncState());\n      // this.mql.addListener(this.syncState.bind(this));\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.$navigation.classList.add(\"tna-header__navigation--open\");\n        this.$navigation.hidden = false;\n        this.$navigation.setAttribute(\"aria-hidden\", \"false\");\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      } else {\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\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"-1\");\n        }\n      }\n    } else {\n      this.$navigation.classList.add(\"tna-header__navigation--open\");\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\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","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"],"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","_classCallCheck","this","$toggleButtonWrapper","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","_this","uniqueId","concat","replace","c","crypto","getRandomValues","Uint8Array","toString","setAttribute","$toggleButton","document","createElement","innerText","classList","add","$hamburger","appendChild","syncState","addEventListener","handleToggleNavigation","addListener","matches","hidden","i","length","remove"],"sourceRoot":""}
+{"version":3,"file":"components/header/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/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\"] = root[\"TNAFrontend\"] || {}, root[\"TNAFrontend\"][\"components/header/header\"] = 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 Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButtonWrapper =\n      $module && $module.querySelector(\".tna-header__navigation-toggle\");\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: 768px)\");\n  }\n\n  init() {\n    if (!this.$module || !this.$toggleButtonWrapper || !this.$navigation) {\n      return;\n    }\n\n    const uniqueId = `tna-menu-content-${uuidv4()}`;\n    this.$navigation.setAttribute(\"id\", uniqueId);\n\n    this.$toggleButton = document.createElement(\"button\");\n    this.$toggleButton.innerText = \"Menu\";\n    this.$toggleButton.setAttribute(\"aria-controls\", uniqueId);\n    this.$toggleButton.setAttribute(\"aria-haspopup\", \"true\");\n    this.$toggleButton.classList.add(\"tna-header__navigation-toggle-button\");\n\n    this.$hamburger = document.createElement(\"div\");\n    this.$hamburger.classList.add(\"tna-header__hamburger\");\n\n    this.$toggleButton.appendChild(this.$hamburger);\n    this.$toggleButtonWrapper.appendChild(this.$toggleButton);\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        this.$navigation.classList.add(\"tna-header__navigation--open\");\n        this.$navigation.hidden = false;\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      } else {\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    } else {\n      this.$navigation.classList.add(\"tna-header__navigation--open\");\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\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","Header","$module","_classCallCheck","this","$toggleButtonWrapper","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","_this","uniqueId","concat","uuidv4","setAttribute","$toggleButton","document","createElement","innerText","classList","add","$hamburger","appendChild","syncState","addEventListener","handleToggleNavigation","addListener","matches","hidden","i","length","remove"],"sourceRoot":""}

package/nationalarchives/components/header/header.mjs

@@ -20,17 +20,8 @@ export class Header {
       return;
     }
 
-    // const uniqueLinkIds = []
-
-    // for (let i = 0; i < this.$links.length; i++) {
-    //   const uniqueLinkId = uuidv4()
-    //   this.$links[i].setAttribute("id", uniqueLinkId);
-    //   uniqueLinkIds.push(uniqueLinkId)
-    // }
-
-    const uniqueId = `menu-content-${uuidv4()}`;
+    const uniqueId = `tna-menu-content-${uuidv4()}`;
     this.$navigation.setAttribute("id", uniqueId);
-    // this.$navigation.setAttribute("aria-owns", uniqueLinkIds.join(","));
 
     this.$toggleButton = document.createElement("button");
     this.$toggleButton.innerText = "Menu";
@@ -52,10 +43,8 @@ export class Header {
 
     if ("addEventListener" in this.mql) {
       this.mql.addEventListener("change", () => this.syncState());
-      // this.mql.addEventListener("change", this.syncState.bind(this));
     } else {
       this.mql.addListener(() => this.syncState());
-      // this.mql.addListener(this.syncState.bind(this));
     }
   }
 
@@ -72,6 +61,9 @@ 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",
+        );
 
         for (let i = 0; i < this.$links.length; i++) {
           this.$links[i].setAttribute("tabindex", "0");
@@ -82,6 +74,9 @@ export class Header {
         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 (let i = 0; i < this.$links.length; i++) {
           this.$links[i].setAttribute("tabindex", "-1");