Add pagination examples

lib/sidebar.js

@@ -15,7 +15,7 @@ const $sectionsHeadings = Array.from(
 
 if ($sidebarItems) {
   let currentSectionId = "";
-  const currentSectionFromTop = 0.15;
+  const currentSectionFromTop = 0.2;
   const highlightCurrentSection = () => {
     const $topSection = Array.from($sectionsHeadings)
       .reverse()
@@ -25,19 +25,26 @@ if ($sidebarItems) {
           window.innerHeight * currentSectionFromTop,
       );
     const topSectionId = $topSection && $topSection.getAttribute("id");
-    if (topSectionId && topSectionId !== currentSectionId) {
-      currentSectionId = topSectionId;
-      if ($topSection) {
-        $sidebarItems.forEach(($sidebarItem) =>
-          $sidebarItem.getAttribute("href") === `#${currentSectionId}`
-            ? $sidebarItem.classList.add(
-                "tna-ds-sidebar__section-link--current",
-              )
-            : $sidebarItem.classList.remove(
-                "tna-ds-sidebar__section-link--current",
-              ),
-        );
+    if (topSectionId) {
+      if (topSectionId !== currentSectionId) {
+        currentSectionId = topSectionId;
+        if ($topSection) {
+          $sidebarItems.forEach(($sidebarItem) =>
+            $sidebarItem.getAttribute("href") === `#${currentSectionId}`
+              ? $sidebarItem.classList.add(
+                  "tna-ds-sidebar__section-link--current",
+                )
+              : $sidebarItem.classList.remove(
+                  "tna-ds-sidebar__section-link--current",
+                ),
+          );
+        }
       }
+    } else {
+      currentSectionId = "";
+      $sidebarItems.forEach(($sidebarItem) =>
+        $sidebarItem.classList.remove("tna-ds-sidebar__section-link--current"),
+      );
     }
   };
   window.addEventListener("scroll", highlightCurrentSection);

src/components/pagination/default/index.njk

@@ -0,0 +1,44 @@
+---
+title: Pagination
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/pagination/macro.njk" import tnaPagination %}
+
+{{ tnaPagination({
+  previous: {
+    href: "#"
+  },
+  items: [
+    {
+      number: 1,
+      href: "#"
+    },
+    {
+      ellipsis: true
+    },
+    {
+      number: 6,
+      href: "#"
+    },
+    {
+      number: 7,
+      current: true,
+      href: "#"
+    },
+    {
+      number: 8,
+      href: "#"
+    },
+    {
+      ellipsis: true
+    },
+    {
+      number: 42,
+      href: "#"
+    }
+  ],
+  next: {
+    href: "#"
+  }
+}) }}

src/components/pagination/first/index.njk

@@ -0,0 +1,27 @@
+---
+title: Pagination - first page
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/pagination/macro.njk" import tnaPagination %}
+
+{{ tnaPagination({
+  items: [
+    {
+      number: 1,
+      current: true,
+      href: "#"
+    },
+    {
+      number: 2,
+      href: "#"
+    },
+    {
+      number: 3,
+      href: "#"
+    }
+  ],
+  next: {
+    href: "#"
+  }
+}) }}

src/components/pagination/index.md

@@ -0,0 +1,55 @@
+---
+layout: collection-page.njk
+title: Pagination
+group: components
+---
+
+{% from "_example.njk" import example %}
+
+Use a list-type layout if users need to navigate through pages of similar items. For example, a list of search results or a list of cases in a case working system.
+
+{{ example({ group: "components", item: "pagination", example: "default", html: true, nunjucks: true, open: false, size: "xxs" }) }}
+
+Show the page number in the page `<title>` so that screen reader users know they’ve navigated to a different page. For example, ‘Search results (page 1 of 4)’.
+
+## Number of page links
+
+Show an appropriate number of pages to fit the horizontal space available.
+
+For smaller screens, show page numbers for:
+
+- the current page
+- previous and next pages
+- first and last pages
+
+For larger screens, show page numbers for:
+
+- the current page
+- at least one page immediately before and after the current page
+- first and last pages
+
+Use ellipses (&hellip;) to replace any skipped pages. For example:
+
+- **[1]** 2 &hellip; 42
+- 1 **[2]** 3 &hellip; 42
+- 1 2 **[3]** 4 &hellip; 42
+- 1 2 3 **[4]** 5 &hellip; 42
+- 1 &hellip; 4 **[5]** 6 &hellip; 42
+
+- 1 &hellip; 37 **[38]** 39 &hellip; 42
+- 1 &hellip; 38 **[39]** 40 41 42
+- 1 &hellip; 39 **[40]** 41 42
+- 1 &hellip; 40 **[41]** 42
+- 1 &hellip; 41 **[42]**
+
+## First and last pages
+
+Do not show the previous page link on the first page — and do not show the next page link on the last page.
+
+{{ example({ group: "components", item: "pagination", example: "first", html: false, nunjucks: false, open: false, size: "xxs" }) }}
+
+{{ example({ group: "components", item: "pagination", example: "last", html: false, nunjucks: false, open: false, size: "xxs" }) }}
+
+<!-- ## Previous and next pages
+
+{{ example({ group: "components", item: "pagination", example: "previous-next", html: false, nunjucks: false, open: false, size: "xxs" }) }} -->

src/components/pagination/last/index.njk

@@ -0,0 +1,27 @@
+---
+title: Pagination - last page
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/pagination/macro.njk" import tnaPagination %}
+
+{{ tnaPagination({
+  previous: {
+    href: "#"
+  },
+  items: [
+    {
+      number: 1,
+      href: "#"
+    },
+    {
+      number: 2,
+      href: "#"
+    },
+    {
+      number: 3,
+      current: true,
+      href: "#"
+    }
+  ]
+}) }}

src/components/pagination/previous-next/index.njk

@@ -0,0 +1,21 @@
+---
+title: Pagination - previous and next
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/pagination/macro.njk" import tnaPagination %}
+
+{{ tnaPagination({
+  previous: {
+    href: "#",
+    text: "TS 11/45/166",
+    title: "From the catalogue: TS 11/45/166"
+  },
+  currentItemText: "From the catalogue: TS 11/45/167",
+  next: {
+    href: "#",
+    text: "TS 11/45/168",
+    title: "From the catalogue: TS 11/45/168"
+  },
+  spaced: true
+}) }}