@nationalarchives/frontend 0.1.10-prerelease → 0.1.12-prerelease

package/nationalarchives/components/header/_index.scss

@@ -1,14 +1,17 @@
 @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";
-@use "../../tools/typography" as tools;
 
 .tna-header {
   color: #fff;
 
-  background-color: colour.$tna-black;
+  background-color: colourVars.$tna-black;
+
+  // @include colour.invert;
 
   &__exit {
     padding-top: 0.5rem;
@@ -16,7 +19,7 @@
 
     text-align: right;
 
-    background-color: colour.$dark;
+    background-color: colourVars.$dark-grey;
   }
 
   &__exit-link {
@@ -79,7 +82,7 @@
 
       background-color: #fff;
 
-      outline: 0.2rem colour.$dark solid;
+      outline: 0.2rem colourVars.$dark-grey solid;
 
       transform: rotate(45deg) translateX(50%);
       transform-origin: 100% 0;
@@ -100,7 +103,6 @@
   }
 
   &__logo-link {
-    display: -ms-flexbox;
     display: flex;
     align-items: flex-end;
 
@@ -126,6 +128,7 @@
   }
 
   .tna-logo__background {
+    fill: none;
   }
 
   &__logo-strapline {
@@ -231,7 +234,7 @@
   &--orange,
   &--green,
   &--blue {
-    color: colour.$tna-black;
+    color: colourVars.$tna-black;
 
     .tna-header__logo-link {
       &:hover {
@@ -244,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;
@@ -295,26 +339,32 @@
 
     display: inline-block;
 
-    color: inherit;
-    font-family: typography.$font-family-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;
-      @include colour.colour-font("dark-font");
+      &,
+      &:link,
+      &:visited {
+        @include colour.colour-font("font-dark");
 
-      // background-color: #fff;
-      @include colour.colour-background("page-background");
-
-      transition:
-        color 50ms,
-        background-color 50ms;
+        @include colour.colour-background("page-background");
+      }
+      // transition:
+      //   color 50ms,
+      //   background-color 50ms;
     }
   }
 
@@ -361,9 +411,8 @@
     }
 
     &__navigation {
-      // color: colour.$base-font-colour;
-      @include colour.colour-font("base-font");
-      @include tools.relative-font-size(20);
+      @include colour.colour-font("font-base");
+      @include typography.relative-font-size(20);
 
       &.tna-column {
         padding-right: 0;
@@ -379,10 +428,28 @@
       }
     }
 
+    &__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");
     }
 
@@ -391,7 +458,6 @@
 
       display: block;
 
-      // border-bottom: 1px colour.$keyline-colour solid;
       border-bottom: 1px solid;
       @include colour.colour-border("keyline");
     }
@@ -414,10 +480,9 @@
         bottom: 0;
         left: 0;
 
-        // background-color: colour.$tna-black;
-        @include colour.colour-background("dark-font");
+        @include colour.colour-background("font-dark");
 
-        transition: width 200ms;
+        // transition: width 200ms;
 
         content: "";
       }
@@ -426,7 +491,7 @@
         &::after {
           width: 0.25rem;
 
-          transition: width 50ms;
+          // transition: width 50ms;
         }
       }
 

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"),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")}}}])&&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        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","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));
     }
   }
 

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

@@ -1,8 +1,12 @@
 import Header from "./template.njk";
 import macroOptions from "./macro-options.json";
