diff --git a/CHANGELOG.md b/CHANGELOG.md index b2f613bd..a732b907 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.42...HEAD) ### Added + +- Global active style added + ### Changed + +- The default pagination style is plain buttons but can be changed with the `solid` option +- Added some attributes to the HTML of the headers to reduce reliance on the JavaScript + ### Deprecated ### Removed ### Fixed diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index 802fe76d..4789c698 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -34,7 +34,7 @@ } ] }, - "html": "
The National ArchivesBeta
" + "html": "
The National ArchivesBeta
" } ] } diff --git a/src/nationalarchives/components/global-header/global-header.mjs b/src/nationalarchives/components/global-header/global-header.mjs index 649bb49f..2148ec9b 100644 --- a/src/nationalarchives/components/global-header/global-header.mjs +++ b/src/nationalarchives/components/global-header/global-header.mjs @@ -1,5 +1,3 @@ -import uuidv4 from "../../lib/uuid.mjs"; - export class GlobalHeader { constructor($module) { this.$module = $module; @@ -28,27 +26,11 @@ export class GlobalHeader { return; } - const uniqueId = `tna-menu-content-${uuidv4()}`; - const uniqueIdTop = `${uniqueId}-top`; - if (this.$navigation) { - this.$navigation.setAttribute("id", uniqueId); - } - if (this.$topNavigation) { - this.$topNavigation.setAttribute("id", uniqueIdTop); - } - this.$toggleButton.removeAttribute("hidden"); - this.$toggleButton.setAttribute( - "aria-controls", - [uniqueId, uniqueIdTop].join(" "), - ); - this.syncState(); - this.$toggleButton.addEventListener("click", () => this.handleToggleNavigation(), ); - if ("addEventListener" in this.mql) { this.mql.addEventListener("change", () => this.syncState()); } else { @@ -64,71 +46,50 @@ export class GlobalHeader { syncState() { if (this.mql.matches) { if (this.menuOpened) { - if (this.$navigation) { - this.$navigation.classList.add("tna-global-header__navigation--open"); - this.$navigation.hidden = false; - this.$navigation.setAttribute("aria-hidden", "false"); - } - if (this.$topNavigation) { - this.$topNavigation.classList.add( - "tna-global-header__top-navigation--open", - ); - this.$topNavigation.hidden = false; - this.$topNavigation.setAttribute("aria-hidden", "false"); - } - this.$toggleButton.setAttribute("aria-expanded", "true"); - this.$toggleButton.setAttribute("title", "Close menu"); - this.$toggleButton.classList.add( - "tna-global-header__navigation-button--opened", - ); - - for (let i = 0; i < this.$links.length; i++) { - this.$links[i].setAttribute("tabindex", "0"); - } + this.show(); } else { - if (this.$navigation) { - this.$navigation.classList.remove( - "tna-global-header__navigation--open", - ); - this.$navigation.hidden = true; - this.$navigation.setAttribute("aria-hidden", "true"); - } - if (this.$topNavigation) { - this.$topNavigation.classList.remove( - "tna-global-header__top-navigation--open", - ); - this.$topNavigation.hidden = true; - this.$topNavigation.setAttribute("aria-hidden", "true"); - } - this.$toggleButton.setAttribute("aria-expanded", "false"); - this.$toggleButton.setAttribute("title", "Open menu"); - this.$toggleButton.classList.remove( - "tna-global-header__navigation-button--opened", - ); - - for (let i = 0; i < this.$links.length; i++) { - this.$links[i].setAttribute("tabindex", "-1"); - } + this.hide(); } } else { - if (this.$navigation) { - this.$navigation.classList.add("tna-global-header__navigation--open"); - this.$navigation.hidden = false; - this.$navigation.setAttribute("aria-hidden", "false"); - } - if (this.$topNavigation) { - this.$topNavigation.classList.add( - "tna-global-header__top-navigation--open", - ); - this.$topNavigation.hidden = false; - this.$topNavigation.setAttribute("aria-hidden", "false"); - } - this.$toggleButton.setAttribute("aria-expanded", "true"); - this.$toggleButton.setAttribute("title", "Close menu"); + this.show(); + } + } - for (let i = 0; i < this.$links.length; i++) { - this.$links[i].setAttribute("tabindex", "0"); - } + hide() { + if (this.$navigation) { + this.$navigation.hidden = true; + this.$navigation.setAttribute("aria-hidden", "true"); + } + if (this.$topNavigation) { + this.$topNavigation.hidden = true; + this.$topNavigation.setAttribute("aria-hidden", "true"); + } + this.$toggleButton.setAttribute("aria-expanded", "false"); + this.$toggleButton.setAttribute("title", "Open menu"); + this.$toggleButton.classList.remove( + "tna-global-header__navigation-button--opened", + ); + for (let i = 0; i < this.$links.length; i++) { + this.$links[i].setAttribute("tabindex", "-1"); + } + } + + show() { + if (this.$navigation) { + this.$navigation.hidden = false; + this.$navigation.setAttribute("aria-hidden", "false"); + } + if (this.$topNavigation) { + this.$topNavigation.hidden = false; + this.$topNavigation.setAttribute("aria-hidden", "false"); + } + this.$toggleButton.setAttribute("aria-expanded", "true"); + this.$toggleButton.setAttribute("title", "Close menu"); + this.$toggleButton.classList.add( + "tna-global-header__navigation-button--opened", + ); + for (let i = 0; i < this.$links.length; i++) { + this.$links[i].setAttribute("tabindex", "0"); } } } diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index 07fbe8ed..975fbfef 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -154,6 +154,9 @@ } } + &__navigation-wrapper { + } + &__navigation { margin: 0.5rem 0 0; height: 100%; @@ -231,6 +234,10 @@ } @include media.on-medium { + &__navigation { + column-gap: 1rem; + } + &__navigation-item-link { @include typography.relative-font-size(16); } diff --git a/src/nationalarchives/components/global-header/macro-options.json b/src/nationalarchives/components/global-header/macro-options.json index f803c69c..88ece23d 100644 --- a/src/nationalarchives/components/global-header/macro-options.json +++ b/src/nationalarchives/components/global-header/macro-options.json @@ -83,6 +83,18 @@ } ] }, + { + "name": "navigationId", + "type": "string", + "required": false, + "description": "" + }, + { + "name": "topNavigationId", + "type": "string", + "required": false, + "description": "" + }, { "name": "classes", "type": "string", diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index e35a0f9f..23380fe5 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -30,13 +30,13 @@
-
{%- if params.navigation %} -