v0.1.34

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.1.33...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.34...HEAD)
 
 ### Added
 ### Changed
@@ -14,6 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 ### Security
 
+## [0.1.34](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.33...v0.1.34) - 2024-07-11
+
+### Changed
+
+- Upgraded TNA Frontend to `v0.1.65`
+
 ## [0.1.33](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.32...v0.1.33) - 2024-06-24
 
 ### Changed

README.md

@@ -52,6 +52,7 @@ We test each component against its published [component fixtures](https://github
 
 | TNA Frontend Jinja    | Compatible TNA Frontend versions           |
 | --------------------- | ------------------------------------------ |
+| `0.1.34`              | `v0.1.65`                                  |
 | `0.1.33`              | `v0.1.62`, `v0.1.63`, `v0.1.64`            |
 | `0.1.32`              | `v0.1.60`, `v0.1.61`                       |
 | `0.1.31`              | `v0.1.59`                                  |

package.json

@@ -5,7 +5,7 @@
     "test": "node test-fixtures.mjs"
   },
   "dependencies": {
-    "@nationalarchives/frontend": "0.1.62",
+    "@nationalarchives/frontend": "0.1.65",
     "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.1.33",
+    version="0.1.34",
     author="Andrew Hosgood",
     author_email="[email protected]",
     description="TNA Frontend Jinja templates",

test/app/components/routes.py

@@ -70,11 +70,21 @@ def featured_records():
     return render_component("featured-records.html")
 
 
+@bp.route("/files")
+def files():
+    return render_component("files.html")
+
+
 @bp.route("/footer")
 def footer():
     return render_component("footer.html")
 
 
+@bp.route("/gallery")
+def gallery():
+    return render_component("gallery.html")
+
+
 @bp.route("/grid")
 def grid():
     return render_component("grid.html")

test/app/components/test-templates/files.html

@@ -0,0 +1,2 @@
+{%- from "components/files/macro.html" import tnaFiles -%}
+{{ tnaFiles(context) }}

test/app/components/test-templates/gallery.html

@@ -0,0 +1,2 @@
+{%- from "components/gallery/macro.html" import tnaGallery -%}
+{{ tnaGallery(context) }}

tna_frontend_jinja/templates/components/accordion/macro.html

@@ -1,18 +1,20 @@
 {% macro tnaAccordion(params) %}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- set classes = containerClasses | join(' ') -%}
-<div class="tna-accordion{% if classes %} {{ classes }}{% endif %}" data-module="tna-accordion" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<div class="tna-accordion{% if classes %} {{ classes }}{% endif %}" data-multipleitems="{{ 'true' if params.openMultipleItems else 'false' }}" data-module="tna-accordion" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   {%- for item in params['items'] %}
-  <details class="tna-accordion__details"{%- if params.group %} name="{{ params.group }}"{% endif %}{%- if item.open %} open{% endif %}>
-    <summary class="tna-accordion__summary">{{ item.title }}</summary>
-    <div class="tna-accordion__content">
+  <div class="tna-accordion__item" data-isopen="{{ 'true' if item.open else 'false' }}">
+    <h{{ params.itemHeadingLevel }} class="tna-accordion__heading tna-heading-s">
+      {{ item.title }}
+    </h{{ params.itemHeadingLevel }}>
+    <div class="tna-accordion__body" id="{{ params.id }}-content-{{ loop.index }}">
       {%- if item.text %}
         <p>{{ item.text }}</p>
       {%- else %}
         {{ item.body | safe }}
       {%- endif %}
     </div>
-  </details>
+  </div>
   {%- endfor %}
 </div>
 {% endmacro %}

tna_frontend_jinja/templates/components/breadcrumbs/macro.html

@@ -4,7 +4,7 @@
   {%- set containerClasses = containerClasses + ['tna-breadcrumbs--no-collapse'] -%}
 {%- endif -%}
 {%- set classes = ' '.join(containerClasses) -%}
