nhsuk-frontend - npm Package Compare versions

Comparing version 7.1.0 to 8.0.0

dist/nhsuk.js

@@ -1,1 +0,1 @@
-(()=>{var e={405:()=>{NodeList.prototype.forEach||(NodeList.prototype.forEach=Array.prototype.forEach),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{enumerable:!1,value:function(e){return this.filter((function(t){return t===e})).length>0}}),Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(Element.prototype.matches.call(t,e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null}),"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(e,t){t=t||{bubbles:!1,cancelable:!1,detail:null};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n})}},t={};function n(i){var a=t[i];if(void 0!==a)return a.exports;var r=t[i]={exports:{}};return e[i](r,r.exports,n),r.exports}(()=>{"use strict";function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}function t(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,a(i.key),i)}}function i(e,t,n){return(t=a(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var a=i.call(t,"string");if("object"!==e(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"===e(n)?n:String(n)}var r=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),i(this,"KEY_SPACE",32),i(this,"DEBOUNCE_TIMEOUT_IN_SECONDS",1),this.$module=t,this.debounceFormSubmitTimer=null}var n,a;return n=e,(a=[{key:"handleKeyDown",value:function(e){var t=e.target;"button"===t.getAttribute("role")&&e.keyCode===this.KEY_SPACE&&(e.preventDefault(),t.click())}},{key:"debounce",value:function(e){var t=this;if("true"===e.target.getAttribute("data-prevent-double-click"))return this.debounceFormSubmitTimer?(e.preventDefault(),!1):void(this.debounceFormSubmitTimer=setTimeout((function(){t.debounceFormSubmitTimer=null}),1e3*this.DEBOUNCE_TIMEOUT_IN_SECONDS))}},{key:"init",value:function(){this.$module.addEventListener("keydown",this.handleKeyDown.bind(this)),this.$module.addEventListener("click",this.debounce.bind(this))}}])&&t(n.prototype,a),Object.defineProperty(n,"prototype",{writable:!1}),e}();function o(e){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o(e)}function s(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,(void 0,a=function(e,t){if("object"!==o(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,"string");if("object"!==o(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(i.key),"symbol"===o(a)?a:String(a)),i)}var a}var u=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$textarea=t.querySelector(".nhsuk-js-character-count"),this.$visibleCountMessage=null,this.$screenReaderCountMessage=null,this.lastInputTimestamp=null}var t,n,i;return t=e,i=[{key:"getDataset",value:function(e){var t={},n=e.attributes;if(n)for(var i=0;i<n.length;i++){var a=n[i],r=a.name.match(/^data-(.+)/);r&&(t[r[1]]=a.value)}return t}}],(n=[{key:"init",value:function(){if(this.$textarea){var t=this.$module,n=this.$textarea,i=document.getElementById("".concat(n.id,"-info"));n.insertAdjacentElement("afterend",i);var a=document.createElement("div");a.className="nhsuk-character-count__sr-status nhsuk-u-visually-hidden",a.setAttribute("aria-live","polite"),this.$screenReaderCountMessage=a,i.insertAdjacentElement("afterend",a);var r=document.createElement("div");r.className=i.className,r.classList.add("nhsuk-character-count__status"),r.setAttribute("aria-hidden","true"),this.$visibleCountMessage=r,i.insertAdjacentElement("afterend",r),i.classList.add("nhsuk-u-visually-hidden"),this.options=e.getDataset(t);var o=this.defaults.characterCountAttribute;this.options.maxwords&&(o=this.defaults.wordCountAttribute),this.maxLength=t.getAttribute(o),this.maxLength&&(n.removeAttribute("maxlength"),this.bindChangeEvents(),"onpageshow"in window?window.addEventListener("pageshow",this.updateCountMessage.bind(this)):window.addEventListener("DOMContentLoaded",this.updateCountMessage.bind(this)),this.updateCountMessage())}}},{key:"count",value:function(e){return this.options.maxwords?(e.match(/\S+/g)||[]).length:e.length}},{key:"bindChangeEvents",value:function(){var e=this.$textarea;e.addEventListener("keyup",this.handleKeyUp.bind(this)),e.addEventListener("focus",this.handleFocus.bind(this)),e.addEventListener("blur",this.handleBlur.bind(this))}},{key:"checkIfValueChanged",value:function(){this.$textarea.oldValue||(this.$textarea.oldValue=""),this.$textarea.value!==this.$textarea.oldValue&&(this.$textarea.oldValue=this.$textarea.value,this.updateCountMessage())}},{key:"updateCountMessage",value:function(){this.updateVisibleCountMessage(),this.updateScreenReaderCountMessage()}},{key:"updateVisibleCountMessage",value:function(){var e=this.$textarea,t=this.$visibleCountMessage,n=this.maxLength-this.count(e.value);this.isOverThreshold()?t.classList.remove("nhsuk-character-count__message--disabled"):t.classList.add("nhsuk-character-count__message--disabled"),n<0?(e.classList.add("nhsuk-textarea--error"),t.classList.remove("nhsuk-hint"),t.classList.add("nhsuk-error-message")):(e.classList.remove("nhsuk-textarea--error"),t.classList.remove("nhsuk-error-message"),t.classList.add("nhsuk-hint")),t.innerHTML=this.formattedUpdateMessage()}},{key:"updateScreenReaderCountMessage",value:function(){var e=this.$screenReaderCountMessage;this.isOverThreshold()?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",!0),e.innerHTML=this.formattedUpdateMessage()}},{key:"formattedUpdateMessage",value:function(){var e,t,n=this.$textarea,i=this.options,a=this.maxLength-this.count(n.value),r="character";return i.maxwords&&(r="word"),r+=-1===a||1===a?"":"s",e=a<0?"too many":"remaining",t=Math.abs(a),"You have ".concat(t," ").concat(r," ").concat(e)}},{key:"isOverThreshold",value:function(){var e=this.$textarea,t=this.options,n=this.count(e.value);return this.maxLength*(t.threshold?t.threshold:0)/100<=n}},{key:"handleKeyUp",value:function(){this.updateVisibleCountMessage(),this.lastInputTimestamp=Date.now()}},{key:"handleFocus",value:function(){var e=this;this.valueChecker=setInterval((function(){(!e.lastInputTimestamp||Date.now()-500>=e.lastInputTimestamp)&&e.checkIfValueChanged()}),1e3)}},{key:"handleBlur",value:function(){clearInterval(this.valueChecker)}}])&&s(t.prototype,n),i&&s(t,i),Object.defineProperty(t,"prototype",{writable:!1}),e}();u.prototype.defaults={characterCountAttribute:"data-maxlength",wordCountAttribute:"data-maxwords"};var c=function(e,t){if(e&&t){var n="true"===e.getAttribute(t)?"false":"true";e.setAttribute(t,n)}},l=function(e,t){if(e&&t){var n=e.getAttribute("aria-controls");if(n){var i=document.getElementById(n);i&&(e.checked?(i.classList.remove(t),e.setAttribute("aria-expanded",!0)):(i.classList.add(t),e.setAttribute("aria-expanded",!1)))}}},h=function(e){e.form.querySelectorAll('input[type="checkbox"]').forEach((function(e){return l(e,"nhsuk-checkboxes__conditional--hidden")}))};function d(e){(function(e){if("A"!==e.tagName||!1===e.href)return!1;var t=document.querySelector(e.hash);if(!t)return!1;var n=function(e){var t=e.closest("fieldset");if(t){var n=t.getElementsByTagName("legend");if(n.length){var i=n[0];if("checkbox"===e.type||"radio"===e.type)return i;var a=i.getBoundingClientRect().top,r=e.getBoundingClientRect();if(r.height&&window.innerHeight&&r.top+r.height-a<window.innerHeight/2)return i}}return document.querySelector("label[for='".concat(e.getAttribute("id"),"']"))||e.closest("label")}(t);return!!n&&(n.scrollIntoView(),t.focus({preventScroll:!0}),!0)})(e.target)&&e.preventDefault()}function b(e){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b(e)}function f(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,(void 0,a=function(e,t){if("object"!==b(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,"string");if("object"!==b(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(i.key),"symbol"===b(a)?a:String(a)),i)}var a}var v=function(){function e(t,n,i,a){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.namespace=n,this.responsive=i,this.historyEnabled=a,this.$tabs=t.querySelectorAll(".".concat(this.namespace,"__tab")),this.keys={down:40,left:37,right:39,up:38},this.jsHiddenClass="".concat(this.namespace,"__panel--hidden"),this.showEvent=new CustomEvent("tab.show"),this.hideEvent=new CustomEvent("tab.hide")}var t,n,i;return t=e,i=[{key:"getHref",value:function(e){var t=e.getAttribute("href");return t.slice(t.indexOf("#"),t.length)}}],(n=[{key:"init",value:function(){"function"==typeof window.matchMedia&&this.responsive?this.setupResponsiveChecks():this.setup()}},{key:"setupResponsiveChecks",value:function(){this.mql=window.matchMedia("(min-width: 641px)"),this.mql.addEventListener("change",this.checkMode.bind(this)),this.checkMode()}},{key:"checkMode",value:function(){this.mql.matches?this.setup():this.teardown()}},{key:"setup",value:function(){var e=this,t=this.$module,n=this.$tabs,i=t.querySelector(".".concat(this.namespace,"__list")),a=t.querySelectorAll(".".concat(this.namespace,"__list-item"));if(n&&i&&a){i.setAttribute("role","tablist"),a.forEach((function(e){e.setAttribute("role","presentation")})),n.forEach((function(t){e.setAttributes(t),t.boundTabClick=e.onTabClick.bind(e),t.boundTabKeydown=e.onTabKeydown.bind(e),t.addEventListener("click",t.boundTabClick,!0),t.addEventListener("keydown",t.boundTabKeydown,!0),e.hideTab(t)}));var r=this.getTab(window.location.hash)||this.$tabs[0];this.showTab(r),this.historyEnabled&&(t.boundOnHashChange=this.onHashChange.bind(this),window.addEventListener("hashchange",t.boundOnHashChange,!0))}}},{key:"teardown",value:function(){var e=this,t=this.$module,n=this.$tabs,i=t.querySelector(".".concat(this.namespace,"__list")),a=t.querySelectorAll(".".concat(this.namespace,"__list-item"));n&&i&&a&&(i.removeAttribute("role"),a.forEach((function(e){e.removeAttribute("role","presentation")})),n.forEach((function(t){t.removeEventListener("click",t.boundTabClick,!0),t.removeEventListener("keydown",t.boundTabKeydown,!0),e.unsetAttributes(t)})),this.historyEnabled&&window.removeEventListener("hashchange",t.boundOnHashChange,!0))}},{key:"onHashChange",value:function(){var e=window.location.hash,t=this.getTab(e);if(t)if(this.changingHash)this.changingHash=!1;else{var n=this.getCurrentTab();this.hideTab(n),this.showTab(t),t.focus()}}},{key:"hideTab",value:function(e){this.unhighlightTab(e),this.hidePanel(e)}},{key:"showTab",value:function(e){this.highlightTab(e),this.showPanel(e)}},{key:"getTab",value:function(e){return this.$module.querySelector(".".concat(this.namespace,'__tab[href="').concat(e,'"]'))}},{key:"setAttributes",value:function(t){var n=e.getHref(t).slice(1);t.setAttribute("id","tab_".concat(n)),t.setAttribute("role","tab"),t.setAttribute("aria-controls",n),t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1");var i=this.getPanel(t);i.setAttribute("role","tabpanel"),i.setAttribute("aria-labelledby",t.id),i.classList.add(this.jsHiddenClass)}},{key:"unsetAttributes",value:function(e){e.removeAttribute("id"),e.removeAttribute("role"),e.removeAttribute("aria-controls"),e.removeAttribute("aria-selected"),e.removeAttribute("tabindex");var t=this.getPanel(e);t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.removeAttribute("tabindex"),t.classList.remove(this.jsHiddenClass)}},{key:"onTabClick",value:function(e){e.target.classList.contains("".concat(this.namespace,"__tab"))||(e.stopPropagation(),e.preventDefault()),e.preventDefault();var t=e.target,n=this.getCurrentTab();this.hideTab(n),this.showTab(t),this.createHistoryEntry(t)}},{key:"createHistoryEntry",value:function(t){if(this.historyEnabled){var n=this.getPanel(t),i=n.id;n.id="",this.changingHash=!0,window.location.hash=e.getHref(t).slice(1),n.id=i}}},{key:"onTabKeydown",value:function(e){switch(e.keyCode){case this.keys.left:case this.keys.up:this.activatePreviousTab(),e.preventDefault();break;case this.keys.right:case this.keys.down:this.activateNextTab(),e.preventDefault()}}},{key:"activateNextTab",value:function(){var e,t=this.getCurrentTab(),n=t.parentNode.nextElementSibling;n&&(e=n.querySelector(".".concat(this.namespace,"__tab"))),e&&(this.hideTab(t),this.showTab(e),e.focus(),this.createHistoryEntry(e))}},{key:"activatePreviousTab",value:function(){var e,t=this.getCurrentTab(),n=t.parentNode.previousElementSibling;n&&(e=n.querySelector(".".concat(this.namespace,"__tab"))),e&&(this.hideTab(t),this.showTab(e),e.focus(),this.createHistoryEntry(e))}},{key:"getPanel",value:function(t){return this.$module.querySelector(e.getHref(t))}},{key:"showPanel",value:function(e){var t=this.getPanel(e);t.classList.remove(this.jsHiddenClass),t.dispatchEvent(this.showEvent)}},{key:"hidePanel",value:function(e){var t=this.getPanel(e);t.classList.add(this.jsHiddenClass),t.dispatchEvent(this.hideEvent)}},{key:"unhighlightTab",value:function(e){e.setAttribute("aria-selected","false"),e.parentNode.classList.remove("".concat(this.namespace,"__list-item--selected")),e.setAttribute("tabindex","-1")}},{key:"highlightTab",value:function(e){e.setAttribute("aria-selected","true"),e.parentNode.classList.add("".concat(this.namespace,"__list-item--selected")),e.setAttribute("tabindex","0")}},{key:"getCurrentTab",value:function(){return this.$module.querySelector(".".concat(this.namespace,"__list-item--selected .").concat(this.namespace,"__tab"))}}])&&f(t.prototype,n),i&&f(t,i),Object.defineProperty(t,"prototype",{writable:!1}),e}();n(405),document.addEventListener("DOMContentLoaded",(function(){var e,t,n,i,a,o;document.querySelectorAll('[data-module="nhsuk-character-count"]').forEach((function(e){new u(e).init()})),document.querySelectorAll('[data-module="nhsuk-button"]').forEach((function(e){new r(e).init()})),function(){var e=document.querySelectorAll(".nhsuk-checkboxes .nhsuk-checkboxes__input"),t=function(e){var t;l(e.target,"nhsuk-checkboxes__conditional--hidden"),e.target.checked&&(e.target.hasAttribute("data-checkbox-exclusive")?((t=e.target).form.querySelectorAll('input[type="checkbox"][data-checkbox-exclusive-group="'.concat(t.getAttribute("data-checkbox-exclusive-group"),'"]')).forEach((function(e){t.form===e.form&&e!==t&&(e.checked=!1)})),h(t)):function(e){e.form.querySelectorAll('input[type="checkbox"][data-checkbox-exclusive][data-checkbox-exclusive-group="'.concat(e.getAttribute("data-checkbox-exclusive-group"),'"]')).forEach((function(t){e.form===t.form&&(t.checked=!1)})),h(e)}(e.target))};"onpageshow"in window?window.addEventListener("pageshow",(function(){return e.forEach((function(e){return h(e)}))})):window.addEventListener("DOMContentLoaded",(function(){return e.forEach((function(e){return h(e)}))})),e.forEach((function(e){return h(e)})),e.forEach((function(e){e.addEventListener("change",t)}))}(),function(){if("boolean"!=typeof document.createElement("details").open){var e=document.querySelectorAll("details");e.length&&e.forEach((function(e,t){e.hasAttribute("nhsuk-polyfilled")||function(e,t){e.setAttribute("nhsuk-polyfilled","true"),e.id||e.setAttribute("id","nhsuk-details".concat(t));var n=document.querySelector("#".concat(e.id," .nhsuk-details__text"));n.id||n.setAttribute("id","nhsuk-details__text".concat(t));var i=document.querySelector("#".concat(e.id," .nhsuk-details__summary"));i.setAttribute("role","button"),i.setAttribute("aria-controls",n.id),i.setAttribute("tabIndex","0"),1==(null!==e.getAttribute("open"))?(i.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false")):(i.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),n.style.display="none"),i.addEventListener("click",(function(){c(i,"aria-expanded"),c(n,"aria-hidden"),n.style.display="true"===n.getAttribute("aria-hidden")?"none":"",e.hasAttribute("open")?e.removeAttribute("open"):e.setAttribute("open","open")})),i.addEventListener("keydown",(function(e){13!==e.keyCode&&32!==e.keyCode||(e.preventDefault(),i.click())}))}(e,t)}))}}(),function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).focusOnPageLoad,t=void 0===e||e,n=document.querySelector(".nhsuk-error-summary");n&&(t&&n.focus(),n.addEventListener("click",d))}(),n=document.querySelector("#toggle-menu"),i=document.querySelector("#close-menu"),a=document.querySelector("#header-navigation"),o=function(e){e.preventDefault(),c(n,"aria-expanded"),n.classList.toggle("is-active"),a.classList.toggle("js-show")},n&&i&&a&&[n,i].forEach((function(e){e.addEventListener("click",o)})),function(){var e=document.querySelector("#toggle-search"),t=document.querySelector("#close-search"),n=document.querySelector("#wrap-search"),i=document.querySelector("#content-header"),a=function(t){t.preventDefault(),c(e,"aria-expanded"),e.classList.toggle("is-active"),n.classList.toggle("js-show"),i.classList.toggle("js-show")};e&&t&&[e,t].forEach((function(e){e.addEventListener("click",a)}))}(),function(){var e=document.querySelectorAll(".nhsuk-radios--conditional .nhsuk-radios__input"),t=function(){e.forEach((function(e){return l(e,"nhsuk-radios__conditional--hidden")}))};"onpageshow"in window?window.addEventListener("pageshow",t):window.addEventListener("DOMContentLoaded",t),t(),e.forEach((function(e){e.addEventListener("change",t)}))}(),e=document.querySelector("h1"),t=document.querySelector(".nhsuk-skip-link"),e&&t&&(t.addEventListener("click",(function(t){t.preventDefault(),e.setAttribute("tabIndex","-1"),e.focus()})),e.addEventListener("blur",(function(t){t.preventDefault(),e.removeAttribute("tabIndex")}))),function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.namespace,n=void 0===t?"nhsuk-tabs":t,i=e.responsive,a=void 0===i||i,r=e.historyEnabled,o=void 0===r||r;document.querySelectorAll('[data-module="'.concat(n,'"]')).forEach((function(e){new v(e,n,a,o).init()}))}()}))})()})();
+(()=>{var e={405:()=>{NodeList.prototype.forEach||(NodeList.prototype.forEach=Array.prototype.forEach),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{enumerable:!1,value:function(e){return this.filter((function(t){return t===e})).length>0}}),Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(Element.prototype.matches.call(t,e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null}),"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(e,t){t=t||{bubbles:!1,cancelable:!1,detail:null};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n})}},t={};function n(i){var o=t[i];if(void 0!==o)return o.exports;var a=t[i]={exports:{}};return e[i](a,a.exports,n),a.exports}(()=>{"use strict";function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}function t(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,o(i.key),i)}}function i(e,t,n){return(t=o(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(t){var n=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)}(t);return"symbol"===e(n)?n:String(n)}var a=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),i(this,"KEY_SPACE",32),i(this,"DEBOUNCE_TIMEOUT_IN_SECONDS",1),this.$module=t,this.debounceFormSubmitTimer=null}var n,o;return n=e,(o=[{key:"handleKeyDown",value:function(e){var t=e.target;"button"===t.getAttribute("role")&&e.keyCode===this.KEY_SPACE&&(e.preventDefault(),t.click())}},{key:"debounce",value:function(e){var t=this;if("true"===e.target.getAttribute("data-prevent-double-click"))return this.debounceFormSubmitTimer?(e.preventDefault(),!1):void(this.debounceFormSubmitTimer=setTimeout((function(){t.debounceFormSubmitTimer=null}),1e3*this.DEBOUNCE_TIMEOUT_IN_SECONDS))}},{key:"init",value:function(){this.$module.addEventListener("keydown",this.handleKeyDown.bind(this)),this.$module.addEventListener("click",this.debounce.bind(this))}}])&&t(n.prototype,o),Object.defineProperty(n,"prototype",{writable:!1}),e}();function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function s(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,(void 0,o=function(e,t){if("object"!==r(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,"string");if("object"!==r(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(i.key),"symbol"===r(o)?o:String(o)),i)}var o}var u=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$textarea=t.querySelector(".nhsuk-js-character-count"),this.$visibleCountMessage=null,this.$screenReaderCountMessage=null,this.lastInputTimestamp=null}var t,n,i;return t=e,i=[{key:"getDataset",value:function(e){var t={},n=e.attributes;if(n)for(var i=0;i<n.length;i++){var o=n[i],a=o.name.match(/^data-(.+)/);a&&(t[a[1]]=o.value)}return t}}],(n=[{key:"init",value:function(){if(this.$textarea){var t=this.$module,n=this.$textarea,i=document.getElementById("".concat(n.id,"-info"));n.insertAdjacentElement("afterend",i);var o=document.createElement("div");o.className="nhsuk-character-count__sr-status nhsuk-u-visually-hidden",o.setAttribute("aria-live","polite"),this.$screenReaderCountMessage=o,i.insertAdjacentElement("afterend",o);var a=document.createElement("div");a.className=i.className,a.classList.add("nhsuk-character-count__status"),a.setAttribute("aria-hidden","true"),this.$visibleCountMessage=a,i.insertAdjacentElement("afterend",a),i.classList.add("nhsuk-u-visually-hidden"),this.options=e.getDataset(t);var r=this.defaults.characterCountAttribute;this.options.maxwords&&(r=this.defaults.wordCountAttribute),this.maxLength=t.getAttribute(r),this.maxLength&&(n.removeAttribute("maxlength"),this.bindChangeEvents(),"onpageshow"in window?window.addEventListener("pageshow",this.updateCountMessage.bind(this)):window.addEventListener("DOMContentLoaded",this.updateCountMessage.bind(this)),this.updateCountMessage())}}},{key:"count",value:function(e){return this.options.maxwords?(e.match(/\S+/g)||[]).length:e.length}},{key:"bindChangeEvents",value:function(){var e=this.$textarea;e.addEventListener("keyup",this.handleKeyUp.bind(this)),e.addEventListener("focus",this.handleFocus.bind(this)),e.addEventListener("blur",this.handleBlur.bind(this))}},{key:"checkIfValueChanged",value:function(){this.$textarea.oldValue||(this.$textarea.oldValue=""),this.$textarea.value!==this.$textarea.oldValue&&(this.$textarea.oldValue=this.$textarea.value,this.updateCountMessage())}},{key:"updateCountMessage",value:function(){this.updateVisibleCountMessage(),this.updateScreenReaderCountMessage()}},{key:"updateVisibleCountMessage",value:function(){var e=this.$textarea,t=this.$visibleCountMessage,n=this.maxLength-this.count(e.value);this.isOverThreshold()?t.classList.remove("nhsuk-character-count__message--disabled"):t.classList.add("nhsuk-character-count__message--disabled"),n<0?(e.classList.add("nhsuk-textarea--error"),t.classList.remove("nhsuk-hint"),t.classList.add("nhsuk-error-message")):(e.classList.remove("nhsuk-textarea--error"),t.classList.remove("nhsuk-error-message"),t.classList.add("nhsuk-hint")),t.innerHTML=this.formattedUpdateMessage()}},{key:"updateScreenReaderCountMessage",value:function(){var e=this.$screenReaderCountMessage;this.isOverThreshold()?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",!0),e.innerHTML=this.formattedUpdateMessage()}},{key:"formattedUpdateMessage",value:function(){var e,t,n=this.$textarea,i=this.options,o=this.maxLength-this.count(n.value),a="character";return i.maxwords&&(a="word"),a+=-1===o||1===o?"":"s",e=o<0?"too many":"remaining",t=Math.abs(o),"You have ".concat(t," ").concat(a," ").concat(e)}},{key:"isOverThreshold",value:function(){var e=this.$textarea,t=this.options,n=this.count(e.value);return this.maxLength*(t.threshold?t.threshold:0)/100<=n}},{key:"handleKeyUp",value:function(){this.updateVisibleCountMessage(),this.lastInputTimestamp=Date.now()}},{key:"handleFocus",value:function(){var e=this;this.valueChecker=setInterval((function(){(!e.lastInputTimestamp||Date.now()-500>=e.lastInputTimestamp)&&e.checkIfValueChanged()}),1e3)}},{key:"handleBlur",value:function(){clearInterval(this.valueChecker)}}])&&s(t.prototype,n),i&&s(t,i),Object.defineProperty(t,"prototype",{writable:!1}),e}();u.prototype.defaults={characterCountAttribute:"data-maxlength",wordCountAttribute:"data-maxwords"};var l=function(e,t){if(e&&t){var n="true"===e.getAttribute(t)?"false":"true";e.setAttribute(t,n)}},c=function(e,t){if(e&&t){var n=e.getAttribute("aria-controls");if(n){var i=document.getElementById(n);i&&(e.checked?(i.classList.remove(t),e.setAttribute("aria-expanded",!0)):(i.classList.add(t),e.setAttribute("aria-expanded",!1)))}}},h=function(e){e.form.querySelectorAll('input[type="checkbox"]').forEach((function(e){return c(e,"nhsuk-checkboxes__conditional--hidden")}))};function d(e){(function(e){if("A"!==e.tagName||!1===e.href)return!1;var t=document.querySelector(e.hash);if(!t)return!1;var n=function(e){var t=e.closest("fieldset");if(t){var n=t.getElementsByTagName("legend");if(n.length){var i=n[0];if("checkbox"===e.type||"radio"===e.type)return i;var o=i.getBoundingClientRect().top,a=e.getBoundingClientRect();if(a.height&&window.innerHeight&&a.top+a.height-o<window.innerHeight/2)return i}}return document.querySelector("label[for='".concat(e.getAttribute("id"),"']"))||e.closest("label")}(t);return!!n&&(n.scrollIntoView(),t.focus({preventScroll:!0}),!0)})(e.target)&&e.preventDefault()}function b(e){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},b(e)}function f(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,(void 0,o=function(e,t){if("object"!==b(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,"string");if("object"!==b(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(i.key),"symbol"===b(o)?o:String(o)),i)}var o}var v=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.menuIsOpen=!1,this.navigation=document.querySelector(".nhsuk-navigation"),this.navigationList=document.querySelector(".nhsuk-header__navigation-list"),this.mobileMenu=document.createElement("ul"),this.mobileMenuToggleButton=document.querySelector(".nhsuk-header__menu-toggle"),this.mobileMenuCloseButton=document.createElement("button"),this.mobileMenuContainer=document.querySelector(".nhsuk-mobile-menu-container"),this.breakpoints=[],this.width=document.body.offsetWidth}var t,n;return t=e,n=[{key:"init",value:function(){var e=this;this.navigation&&this.navigationList&&this.mobileMenuToggleButton&&this.mobileMenuContainer&&(this.setupMobileMenu(),this.calculateBreakpoints(),this.updateNavigation(),this.doOnOrientationChange(),this.handleResize=this.debounce((function(){e.calculateBreakpoints(),e.updateNavigation()})),this.mobileMenuToggleButton.addEventListener("click",this.toggleMobileMenu.bind(this)),window.addEventListener("resize",this.handleResize),window.addEventListener("orientationchange",this.doOnOrientationChange()))}},{key:"debounce",value:function(e){var t,n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100;return function(){for(var o=arguments.length,a=new Array(o),r=0;r<o;r++)a[r]=arguments[r];clearTimeout(t),t=setTimeout((function(){e.apply(n,a)}),i)}}},{key:"calculateBreakpoints",value:function(){for(var e=0,t=0;t<this.navigationList.children.length;t++)e+=this.navigationList.children[t].offsetWidth,this.breakpoints[t]=e}},{key:"setupMobileMenu",value:function(){this.mobileMenuContainer.appendChild(this.mobileMenu),this.mobileMenu.classList.add("nhsuk-header__drop-down","nhsuk-header__drop-down--hidden")}},{key:"closeMobileMenu",value:function(){this.menuIsOpen=!1,this.mobileMenu.classList.add("nhsuk-header__drop-down--hidden"),this.navigation.style.marginBottom=0,this.mobileMenuToggleButton.setAttribute("aria-expanded","false"),this.mobileMenuToggleButton.focus(),this.mobileMenuCloseButton.removeEventListener("click",this.closeMobileMenu.bind(this)),document.removeEventListener("keydown",this.handleEscapeKey.bind(this))}},{key:"handleEscapeKey",value:function(e){"Escape"===e.key&&this.closeMobileMenu()}},{key:"openMobileMenu",value:function(){var e=this.mobileMenu.offsetHeight;this.menuIsOpen=!0,this.mobileMenu.classList.remove("nhsuk-header__drop-down--hidden"),this.navigation.style.marginBottom="".concat(e,"px"),this.mobileMenuToggleButton.setAttribute("aria-expanded","true"),document.addEventListener("keydown",this.handleEscapeKey.bind(this)),this.mobileMenuCloseButton.addEventListener("click",this.closeMobileMenu.bind(this))}},{key:"toggleMobileMenu",value:function(){this.menuIsOpen?this.closeMobileMenu():this.openMobileMenu()}},{key:"updateNavigation",value:function(){var e=this.navigation.offsetWidth,t=this.navigationList.children.length;if(e<this.breakpoints[t-1]){if(this.mobileMenuToggleButton.classList.add("nhsuk-header__menu-toggle--visible"),this.mobileMenuContainer.classList.add("nhsuk-mobile-menu-container--visible"),2===t)return;for(;e<this.breakpoints[t-1];)this.mobileMenu.insertBefore(this.navigationList.children[t-2],this.mobileMenu.firstChild),t-=1}else if(e>this.breakpoints[t])for(;e>this.breakpoints[t];)this.navigationList.insertBefore(this.mobileMenu.removeChild(this.mobileMenu.firstChild),this.mobileMenuContainer),t+=1;this.mobileMenu.children.length||(this.mobileMenuToggleButton.classList.remove("nhsuk-header__menu-toggle--visible"),this.mobileMenuContainer.classList.remove("nhsuk-mobile-menu-container--visible")),document.body.offsetWidth!==this.width&&this.menuIsOpen&&this.closeMobileMenu()}},{key:"doOnOrientationChange",value:function(){var e=this;90===window.orientation&&setTimeout((function(){e.calculateBreakpoints(),e.updateNavigation()}),200)}}],n&&f(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function p(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,(void 0,o=function(e,t){if("object"!==m(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,"string");if("object"!==m(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(i.key),"symbol"===m(o)?o:String(o)),i)}var o}var y=function(){function e(t,n,i,o){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.namespace=n,this.responsive=i,this.historyEnabled=o,this.$tabs=t.querySelectorAll(".".concat(this.namespace,"__tab")),this.keys={down:40,left:37,right:39,up:38},this.jsHiddenClass="".concat(this.namespace,"__panel--hidden"),this.showEvent=new CustomEvent("tab.show"),this.hideEvent=new CustomEvent("tab.hide")}var t,n,i;return t=e,i=[{key:"getHref",value:function(e){var t=e.getAttribute("href");return t.slice(t.indexOf("#"),t.length)}}],(n=[{key:"init",value:function(){"function"==typeof window.matchMedia&&this.responsive?this.setupResponsiveChecks():this.setup()}},{key:"setupResponsiveChecks",value:function(){this.mql=window.matchMedia("(min-width: 641px)"),this.mql.addEventListener("change",this.checkMode.bind(this)),this.checkMode()}},{key:"checkMode",value:function(){this.mql.matches?this.setup():this.teardown()}},{key:"setup",value:function(){var e=this,t=this.$module,n=this.$tabs,i=t.querySelector(".".concat(this.namespace,"__list")),o=t.querySelectorAll(".".concat(this.namespace,"__list-item"));if(n&&i&&o){i.setAttribute("role","tablist"),o.forEach((function(e){e.setAttribute("role","presentation")})),n.forEach((function(t){e.setAttributes(t),t.boundTabClick=e.onTabClick.bind(e),t.boundTabKeydown=e.onTabKeydown.bind(e),t.addEventListener("click",t.boundTabClick,!0),t.addEventListener("keydown",t.boundTabKeydown,!0),e.hideTab(t)}));var a=this.getTab(window.location.hash)||this.$tabs[0];this.showTab(a),this.historyEnabled&&(t.boundOnHashChange=this.onHashChange.bind(this),window.addEventListener("hashchange",t.boundOnHashChange,!0))}}},{key:"teardown",value:function(){var e=this,t=this.$module,n=this.$tabs,i=t.querySelector(".".concat(this.namespace,"__list")),o=t.querySelectorAll(".".concat(this.namespace,"__list-item"));n&&i&&o&&(i.removeAttribute("role"),o.forEach((function(e){e.removeAttribute("role","presentation")})),n.forEach((function(t){t.removeEventListener("click",t.boundTabClick,!0),t.removeEventListener("keydown",t.boundTabKeydown,!0),e.unsetAttributes(t)})),this.historyEnabled&&window.removeEventListener("hashchange",t.boundOnHashChange,!0))}},{key:"onHashChange",value:function(){var e=window.location.hash,t=this.getTab(e);if(t)if(this.changingHash)this.changingHash=!1;else{var n=this.getCurrentTab();this.hideTab(n),this.showTab(t),t.focus()}}},{key:"hideTab",value:function(e){this.unhighlightTab(e),this.hidePanel(e)}},{key:"showTab",value:function(e){this.highlightTab(e),this.showPanel(e)}},{key:"getTab",value:function(e){return this.$module.querySelector(".".concat(this.namespace,'__tab[href="').concat(e,'"]'))}},{key:"setAttributes",value:function(t){var n=e.getHref(t).slice(1);t.setAttribute("id","tab_".concat(n)),t.setAttribute("role","tab"),t.setAttribute("aria-controls",n),t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1");var i=this.getPanel(t);i.setAttribute("role","tabpanel"),i.setAttribute("aria-labelledby",t.id),i.classList.add(this.jsHiddenClass)}},{key:"unsetAttributes",value:function(e){e.removeAttribute("id"),e.removeAttribute("role"),e.removeAttribute("aria-controls"),e.removeAttribute("aria-selected"),e.removeAttribute("tabindex");var t=this.getPanel(e);t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.removeAttribute("tabindex"),t.classList.remove(this.jsHiddenClass)}},{key:"onTabClick",value:function(e){e.target.classList.contains("".concat(this.namespace,"__tab"))||(e.stopPropagation(),e.preventDefault()),e.preventDefault();var t=e.target,n=this.getCurrentTab();this.hideTab(n),this.showTab(t),this.createHistoryEntry(t)}},{key:"createHistoryEntry",value:function(t){if(this.historyEnabled){var n=this.getPanel(t),i=n.id;n.id="",this.changingHash=!0,window.location.hash=e.getHref(t).slice(1),n.id=i}}},{key:"onTabKeydown",value:function(e){switch(e.keyCode){case this.keys.left:case this.keys.up:this.activatePreviousTab(),e.preventDefault();break;case this.keys.right:case this.keys.down:this.activateNextTab(),e.preventDefault()}}},{key:"activateNextTab",value:function(){var e,t=this.getCurrentTab(),n=t.parentNode.nextElementSibling;n&&(e=n.querySelector(".".concat(this.namespace,"__tab"))),e&&(this.hideTab(t),this.showTab(e),e.focus(),this.createHistoryEntry(e))}},{key:"activatePreviousTab",value:function(){var e,t=this.getCurrentTab(),n=t.parentNode.previousElementSibling;n&&(e=n.querySelector(".".concat(this.namespace,"__tab"))),e&&(this.hideTab(t),this.showTab(e),e.focus(),this.createHistoryEntry(e))}},{key:"getPanel",value:function(t){return this.$module.querySelector(e.getHref(t))}},{key:"showPanel",value:function(e){var t=this.getPanel(e);t.classList.remove(this.jsHiddenClass),t.dispatchEvent(this.showEvent)}},{key:"hidePanel",value:function(e){var t=this.getPanel(e);t.classList.add(this.jsHiddenClass),t.dispatchEvent(this.hideEvent)}},{key:"unhighlightTab",value:function(e){e.setAttribute("aria-selected","false"),e.parentNode.classList.remove("".concat(this.namespace,"__list-item--selected")),e.setAttribute("tabindex","-1")}},{key:"highlightTab",value:function(e){e.setAttribute("aria-selected","true"),e.parentNode.classList.add("".concat(this.namespace,"__list-item--selected")),e.setAttribute("tabindex","0")}},{key:"getCurrentTab",value:function(){return this.$module.querySelector(".".concat(this.namespace,"__list-item--selected .").concat(this.namespace,"__tab"))}}])&&p(t.prototype,n),i&&p(t,i),Object.defineProperty(t,"prototype",{writable:!1}),e}();n(405),document.addEventListener("DOMContentLoaded",(function(){var e,t;document.querySelectorAll('[data-module="nhsuk-character-count"]').forEach((function(e){new u(e).init()})),document.querySelectorAll('[data-module="nhsuk-button"]').forEach((function(e){new a(e).init()})),function(){var e=document.querySelectorAll(".nhsuk-checkboxes .nhsuk-checkboxes__input"),t=function(e){var t;c(e.target,"nhsuk-checkboxes__conditional--hidden"),e.target.checked&&(e.target.hasAttribute("data-checkbox-exclusive")?((t=e.target).form.querySelectorAll('input[type="checkbox"][data-checkbox-exclusive-group="'.concat(t.getAttribute("data-checkbox-exclusive-group"),'"]')).forEach((function(e){t.form===e.form&&e!==t&&(e.checked=!1)})),h(t)):function(e){e.form.querySelectorAll('input[type="checkbox"][data-checkbox-exclusive][data-checkbox-exclusive-group="'.concat(e.getAttribute("data-checkbox-exclusive-group"),'"]')).forEach((function(t){e.form===t.form&&(t.checked=!1)})),h(e)}(e.target))};"onpageshow"in window?window.addEventListener("pageshow",(function(){return e.forEach((function(e){return h(e)}))})):window.addEventListener("DOMContentLoaded",(function(){return e.forEach((function(e){return h(e)}))})),e.forEach((function(e){return h(e)})),e.forEach((function(e){e.addEventListener("change",t)}))}(),function(){if("boolean"!=typeof document.createElement("details").open){var e=document.querySelectorAll("details");e.length&&e.forEach((function(e,t){e.hasAttribute("nhsuk-polyfilled")||function(e,t){e.setAttribute("nhsuk-polyfilled","true"),e.id||e.setAttribute("id","nhsuk-details".concat(t));var n=document.querySelector("#".concat(e.id," .nhsuk-details__text"));n.id||n.setAttribute("id","nhsuk-details__text".concat(t));var i=document.querySelector("#".concat(e.id," .nhsuk-details__summary"));i.setAttribute("role","button"),i.setAttribute("aria-controls",n.id),i.setAttribute("tabIndex","0"),1==(null!==e.getAttribute("open"))?(i.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false")):(i.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),n.style.display="none"),i.addEventListener("click",(function(){l(i,"aria-expanded"),l(n,"aria-hidden"),n.style.display="true"===n.getAttribute("aria-hidden")?"none":"",e.hasAttribute("open")?e.removeAttribute("open"):e.setAttribute("open","open")})),i.addEventListener("keydown",(function(e){13!==e.keyCode&&32!==e.keyCode||(e.preventDefault(),i.click())}))}(e,t)}))}}(),function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).focusOnPageLoad,t=void 0===e||e,n=document.querySelector(".nhsuk-error-summary");n&&(t&&n.focus(),n.addEventListener("click",d))}(),(new v).init(),function(){var e=document.querySelectorAll(".nhsuk-radios--conditional .nhsuk-radios__input"),t=function(){e.forEach((function(e){return c(e,"nhsuk-radios__conditional--hidden")}))};"onpageshow"in window?window.addEventListener("pageshow",t):window.addEventListener("DOMContentLoaded",t),t(),e.forEach((function(e){e.addEventListener("change",t)}))}(),e=document.querySelector("h1"),t=document.querySelector(".nhsuk-skip-link"),e&&t&&(t.addEventListener("click",(function(t){t.preventDefault(),e.setAttribute("tabIndex","-1"),e.focus()})),e.addEventListener("blur",(function(t){t.preventDefault(),e.removeAttribute("tabIndex")}))),function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.namespace,n=void 0===t?"nhsuk-tabs":t,i=e.responsive,o=void 0===i||i,a=e.historyEnabled,r=void 0===a||a;document.querySelectorAll('[data-module="'.concat(n,'"]')).forEach((function(e){new y(e,n,o,r).init()}))}()}))})()})();

dist/nhsuk.min.js

@@ -1,1 +0,1 @@
-(()=>{var n={405:()=>{NodeList.prototype.forEach||(NodeList.prototype.forEach=Array.prototype.forEach),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{enumerable:!1,value:function(t){return 0<this.filter(function(e){return e===t}).length}}),Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(Element.prototype.matches.call(t,e))return t}while(null!==(t=t.parentElement||t.parentNode)&&1===t.nodeType);return null}),"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(e,t){t=t||{bubbles:!1,cancelable:!1,detail:null};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n})}},i={};function h(e){var t=i[e];return void 0!==t||(t=i[e]={exports:{}},n[e](t,t.exports,h)),t.exports}(()=>{"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,t,n){(t=s(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n}function s(e){e=function(e){if("object"!==n(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0===t)return String(e);t=t.call(e,"string");if("object"!==n(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}(e);return"symbol"===n(e)?e:String(e)}var f=function(){function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function");r(this,"KEY_SPACE",32),r(this,"DEBOUNCE_TIMEOUT_IN_SECONDS",1),this.$module=e,this.debounceFormSubmitTimer=null}for(var e=t,n=e.prototype,i=[{key:"handleKeyDown",value:function(e){var t=e.target;"button"===t.getAttribute("role")&&e.keyCode===this.KEY_SPACE&&(e.preventDefault(),t.click())}},{key:"debounce",value:function(e){var t=this;if("true"===e.target.getAttribute("data-prevent-double-click"))return this.debounceFormSubmitTimer?(e.preventDefault(),!1):void(this.debounceFormSubmitTimer=setTimeout(function(){t.debounceFormSubmitTimer=null},1e3*this.DEBOUNCE_TIMEOUT_IN_SECONDS))}},{key:"init",value:function(){this.$module.addEventListener("keydown",this.handleKeyDown.bind(this)),this.$module.addEventListener("click",this.debounce.bind(this))}}],a=0;a<i.length;a++){var o=i[a];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,s(o.key),o)}return Object.defineProperty(e,"prototype",{writable:!1}),t}();function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function e(e,t){for(var n,i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,(n=function(e){if("object"!==o(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0===t)return String(e);t=t.call(e,"string");if("object"!==o(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}(a.key),"symbol"===o(n)?n:String(n)),a)}}c=[{key:"getDataset",value:function(e){var t={},n=e.attributes;if(n)for(var i=0;i<n.length;i++){var a=n[i],o=a.name.match(/^data-(.+)/);o&&(t[o[1]]=a.value)}return t}}],e((i=a).prototype,[{key:"init",value:function(){var e,t,n,i;this.$textarea&&(e=this.$module,t=this.$textarea,n=document.getElementById("".concat(t.id,"-info")),t.insertAdjacentElement("afterend",n),(i=document.createElement("div")).className="nhsuk-character-count__sr-status nhsuk-u-visually-hidden",i.setAttribute("aria-live","polite"),this.$screenReaderCountMessage=i,n.insertAdjacentElement("afterend",i),(i=document.createElement("div")).className=n.className,i.classList.add("nhsuk-character-count__status"),i.setAttribute("aria-hidden","true"),this.$visibleCountMessage=i,n.insertAdjacentElement("afterend",i),n.classList.add("nhsuk-u-visually-hidden"),this.options=a.getDataset(e),i=this.defaults.characterCountAttribute,this.options.maxwords&&(i=this.defaults.wordCountAttribute),this.maxLength=e.getAttribute(i),this.maxLength)&&(t.removeAttribute("maxlength"),this.bindChangeEvents(),"onpageshow"in window?window.addEventListener("pageshow",this.updateCountMessage.bind(this)):window.addEventListener("DOMContentLoaded",this.updateCountMessage.bind(this)),this.updateCountMessage())}},{key:"count",value:function(e){return(this.options.maxwords?e.match(/\S+/g)||[]:e).length}},{key:"bindChangeEvents",value:function(){var e=this.$textarea;e.addEventListener("keyup",this.handleKeyUp.bind(this)),e.addEventListener("focus",this.handleFocus.bind(this)),e.addEventListener("blur",this.handleBlur.bind(this))}},{key:"checkIfValueChanged",value:function(){this.$textarea.oldValue||(this.$textarea.oldValue=""),this.$textarea.value!==this.$textarea.oldValue&&(this.$textarea.oldValue=this.$textarea.value,this.updateCountMessage())}},{key:"updateCountMessage",value:function(){this.updateVisibleCountMessage(),this.updateScreenReaderCountMessage()}},{key:"updateVisibleCountMessage",value:function(){var e=this.$textarea,t=this.$visibleCountMessage,n=this.maxLength-this.count(e.value);this.isOverThreshold()?t.classList.remove("nhsuk-character-count__message--disabled"):t.classList.add("nhsuk-character-count__message--disabled"),n<0?(e.classList.add("nhsuk-textarea--error"),t.classList.remove("nhsuk-hint"),t.classList.add("nhsuk-error-message")):(e.classList.remove("nhsuk-textarea--error"),t.classList.remove("nhsuk-error-message"),t.classList.add("nhsuk-hint")),t.innerHTML=this.formattedUpdateMessage()}},{key:"updateScreenReaderCountMessage",value:function(){var e=this.$screenReaderCountMessage;this.isOverThreshold()?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",!0),e.innerHTML=this.formattedUpdateMessage()}},{key:"formattedUpdateMessage",value:function(){var e=this.$textarea,t=this.options,e=this.maxLength-this.count(e.value),n="character";return t.maxwords&&(n="word"),n+=-1==e||1==e?"":"s",t=e<0?"too many":"remaining",e=Math.abs(e),"You have ".concat(e," ").concat(n," ").concat(t)}},{key:"isOverThreshold",value:function(){var e=this.$textarea,t=this.options,e=this.count(e.value);return this.maxLength*(t.threshold||0)/100<=e}},{key:"handleKeyUp",value:function(){this.updateVisibleCountMessage(),this.lastInputTimestamp=Date.now()}},{key:"handleFocus",value:function(){var e=this;this.valueChecker=setInterval(function(){(!e.lastInputTimestamp||Date.now()-500>=e.lastInputTimestamp)&&e.checkIfValueChanged()},1e3)}},{key:"handleBlur",value:function(){clearInterval(this.valueChecker)}}]),e(i,c),Object.defineProperty(i,"prototype",{writable:!1});var v=a;function a(e){if(!(this instanceof a))throw new TypeError("Cannot call a class as a function");this.$module=e,this.$textarea=e.querySelector(".nhsuk-js-character-count"),this.$visibleCountMessage=null,this.$screenReaderCountMessage=null,this.lastInputTimestamp=null}v.prototype.defaults={characterCountAttribute:"data-maxlength",wordCountAttribute:"data-maxwords"};function m(e,t){var n;e&&t&&(n="true"===e.getAttribute(t)?"false":"true",e.setAttribute(t,n))}function y(e,t){var n;e&&t&&(n=e.getAttribute("aria-controls"))&&(n=document.getElementById(n))&&(e.checked?(n.classList.remove(t),e.setAttribute("aria-expanded",!0)):(n.classList.add(t),e.setAttribute("aria-expanded",!1)))}function p(e){e.form.querySelectorAll('input[type="checkbox"]').forEach(function(e){return y(e,"nhsuk-checkboxes__conditional--hidden")})}function g(e){!function(e){if("A"===e.tagName&&!1!==e.href){var t,e=document.querySelector(e.hash);if(e)return(t=function(e){var t=e.closest("fieldset");if(t){t=t.getElementsByTagName("legend");if(t.length){t=t[0];if("checkbox"===e.type||"radio"===e.type)return t;var n=t.getBoundingClientRect().top,i=e.getBoundingClientRect();if(i.height&&window.innerHeight&&i.top+i.height-n<window.innerHeight/2)return t}}return document.querySelector("label[for='".concat(e.getAttribute("id"),"']"))||e.closest("label")}(e))&&(t.scrollIntoView(),e.focus({preventScroll:!0}),1)}}(e.target)||e.preventDefault()}function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function t(e,t){for(var n,i=0;i<t.length;i++){var a=t[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,(n=function(e){if("object"!==u(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0===t)return String(e);t=t.call(e,"string");if("object"!==u(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}(a.key),"symbol"===u(n)?n:String(n)),a)}}c=[{key:"getHref",value:function(e){e=e.getAttribute("href");return e.slice(e.indexOf("#"),e.length)}}],t((i=l).prototype,[{key:"init",value:function(){"function"==typeof window.matchMedia&&this.responsive?this.setupResponsiveChecks():this.setup()}},{key:"setupResponsiveChecks",value:function(){this.mql=window.matchMedia("(min-width: 641px)"),this.mql.addEventListener("change",this.checkMode.bind(this)),this.checkMode()}},{key:"checkMode",value:function(){this.mql.matches?this.setup():this.teardown()}},{key:"setup",value:function(){var t=this,e=this.$module,n=this.$tabs,i=e.querySelector(".".concat(this.namespace,"__list")),a=e.querySelectorAll(".".concat(this.namespace,"__list-item"));n&&i&&a&&(i.setAttribute("role","tablist"),a.forEach(function(e){e.setAttribute("role","presentation")}),n.forEach(function(e){t.setAttributes(e),e.boundTabClick=t.onTabClick.bind(t),e.boundTabKeydown=t.onTabKeydown.bind(t),e.addEventListener("click",e.boundTabClick,!0),e.addEventListener("keydown",e.boundTabKeydown,!0),t.hideTab(e)}),i=this.getTab(window.location.hash)||this.$tabs[0],this.showTab(i),this.historyEnabled)&&(e.boundOnHashChange=this.onHashChange.bind(this),window.addEventListener("hashchange",e.boundOnHashChange,!0))}},{key:"teardown",value:function(){var t=this,e=this.$module,n=this.$tabs,i=e.querySelector(".".concat(this.namespace,"__list")),a=e.querySelectorAll(".".concat(this.namespace,"__list-item"));n&&i&&a&&(i.removeAttribute("role"),a.forEach(function(e){e.removeAttribute("role","presentation")}),n.forEach(function(e){e.removeEventListener("click",e.boundTabClick,!0),e.removeEventListener("keydown",e.boundTabKeydown,!0),t.unsetAttributes(e)}),this.historyEnabled)&&window.removeEventListener("hashchange",e.boundOnHashChange,!0)}},{key:"onHashChange",value:function(){var e,t=window.location.hash,t=this.getTab(t);t&&(this.changingHash?this.changingHash=!1:(e=this.getCurrentTab(),this.hideTab(e),this.showTab(t),t.focus()))}},{key:"hideTab",value:function(e){this.unhighlightTab(e),this.hidePanel(e)}},{key:"showTab",value:function(e){this.highlightTab(e),this.showPanel(e)}},{key:"getTab",value:function(e){return this.$module.querySelector(".".concat(this.namespace,'__tab[href="').concat(e,'"]'))}},{key:"setAttributes",value:function(e){var t=l.getHref(e).slice(1),t=(e.setAttribute("id","tab_".concat(t)),e.setAttribute("role","tab"),e.setAttribute("aria-controls",t),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1"),this.getPanel(e));t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby",e.id),t.classList.add(this.jsHiddenClass)}},{key:"unsetAttributes",value:function(e){e.removeAttribute("id"),e.removeAttribute("role"),e.removeAttribute("aria-controls"),e.removeAttribute("aria-selected"),e.removeAttribute("tabindex");e=this.getPanel(e);e.removeAttribute("role"),e.removeAttribute("aria-labelledby"),e.removeAttribute("tabindex"),e.classList.remove(this.jsHiddenClass)}},{key:"onTabClick",value:function(e){e.target.classList.contains("".concat(this.namespace,"__tab"))||(e.stopPropagation(),e.preventDefault()),e.preventDefault();var e=e.target,t=this.getCurrentTab();this.hideTab(t),this.showTab(e),this.createHistoryEntry(e)}},{key:"createHistoryEntry",value:function(e){var t,n;this.historyEnabled&&(n=(t=this.getPanel(e)).id,t.id="",this.changingHash=!0,window.location.hash=l.getHref(e).slice(1),t.id=n)}},{key:"onTabKeydown",value:function(e){switch(e.keyCode){case this.keys.left:case this.keys.up:this.activatePreviousTab(),e.preventDefault();break;case this.keys.right:case this.keys.down:this.activateNextTab(),e.preventDefault()}}},{key:"activateNextTab",value:function(){var e,t=this.getCurrentTab(),n=t.parentNode.nextElementSibling;(e=n?n.querySelector(".".concat(this.namespace,"__tab")):e)&&(this.hideTab(t),this.showTab(e),e.focus(),this.createHistoryEntry(e))}},{key:"activatePreviousTab",value:function(){var e,t=this.getCurrentTab(),n=t.parentNode.previousElementSibling;(e=n?n.querySelector(".".concat(this.namespace,"__tab")):e)&&(this.hideTab(t),this.showTab(e),e.focus(),this.createHistoryEntry(e))}},{key:"getPanel",value:function(e){return this.$module.querySelector(l.getHref(e))}},{key:"showPanel",value:function(e){e=this.getPanel(e);e.classList.remove(this.jsHiddenClass),e.dispatchEvent(this.showEvent)}},{key:"hidePanel",value:function(e){e=this.getPanel(e);e.classList.add(this.jsHiddenClass),e.dispatchEvent(this.hideEvent)}},{key:"unhighlightTab",value:function(e){e.setAttribute("aria-selected","false"),e.parentNode.classList.remove("".concat(this.namespace,"__list-item--selected")),e.setAttribute("tabindex","-1")}},{key:"highlightTab",value:function(e){e.setAttribute("aria-selected","true"),e.parentNode.classList.add("".concat(this.namespace,"__list-item--selected")),e.setAttribute("tabindex","0")}},{key:"getCurrentTab",value:function(){return this.$module.querySelector(".".concat(this.namespace,"__list-item--selected .").concat(this.namespace,"__tab"))}}]),t(i,c),Object.defineProperty(i,"prototype",{writable:!1});var i,c,k=l;function l(e,t,n,i){if(!(this instanceof l))throw new TypeError("Cannot call a class as a function");this.$module=e,this.namespace=t,this.responsive=n,this.historyEnabled=i,this.$tabs=e.querySelectorAll(".".concat(this.namespace,"__tab")),this.keys={down:40,left:37,right:39,up:38},this.jsHiddenClass="".concat(this.namespace,"__panel--hidden"),this.showEvent=new CustomEvent("tab.show"),this.hideEvent=new CustomEvent("tab.hide")}h(405),document.addEventListener("DOMContentLoaded",function(){var t,n,i,a,e,o,r,s,u,c,l;function h(){e.forEach(function(e){return y(e,"nhsuk-radios__conditional--hidden")})}function d(e){e.preventDefault(),m(o,"aria-expanded"),o.classList.toggle("is-active"),s.classList.toggle("js-show"),u.classList.toggle("js-show")}function b(e){var t,n;y(e.target,"nhsuk-checkboxes__conditional--hidden"),e.target.checked&&(e.target.hasAttribute("data-checkbox-exclusive")?((t=e.target).form.querySelectorAll('input[type="checkbox"][data-checkbox-exclusive-group="'.concat(t.getAttribute("data-checkbox-exclusive-group"),'"]')).forEach(function(e){t.form===e.form&&e!==t&&(e.checked=!1)}),p(t)):((n=e.target).form.querySelectorAll('input[type="checkbox"][data-checkbox-exclusive][data-checkbox-exclusive-group="'.concat(n.getAttribute("data-checkbox-exclusive-group"),'"]')).forEach(function(e){n.form===e.form&&(e.checked=!1)}),p(n)))}document.querySelectorAll('[data-module="nhsuk-character-count"]').forEach(function(e){new v(e).init()}),document.querySelectorAll('[data-module="nhsuk-button"]').forEach(function(e){new f(e).init()}),l=document.querySelectorAll(".nhsuk-checkboxes .nhsuk-checkboxes__input"),"onpageshow"in window?window.addEventListener("pageshow",function(){return l.forEach(p)}):window.addEventListener("DOMContentLoaded",function(){return l.forEach(p)}),l.forEach(p),l.forEach(function(e){e.addEventListener("change",b)}),"boolean"!=typeof document.createElement("details").open&&(c=document.querySelectorAll("details")).length&&c.forEach(function(e,t){var n,i,a;e.hasAttribute("nhsuk-polyfilled")||(t=t,(n=e).setAttribute("nhsuk-polyfilled","true"),n.id||n.setAttribute("id","nhsuk-details".concat(t)),(i=document.querySelector("#".concat(n.id," .nhsuk-details__text"))).id||i.setAttribute("id","nhsuk-details__text".concat(t)),(a=document.querySelector("#".concat(n.id," .nhsuk-details__summary"))).setAttribute("role","button"),a.setAttribute("aria-controls",i.id),a.setAttribute("tabIndex","0"),1==(null!==n.getAttribute("open"))?(a.setAttribute("aria-expanded","true"),i.setAttribute("aria-hidden","false")):(a.setAttribute("aria-expanded","false"),i.setAttribute("aria-hidden","true"),i.style.display="none"),a.addEventListener("click",function(){m(a,"aria-expanded"),m(i,"aria-hidden"),i.style.display="true"===i.getAttribute("aria-hidden")?"none":"",n.hasAttribute("open")?n.removeAttribute("open"):n.setAttribute("open","open")}),a.addEventListener("keydown",function(e){13!==e.keyCode&&32!==e.keyCode||(e.preventDefault(),a.click())}))}),function(e){var e=(0<arguments.length&&void 0!==e?e:{}).focusOnPageLoad,e=void 0===e||e,t=document.querySelector(".nhsuk-error-summary");t&&(e&&t.focus(),t.addEventListener("click",g))}(),n=document.querySelector("#toggle-menu"),c=document.querySelector("#close-menu"),i=document.querySelector("#header-navigation"),a=function(e){e.preventDefault(),m(n,"aria-expanded"),n.classList.toggle("is-active"),i.classList.toggle("js-show")},n&&c&&i&&[n,c].forEach(function(e){e.addEventListener("click",a)}),o=document.querySelector("#toggle-search"),r=document.querySelector("#close-search"),s=document.querySelector("#wrap-search"),u=document.querySelector("#content-header"),o&&r&&[o,r].forEach(function(e){e.addEventListener("click",d)}),e=document.querySelectorAll(".nhsuk-radios--conditional .nhsuk-radios__input"),"onpageshow"in window?window.addEventListener("pageshow",h):window.addEventListener("DOMContentLoaded",h),h(),e.forEach(function(e){e.addEventListener("change",h)}),t=document.querySelector("h1"),r=document.querySelector(".nhsuk-skip-link"),t&&r&&(r.addEventListener("click",function(e){e.preventDefault(),t.setAttribute("tabIndex","-1"),t.focus()}),t.addEventListener("blur",function(e){e.preventDefault(),t.removeAttribute("tabIndex")})),function(e){var e=0<arguments.length&&void 0!==e?e:{},t=e.namespace,n=void 0===t?"nhsuk-tabs":t,t=e.responsive,i=void 0===t||t,t=e.historyEnabled,a=void 0===t||t;document.querySelectorAll('[data-module="'.concat(n,'"]')).forEach(function(e){new k(e,n,i,a).init()})}()})})()})();
+(()=>{var n={405:()=>{NodeList.prototype.forEach||(NodeList.prototype.forEach=Array.prototype.forEach),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{enumerable:!1,value:function(t){return 0<this.filter(function(e){return e===t}).length}}),Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(Element.prototype.matches.call(t,e))return t}while(null!==(t=t.parentElement||t.parentNode)&&1===t.nodeType);return null}),"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(e,t){t=t||{bubbles:!1,cancelable:!1,detail:null};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n})}},i={};function k(e){var t=i[e];return void 0!==t||(t=i[e]={exports:{}},n[e](t,t.exports,k)),t.exports}(()=>{"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function s(e,t,n){(t=r(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n}function r(e){e=function(e){if("object"!==n(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0===t)return String(e);t=t.call(e,"string");if("object"!==n(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}(e);return"symbol"===n(e)?e:String(e)}var u=function(){function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function");s(this,"KEY_SPACE",32),s(this,"DEBOUNCE_TIMEOUT_IN_SECONDS",1),this.$module=e,this.debounceFormSubmitTimer=null}for(var e=t,n=e.prototype,i=[{key:"handleKeyDown",value:function(e){var t=e.target;"button"===t.getAttribute("role")&&e.keyCode===this.KEY_SPACE&&(e.preventDefault(),t.click())}},{key:"debounce",value:function(e){var t=this;if("true"===e.target.getAttribute("data-prevent-double-click"))return this.debounceFormSubmitTimer?(e.preventDefault(),!1):void(this.debounceFormSubmitTimer=setTimeout(function(){t.debounceFormSubmitTimer=null},1e3*this.DEBOUNCE_TIMEOUT_IN_SECONDS))}},{key:"init",value:function(){this.$module.addEventListener("keydown",this.handleKeyDown.bind(this)),this.$module.addEventListener("click",this.debounce.bind(this))}}],o=0;o<i.length;o++){var a=i[o];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(n,r(a.key),a)}return Object.defineProperty(e,"prototype",{writable:!1}),t}();function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function e(e,t){for(var n,i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e){if("object"!==a(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0===t)return String(e);t=t.call(e,"string");if("object"!==a(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}(o.key),"symbol"===a(n)?n:String(n)),o)}}p=[{key:"getDataset",value:function(e){var t={},n=e.attributes;if(n)for(var i=0;i<n.length;i++){var o=n[i],a=o.name.match(/^data-(.+)/);a&&(t[a[1]]=o.value)}return t}}],e((i=o).prototype,[{key:"init",value:function(){var e,t,n,i;this.$textarea&&(e=this.$module,t=this.$textarea,n=document.getElementById("".concat(t.id,"-info")),t.insertAdjacentElement("afterend",n),(i=document.createElement("div")).className="nhsuk-character-count__sr-status nhsuk-u-visually-hidden",i.setAttribute("aria-live","polite"),this.$screenReaderCountMessage=i,n.insertAdjacentElement("afterend",i),(i=document.createElement("div")).className=n.className,i.classList.add("nhsuk-character-count__status"),i.setAttribute("aria-hidden","true"),this.$visibleCountMessage=i,n.insertAdjacentElement("afterend",i),n.classList.add("nhsuk-u-visually-hidden"),this.options=o.getDataset(e),i=this.defaults.characterCountAttribute,this.options.maxwords&&(i=this.defaults.wordCountAttribute),this.maxLength=e.getAttribute(i),this.maxLength)&&(t.removeAttribute("maxlength"),this.bindChangeEvents(),"onpageshow"in window?window.addEventListener("pageshow",this.updateCountMessage.bind(this)):window.addEventListener("DOMContentLoaded",this.updateCountMessage.bind(this)),this.updateCountMessage())}},{key:"count",value:function(e){return(this.options.maxwords?e.match(/\S+/g)||[]:e).length}},{key:"bindChangeEvents",value:function(){var e=this.$textarea;e.addEventListener("keyup",this.handleKeyUp.bind(this)),e.addEventListener("focus",this.handleFocus.bind(this)),e.addEventListener("blur",this.handleBlur.bind(this))}},{key:"checkIfValueChanged",value:function(){this.$textarea.oldValue||(this.$textarea.oldValue=""),this.$textarea.value!==this.$textarea.oldValue&&(this.$textarea.oldValue=this.$textarea.value,this.updateCountMessage())}},{key:"updateCountMessage",value:function(){this.updateVisibleCountMessage(),this.updateScreenReaderCountMessage()}},{key:"updateVisibleCountMessage",value:function(){var e=this.$textarea,t=this.$visibleCountMessage,n=this.maxLength-this.count(e.value);this.isOverThreshold()?t.classList.remove("nhsuk-character-count__message--disabled"):t.classList.add("nhsuk-character-count__message--disabled"),n<0?(e.classList.add("nhsuk-textarea--error"),t.classList.remove("nhsuk-hint"),t.classList.add("nhsuk-error-message")):(e.classList.remove("nhsuk-textarea--error"),t.classList.remove("nhsuk-error-message"),t.classList.add("nhsuk-hint")),t.innerHTML=this.formattedUpdateMessage()}},{key:"updateScreenReaderCountMessage",value:function(){var e=this.$screenReaderCountMessage;this.isOverThreshold()?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",!0),e.innerHTML=this.formattedUpdateMessage()}},{key:"formattedUpdateMessage",value:function(){var e=this.$textarea,t=this.options,e=this.maxLength-this.count(e.value),n="character";return t.maxwords&&(n="word"),n+=-1==e||1==e?"":"s",t=e<0?"too many":"remaining",e=Math.abs(e),"You have ".concat(e," ").concat(n," ").concat(t)}},{key:"isOverThreshold",value:function(){var e=this.$textarea,t=this.options,e=this.count(e.value);return this.maxLength*(t.threshold||0)/100<=e}},{key:"handleKeyUp",value:function(){this.updateVisibleCountMessage(),this.lastInputTimestamp=Date.now()}},{key:"handleFocus",value:function(){var e=this;this.valueChecker=setInterval(function(){(!e.lastInputTimestamp||Date.now()-500>=e.lastInputTimestamp)&&e.checkIfValueChanged()},1e3)}},{key:"handleBlur",value:function(){clearInterval(this.valueChecker)}}]),e(i,p),Object.defineProperty(i,"prototype",{writable:!1});var l=o;function o(e){if(!(this instanceof o))throw new TypeError("Cannot call a class as a function");this.$module=e,this.$textarea=e.querySelector(".nhsuk-js-character-count"),this.$visibleCountMessage=null,this.$screenReaderCountMessage=null,this.lastInputTimestamp=null}l.prototype.defaults={characterCountAttribute:"data-maxlength",wordCountAttribute:"data-maxwords"};function c(e,t){var n;e&&t&&(n="true"===e.getAttribute(t)?"false":"true",e.setAttribute(t,n))}function h(e,t){var n;e&&t&&(n=e.getAttribute("aria-controls"))&&(n=document.getElementById(n))&&(e.checked?(n.classList.remove(t),e.setAttribute("aria-expanded",!0)):(n.classList.add(t),e.setAttribute("aria-expanded",!1)))}function d(e){e.form.querySelectorAll('input[type="checkbox"]').forEach(function(e){return h(e,"nhsuk-checkboxes__conditional--hidden")})}function b(e){!function(e){if("A"===e.tagName&&!1!==e.href){var t,e=document.querySelector(e.hash);if(e)return(t=function(e){var t=e.closest("fieldset");if(t){t=t.getElementsByTagName("legend");if(t.length){t=t[0];if("checkbox"===e.type||"radio"===e.type)return t;var n=t.getBoundingClientRect().top,i=e.getBoundingClientRect();if(i.height&&window.innerHeight&&i.top+i.height-n<window.innerHeight/2)return t}}return document.querySelector("label[for='".concat(e.getAttribute("id"),"']"))||e.closest("label")}(e))&&(t.scrollIntoView(),e.focus({preventScroll:!0}),1)}}(e.target)||e.preventDefault()}function m(e){return(m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var f=function(){function e(){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function");this.menuIsOpen=!1,this.navigation=document.querySelector(".nhsuk-navigation"),this.navigationList=document.querySelector(".nhsuk-header__navigation-list"),this.mobileMenu=document.createElement("ul"),this.mobileMenuToggleButton=document.querySelector(".nhsuk-header__menu-toggle"),this.mobileMenuCloseButton=document.createElement("button"),this.mobileMenuContainer=document.querySelector(".nhsuk-mobile-menu-container"),this.breakpoints=[],this.width=document.body.offsetWidth}for(var t,n=e,i=[{key:"init",value:function(){var e=this;this.navigation&&this.navigationList&&this.mobileMenuToggleButton&&this.mobileMenuContainer&&(this.setupMobileMenu(),this.calculateBreakpoints(),this.updateNavigation(),this.doOnOrientationChange(),this.handleResize=this.debounce(function(){e.calculateBreakpoints(),e.updateNavigation()}),this.mobileMenuToggleButton.addEventListener("click",this.toggleMobileMenu.bind(this)),window.addEventListener("resize",this.handleResize),window.addEventListener("orientationchange",this.doOnOrientationChange()))}},{key:"debounce",value:function(i){var o,a=this,s=1<arguments.length&&void 0!==arguments[1]?arguments[1]:100;return function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];clearTimeout(o),o=setTimeout(function(){i.apply(a,t)},s)}}},{key:"calculateBreakpoints",value:function(){for(var e=0,t=0;t<this.navigationList.children.length;t++)e+=this.navigationList.children[t].offsetWidth,this.breakpoints[t]=e}},{key:"setupMobileMenu",value:function(){this.mobileMenuContainer.appendChild(this.mobileMenu),this.mobileMenu.classList.add("nhsuk-header__drop-down","nhsuk-header__drop-down--hidden")}},{key:"closeMobileMenu",value:function(){this.menuIsOpen=!1,this.mobileMenu.classList.add("nhsuk-header__drop-down--hidden"),this.navigation.style.marginBottom=0,this.mobileMenuToggleButton.setAttribute("aria-expanded","false"),this.mobileMenuToggleButton.focus(),this.mobileMenuCloseButton.removeEventListener("click",this.closeMobileMenu.bind(this)),document.removeEventListener("keydown",this.handleEscapeKey.bind(this))}},{key:"handleEscapeKey",value:function(e){"Escape"===e.key&&this.closeMobileMenu()}},{key:"openMobileMenu",value:function(){var e=this.mobileMenu.offsetHeight;this.menuIsOpen=!0,this.mobileMenu.classList.remove("nhsuk-header__drop-down--hidden"),this.navigation.style.marginBottom="".concat(e,"px"),this.mobileMenuToggleButton.setAttribute("aria-expanded","true"),document.addEventListener("keydown",this.handleEscapeKey.bind(this)),this.mobileMenuCloseButton.addEventListener("click",this.closeMobileMenu.bind(this))}},{key:"toggleMobileMenu",value:function(){this.menuIsOpen?this.closeMobileMenu():this.openMobileMenu()}},{key:"updateNavigation",value:function(){var e=this.navigation.offsetWidth,t=this.navigationList.children.length;if(e<this.breakpoints[t-1]){if(this.mobileMenuToggleButton.classList.add("nhsuk-header__menu-toggle--visible"),this.mobileMenuContainer.classList.add("nhsuk-mobile-menu-container--visible"),2===t)return;for(;e<this.breakpoints[t-1];)this.mobileMenu.insertBefore(this.navigationList.children[t-2],this.mobileMenu.firstChild),--t}else if(e>this.breakpoints[t])for(;e>this.breakpoints[t];)this.navigationList.insertBefore(this.mobileMenu.removeChild(this.mobileMenu.firstChild),this.mobileMenuContainer),t+=1;this.mobileMenu.children.length||(this.mobileMenuToggleButton.classList.remove("nhsuk-header__menu-toggle--visible"),this.mobileMenuContainer.classList.remove("nhsuk-mobile-menu-container--visible")),document.body.offsetWidth!==this.width&&this.menuIsOpen&&this.closeMobileMenu()}},{key:"doOnOrientationChange",value:function(){var e=this;90===window.orientation&&setTimeout(function(){e.calculateBreakpoints(),e.updateNavigation()},200)}}],o=n.prototype,a=i,s=0;s<a.length;s++){var r=a[s];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(o,(t=function(e){if("object"!==m(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0===t)return String(e);t=t.call(e,"string");if("object"!==m(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}(r.key),"symbol"===m(t)?t:String(t)),r)}return Object.defineProperty(n,"prototype",{writable:!1}),e}();function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function t(e,t){for(var n,i=0;i<t.length;i++){var o=t[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e){if("object"!==v(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0===t)return String(e);t=t.call(e,"string");if("object"!==v(t))return t;throw new TypeError("@@toPrimitive must return a primitive value.")}(o.key),"symbol"===v(n)?n:String(n)),o)}}p=[{key:"getHref",value:function(e){e=e.getAttribute("href");return e.slice(e.indexOf("#"),e.length)}}],t((i=g).prototype,[{key:"init",value:function(){"function"==typeof window.matchMedia&&this.responsive?this.setupResponsiveChecks():this.setup()}},{key:"setupResponsiveChecks",value:function(){this.mql=window.matchMedia("(min-width: 641px)"),this.mql.addEventListener("change",this.checkMode.bind(this)),this.checkMode()}},{key:"checkMode",value:function(){this.mql.matches?this.setup():this.teardown()}},{key:"setup",value:function(){var t=this,e=this.$module,n=this.$tabs,i=e.querySelector(".".concat(this.namespace,"__list")),o=e.querySelectorAll(".".concat(this.namespace,"__list-item"));n&&i&&o&&(i.setAttribute("role","tablist"),o.forEach(function(e){e.setAttribute("role","presentation")}),n.forEach(function(e){t.setAttributes(e),e.boundTabClick=t.onTabClick.bind(t),e.boundTabKeydown=t.onTabKeydown.bind(t),e.addEventListener("click",e.boundTabClick,!0),e.addEventListener("keydown",e.boundTabKeydown,!0),t.hideTab(e)}),i=this.getTab(window.location.hash)||this.$tabs[0],this.showTab(i),this.historyEnabled)&&(e.boundOnHashChange=this.onHashChange.bind(this),window.addEventListener("hashchange",e.boundOnHashChange,!0))}},{key:"teardown",value:function(){var t=this,e=this.$module,n=this.$tabs,i=e.querySelector(".".concat(this.namespace,"__list")),o=e.querySelectorAll(".".concat(this.namespace,"__list-item"));n&&i&&o&&(i.removeAttribute("role"),o.forEach(function(e){e.removeAttribute("role","presentation")}),n.forEach(function(e){e.removeEventListener("click",e.boundTabClick,!0),e.removeEventListener("keydown",e.boundTabKeydown,!0),t.unsetAttributes(e)}),this.historyEnabled)&&window.removeEventListener("hashchange",e.boundOnHashChange,!0)}},{key:"onHashChange",value:function(){var e,t=window.location.hash,t=this.getTab(t);t&&(this.changingHash?this.changingHash=!1:(e=this.getCurrentTab(),this.hideTab(e),this.showTab(t),t.focus()))}},{key:"hideTab",value:function(e){this.unhighlightTab(e),this.hidePanel(e)}},{key:"showTab",value:function(e){this.highlightTab(e),this.showPanel(e)}},{key:"getTab",value:function(e){return this.$module.querySelector(".".concat(this.namespace,'__tab[href="').concat(e,'"]'))}},{key:"setAttributes",value:function(e){var t=g.getHref(e).slice(1),t=(e.setAttribute("id","tab_".concat(t)),e.setAttribute("role","tab"),e.setAttribute("aria-controls",t),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1"),this.getPanel(e));t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby",e.id),t.classList.add(this.jsHiddenClass)}},{key:"unsetAttributes",value:function(e){e.removeAttribute("id"),e.removeAttribute("role"),e.removeAttribute("aria-controls"),e.removeAttribute("aria-selected"),e.removeAttribute("tabindex");e=this.getPanel(e);e.removeAttribute("role"),e.removeAttribute("aria-labelledby"),e.removeAttribute("tabindex"),e.classList.remove(this.jsHiddenClass)}},{key:"onTabClick",value:function(e){e.target.classList.contains("".concat(this.namespace,"__tab"))||(e.stopPropagation(),e.preventDefault()),e.preventDefault();var e=e.target,t=this.getCurrentTab();this.hideTab(t),this.showTab(e),this.createHistoryEntry(e)}},{key:"createHistoryEntry",value:function(e){var t,n;this.historyEnabled&&(n=(t=this.getPanel(e)).id,t.id="",this.changingHash=!0,window.location.hash=g.getHref(e).slice(1),t.id=n)}},{key:"onTabKeydown",value:function(e){switch(e.keyCode){case this.keys.left:case this.keys.up:this.activatePreviousTab(),e.preventDefault();break;case this.keys.right:case this.keys.down:this.activateNextTab(),e.preventDefault()}}},{key:"activateNextTab",value:function(){var e,t=this.getCurrentTab(),n=t.parentNode.nextElementSibling;(e=n?n.querySelector(".".concat(this.namespace,"__tab")):e)&&(this.hideTab(t),this.showTab(e),e.focus(),this.createHistoryEntry(e))}},{key:"activatePreviousTab",value:function(){var e,t=this.getCurrentTab(),n=t.parentNode.previousElementSibling;(e=n?n.querySelector(".".concat(this.namespace,"__tab")):e)&&(this.hideTab(t),this.showTab(e),e.focus(),this.createHistoryEntry(e))}},{key:"getPanel",value:function(e){return this.$module.querySelector(g.getHref(e))}},{key:"showPanel",value:function(e){e=this.getPanel(e);e.classList.remove(this.jsHiddenClass),e.dispatchEvent(this.showEvent)}},{key:"hidePanel",value:function(e){e=this.getPanel(e);e.classList.add(this.jsHiddenClass),e.dispatchEvent(this.hideEvent)}},{key:"unhighlightTab",value:function(e){e.setAttribute("aria-selected","false"),e.parentNode.classList.remove("".concat(this.namespace,"__list-item--selected")),e.setAttribute("tabindex","-1")}},{key:"highlightTab",value:function(e){e.setAttribute("aria-selected","true"),e.parentNode.classList.add("".concat(this.namespace,"__list-item--selected")),e.setAttribute("tabindex","0")}},{key:"getCurrentTab",value:function(){return this.$module.querySelector(".".concat(this.namespace,"__list-item--selected .").concat(this.namespace,"__tab"))}}]),t(i,p),Object.defineProperty(i,"prototype",{writable:!1});var i,p,y=g;function g(e,t,n,i){if(!(this instanceof g))throw new TypeError("Cannot call a class as a function");this.$module=e,this.namespace=t,this.responsive=n,this.historyEnabled=i,this.$tabs=e.querySelectorAll(".".concat(this.namespace,"__tab")),this.keys={down:40,left:37,right:39,up:38},this.jsHiddenClass="".concat(this.namespace,"__panel--hidden"),this.showEvent=new CustomEvent("tab.show"),this.hideEvent=new CustomEvent("tab.hide")}k(405),document.addEventListener("DOMContentLoaded",function(){var t,e,n,i;function o(){e.forEach(function(e){return h(e,"nhsuk-radios__conditional--hidden")})}function a(e){var t,n;h(e.target,"nhsuk-checkboxes__conditional--hidden"),e.target.checked&&(e.target.hasAttribute("data-checkbox-exclusive")?((t=e.target).form.querySelectorAll('input[type="checkbox"][data-checkbox-exclusive-group="'.concat(t.getAttribute("data-checkbox-exclusive-group"),'"]')).forEach(function(e){t.form===e.form&&e!==t&&(e.checked=!1)}),d(t)):((n=e.target).form.querySelectorAll('input[type="checkbox"][data-checkbox-exclusive][data-checkbox-exclusive-group="'.concat(n.getAttribute("data-checkbox-exclusive-group"),'"]')).forEach(function(e){n.form===e.form&&(e.checked=!1)}),d(n)))}document.querySelectorAll('[data-module="nhsuk-character-count"]').forEach(function(e){new l(e).init()}),document.querySelectorAll('[data-module="nhsuk-button"]').forEach(function(e){new u(e).init()}),i=document.querySelectorAll(".nhsuk-checkboxes .nhsuk-checkboxes__input"),"onpageshow"in window?window.addEventListener("pageshow",function(){return i.forEach(d)}):window.addEventListener("DOMContentLoaded",function(){return i.forEach(d)}),i.forEach(d),i.forEach(function(e){e.addEventListener("change",a)}),"boolean"!=typeof document.createElement("details").open&&(n=document.querySelectorAll("details")).length&&n.forEach(function(e,t){var n,i,o;e.hasAttribute("nhsuk-polyfilled")||(t=t,(n=e).setAttribute("nhsuk-polyfilled","true"),n.id||n.setAttribute("id","nhsuk-details".concat(t)),(i=document.querySelector("#".concat(n.id," .nhsuk-details__text"))).id||i.setAttribute("id","nhsuk-details__text".concat(t)),(o=document.querySelector("#".concat(n.id," .nhsuk-details__summary"))).setAttribute("role","button"),o.setAttribute("aria-controls",i.id),o.setAttribute("tabIndex","0"),1==(null!==n.getAttribute("open"))?(o.setAttribute("aria-expanded","true"),i.setAttribute("aria-hidden","false")):(o.setAttribute("aria-expanded","false"),i.setAttribute("aria-hidden","true"),i.style.display="none"),o.addEventListener("click",function(){c(o,"aria-expanded"),c(i,"aria-hidden"),i.style.display="true"===i.getAttribute("aria-hidden")?"none":"",n.hasAttribute("open")?n.removeAttribute("open"):n.setAttribute("open","open")}),o.addEventListener("keydown",function(e){13!==e.keyCode&&32!==e.keyCode||(e.preventDefault(),o.click())}))}),function(e){var e=(0<arguments.length&&void 0!==e?e:{}).focusOnPageLoad,e=void 0===e||e,t=document.querySelector(".nhsuk-error-summary");t&&(e&&t.focus(),t.addEventListener("click",b))}(),(new f).init(),e=document.querySelectorAll(".nhsuk-radios--conditional .nhsuk-radios__input"),"onpageshow"in window?window.addEventListener("pageshow",o):window.addEventListener("DOMContentLoaded",o),o(),e.forEach(function(e){e.addEventListener("change",o)}),t=document.querySelector("h1"),n=document.querySelector(".nhsuk-skip-link"),t&&n&&(n.addEventListener("click",function(e){e.preventDefault(),t.setAttribute("tabIndex","-1"),t.focus()}),t.addEventListener("blur",function(e){e.preventDefault(),t.removeAttribute("tabIndex")})),function(e){var e=0<arguments.length&&void 0!==e?e:{},t=e.namespace,n=void 0===t?"nhsuk-tabs":t,t=e.responsive,i=void 0===t||t,t=e.historyEnabled,o=void 0===t||t;document.querySelectorAll('[data-module="'.concat(n,'"]')).forEach(function(e){new y(e,n,i,o).init()})}()})})()})();

package.json

 {
   "name": "nhsuk-frontend",
-  "version": "7.1.0",
+  "version": "8.0.0",
   "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
@@ -58,2 +58,3 @@ "scripts": {
     "prettier": "^2.7.1",
+    "puppeteer": "^18.1.0",
     "sass": "^1.53.0",
@@ -60,0 +61,0 @@ "start-server-and-test": "^1.14.0",

packages/components/footer/README.md

@@ -9,5 +9,5 @@ # Footer
 
-### Footer
+### Footer (default)
 
-[Preview the footer component](https://nhsuk.github.io/nhsuk-frontend/components/footer/index.html)
+[Preview the footer (default) component](https://nhsuk.github.io/nhsuk-frontend/components/footer/index.html)
 
@@ -18,13 +18,27 @@ #### HTML markup
 <footer role="contentinfo">
-  <div class="nhsuk-footer" id="nhsuk-footer">
+  <div class="nhsuk-footer-container">
     <div class="nhsuk-width-container">
       <h2 class="nhsuk-u-visually-hidden">Support links</h2>
-      <ul class="nhsuk-footer__list">
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a></li>
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Contact us</a></li>
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Cookies</a></li>
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a></li>
-        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a></li>
-      </ul>
-      <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
+      <div class="nhsuk-footer">
+        <ul class="nhsuk-footer__list">
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
+          </li>
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
+          </li>
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
+          </li>
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
+          </li>
+          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
+            <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
+          </li>
+        </ul>
+        <div>
+          <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
+        </div>
+      </div>
     </div>
@@ -66,2 +80,189 @@ </div>
 
+### Footer (columns)
+
+[Preview the Footer (columns) component](https://nhsuk.github.io/nhsuk-frontend/components/footer/footer-in-columns.html)
+
+#### HTML markup
+
+```html
+<footer role="contentinfo">
+  <div class="nhsuk-footer-container">
+    <div class="nhsuk-width-container">
+      <h2 class="nhsuk-u-visually-hidden">Support links</h2>
+      <div class="nhsuk-footer">
+        <ul class="nhsuk-footer__list">
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/">Home</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/conditions/">Health A to Z</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/live-well/">Live Well</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/mental-health/">Mental health</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/conditions/social-care-and-support-guide/">Care and support</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/pregnancy/">Pregnancy</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/nhs-services/">NHS services</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/conditions/coronavirus-covid-19/">Coronavirus (COVID-19)</a>
+          </li>
+        </ul>
+        <ul class="nhsuk-footer__list">
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/nhs-app/">NHS App</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/nhs-services/online-services/find-nhs-number/">Find my NHS number</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/using-the-nhs/about-the-nhs/your-health-records/">Your health records</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/using-the-nhs/about-the-nhs/">About the NHS</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/using-the-nhs/healthcare-abroad/apply-for-a-free-uk-global-health-insurance-card-ghic/">Healthcare abroad</a>
+          </li>
+        </ul>
+        <ul class="nhsuk-footer__list">
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/contact-us/">Contact us</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/nhs-sites/">Other NHS websites</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/our-policies/profile-editor-login/">Profile editor login</a>
+          </li>
+        </ul>
+        <ul class="nhsuk-footer__list nhsuk-footer__meta">
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/about-us/">About us</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/accessibility-statement/">Accessibility statement</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/our-policies/">Our policies</a>
+          </li>
+          <li class="nhsuk-footer__list-item">
+            <a class="nhsuk-footer__list-item-link" href="/our-policies/cookies-policy/">Cookies</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>
+```
+
+#### Nunjucks macro
+
+```
+{% from 'components/footer/macro.njk' import footer %}
+
+{{ footer({
+  "links": [
+    {
+      "URL": "#",
+      "label": "Home"
+    },
+    {
+      "URL": "#",
+      "label": "Health A to Z"
+    },
+    {
+      "URL": "#",
+      "label": "Live Well"
+    },
+    {
+      "URL": "#",
+      "label": "Mental health"
+    },
+    {
+      "URL": "#",
+      "label": "Care and support"
+    },
+    {
+      "URL": "#",
+      "label": "Accessibility statement"
+    },
+    {
+      "URL": "#",
+      "label": "Pregnancy"
+    },
+    {
+      "URL": "#",
+      "label": "NHS services"
+    },
+    {
+      "URL": "#",
+      "label": "Coronavirus (COVID-19)"
+    }
+  ],
+  "linksColumn2": [
+    {
+      "URL": "#",
+      "label": "NHS App"
+    },
+    {
+      "URL": "#",
+      "label": "Find my NHS number"
+    },
+    {
+      "URL": "#",
+      "label": "Your health records"
+    },
+    {
+      "URL": "#",
+      "label": "About the NHS"
+    },
+    {
+      "URL": "#",
+      "label": "Healthcare abroad"
+    }
+  ],
+  "linksColumn3": [
+    {
+      "URL": "#",
+      "label": "Contact us"
+    },
+    {
+      "URL": "#",
+      "label": "Other NHS websites"
+    },
+    {
+      "URL": "#",
+      "label": "Profile editor login"
+    }
+  ],
+  "metaLinks": [
+    {
+      "URL": "#",
+      "label": "About us"
+    },
+    {
+      "URL": "#",
+      "label": "Accessibility statement"
+    },
+    {
+      "URL": "#",
+      "label": "Our policies"
+    },
+    {
+      "URL": "#",
+      "label": "Cookies"
+    }
+  ]
+})}}
+```
+
 ### Nunjucks arguments
@@ -71,11 +272,20 @@
 
-| Name               | Type   | Required | Description                                                                                   |
-| ------------------ | ------ | -------- | --------------------------------------------------------------------------------------------- |
-| **links**          | array  | No       | Array of primary navigation items for use in the footer.                                      |
-| **links.[].url**   | string | No       | The href of a primary navigation item in the footer.                                          |
-| **links.[].label** | string | No       | The label of a primary navigation item in the footer.                                         |
-| **classes**        | string | No       | Optional additional classes to add to the footer container. Separate each class with a space. |
-| **attributes**     | object | No       | Any extra HTML attributes (for example data attributes) to add to the footer container.       |
-| **copyright**      | string | No       | The label for the copyright notice in the footer.                                             |
+| Name                      | Type   | Required | Description                                                                                   |
+| ------------------------- | ------ | -------- | --------------------------------------------------------------------------------------------- |
+| **links**                 | array  | No       | Array of first column of navigation items for use in the footer.                              |
+| **links.[].url**          | string | No       | The href of a navigation item in the first column of the footer.                              |
+| **links.[].label**        | string | No       | The label of a navigation item in the first column of the footer.                             |
+| **linksColumn2**          | array  | No       | Array of second column of navigation items for use in the footer.                             |
+| **linksColumn2.[].url**   | string | No       | The href of a navigation item in the second column of the footer.                             |
+| **linksColumn2.[].label** | string | No       | The label of a navigation item in the second column of the footer.                            |
+| **linksColumn3**          | array  | No       | Array of third column of navigation items for use in the footer.                              |
+| **linksColumn3.[].url**   | string | No       | The href of a navigation item in the third column of the footer.                              |
+| **linksColumn3.[].label** | string | No       | The label of a navigation item in the third column of the footer.                             |
+| **classes**               | string | No       | Optional additional classes to add to the footer container. Separate each class with a space. |
+| **attributes**            | object | No       | Any extra HTML attributes (for example data attributes) to add to the footer container.       |
+| **copyright**             | string | No       | The label for the copyright notice in the footer.                                             |
+| **metaLinks**             | array  | No       | Array of policy navigation items for use in the footer.                                       |
+| **metaLinks.[].url**      | string | No       | The href of a policy navigation item in the footer.                                           |
+| **metaLinks.[].label**    | string | No       | The label of a policy navigation item in the footer.                                          |
 
 If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).

packages/components/header/header.js

@@ -1,7 +0,208 @@
-import MenuToggle from './menuToggle'
-import SearchToggle from './searchToggle'
+/**
+ * Header component
+ *
+ */
 
+class Header {
+  constructor() {
+    this.menuIsOpen = false
+    this.navigation = document.querySelector('.nhsuk-navigation')
+    this.navigationList = document.querySelector('.nhsuk-header__navigation-list')
+    this.mobileMenu = document.createElement('ul')
+    this.mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle')
+    this.mobileMenuCloseButton = document.createElement('button')
+    this.mobileMenuContainer = document.querySelector('.nhsuk-mobile-menu-container')
+    this.breakpoints = []
+    this.width = document.body.offsetWidth
+  }
+
+  init() {
+    if (!this.navigation || !this.navigationList || !this.mobileMenuToggleButton || !this.mobileMenuContainer) {
+      return
+    }
+
+    this.setupMobileMenu()
+    this.calculateBreakpoints()
+    this.updateNavigation()
+    this.doOnOrientationChange()
+
+    this.handleResize = this.debounce(() => {
+      this.calculateBreakpoints()
+      this.updateNavigation()
+    })
+
+    this.mobileMenuToggleButton.addEventListener('click', this.toggleMobileMenu.bind(this))
+    window.addEventListener('resize', this.handleResize)
+    window.addEventListener('orientationchange', this.doOnOrientationChange())
+  }
+
+  debounce(func, timeout = 100) {
+    let timer
+    return (...args) => {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        func.apply(this, args)
+      }, timeout)
+    }
+  }
+
+  /**
+   * Calculate breakpoints.
+   *
+   * Calculate the breakpoints by summing the widths of
+   * each navigation item.
+   *
+   */
+  calculateBreakpoints() {
+    let childrenWidth = 0
+    for (let i = 0; i < this.navigationList.children.length; i++) {
+      childrenWidth += this.navigationList.children[i].offsetWidth
+      this.breakpoints[i] = childrenWidth
+    }
+  }
+
+  // Add the mobile menu to the DOM
+  setupMobileMenu() {
+    this.mobileMenuContainer.appendChild(this.mobileMenu)
+    this.mobileMenu.classList.add('nhsuk-header__drop-down', 'nhsuk-header__drop-down--hidden')
+  }
+
+  /**
+   * Close the mobile menu
+   *
+   * Closes the mobile menu and updates accessibility state.
+   *
+   * Remvoes the margin-bottom from the navigation
+   */
+  closeMobileMenu() {
+    this.menuIsOpen = false
+    this.mobileMenu.classList.add('nhsuk-header__drop-down--hidden')
+    this.navigation.style.marginBottom = 0
+    this.mobileMenuToggleButton.setAttribute('aria-expanded', 'false')
+    this.mobileMenuToggleButton.focus()
+    this.mobileMenuCloseButton.removeEventListener('click', this.closeMobileMenu.bind(this))
+    document.removeEventListener('keydown', this.handleEscapeKey.bind(this))
+  }
+
+  /**
+   * Escape key handler
+   *
+   * This function is called when the user
+   * presses the escape key to close the mobile menu.
+   *
+   */
+  handleEscapeKey(e) {
+    if (e.key === 'Escape') {
+      this.closeMobileMenu()
+    }
+  }
+
+  /**
+   * Open the mobile menu
+   *
+   * Opens the mobile menu and updates accessibility state.
+   *
+   * The mobile menu is absolutely positioned, so it adds a margin
+   * to the bottom of the navigation to prevent it from overlapping
+   *
+   * Adds event listeners for the close button,
+   */
+
+  openMobileMenu() {
+    const marginBody = this.mobileMenu.offsetHeight
+    this.menuIsOpen = true
+    this.mobileMenu.classList.remove('nhsuk-header__drop-down--hidden')
+    this.navigation.style.marginBottom = `${marginBody}px`
+    this.mobileMenuToggleButton.setAttribute('aria-expanded', 'true')
+
+    // add event listerer for esc key to close menu
+    document.addEventListener('keydown', this.handleEscapeKey.bind(this))
+
+    // add event listener for close icon to close menu
+    this.mobileMenuCloseButton.addEventListener('click', this.closeMobileMenu.bind(this))
+  }
+
+  /**
+   * Handle menu button click
+   *
+   * Toggles the mobile menu between open and closed
+   */
+  toggleMobileMenu() {
+    if (this.menuIsOpen) {
+      this.closeMobileMenu()
+    } else {
+      this.openMobileMenu()
+    }
+  }
+
+  /**
+   * Update nav for the available space
+   *
+   * If the available space is less than the current breakpoint,
+   * add the mobile menu toggle button and move the last
+   * item in the list to the drop-down list.
+   *
+   * If the available space is greater than the current breakpoint,
+   * remove the mobile menu toggle button and move the first item in the
+   *
+   * Additionaly will close the mobile menu if the window gets resized
+   * and the menu is open.
+   */
+
+  updateNavigation() {
+    const availableSpace = this.navigation.offsetWidth
+    let itemsVisible = this.navigationList.children.length
+
+    if (availableSpace < this.breakpoints[itemsVisible - 1]) {
+      this.mobileMenuToggleButton.classList.add('nhsuk-header__menu-toggle--visible')
+      this.mobileMenuContainer.classList.add('nhsuk-mobile-menu-container--visible')
+      if (itemsVisible === 2) {
+        return
+      }
+      while (availableSpace < this.breakpoints[itemsVisible - 1]) {
+        this.mobileMenu.insertBefore(this.navigationList.children[itemsVisible - 2], this.mobileMenu.firstChild)
+        itemsVisible -= 1
+      }
+    } else if (availableSpace > this.breakpoints[itemsVisible]) {
+      while (availableSpace > this.breakpoints[itemsVisible]) {
+        this.navigationList.insertBefore(
+          this.mobileMenu.removeChild(this.mobileMenu.firstChild),
+          this.mobileMenuContainer
+        )
+        itemsVisible += 1
+      }
+    }
+
+    if (!this.mobileMenu.children.length) {
+      this.mobileMenuToggleButton.classList.remove('nhsuk-header__menu-toggle--visible')
+      this.mobileMenuContainer.classList.remove('nhsuk-mobile-menu-container--visible')
+    }
+
+    if (document.body.offsetWidth !== this.width && this.menuIsOpen) {
+      this.closeMobileMenu()
+    }
+  }
+
+  /**
+   * Orientation change
+   *
+   * Check the orientation of the device, if changed it will trigger a
+   * update to the breakpoints and navigation.
+   */
+  doOnOrientationChange() {
+    switch (window.orientation) {
+      case 90:
+        setTimeout(() => {
+          this.calculateBreakpoints()
+          this.updateNavigation()
+        }, 200)
+        break
+      default:
+        break
+    }
+  }
+}
+
 export default () => {
-  MenuToggle()
-  SearchToggle()
+  new Header().init()
 }

packages/components/header/README.md

@@ -14,5 +14,5 @@ # Header
 
-### Header
+### Header (default)
 
-[Preview the header component](https://nhsuk.github.io/nhsuk-frontend/components/header/index.html)
+[Preview the header (default) component](https://nhsuk.github.io/nhsuk-frontend/components/header/index.html)
 
@@ -26,35 +26,15 @@ #### HTML markup
       <a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path><path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path></svg>
       </a>
     </div>
     <div class="nhsuk-header__content" id="content-header">
-      <div class="nhsuk-header__menu">
-        <button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
-      </div>
       <div class="nhsuk-header__search">
-        <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
-          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Search</span>
-        </button>
         <div class="nhsuk-header__search-wrap" id="wrap-search">
           <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
             <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
-            <input class="nhsuk-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
+            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
             <button class="nhsuk-search__submit" type="submit">
-              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-              </svg>
+              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
               <span class="nhsuk-u-visually-hidden">Search</span>
             </button>
-            <button class="nhsuk-search__close" id="close-search">
-              <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-              </svg>
-              <span class="nhsuk-u-visually-hidden">Close search</span>
-            </button>
           </form>
@@ -65,65 +45,61 @@ </div>
   </div>
-  <nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
+  <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <p class="nhsuk-header__navigation-title">
-        <span id="label-navigation">Menu</span>
-        <button class="nhsuk-header__navigation-close" id="close-menu">
-          <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Close menu</span>
-        </button>
-      </p>
-      <ul class="nhsuk-header__navigation-list">
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
-          <a class="nhsuk-header__navigation-link" href="/">
-            Home
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions">
-            Health A-Z
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/live-well/">
-            Live Well
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions/social-care-and-support/">
-            Care and support
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/news/">
-            Health news
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/service-search">
-            Services near you
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-      </ul>
+      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+        <ul class="nhsuk-header__navigation-list">
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions">
+              Health A-Z
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-mobile-menu-container js-show">
+            <button class="nhsuk-header__navigation-link nhsuk-header__menu-toggle nhsuk-header__menu-toggle--visible" aria-expanded="false">
+              <span class="nhsuk-u-visually-hidden">Browse</span>
+              More
+              <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </button>
+            <ul class="nhsuk-header__drop-down nhsuk-header__drop-down--hidden">
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/nhs-services/">
+                  NHS services
+                  <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/live-well/">
+                  Live Well
+                  <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/mental-health/">
+                  Mental health
+                  <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions/social-care-and-support/">
+                  Care and support
+                  <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item">
+                <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/pregnancy/">
+                  Pregnancy
+                  <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+                </a>
+              </li>
+              <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
+                <a class="nhsuk-header__navigation-link" href="/">
+                  Home
+                  <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
     </div>
-  </nav>
+  </div>
 </header>
@@ -150,2 +126,6 @@ ```
       {
+        'url' : 'https://www.nhs.uk/mental-health/',
+        'label' : 'Mental health'
+      },
+      {
         'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
@@ -155,8 +135,8 @@ 'label' : 'Care and support'
       {
-        'url'  : 'https://www.nhs.uk/news/',
-        'label' : 'Health news'
+        'url'  : 'https://www.nhs.uk/pregnancy/',
+        'label' : 'Pregnancy'
       },
       {
-        'url' : 'https://www.nhs.uk/service-search',
-        'label' : 'Services near you'
+        'url' : 'https://www.nhs.uk/nhs-services/',
+        'label' : 'NHS services'
       }
@@ -179,77 +159,63 @@ ]
       <a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path><path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path></svg>
       </a>
     </div>
-    <div class="nhsuk-header__content" id="content-header">
-      <div class="nhsuk-header__menu nhsuk-header__menu--only">
-        <button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
-      </div>
-    </div>
   </div>
-  <nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
+  <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <p class="nhsuk-header__navigation-title">
-        <span id="label-navigation">Menu</span>
-        <button class="nhsuk-header__navigation-close" id="close-menu">
-          <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Close menu</span>
-        </button>
-      </p>
-      <ul class="nhsuk-header__navigation-list">
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
-          <a class="nhsuk-header__navigation-link" href="/">
-            Home
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions">
-            Health A-Z
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/live-well/">
-            Live Well
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions/social-care-and-support/">
-            Care and support
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/news/">
-            Health news
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/service-search">
-            Services near you
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-      </ul>
+      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+        <ul class="nhsuk-header__navigation-list">
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="https://www.nhs.uk/conditions">
+              Health A-Z
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="https://www.nhs.uk/nhs-services/">
+              NHS services
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="https://www.nhs.uk/live-well/">
+              Live Well
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="https://www.nhs.uk/mental-health/">
+              Mental health
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="https://www.nhs.uk/conditions/social-care-and-support/">
+              Care and support
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="https://www.nhs.uk/pregnancy/">
+              Pregnancy
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
+            <a class="nhsuk-header__navigation-link"  href="/">
+              Home
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-mobile-menu-container">
+            <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" aria-expanded="false">
+              <span class="nhsuk-u-visually-hidden">Browse</span>
+              More
+              <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </button>
+          </li>
+        </ul>
+      </nav>
     </div>
-  </nav>
+  </div>
 </header>
@@ -264,27 +230,31 @@ ```
 {{ header({
-    "showNav": "true",
-    "showSearch": "false",
-    "primaryLinks": [
-      {
-        "url"  : "https://www.nhs.uk/conditions",
-        "label" : "Health A-Z"
-      },
-      {
-        'url' : 'https://www.nhs.uk/live-well/',
-        'label' : 'Live Well'
-      },
-      {
-        'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
-        'label' : 'Care and support'
-      },
-      {
-        'url'  : 'https://www.nhs.uk/news/',
-        'label' : 'Health news'
-      },
-      {
-        'url' : 'https://www.nhs.uk/service-search',
-        'label' : 'Services near you'
-      }
-    ]
-  })
+      "showNav": "true",
+      "showSearch": "false",
+      "primaryLinks": [
+        {
+          "url"  : "https://www.nhs.uk/conditions",
+          "label" : "Health A-Z"
+        },
+        {
+          'url' : 'https://www.nhs.uk/live-well/',
+          'label' : 'Live Well'
+        },
+        {
+          'url' : 'https://www.nhs.uk/mental-health/',
+          'label' : 'Mental health'
+        },
+        {
+          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
+          'label' : 'Care and support'
+        },
+        {
+          'url'  : 'https://www.nhs.uk/pregnancy/',
+          'label' : 'Pregnancy'
+        },
+        {
+          'url' : 'https://www.nhs.uk/nhs-services/',
+          'label' : 'NHS services'
+        }
+      ]
+    })
 }}
@@ -304,6 +274,3 @@ ```
       <a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path><path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path></svg>
       </a>
@@ -313,24 +280,10 @@ </div>
       <div class="nhsuk-header__search">
-        <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
-          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Search</span>
-        </button>
         <div class="nhsuk-header__search-wrap" id="wrap-search">
           <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
             <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
-            <input class="nhsuk-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
+            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
             <button class="nhsuk-search__submit" type="submit">
-              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-              </svg>
+              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
               <span class="nhsuk-u-visually-hidden">Search</span>
             </button>
-            <button class="nhsuk-search__close" id="close-search">
-              <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-              </svg>
-              <span class="nhsuk-u-visually-hidden">Close search</span>
-            </button>
           </form>
@@ -351,3 +304,29 @@ </div>
     "showNav": "false",
-    "showSearch": "true"
+    "showSearch": "true",
+    "primaryLinks": [
+        {
+          "url"  : "https://www.nhs.uk/conditions",
+          "label" : "Health A-Z"
+        },
+        {
+          'url' : 'https://www.nhs.uk/live-well/',
+          'label' : 'Live Well'
+        },
+        {
+          'url' : 'https://www.nhs.uk/mental-health/',
+          'label' : 'Mental health'
+        },
+        {
+          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
+          'label' : 'Care and support'
+        },
+        {
+          'url'  : 'https://www.nhs.uk/pregnancy/',
+          'label' : 'Pregnancy'
+        },
+        {
+          'url' : 'https://www.nhs.uk/nhs-services/',
+          'label' : 'NHS services'
+        }
+      ]
   })
@@ -368,6 +347,3 @@ }}
       <a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path><path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path></svg>
       </a>
@@ -393,38 +369,2 @@ </div>
 
-### Header transactional
-
-[Preview the header transactional component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-transactional.html)
-
-#### HTML markup
-
-```HTML
-<header class="nhsuk-header nhsuk-header--transactional" role="banner">
-  <div class="nhsuk-width-container nhsuk-header__container">
-    <div class="nhsuk-header__logo nhsuk-header__logo--only">
-      <a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
-      </a>
-    </div>
-  </div>
-</header>
-```
-
-#### Nunjucks macro
-
-```
-{% from 'components/header/macro.njk' import header %}
-
-{{ header({
-  "transactional": "true",
-  "showNav": "false",
-  "showSearch": "false"
-  })
-}}
-```
-
----
-
 ### Header transactional with service name
@@ -437,14 +377,11 @@
 ```HTML
-<header class="nhsuk-header nhsuk-header--transactional" role="banner">
+<header class="nhsuk-header nhsuk-header__transactional" role="banner">
   <div class="nhsuk-width-container nhsuk-header__container">
-    <div class="nhsuk-header__logo nhsuk-header__logo--only">
+    <div class="nhsuk-header__logo nhsuk-header__transactional--logo">
       <a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path><path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path></svg>
       </a>
     </div>
     <div class="nhsuk-header__transactional-service-name">
-      <a class="nhsuk-header__transactional-service-name--link" href="/">Register with a GP</a>
+      <a class="nhsuk-header__transactional-service-name--link" href="https://www.nhs.uk/nhs-services/online-services/find-nhs-number/">Find your NHS number</a>
     </div>
@@ -462,4 +399,4 @@ </div>
   "transactionalService": {
-      "name": "Register with a GP",
-      "href": "https://beta.nhs.uk/book-a-gp-appointment/"
+      "name": "Find your NHS number",
+      "href": "https://www.nhs.uk/nhs-services/online-services/find-nhs-number/"
     },
@@ -483,6 +420,3 @@ "showNav": "false",
       <a class="nhsuk-header__link" href="/" aria-label="Anytown Anyplace Anywhere NHS Foundation Trust homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path><path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path></svg>
         <span class="nhsuk-organisation-name">Anytown Anyplace <span class="nhsuk-organisation-name-split">Anywhere</span></span>
@@ -493,28 +427,11 @@ <span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
     <div class="nhsuk-header__content" id="content-header">
-      <div class="nhsuk-header__menu">
-        <button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
-      </div>
       <div class="nhsuk-header__search">
-        <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
-          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Search</span>
-        </button>
         <div class="nhsuk-header__search-wrap" id="wrap-search">
           <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
             <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
-            <input class="nhsuk-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
+            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
             <button class="nhsuk-search__submit" type="submit">
-              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-              </svg>
+              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
               <span class="nhsuk-u-visually-hidden">Search</span>
             </button>
-            <button class="nhsuk-search__close" id="close-search">
-              <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-              </svg>
-              <span class="nhsuk-u-visually-hidden">Close search</span>
-            </button>
           </form>
@@ -525,65 +442,53 @@ </div>
   </div>
-  <nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
+  <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <p class="nhsuk-header__navigation-title">
-        <span id="label-navigation">Menu</span>
-        <button class="nhsuk-header__navigation-close" id="close-menu">
-          <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Close menu</span>
-        </button>
-      </p>
-      <ul class="nhsuk-header__navigation-list">
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
-          <a class="nhsuk-header__navigation-link" href="/">
-            Home
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Your hospital visit
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Wards and departments
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Conditions and treatments
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Our people
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Our research
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-      </ul>
+      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+        <ul class="nhsuk-header__navigation-list">
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Your hospital visit
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Wards and departments
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Conditions and treatments
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Our people
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Our research
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
+            <a class="nhsuk-header__navigation-link"  href="/">
+              Home
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-mobile-menu-container">
+            <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" aria-expanded="false">
+              <span class="nhsuk-u-visually-hidden">Browse</span>
+              More
+              <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </button>
+          </li>
+        </ul>
+      </nav>
     </div>
-  </nav>
+  </div>
 </header>
@@ -595,2 +500,4 @@ ```
 ```
+{% from 'components/header/macro.njk' import header %}
+
 {{ header({
@@ -641,6 +548,3 @@ "showNav": "true",
       <a class="nhsuk-header__link" href="/" aria-label="Anytown Anyplace Anywhere NHS Foundation Trust homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path><path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path></svg>
         <span class="nhsuk-organisation-name">Anytown Anyplace <span class="nhsuk-organisation-name-split">Anywhere</span></span>
@@ -651,96 +555,67 @@ <span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
     <div class="nhsuk-header__content" id="content-header">
-      <div class="nhsuk-header__menu">
-        <button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
-      </div>
       <div class="nhsuk-header__search">
-        <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
-          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Search</span>
-        </button>
-        <div class="nhsuk-header__search-wrap" id="wrap-search">
-          <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
-            <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
-            <input class="nhsuk-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
-            <button class="nhsuk-search__submit" type="submit">
-              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-              </svg>
-              <span class="nhsuk-u-visually-hidden">Search</span>
-            </button>
-            <button class="nhsuk-search__close" id="close-search">
-              <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-              </svg>
-              <span class="nhsuk-u-visually-hidden">Close search</span>
-            </button>
-          </form>
+          <div class="nhsuk-header__search-wrap" id="wrap-search">
+            <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
+              <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
+              <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
+              <button class="nhsuk-search__submit" type="submit">
+                <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
+                <span class="nhsuk-u-visually-hidden">Search</span>
+              </button>
+            </form>
+          </div>
         </div>
-      </div>
     </div>
   </div>
-  <nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
+  <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <p class="nhsuk-header__navigation-title">
-        <span id="label-navigation">Menu</span>
-        <button class="nhsuk-header__navigation-close" id="close-menu">
-          <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Close menu</span>
-        </button>
-      </p>
-      <ul class="nhsuk-header__navigation-list">
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
-          <a class="nhsuk-header__navigation-link" href="/">
-            Home
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Your hospital visit
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Wards and departments
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Conditions and treatments
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Our people
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Our research
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-      </ul>
+      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+        <ul class="nhsuk-header__navigation-list">
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Your hospital visit
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Wards and departments
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Conditions and treatments
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Our people
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Our research
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
+            <a class="nhsuk-header__navigation-link"  href="/">
+              Home
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-mobile-menu-container">
+            <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" aria-expanded="false">
+              <span class="nhsuk-u-visually-hidden">Browse</span>
+              More
+              <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </button>
+          </li>
+        </ul>
+      </nav>
     </div>
-  </nav>
+  </div>
 </header>
@@ -752,2 +627,4 @@ ```
 ```
+{% from 'components/header/macro.njk' import header %}
+
 {{ header({
@@ -799,6 +676,3 @@ "showNav": "true",
       <a class="nhsuk-header__link" href="/" aria-label="Anytown Anyplace Anywhere NHS Foundation Trust homepage">
-        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
-          <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
-          <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
-        </svg>
+        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path><path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path></svg>
         <span class="nhsuk-organisation-name">Anytown Anyplace <span class="nhsuk-organisation-name-split">Anywhere</span></span>
@@ -809,28 +683,11 @@ <span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
     <div class="nhsuk-header__content" id="content-header">
-      <div class="nhsuk-header__menu">
-        <button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
-      </div>
       <div class="nhsuk-header__search">
-        <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
-          <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Search</span>
-        </button>
         <div class="nhsuk-header__search-wrap" id="wrap-search">
           <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get" role="search">
             <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
-            <input class="nhsuk-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
+            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off" >
             <button class="nhsuk-search__submit" type="submit">
-              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
-              </svg>
+              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
               <span class="nhsuk-u-visually-hidden">Search</span>
             </button>
-            <button class="nhsuk-search__close" id="close-search">
-              <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-              </svg>
-              <span class="nhsuk-u-visually-hidden">Close search</span>
-            </button>
           </form>
@@ -841,65 +698,53 @@ </div>
   </div>
-  <nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
+  <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <p class="nhsuk-header__navigation-title">
-        <span id="label-navigation">Menu</span>
-        <button class="nhsuk-header__navigation-close" id="close-menu">
-          <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-            <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-          </svg>
-          <span class="nhsuk-u-visually-hidden">Close menu</span>
-        </button>
-      </p>
-      <ul class="nhsuk-header__navigation-list">
-        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
-          <a class="nhsuk-header__navigation-link" href="/">
-            Home
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Your hospital visit
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Wards and departments
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Conditions and treatments
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Our people
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-        <li class="nhsuk-header__navigation-item">
-          <a class="nhsuk-header__navigation-link" href="#">
-            Our research
-            <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
-              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
-            </svg>
-          </a>
-        </li>
-      </ul>
+      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+        <ul class="nhsuk-header__navigation-list">
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Your hospital visit
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Wards and departments
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Conditions and treatments
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Our people
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item">
+            <a class="nhsuk-header__navigation-link"  href="#">
+              Our research
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
+            <a class="nhsuk-header__navigation-link"  href="/">
+              Home
+              <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </a>
+          </li>
+          <li class="nhsuk-mobile-menu-container">
+            <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" aria-expanded="false">
+              <span class="nhsuk-u-visually-hidden">Browse</span>
+              More
+              <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
+            </button>
+          </li>
+        </ul>
+      </nav>
     </div>
-  </nav>
+  </div>
 </header>
@@ -911,2 +756,4 @@ ```
 ```
+{% from 'components/header/macro.njk' import header %}
+
 {{ header({
@@ -917,3 +764,4 @@ "showNav": "true",
     "organisation": {
-      "name": "Anytown Anyplace Anywhere",
+      "name": "Anytown Anyplace",
+      "split": "Anywhere",
       "descriptor": "NHS Foundation Trust"
@@ -920,0 +768,0 @@ },

README.md

@@ -33,3 +33,3 @@ # NHS.UK frontend
 
-NHS.UK frontend is maintained by NHS Digital. [Email us](mailto:[e-mail]), open a [GitHub issue](https://github.com/nhsuk/nhsuk-frontend/issues/new) or get in touch on the [NHS digital service manual Slack workspace](https://join.slack.com/t/nhs-service-manual/shared_invite/enQtNTIyOTEyNjU3NDkyLTk4NDQ3YzkwYzk1Njk5YjAxYTI5YTVkZmUxMGQ0ZjA3NjMyM2ZkNjBlMWMxODVjZjYzNzg1ZmU4MWY1NmE2YzE).
+NHS.UK frontend is maintained by NHS England. [Email us](mailto:[e-mail]), open a [GitHub issue](https://github.com/nhsuk/nhsuk-frontend/issues/new) or get in touch on the [NHS digital service manual Slack workspace](https://join.slack.com/t/nhs-service-manual/shared_invite/enQtNTIyOTEyNjU3NDkyLTk4NDQ3YzkwYzk1Njk5YjAxYTI5YTVkZmUxMGQ0ZjA3NjMyM2ZkNjBlMWMxODVjZjYzNzg1ZmU4MWY1NmE2YzE).
 
@@ -36,0 +36,0 @@ ## Licence

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

981725

increased by0.37%

Worsened metrics

Dev dependency count

36

increased by2.86%

Lines of code

8146

decreased by-0.71%

No dependency changes