Skip to content

Commit

Permalink
Plain pagination (#98)
Browse files Browse the repository at this point in the history 
* Change default pagination style to plain

* Make global header JS more robust

* Reduce index grid items in example

* Move reset

* Add global active style and variables

* Move some JS into the HTML

* Update CHANGELOG.md
  • Loading branch information
@ahosgood
ahosgood authored Mar 6, 2024
1 parent 5899380 commit 1928838
Show file tree
Hide file tree
Showing 21 changed files with 195 additions and 157 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/nationalarchives/components/global-header/fixtures.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>"
}
]
}
119 changes: 40 additions & 79 deletions src/nationalarchives/components/global-header/global-header.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import uuidv4 from "../../lib/uuid.mjs";

export class GlobalHeader {
constructor($module) {
this.$module = $module;
Expand Down Expand Up @@ -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 {
Expand All @@ -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");
}
}
}
7 changes: 7 additions & 0 deletions src/nationalarchives/components/global-header/global-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,9 @@
}
}

&__navigation-wrapper {
}

&__navigation {
margin: 0.5rem 0 0;
height: 100%;
Expand Down Expand Up @@ -231,6 +234,10 @@
}

@include media.on-medium {
&__navigation {
column-gap: 1rem;
}

&__navigation-item-link {
@include typography.relative-font-size(16);
}
Expand Down
12 changes: 12 additions & 0 deletions src/nationalarchives/components/global-header/macro-options.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,18 @@
}
]
},
{
"name": "navigationId",
"type": "string",
"required": false,
"description": ""
},
{
"name": "topNavigationId",
"type": "string",
"required": false,
"description": ""
},
{
"name": "classes",
"type": "string",
Expand Down
6 changes: 3 additions & 3 deletions src/nationalarchives/components/global-header/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down
Loading

0 comments on commit 1928838

Please sign in to comment.