@uqds/header 0.0.5-alpha.0 → 0.0.8-alpha.0

package/README.md

@@ -1,30 +1,28 @@
-# `@uqds/header`
-
-> Header component
-
-## Usage
-
-### Installation
-
-With Yarn:
-```shell
-yarn add @uqds/header
-```
-
-With NPM:
-```shell
-npm i @uqds/header
-```
-
----
-
-## Dependency graph
-
-```shell
-@uqds/header
-├─ @uqds/core
-├─ @uqds/grid
-│  └─ @uqds/core
-└─ @uqds/icon
-   └─ @uqds/core
-```
+# `@uqds/header`
+
+> New Header component
+
+## Usage
+
+### Installation
+
+With Yarn:
+```shell
+yarn add @uqds/header
+```
+
+With NPM:
+```shell
+npm i @uqds/header
+```
+
+---
+
+## Dependency graph
+
+```shell
+@uqds/header
+├─ @uqds/core
+└─ @uqds/grid
+   └─ @uqds/core
+```

package/dist/css/main.css

@@ -0,0 +1 @@
+.uq-header{background:#51247a;display:grid;align-items:center;grid-template-columns:auto;grid-template-areas:"mainheader" "secondarynav";position:relative}@media(min-width: 64rem){.uq-header{grid-template-areas:"secondarynav" "mainheader"}}.uq-header__container{display:grid;align-items:center;grid-template-columns:1fr 15fr 1fr;grid-area:mainheader;grid-template-areas:"menutoggle logo searchtoggle" "mainnav-mobile mainnav-mobile mainnav-mobile"}@media(min-width: 64rem){.uq-header__container{max-width:73.25rem;margin-left:auto;margin-right:auto;grid-template-areas:"logo mainnav searchtoggle";padding-left:1rem;padding-right:1rem}}.uq-header__menu-toggle{grid-area:menutoggle}@media(min-width: 64rem){.uq-header__menu-toggle{display:none}}.uq-header__search-toggle{grid-area:searchtoggle;height:100%;text-align:right;color:#fff}@media(min-width: 64rem){.uq-header__search-toggle{height:auto}}.uq-header__search-toggle .search-toggle__label{display:none}@media(min-width: 64rem){.uq-header__search-toggle .search-toggle__label{display:block;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;text-align:right;width:3.2rem}}.uq-header .nav-primary__toggle{background:none;border:none;padding:1.75rem 2rem;height:100%}@media(min-width: 64rem){.uq-header .nav-primary__toggle{padding:1rem 0 1rem 1.5rem;height:auto}}.uq-header .nav-primary__menu-toggle{cursor:pointer;color:#fff;position:relative;text-indent:-9999px;white-space:nowrap}.uq-header .nav-primary__menu-toggle::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 18h16M4 12h16M4 6h16' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translate(50%, 50%);position:absolute;top:.625rem;right:2rem}.uq-header .nav-primary__menu-toggle--is-open::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header .nav-primary__search-toggle{cursor:pointer;color:#fff;position:relative}.uq-header .nav-primary__search-toggle::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z' stroke='%23fff' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M15.5 15.5 20 20' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translate(50%, 50%);position:absolute;top:.625rem;right:2rem}@media(min-width: 64rem){.uq-header .nav-primary__search-toggle::before{top:.1rem;left:-1rem}}@media(min-width: 64rem){.uq-header .nav-primary__search-toggle:hover{color:#d4c8de;text-decoration:underline}}.uq-header .nav-primary__search-toggle--is-open::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header__logo{grid-area:logo}.uq-header__logo a{display:grid;padding:1rem 0}.uq-header__logo img{height:32px}@media(min-width: 64rem){.uq-header__logo img{height:40px}}.uq-header__nav-primary{grid-area:mainnav;display:none;width:100%;z-index:99}@media(min-width: 64rem){.uq-header__nav-primary{display:block}}@media(min-width: 64rem){.uq-header__nav-primary-container{padding:0 0 0 2.5rem}}.uq-header__nav-primary-list{list-style-type:none;margin:0;padding-left:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}@media(min-width: 64rem){.uq-header__nav-primary-list{align-items:center;flex-direction:row}}.uq-header__nav-primary-list li{margin:0;padding-right:2rem}.uq-header__nav-primary-list li:hover>.uq-header__megamenu{height:auto;visibility:visible}.uq-header__nav-primary-list li:hover .uq-header__nav-primary-link{border-bottom:4px solid #fff}.uq-header__nav-primary-list li .uq-header__nav-primary-link--active{border-bottom:4px solid #fff}.uq-header__nav-primary-link{display:block;color:#fff;text-decoration:none;padding:1rem 1.5rem;transition:background-color .25s,border-color .25s;font-weight:400;position:relative;border-bottom:4px solid #51247a}.uq-header__nav-primary-link:hover{color:#fff;text-decoration:none}@media(min-width: 64rem){.uq-header__nav-primary-link{padding:2rem .5rem}}.uq-header .nav-primary-link--has-dropdown{padding:2rem 1.5rem 2rem .5rem}.uq-header .nav-primary-link--has-dropdown::after{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1rem;height:1rem;transform:translateY(50%);position:absolute;top:1.7rem;right:1.75rem}@media(min-width: 64rem){.uq-header .nav-primary-link--has-dropdown::after{right:.25rem}}.uq-header .mega-menu{display:none;background-color:#fff;list-style-type:none;margin:0;padding-left:0}.uq-header .mega-menu li a{padding-left:3rem;color:#51247a}.uq-header .mega-menu ul{list-style-type:none;margin:0;padding-left:0}.uq-header .mega-menu ul li a{padding-left:4.5rem}.uq-header__nav-secondary{background-color:#48206c;grid-area:secondarynav}@media(min-width: 64rem){.uq-header__nav-secondary-container{text-align:right;max-width:73.25rem;margin-left:auto;margin-right:auto}}.uq-header__nav-secondary-list{list-style-type:none;margin:0;padding-left:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}@media(min-width: 64rem){.uq-header__nav-secondary-list{justify-content:flex-end;align-items:center;flex-direction:row}}.uq-header__nav-secondary-item{margin:0}.uq-header__nav-secondary-link{display:block;color:#fff;padding:1rem 1.5rem}@media(min-width: 64rem){.uq-header__nav-secondary-link{font-size:.875rem;padding:.625rem 1rem}}.uq-header__nav-secondary-link:hover{color:#d4c8de}.uq-header__search{background:#51247a;position:absolute;width:100%;top:3.95rem;z-index:20;box-shadow:0 .75rem 1.5rem rgba(24,24,24,.2);transition:max-height .2s ease-in-out,transform .2s ease-in-out;transform:translateY(-1rem);max-height:0;overflow:hidden;visibility:hidden}@media(min-width: 64rem){.uq-header__search{top:8.3rem}}.uq-header__search--is-open{transform:translateY(0);max-height:50vh;visibility:visible}.uq-header__search-container{padding:0 1.5rem}@media(min-width: 64rem){.uq-header__search-container{padding-left:1rem;padding-right:1rem;max-width:73.25rem;margin-left:auto;margin-right:auto;padding-top:0;padding-bottom:1rem}}.uq-header__search-query{position:relative;display:inline-block;max-width:100%;min-width:100%;border-radius:5px;background-position:1rem;padding-top:1rem;padding-bottom:1rem}.uq-header__search-query-label{color:#fff}.uq-header__search-query-input{margin:0 !important;padding:.75rem 1rem !important}.uq-header__search-query-button{background-clip:padding-box;background-color:#fff;border-radius:5px;border:2px solid rgba(0,0,0,0);color:#51247a;display:inline-block;font-size:1rem;height:2.75rem;line-height:1.5;margin-bottom:0;margin-right:0;overflow:hidden;position:absolute;right:.5rem;text-decoration:none;text-indent:0;top:calc(50% - 1.375rem);transition:color .2s,background-color .2s,border-color .2s;width:2.75rem}.uq-header__search-query-button::before{content:"";position:absolute;display:block;width:1.5rem;height:1.5rem;top:.5rem;left:.5rem;background-size:100%;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z' stroke='%2351247A' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M15.5 15.5 20 20' stroke='%2351247A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header__search-query-submit{color:rgba(0,0,0,0);position:relative;display:block;width:100%;height:100%;margin:0;border:0;background-color:rgba(0,0,0,0);z-index:3;cursor:pointer;outline-offset:-2px;font-size:1rem}.uq-header__search-range{display:inline-block}.uq-header__search-range label{color:#fff}.uq-header .uq-header__search-radio:checked{border-color:#fff}.uq-header .uq-header__search-radio:checked:focus{border-color:#fff}.uq-header .uq-header__search-radio:checked::after{background-color:#fff}.uq-header__search-label{font-size:.8rem !important;line-height:1.7 !important}@media(min-width: 64rem){.uq-header__search-label{font-size:1rem !important;line-height:1.4 !important}}@media(max-width: 63.9375rem){.uq-header__nav-primary,.uq-header__nav-secondary{display:none}}.uq-header__megamenu{position:absolute;top:8.3rem;left:0;width:100%;z-index:30;height:0;visibility:hidden}.uq-header__megamenu-container{max-width:73.25rem;margin-left:auto;margin-right:auto;padding:1rem 3rem 2.5rem 3rem;background:#fff;box-shadow:0 .75rem 1.5rem rgba(24,24,24,.2);border-radius:0 0 .25rem .25rem}@media(min-width: 75rem){.uq-header__megamenu-container{max-width:77.25rem}}.uq-header .megamenu__row{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}.uq-header .megamenu__overview-link{display:block;padding:1rem 0;color:#51247a}.uq-header .megamenu__heading{color:#51247a;font-weight:500;padding-top:.25rem;padding-bottom:.25rem}.uq-header .megamenu__heading:nth-of-type(2){padding-top:2.5rem}.uq-header .megamenu__menu ul{list-style-type:none;margin:0;padding-left:0}.uq-header .megamenu__menu ul li{margin:0}.uq-header .megamenu__menu ul li a{display:inline-block;padding-top:.5rem;color:#51247a}:root{--app-height: 100%}body.no-scroll{position:fixed}@media(min-width: 64rem){body.no-scroll{position:relative}}.slide-menu{width:100%;max-width:100%;background-color:#fff;height:calc(var(--app-height) - 4.3rem);display:none;box-sizing:border-box;transition:transform .3s ease-in-out;transform:translateX(100%);will-change:transform;z-index:1000;grid-area:mainnav-mobile;position:fixed;top:4.3rem;right:0;overflow-y:auto;overflow-x:hidden;font-size:1rem;color:#51247a}@media(min-width: 64rem){.slide-menu{display:none !important}}.slide-menu .slide-menu__slider{width:100%;transform:translateX(0);transition:transform .3s ease-in-out;will-change:transform}.slide-menu ul{position:relative;width:100%;margin:0;padding-left:0;list-style:none;background-color:#fff}.slide-menu ul ul{position:absolute;top:0;left:100%;display:none}.slide-menu ul ul a{padding:.75rem 1.5rem .75rem 3rem}.slide-menu ul a{display:block}.slide-menu li{margin-bottom:0}.slide-menu li:hover{background-color:#f1f1f1}.slide-menu .slide-menu__control{padding-top:1rem;padding-bottom:1rem}.slide-menu a{cursor:pointer;padding:.75rem 1.5rem;text-decoration:none;font-size:1rem;color:#51247a;position:relative}.slide-menu a:hover{color:#51247a;background-color:#f1f1f1}.slide-menu .slide-menu__backlink{font-weight:500;padding-left:3rem}.slide-menu .slide-menu__backlink::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14 7-5 5 5 5' stroke='%2351247A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translateY(50%);position:absolute;left:1.25rem;top:.25rem}.slide-menu__decorator::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m10 17 5-5-5-5' stroke='%2351247A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translateY(50%);position:absolute;right:1.5rem;top:.25rem}.slide-menu .controls{display:flex;margin-bottom:1rem}.slide-menu .btn{padding:.75rem 1.5rem;flex:1 0 auto;font-size:90%;color:#51247a;background-color:#fff;text-transform:uppercase;border:none;cursor:pointer;font-family:inherit;line-height:1}.slide-menu .btn:first-of-type{text-align:left}.slide-menu .btn:first-of-type:before{content:"⮜ this";margin-right:.5rem}.slide-menu .btn:last-of-type{text-align:right}.slide-menu .btn:last-of-type:before{content:"✕";margin-right:.5rem}.slide-menu .uq-header__nav-secondary-item{background-color:#48206c}.slide-menu .uq-header__nav-secondary-item:hover{background-color:#48206c}.slide-menu .uq-header__nav-secondary-link{color:#fff}.slide-menu .uq-header__nav-secondary-link:hover{color:#fff;background-color:#48206c}.slide-menu .uq-header__newglobal-nav-parent{font-weight:500}.slide-menu .uq-header__newglobal-nav-item{background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link{color:#fff;background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link:hover{color:#fff;background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link .slide-menu__decorator::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m10 17 5-5-5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.global-mobile-nav .uq-site-header__title-container{margin:0;padding-left:0rem;padding-right:0rem}.global-mobile-nav .uq-site-header__title{padding:1rem 1.5rem;font-size:1rem;font-weight:500}.global-mobile-nav .uq-site-header__title:hover{background:none}.global-mobile-nav__audience-link{font-weight:500}.uq-site-header__navigation-toggle{display:none}

package/dist/js/uqds.js

@@ -0,0 +1,81 @@
+"use strict";
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var uq = function (exports) {
+  'use strict';
+  /**
+   * NewHeader module
+   * @file Handles interaction behaviour for the Header. Does not output any
+   * HTML elements.
+   * TODO: make this class configurable
+   */
+
+  var NewHeader = /*#__PURE__*/function () {
+    function NewHeader(el) {
+      _classCallCheck(this, NewHeader);
+
+      this.init(el);
+    }
+
+    _createClass(NewHeader, [{
+      key: "init",
+      value: function init(el) {
+        var _this = this;
+
+        this.menuToggle = el.querySelector('.nav-primary__menu-toggle');
+        this.searchToggle = el.querySelector('.nav-primary__search-toggle');
+        this.searchLabel = el.querySelector('.search-toggle__label');
+        this.searchBlock = el.querySelector('.uq-header__search');
+        this.searchInput = el.querySelector('.uq-header__search-query-input'); // REFACTOR
+
+        this.menuToggle.addEventListener('click', function () {
+          document.body.classList.toggle('no-scroll');
+
+          _this.menuToggle.classList.toggle('nav-primary__menu-toggle--is-open');
+
+          _this.searchToggle.classList.remove('nav-primary__search-toggle--is-open');
+
+          _this.searchBlock.classList.remove('uq-header__search--is-open');
+        });
+        this.searchToggle.addEventListener('click', function (e) {
+          document.body.classList.remove('no-scroll');
+
+          _this.searchToggle.classList.toggle('nav-primary__search-toggle--is-open');
+
+          _this.searchBlock.classList.toggle('uq-header__search--is-open');
+
+          _this.menuToggle.classList.remove('nav-primary__menu-toggle--is-open');
+
+          if (_this.searchBlock.classList.contains('uq-header__search--is-open')) {
+            _this.searchInput.focus();
+          } else {
+            _this.searchInput.blur();
+
+            _this.searchToggle.blur();
+          }
+
+          if (_this.searchLabel.innerHTML === "Search") {
+            _this.searchLabel.innerHTML = "Close";
+          } else {
+            _this.searchLabel.innerHTML = "Search";
+          }
+
+          e.preventDefault();
+        });
+      }
+    }]);
+
+    return NewHeader;
+  }();
+
+  exports.header = NewHeader;
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  return exports;
+}({});

package/dist/js/uqds.min.js

@@ -0,0 +1 @@
+"use strict";function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var s=0;s<r.length;s++){var a=r[s];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _createClass(e,r,s){return r&&_defineProperties(e.prototype,r),s&&_defineProperties(e,s),Object.defineProperty(e,"prototype",{writable:!1}),e}var uq=function(e){return e.header=function(){function r(e){_classCallCheck(this,r),this.init(e)}return _createClass(r,[{key:"init",value:function(e){var r=this;this.menuToggle=e.querySelector(".nav-primary__menu-toggle"),this.searchToggle=e.querySelector(".nav-primary__search-toggle"),this.searchLabel=e.querySelector(".search-toggle__label"),this.searchBlock=e.querySelector(".uq-header__search"),this.searchInput=e.querySelector(".uq-header__search-query-input"),this.menuToggle.addEventListener("click",function(){document.body.classList.toggle("no-scroll"),r.menuToggle.classList.toggle("nav-primary__menu-toggle--is-open"),r.searchToggle.classList.remove("nav-primary__search-toggle--is-open"),r.searchBlock.classList.remove("uq-header__search--is-open")}),this.searchToggle.addEventListener("click",function(e){document.body.classList.remove("no-scroll"),r.searchToggle.classList.toggle("nav-primary__search-toggle--is-open"),r.searchBlock.classList.toggle("uq-header__search--is-open"),r.menuToggle.classList.remove("nav-primary__menu-toggle--is-open"),r.searchBlock.classList.contains("uq-header__search--is-open")?r.searchInput.focus():(r.searchInput.blur(),r.searchToggle.blur()),"Search"===r.searchLabel.innerHTML?r.searchLabel.innerHTML="Close":r.searchLabel.innerHTML="Search",e.preventDefault()})}}]),r}(),Object.defineProperty(e,"__esModule",{value:!0}),e}({});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uqds/header",
-  "version": "0.0.5-alpha.0",
-  "description": "Header component",
+  "version": "0.0.8-alpha.0",
+  "description": "The POC UQ Header component package",
   "keywords": [
     "uqds",
     "uq",
@@ -12,9 +12,6 @@
     "css",
     "header"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "author": {
     "name": "University of Queensland",
     "email": "webservices@uq.edu.au",
@@ -26,8 +23,12 @@
     "lib": "src"
   },
   "files": [
-    "src/*"
+    "src/*",
+    "dist/*"
   ],
+  "scripts": {
+    "prepare": "gulp -f ../../gulpfile.js --cwd=. prepare"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/uq-its-ss/design-system.git"
@@ -36,9 +37,13 @@
     "url": "https://github.com/uq-its-ss/design-system/issues"
   },
   "dependencies": {
-    "@uqds/core": "^0.0.5-alpha.0",
-    "@uqds/grid": "^0.0.5-alpha.0",
-    "@uqds/icon": "^0.0.5-alpha.0"
+    "@uqds/core": "^0.0.8-alpha.0",
+    "@uqds/form": "^0.0.8-alpha.0",
+    "@uqds/grid": "^0.0.8-alpha.0",
+    "@uqds/icon": "^0.0.8-alpha.0"
+  },
+  "devDependencies": {
+    "gulp": "^4.0.2"
   },
-  "gitHead": "0d2250c3ff44460d2902ea08102e6423b3fcc3aa"
+  "gitHead": "ec1e27ff2c58ae9bdcd0eef7516ad5d57a00bafb"
 }

package/src/js/header.js

@@ -1,54 +1,53 @@
-'use strict';
-
-/**
- * Header module
- * @file Handles interaction behaviour for the Header. Does not output any
- * HTML elements.
- * TODO: make this class configurable
- */
-
-class header {
-  constructor() {
-    this.init();
-  }
-
-  init() {
-    this.toggle = document.querySelector('.uq-header__search-toggle-button');
-    this.search = document.querySelector('.uq-header__search');
-    this.searchInput = document.querySelector('.uq-header__search-query-input');
-    this.meta = document.querySelector('meta.uq-header__mq--desktop');
-    this.navigation = document.querySelector('.uq-header__navigation');
-
-    if (this.meta == null) {
-      this.meta = document.createElement('meta');
-      this.meta.classList.add('uq-header__mq--desktop');
-      document.head.appendChild(this.meta);
-    };
-
-    this.mqLarge = window.getComputedStyle(this.meta).getPropertyValue('font-family');
-    this.mqLarge = this.mqLarge.trim().slice(1, -1); // browsers re-quote string style values
-    this.mqLargeList = window.matchMedia(this.mqLarge);
-
-    this.toggle.addEventListener('click', () => {
-      this.handleToggle();
-    });
-  }
-
-  handleToggle() {
-    this.toggle.classList.toggle('uq-header__search-toggle-button--icon-close');
-    this.search.classList.toggle('uq-header__search--open');
-    this.navigation.classList.toggle('uq-header__navigation--open');
-
-    if (this.search.classList.contains('uq-header__search--open')) {
-      if (this.mqLargeList.matches) {
-        this.searchInput.focus();
-      } else {
-        this.toggle.blur();
-      }
-    } else {
-      this.toggle.blur();
-    }
-  }
-};
-
-export {header as default};
+'use strict';
+
+/**
+ * NewHeader module
+ * @file Handles interaction behaviour for the Header. Does not output any
+ * HTML elements.
+ * TODO: make this class configurable
+ */
+
+class NewHeader {
+  constructor(el) {
+    this.init(el);
+  }
+
+  init(el) {
+    this.menuToggle = el.querySelector('.nav-primary__menu-toggle');
+    this.searchToggle = el.querySelector('.nav-primary__search-toggle');
+    this.searchLabel = el.querySelector('.search-toggle__label');
+    this.searchBlock = el.querySelector('.uq-header__search');
+    this.searchInput = el.querySelector('.uq-header__search-query-input');
+
+    // REFACTOR
+
+    this.menuToggle.addEventListener('click', () => {
+      document.body.classList.toggle('no-scroll');
+      this.menuToggle.classList.toggle('nav-primary__menu-toggle--is-open');
+      this.searchToggle.classList.remove('nav-primary__search-toggle--is-open');
+      this.searchBlock.classList.remove('uq-header__search--is-open');
+    });
+
+
+    this.searchToggle.addEventListener('click', (e) => {
+      document.body.classList.remove('no-scroll');
+      this.searchToggle.classList.toggle('nav-primary__search-toggle--is-open');
+      this.searchBlock.classList.toggle('uq-header__search--is-open');
+      this.menuToggle.classList.remove('nav-primary__menu-toggle--is-open');
+      if (this.searchBlock.classList.contains('uq-header__search--is-open')) {
+        this.searchInput.focus();
+      } else {
+        this.searchInput.blur();
+        this.searchToggle.blur();
+      }
+      if (this.searchLabel.innerHTML === "Search") {
+        this.searchLabel.innerHTML = "Close";
+      } else {
+        this.searchLabel.innerHTML = "Search";
+      }
+      e.preventDefault();
+    });
+  }
+}
+
+export default NewHeader;

package/src/js/main.js

@@ -0,0 +1,4 @@
+import header from './header';
+export { 
+  header
+};