v0.2.8

nationalarchives · Aug 16, 2024 · 1233014 · 1233014
1 parent 608ec3d
commit 1233014
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,17 +5,24 @@ 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.7...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.8...HEAD)
 
 ### Added
 ### Changed
 ### Deprecated
 ### Removed
 ### Fixed
+### Security
 
-- Fixed ignored `headingSize` for sidebar
+## [0.2.8](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.7...v0.2.8) - 2024-08-16
 
-### Security
+### Changed
+
+- Upgraded TNA Frontend to `v0.2.8`
+
+### Fixed
+
+- Fixed ignored `headingSize` for sidebar
 
 ## [0.2.7](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.6...v0.2.7) - 2024-08-12
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "test": "node test-fixtures.mjs"
   },
   "dependencies": {
-    "@nationalarchives/frontend": "0.2.7",
+    "@nationalarchives/frontend": "^0.2.8",
     "diff": "^5.1.0",
     "glob": "^10.2.7",
     "js-beautify": "^1.14.8",

diff --git a/setup.py b/setup.py
@@ -5,7 +5,7 @@
 
 setuptools.setup(
     name="tna-frontend-jinja",
-    version="0.2.7",
+    version="0.2.8",
     author="Andrew Hosgood",
     author_email="[email protected]",
     description="TNA Frontend Jinja templates",

diff --git a/tna_frontend_jinja/templates/components/card/macro.html b/tna_frontend_jinja/templates/components/card/macro.html
@@ -65,11 +65,11 @@
   {%- endif %}
     <div class="tna-card__body">
     {%- if params.meta %}
-      <dl class="tna-card__meta tna-dl-chips tna-dl-chips--plain">
+      <dl class="tna-card__meta tna-dl-chips{{ '' if params.accentMeta else ' tna-dl-chips--plain' }}">
         {%- for item in params.meta %}
         <dt>{{ item.title }}</dt>
-        <dd class="tna-dl-chips__item">
-          <span class="tna-chip tna-chip--plain">
+        <dd>
+          <span class="tna-dl-chips__item">
             {%- if item.icon %}
             <i class="fa-solid fa-fw fa-{{ item.icon }}" aria-hidden="true"></i>
             {%- endif %}

diff --git a/tna_frontend_jinja/templates/components/footer/macro.html b/tna_frontend_jinja/templates/components/footer/macro.html
@@ -79,7 +79,7 @@ <h3 class="tna-!--visually-hidden">Follow us</h3>
             <ul class="tna-ul tna-ul--plain tna-footer__social-items">
             {%- for item in params.social -%}
               <li class="tna-footer__social-item">
-                <a href="{{ item.href }}" class="tna-footer__social-item-link" data-name="{{ item.icon }}" title="{{ item.title }}">
+                <a href="{{ item.href }}" class="tna-footer__social-item-link" data-name="{{ item.icon }}">
                   {%- if item.icon == 'twitter' %}
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                   {%- elif item.icon == 'youtube' %}

diff --git a/tna_frontend_jinja/templates/components/gallery/macro.html b/tna_frontend_jinja/templates/components/gallery/macro.html
@@ -6,9 +6,11 @@
 <section class="tna-gallery{% if classes %} {{ classes }}{% endif %}" data-module="tna-gallery" {%- if params.showGrid %} data-showgrid="true"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <div class="tna-gallery__header">
     <div class="tna-gallery__header-inner">
+      {%- if params.title %}
       <h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'm' }}">
         {{ params.title }}
       </h{{ params.headingLevel }}>
+      {%- endif %}
       {%- if params.text %}
         <p>{{ params.text }}</p>
       {%- else %}
