v0.2.6

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.5...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.6...HEAD)
 
 ### Added
 ### Changed
@@ -14,6 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 ### Security
 
+## [0.2.6](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.5...v0.2.6) - 2024-08-02
+
+### Changed
+
+- Upgraded TNA Frontend to `v0.2.6`
+
 ## [0.2.5](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.4...v0.2.5) - 2024-07-30
 
 ### Changed

README.md

@@ -54,6 +54,7 @@ We test each component against its published [component fixtures](https://github
 
 | TNA Frontend Jinja | Compatible TNA Frontend versions |
 | ------------------ | -------------------------------- |
+| `0.2.6`            | `v0.2.6`                         |
 | `0.2.5`            | `v0.2.5`                         |
 | `0.2.4`            | `v0.2.4`                         |
 | `0.2.3`            | `v0.2.3`                         |

package.json

@@ -5,7 +5,7 @@
     "test": "node test-fixtures.mjs"
   },
   "dependencies": {
-    "@nationalarchives/frontend": "0.2.5",
+    "@nationalarchives/frontend": "0.2.6",
     "diff": "^5.1.0",
     "glob": "^10.2.7",
     "js-beautify": "^1.14.8",

setup.py

@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="tna-frontend-jinja",
-    version="0.2.5",
+    version="0.2.6",
     author="Andrew Hosgood",
     author_email="[email protected]",
     description="TNA Frontend Jinja templates",

tna_frontend_jinja/templates/components/footer/macro.html

@@ -13,7 +13,7 @@ <h2 class="tna-visually-hidden">Change the site theme</h2>
         <div class="tna-button-group tna-button-group--small">
           {{ tnaButton({
             'text': 'System theme',
-            'icon': 'circle-half-stroke',
+            'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>',
             'title': 'Change to using the system theme',
             'buttonElement': true,
             'classes': 'tna-footer__theme-selector-button',
@@ -25,7 +25,7 @@ <h2 class="tna-visually-hidden">Change the site theme</h2>
           }) }}
           {{ tnaButton({
             'text': 'Light theme',
-            'icon': 'sun',
+            'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>',
             'title': 'Change to using the light theme',
             'buttonElement': true,
             'classes': 'tna-footer__theme-selector-button',
@@ -37,7 +37,7 @@ <h2 class="tna-visually-hidden">Change the site theme</h2>
           }) }}
           {{ tnaButton({
             'text': 'Dark theme',
-            'icon': 'moon',
+            'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>',
             'title': 'Change to using the dark theme',
             'buttonElement': true,
             'classes': 'tna-footer__theme-selector-button',

tna_frontend_jinja/templates/components/gallery/macro.html

@@ -70,10 +70,16 @@
   </div>
   <div class="tna-gallery__navigation-buttons" hidden>
     <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-prev" aria-label="Previous image">
-      <span class="tna-gallery__navigation-button-label">Previous image</span>
+      <span class="tna-gallery__navigation-button-label">
+        <span class="tna-gallery__navigation-button-icon"></span>
+        Previous
+      </span>
     </button>
     <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-next" aria-label="Next image">
-      <span class="tna-gallery__navigation-button-label">Next image</span>
+      <span class="tna-gallery__navigation-button-label">
+        Next
+        <span class="tna-gallery__navigation-button-icon"></span>
+      </span>
     </button>
   </div>
   <div class="tna-gallery__navigation" role="tablist" hidden>

tna_frontend_jinja/templates/components/header/macro.html

@@ -1,17 +1,6 @@
 {% macro tnaHeader(params) %}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <header class="tna-header {{ ' '.join(containerClasses) }}" data-module="tna-header" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
-  {%- if params.exit -%}
-  <div class="tna-header__exit">
-    <div class="tna-container">
-      <div class="tna-column tna-column--full">
-        <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target %} target="{{ params.exit.target }}" title="{{ params.exit.text }} (opens in new tab)"{% endif %}>
-          {{ params.exit.text }}
-        </a>
-      </div>
-    </div>
-  </div>
-  {%- endif -%}
   <div class="tna-container tna-header__contents">
     <div class="tna-column tna-header__logo">
       <{%- if params.logo and params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-contents tna-header__logo-contents--link" title="{%- if params.logo and params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo and params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-contents"{%- endif -%}>
@@ -29,8 +18,8 @@
       </{%- if params.logo and params.logo.href -%}a{%- else -%}span{%- endif -%}>
     </div>
     {%- if params.navigation or params.topNavigation -%}
-    <div class="tna-column tna-header__navigation-toggle">
-      <button class="tna-header__navigation-toggle-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }}" hidden>
+    <div class="tna-column tna-header__navigation-button-wrapper">
+      <button class="tna-header__navigation-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }}" hidden>
         Menu
         <span class="tna-header__hamburger"></span>
       </button>