-<nav class="tna-breadcrumbs{% if classes %} {{ classes }}{% endif %}" data-module="tna-breadcrumbs" aria-label="Breadcrumb" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<nav class="tna-breadcrumbs{% if classes %} {{ classes }}{% endif %}" data-module="tna-breadcrumbs" aria-label="Breadcrumb" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <ol class="tna-breadcrumbs__list" {%- if params.structuredData %} itemscope itemtype="https://schema.org/BreadcrumbList"{% endif %}>
   {%- for item in params['items'] -%}
     <li class="tna-breadcrumbs__item" {%- if params.structuredData %} itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"{% endif %}>

tna_frontend_jinja/templates/components/button/macro.html

@@ -19,9 +19,11 @@
   {%- set buttonClasses = buttonClasses + ['tna-button--icon-right'] -%}
 {%- endif -%}
 {%- set classes = ' '.join(buttonClasses) -%}
-<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ classes }}"{%- if params.buttonElement %} type="{{ params.buttonType or 'button' }}"{%- endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ classes }}"{%- if params.buttonElement %} type="{{ params.buttonType or 'button' }}"{%- endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   {% if params.icon -%}
   <i class="fa-solid fa-{{ params.icon }}" aria-hidden="true"></i>
+  {% elif params.iconSvg -%}
+  {{ params.iconSvg | safe }}
   {% endif -%}
   {{ params.text }}
 </{{ 'button' if params.buttonElement else 'a' }}>

tna_frontend_jinja/templates/components/card/macro.html

@@ -12,14 +12,14 @@
   {%- set containerClasses = containerClasses + ['tna-background-accent'] -%}
 {%- endif -%}
 {%- set classes = ' '.join(containerClasses) -%}
-<{{ htmlElement }} class="tna-card{% if classes %} {{ classes }}{% endif %}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<{{ htmlElement }} class="tna-card{% if classes %} {{ classes }}{% endif %}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <div class="tna-card__inner">
   {%- if params.supertitle %}
     <hgroup class="tna-hgroup-{{ params.headingSize or 'm' }} tna-card__heading">
       <p class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</p>
       <h{{ params.headingLevel }} class="tna-hgroup__title">
         {%- if params.href %}
-        <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- if params.hrefAttributes %}{%- for attribute, value in params.hrefAttributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>{{ params.title }}</a>
+        <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- if params.hrefAttributes %}{%- for attribute, value in params.hrefAttributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>{{ params.title }}</a>
         {%- else %}
         {{ params.title }}
         {%- endif %}
@@ -28,15 +28,15 @@
   {%- else %}
     <h{{ params.headingLevel }} class=" tna-heading-{{ params.headingSize or 'm' }} tna-card__heading">
       {%- if params.href %}
-      <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- if params.hrefAttributes %}{%- for attribute, value in params.hrefAttributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>{{ params.title }}</a>
+      <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- if params.hrefAttributes %}{%- for attribute, value in params.hrefAttributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>{{ params.title }}</a>
       {%- else %}
       {{ params.title }}
       {%- endif %}
     </h{{ params.headingLevel }}>
   {%- endif %}
   {%- if params.imageSrc %}
     {%- if params.href %}
-    <a href="{{ params.href }}" class="tna-card__image-container{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" tabindex="-1" {%- if params.hrefAttributes %}{%- for attribute, value in params.hrefAttributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+    <a href="{{ params.href }}" class="tna-card__image-container{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" tabindex="-1" {%- if params.hrefAttributes %}{%- for attribute, value in params.hrefAttributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
     {%- else %}
     <div class="tna-card__image-container">
     {%- endif %}
@@ -85,7 +85,7 @@
   {%- if params.actions %}
     <div class="tna-card__actions">
     {%- for item in params.actions %}
-      <a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- if item.attributes %}{% for attribute, value in item.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+      <a href="{{ item.href }}" class="tna-card__action{% if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- if item.attributes %}{% for attribute, value in item.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
         {{ item.text }}
       </a>
     {%- endfor %}

tna_frontend_jinja/templates/components/checkboxes/macro.html

@@ -3,7 +3,7 @@
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses + ['tna-form__group--inline'] -%}
 {%- endif -%}
-<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ ' '.join(containerClasses) }}" {%- if params.formGroupAttributes %}{% for attribute, value in params.formGroupAttributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ ' '.join(containerClasses) }}" {%- if params.formGroupAttributes %}{% for attribute, value in params.formGroupAttributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}>
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
@@ -31,8 +31,8 @@
   <div class="tna-checkboxes__item">
     <input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"
     {%- if item.checked %} checked{% endif %}