@@ -19,7 +21,6 @@
       {{ tnaButton({
         'text': 'Full screen',
         'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>',
-        'title': 'Full screen',
         'iconOnlyOnMobile': True,
         'buttonElement': True,
         'attributes': {
@@ -30,7 +31,6 @@
       {{ tnaButton({
         'text': 'Exit full screen',
         'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/></svg>',
-        'title': 'Exit full screen',
         'iconOnlyOnMobile': True,
         'buttonElement': True,
         'attributes': {
@@ -41,7 +41,6 @@
       {{ tnaButton({
         'text': 'See all images',
         'iconSvg': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z"/></svg>',
-        'title': 'See all images',
         'iconOnlyOnMobile': True,
         'buttonElement': True,
         'attributes': {
@@ -57,7 +56,7 @@
       <p class="tna-gallery__item-header">Image {{ loop.index }} of {{ params['items'] | length }}</p>
       <figure class="tna-gallery__item-figure">
         <div class="tna-gallery__item-figure-inner">
-          <img src="{{ item.src }}" class="tna-gallery__item-image" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}">
+          <img src="{{ item.src }}" class="tna-gallery__item-image" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}" loading="lazy">
         </div>
         {%- if item.description %}
         <figcaption class="tna-gallery__item-description">
@@ -85,7 +84,7 @@
   <div class="tna-gallery__navigation" role="tablist" hidden>
     {%- for item in params['items'] -%}
     <button type="button" class="tna-gallery__navigation-item" role="tab" id="{{ params.id }}-item-{{ loop.index }}-tab" aria-label="Photo {{ loop.index }} of {{ params['items'] | length }}" aria-controls="{{ params.id }}-item-{{ loop.index }}">
-      <img src="{{ item.src }}" class="tna-gallery__navigation-item-image" alt="" width="{{ item.width }}" height="{{ item.height }}">
+      <img src="{{ item.src }}" class="tna-gallery__navigation-item-image" alt="" width="{{ item.width }}" height="{{ item.height }}" loading="lazy">
       <span class="tna-visually-hidden">Image</span>
       <span class="tna-gallery__navigation-item-label">{{ loop.index }}</span>
       <span class="tna-visually-hidden"> of {{ params['items'] | length }}</span>

diff --git a/tna_frontend_jinja/templates/components/hero/macro.html b/tna_frontend_jinja/templates/components/hero/macro.html
@@ -23,7 +23,7 @@
     {%- if params.imageCaption -%}
     <figcaption class="tna-hero__caption">
       <details class="tna-hero__details">
-        <summary class="tna-hero__details-summary" title="About this image">
+        <summary class="tna-hero__details-summary">
           About this <span class="tna-hero__details-summary-icon">i</span>mage
         </summary>
         <div class="tna-hero__information">

diff --git a/tna_frontend_jinja/templates/components/index-grid/macro.html b/tna_frontend_jinja/templates/components/index-grid/macro.html
@@ -60,7 +60,7 @@
     {%- endif -%}
     {%- for item in params['items'] -%}
     <li class="{{ ' '.join(itemClasses) }}">
-      <a href="{{ item.href }}" class="tna-index-grid__item" title="{{ item.title }}">
+      <a href="{{ item.href }}" class="tna-index-grid__item">
         <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}"{%- if params.lazyImages %} loading="lazy"{% endif %}>
         <span class="tna-index-grid__item-content">
           {%- if item.label -%}

diff --git a/tna_frontend_jinja/templates/components/picture/macro.html b/tna_frontend_jinja/templates/components/picture/macro.html
@@ -10,12 +10,17 @@
     {%- endfor -%}
       <img class="tna-picture__image" width="{{ params.width }}" height="{{ params.height }}" src="{{ params.src }}" alt="{{ params.alt }}" loading="lazy">
     </picture>
+    {%- if params.information %}
+    <button type="button" class="tna-picture__toggle-transcript tna-button tna-button--small tna-button--solid-hover" aria-expanded="false" hidden>Open transcript</button>
+    {%- endif %}
   </div>
 {%- if params.information -%}
   <div class="tna-picture__transcript">
   {%- if params.information | length > 1 -%}
     {{ tnaTabs({
-      'items': params.information
+      'itemHeadingLevel': params.informationItemHeadingLevel,
+      'items': params.information,
+      'classes': 'tna-tabs--small'
     }) }}
   {%- else -%}
     {{ params.information[0].body | safe }}

diff --git a/tna_frontend_jinja/templates/components/tabs/macro.html b/tna_frontend_jinja/templates/components/tabs/macro.html
@@ -4,16 +4,23 @@
   {%- set containerClasses = containerClasses + ['tna-tabs--sticky'] -%}
 {%- endif -%}
 <div class="tna-tabs {{ ' '.join(containerClasses) }}" data-module="tna-tabs" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
-  <ul class="tna-tabs__list">
+  <ul class="tna-tabs__list" role="tablist" hidden>
   {% for item in params['items'] %}
     <li class="tna-tabs__list-item">
-      <a href="#{{ item.id }}" class="tna-tabs__list-item-link" id="{{ item.id }}-tab">{{ item.title }}</a>
+      <button type="button" class="tna-tabs__button" id="{{ item.id }}-tab" aria-controls="{{ item.id }}" role="tab">
+        <span class="tna-tabs__button-inner">
+          {{ item.title }}
+        </span>
+      </button>
     </li>
   {% endfor %}
   </ul>
   <div class="tna-tabs__items">
   {% for item in params['items'] %}
     <section id="{{ item.id }}" class="tna-tabs__item">
+      <h{{ params.itemHeadingLevel }} class="tna-tabs__heading tna-heading-m">
+        {{ item.title }}
+      </h{{ params.itemHeadingLevel }}>
       {{ item.body | safe }}
     </section>
   {% endfor %}