Change pagination icons to SVG and always show previous and next labels

CHANGELOG.md

@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Updated default text on cookie banner hide buttons
+- Pagination arrows are now embedded SVGs rather than requiring the Font Awesome icons CSS
+- "Previous" and "Next" text in pagination buttons is no longer hidden on tiny devices
 
 ### Deprecated
 ### Removed

src/nationalarchives/components/pagination/fixtures.json

@@ -40,7 +40,7 @@
           "href": "#next"
         }
       },
-      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain tna-button--icon-only-mobile\" rel=\"prev\"><i class=\"fa-solid fa-arrow-left\" aria-hidden=\"true\"></i>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain tna-button--icon-only-mobile\" rel=\"next\"><i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"></i>Next</a></div></nav>"
+      "html": "<nav class=\"tna-pagination\" aria-label=\"Pagination\"><div class=\"tna-pagination__prev\"><a href=\"#previous\" class=\"tna-button tna-button--plain\" rel=\"prev\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>Previous</a></div><ul class=\"tna-pagination__list\"><li class=\"tna-pagination__item\"><a href=\"#1\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">1</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#6\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">6</a></li><li class=\"tna-pagination__item tna-pagination__item--current\"><a href=\"#7\" class=\"tna-button tna-pagination__link\" aria-label=\"\">7</a></li><li class=\"tna-pagination__item\"><a href=\"#8\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">8</a></li><li class=\"tna-pagination__item tna-pagination__item--ellipses\">&ctdot;</li><li class=\"tna-pagination__item\"><a href=\"#42\" class=\"tna-button tna-pagination__link tna-button--plain\" aria-label=\"\">42</a></li></ul><div class=\"tna-pagination__next\"><a href=\"#next\" class=\"tna-button tna-button--icon-right tna-button--plain\" rel=\"next\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\"/></svg>Next</a></div></nav>"
     }
   ]
 }

src/nationalarchives/components/pagination/template.njk

@@ -12,8 +12,7 @@
       text: params.previous.text if params.previous.text else "Previous",
       href: params.previous.href,
       title: params.previous.title,
-      icon: "arrow-left",
-      iconOnlyOnMobile: true,
+      iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>',
       plain: not params.solid,
       attributes: {
         rel: "prev"
@@ -51,8 +50,7 @@
       text: params.next.text if params.next.text else "Next",
       href: params.next.href,
       title: params.next.title,
-      icon: "arrow-right",
-      iconOnlyOnMobile: true,
+      iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>',
       plain: not params.solid,
       classes: "tna-button--icon-right",
       attributes: {