Plain pagination

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

src/nationalarchives/components/global-header/fixtures.json

@@ -34,7 +34,7 @@
           }
         ]
       },
-      "html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" style=\"enable-background:new 0 0 160 160\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg><span class=\"tna-global-header__logo-strapline\">Beta</span></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" aria-label=\"Main site navigation\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" aria-label=\"Secondary site navigation\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></ul></nav></div></header>"
+      "html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" style=\"enable-background:new 0 0 160 160\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg><span class=\"tna-global-header__logo-strapline\">Beta</span></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" aria-controls=\"tna-header__navigation tna-header__top-navigation\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" id=\"tna-header__navigation\" aria-label=\"Main site navigation\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" id=\"tna-header__top-navigation\" aria-label=\"Secondary site navigation\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></ul></nav></div></header>"
     }
   ]
 }

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

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);
     }

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",

src/nationalarchives/components/global-header/template.njk

@@ -30,13 +30,13 @@
       </span>
     </div>
     <div class="tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper">
-      <button class="tna-global-header__navigation-button" type="button" hidden>
+      <button class="tna-global-header__navigation-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }} {{ 'tna-header__top-navigation' or params.topNavigationId }}" hidden>
         Menu
         <span class="tna-global-header__hamburger"></span>
       </button>
     </div>
     {%- if params.navigation %}
-    <nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" aria-label="Main site navigation">
+    <nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" id="{{ 'tna-header__navigation' or params.navigationId }}" aria-label="Main site navigation">
       <ul class="tna-global-header__navigation">
         {%- for item in params.navigation %}
         <li class="tna-global-header__navigation-item">
@@ -47,7 +47,7 @@
     </nav>
     {%- endif %}
     {%- if params.topNavigation %}
-    <nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" aria-label="Secondary site navigation">
+    <nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" id="{{ 'tna-header__top-navigation' or params.topNavigationId }}" aria-label="Secondary site navigation">
       <ul class="tna-global-header__top-navigation">
         {%- for item in params.topNavigation %}
         <li class="tna-global-header__top-navigation-item">