+import { expect } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
 
 const argTypes = {
   logo: { control: "object" },
+  topNavigation: { control: "object" },
   navigation: { control: "object" },
   colour: {
     control: "radio",
@@ -20,14 +24,26 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Header",
+  title: "Work in progress/Components/Header",
   argTypes,
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
 };
 
-const Template = ({ logo, navigation, colour, exit, classes, attributes }) => {
+const Template = ({
+  logo,
+  topNavigation,
+  navigation,
+  colour,
+  exit,
+  classes,
+  attributes,
+}) => {
   return Header({
     params: {
       logo,
+      topNavigation,
       navigation,
       colour,
       exit,
@@ -43,6 +59,20 @@ Standard.args = {
     strapline: "Beta",
     href: "#/",
   },
+  // topNavigation: [
+  //   {
+  //     text: "Top item 1",
+  //     href: "#/top-1"
+  //   },
+  //   {
+  //     text: "Top item 2",
+  //     href: "#/top-2",
+  //   },
+  //   {
+  //     text: "Top item 3",
+  //     href: "#/top-3",
+  //   },
+  // ],
   navigation: [
     {
       text: "Alpha",
@@ -66,3 +96,114 @@ Standard.args = {
   },
   classes: "tna-header--demo",
 };
+
+export const Desktop = Template.bind({});
+Desktop.parameters = {
+  viewport: {
+    defaultViewport: "tablet",
+  },
+  chromatic: {
+    viewports: [MINIMAL_VIEWPORTS["tablet"].styles.width.replace(/px$/, "")],
+  },
+};
+Desktop.args = {
+  navigation: [
+    {
+      text: "Alpha",
+      href: "#/alpha",
+      selected: true,
+    },
+    {
+      text: "Beta",
+      href: "#/beta",
+    },
+    {
+      text: "Gamma",
+      href: "#/gamma",
+    },
+  ],
+  classes: "tna-header--demo",
+};
+Desktop.play = async ({ canvasElement }) => {
+  const navigationItems = canvasElement.querySelector(
+    `.tna-header__navigation-items`,
+  );
+  const navigationToggle = canvasElement.querySelector(
+    `.tna-header__navigation-toggle-button`,
+  );
+
+  await expect(navigationItems).toBeVisible();
+  await expect(navigationToggle).not.toBeVisible();
+};
+
+export const Mobile = Template.bind({});
+Mobile.parameters = {
+  viewport: {
+    defaultViewport: "mobile2",
+  },
+  chromatic: {
+    viewports: [MINIMAL_VIEWPORTS["mobile2"].styles.width.replace(/px$/, "")],
+  },
+};
+Mobile.args = {
+  navigation: [
+    {
+      text: "Alpha",
+      href: "#/alpha",
+      selected: true,
+    },
+    {
+      text: "Beta",
+      href: "#/beta",
+    },
+    {
+      text: "Gamma",
+      href: "#/gamma",
+    },
+  ],
+  classes: "tna-header--demo",
+};
+Mobile.play = async ({ args, canvasElement, step }) => {
+  const canvas = within(canvasElement);
+
+  const navigationItems = canvasElement.querySelector(
+    `.tna-header__navigation-items`,
+  );
+  const [linkA, linkB, linkC] = args.navigation.map((navigationItem) =>
+    canvas.getByText(navigationItem.text),
+  );
+  const navigationToggle = canvasElement.querySelector(
+    `.tna-header__navigation-toggle-button`,
+  );
+
+  await step("Initial load", async () => {
+    await expect(navigationItems).not.toBeVisible();
+    await expect(navigationToggle).toBeVisible();
+    await expect(navigationToggle).toHaveAttribute("aria-expanded", "false");
+    await expect(linkA).not.toBeVisible();
+    await expect(linkB).not.toBeVisible();
+    await expect(linkC).not.toBeVisible();
+  });
+
+  await step("Open the menu", async () => {
+    await userEvent.click(navigationToggle);
+    await expect(navigationItems).toBeVisible();
+    await expect(navigationToggle).toBeVisible();
+    await expect(navigationToggle).toHaveAttribute("aria-expanded", "true");
+    await expect(linkA).toBeVisible();
+    await expect(linkB).toBeVisible();
+    await expect(linkC).toBeVisible();
+  });
+
+  await step("Close the menu", async () => {
+    await userEvent.click(navigationToggle);
+    await expect(navigationItems).not.toBeVisible();
+    await expect(navigationToggle).toBeVisible();
+    await expect(navigationToggle).toHaveAttribute("aria-expanded", "false");
+    await expect(linkA).not.toBeVisible();
+    await expect(linkB).not.toBeVisible();
+    await expect(linkC).not.toBeVisible();
+  });
+
+  navigationToggle.blur();
+};

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

@@ -57,6 +57,32 @@
       }
     ]
   },
+  {
+    "name": "topNavigation",
+    "type": "array",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
   {
     "name": "colour",
     "type": "string",

package/nationalarchives/components/header/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaHeader(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/header/template.njk" -%}
 {% endmacro %}