-    {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-    {%- if extraAttributes %}{% for attribute, value in extraAttributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+    {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+    {%- if extraAttributes %}{% for attribute, value in extraAttributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
     <label for="{{ params.id }}-{{ item.value }}" class="tna-checkboxes__item-label">
       {{ item.text }}
     </label>

tna_frontend_jinja/templates/components/compound-filters/macro.html

@@ -1,6 +1,6 @@
 {% macro tnaCompoundFilters(params) %}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<ul class="tna-compound-filters {{ containerClasses | join(' ') }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<ul class="tna-compound-filters {{ containerClasses | join(' ') }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   {%- for item in params['items'] -%}
   <li class="tna-compound-filters__item">
     <span class="tna-compound-filters__label">{{ item.label }}</span>

tna_frontend_jinja/templates/components/cookie-banner/macro.html

@@ -2,7 +2,7 @@
 {% from "components/button/macro.html" import tnaButton %}
 
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<section class="tna-cookie-banner {{ ' '.join(containerClasses) }}" data-module="tna-cookie-banner" data-policies="{{ params.policies if params.policies }}" data-preferenceskey="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policieskey="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ 'true' if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %} hidden>
+<section class="tna-cookie-banner {{ ' '.join(containerClasses) }}" data-module="tna-cookie-banner" data-policies="{{ params.policies if params.policies }}" data-preferenceskey="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policieskey="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ 'true' if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %} hidden>
   <div class="tna-container">
     <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt">
       <h2 class="tna-heading-m">This website uses cookies</h2>

tna_frontend_jinja/templates/components/date-input/macro.html

@@ -3,7 +3,7 @@
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses + ['tna-form__group--inline'] -%}
 {%- endif -%}
-<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <fieldset class="tna-form__fieldset"{%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %} role="group">
     <legend class="tna-form__legend">
       <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">

tna_frontend_jinja/templates/components/date-search/macro.html

@@ -3,7 +3,7 @@
 {%- if params.inline -%}
   {%- set containerClasses = containerClasses + ['tna-form__group--inline'] -%}
 {%- endif -%}
-<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<div class="tna-form__group{% if params.error %} tna-form__group--error{% endif %} {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <div class="tna-form__group-contents">
     <h{{ params.headingLevel }} class="tna-form__heading tna-form__heading--{{ params.headingSize or 'm' }}">
       <label class="tna-form__label" for="{{ params.id }}">
@@ -29,6 +29,6 @@
 {%- set inputClasses = [params.classes] if params.classes else [] -%}
 <input type="date" id="{{ params.id }}" class="tna-date-search{% if params.maxWidth %} tna-date-search--max-width{% endif %} {{ inputClasses | join(' ') }}" name="{{ params.name }}" value="{{ params.value }}"
 {%- if params.hint or params.error %} aria-describedby="{%- if params.hint -%}{{ params.id }}-hint{%- endif %} {% if params.error -%}{{ params.id }}-error{%- endif -%}"{%- endif %}
-{%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-{%- if extraAttributes %}{% for attribute, value in extraAttributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+{%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+{%- if extraAttributes %}{% for attribute, value in extraAttributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
 {% endmacro %}

tna_frontend_jinja/templates/components/details/macro.html

@@ -1,7 +1,7 @@
 {% macro tnaDetails(params) %}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- set classes = containerClasses | join(' ') -%}
-<div class="tna-details{% if classes %} {{ classes }}{% endif %}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+<div class="tna-details{% if classes %} {{ classes }}{% endif %}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
   <details class="tna-details__details"{%- if params.open %} open{% endif %}>
     <summary class="tna-details__summary">{{ params.title }}</summary>
     <div class="tna-details__content">