v0.2.0

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.34...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.2.0...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.0](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.34...v0.2.0) - 2024-07-15
+
+### Changed
+
+- Upgraded TNA Frontend to `v0.2.0`
+
 ## [0.1.34](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.33...v0.1.34) - 2024-07-11
 
 ### Changed

package.json

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

test/app/components/routes.py

@@ -65,14 +65,9 @@ def error_summary():
     return render_component("error-summary.html")
 
 
-@bp.route("/featured-records")
-def featured_records():
-    return render_component("featured-records.html")
-
-
-@bp.route("/files")
-def files():
-    return render_component("files.html")
+@bp.route("/files-list")
+def files_list():
+    return render_component("files-list.html")
 
 
 @bp.route("/footer")
@@ -135,26 +130,21 @@ def radios():
     return render_component("radios.html")
 
 
+@bp.route("/records-list")
+def records_list():
+    return render_component("records-list.html")
+
+
 @bp.route("/search-field")
 def search_field():
     return render_component("search-field.html")
 
 
-@bp.route("/search-filters")
-def search_filters():
-    return render_component("search-filters.html")
-
-
 @bp.route("/select")
 def select():
     return render_component("select.html")
 
 
-@bp.route("/sensitive-image")
-def sensitive_image():
-    return render_component("sensitive-image.html")
-
-
 @bp.route("/sidebar")
 def sidebar():
     return render_component("sidebar.html")

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

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

test/app/components/test-templates/records-list.html

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

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

@@ -4,7 +4,7 @@
   {%- 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 }}{% 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">
+  <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' }}">
         {{ params.label }}

tna_frontend_jinja/templates/components/files-list/macro.html

@@ -0,0 +1,35 @@
+{% macro tnaFilesList(params) %}
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- set classes = containerClasses | join(' ') -%}
+<div class="tna-files-list{% if classes %} {{ classes }}{% endif %}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}{% if value != '' %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="tna-files-list__icon"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
+  <ul class="tna-files-list__items">
+    {%- for item in params['items'] %}
+    <li class="tna-files-list__item">
+      <p class="tna-files-list__item-title">
+        <a href="{{ item.href }}" class="tna-files-list__link">{{ item.text }}</a>
+      </p>
+      <dl class="tna-dl-chips tna-dl-chips--plain tna-files-list__item-meta">
+        <dt>File type</dt>
+        <dd>
+          <span class="tna-dl-chips__item">{{ item.fileType }}</span>
+        </dd>
+        <dt>File size</dt>
+        <dd>
+          <span class="tna-dl-chips__item">{{ item.fileSize }}</span>
+        </dd>
+        {% if item.fileExtent %}
+        <dt>Extent</dt>
+        <dd>
+          <span class="tna-dl-chips__item">{{ item.fileExtent }}</span>
+        </dd>
+        {% endif %}
+      </dl>
+      {% if item.description %}
+      <p class="tna-files-list__item-description">{{ item.description }}</p>
+      {% endif %}
+    </li>
+    {%- endfor %}
+  </ul>
+</div>
+{% endmacro %}

tna_frontend_jinja/templates/components/gallery/macro.html

@@ -50,7 +50,7 @@
   </div>
   <div class="tna-gallery__items">
     {%- for item in params['items'] %}
-    <div class="tna-gallery__item" id="{{ params.id }}-item-{{ loop.index }}" aria-labeledby="{{ params.id }}-item-{{ loop.index }}-tab" role="tabpanel">
+    <div class="tna-gallery__item" id="{{ params.id }}-item-{{ loop.index }}" aria-labelledby="{{ params.id }}-item-{{ loop.index }}-tab" role="tabpanel">
       <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">
@@ -66,18 +66,22 @@
     {%- endfor %}
   </div>
   <div class="tna-gallery__navigation-buttons" hidden>
-    <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-prev">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 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.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>
+    <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-prev" aria-label="Previous image">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" aria-hidden="true"><!--!Font Awesome Free 6.5.2 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.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>
+      <span class="tna-visually-hidden">Show previous image</span>
     </button>
-    <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-next">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
+    <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-next" aria-label="Next image">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" aria-hidden="true"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
+      <span class="tna-visually-hidden">Show next image</span>
     </button>
   </div>
   <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" title="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 }}" aria-hidden>
+    <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 }}">
+      <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>
     </button>
     {%- endfor -%}
   </div>

tna_frontend_jinja/templates/components/picture/macro.html

@@ -13,7 +13,7 @@
   </div>
 {%- if params.information -%}
   <div class="tna-picture__transcript">
-  {%- if params.information|length > 1 -%}
+  {%- if params.information | length > 1 -%}
     {{ tnaTabs({
       'items': params.information
     }) }}

tna_frontend_jinja/templates/components/records-list/macro.html

@@ -0,0 +1,22 @@
+{% macro tnaRecordsList(params) %}
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<ul class="tna-records-list {{ ' '.join(containerClasses) }}" {%- 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-records-list__item">
+    {%- if item.imageSrc %}
+    <img src="{{ item.imageSrc }}" width="{{ item.imageWidth }}" height="{{ item.imageHeight }}" class="tna-records-list__image" alt="{{ item.imageAlt }}">
+    {%- endif %}
+    <dl class="tna-records-list__details">
+      <dt class="tna-records-list__collection-label tna-chip tna-chip--plain">From our collection</dt>
+      <dd class="tna-records-list__collection-description tna-chip tna-chip--plain">{{ item.collection }}</dd>
+      <dt class="tna-records-list__title-label">Title</dt>
+      <dd class="tna-records-list__title-description">
+        <a href="{{ item.href }}">{{ item.title }}</a>
+      </dd>
+      <dt class="tna-records-list__date-label">Date</dt>
+      <dd class="tna-records-list__date-description">{{ item.date }}</dd>
+    </dl>
+  </li>
+  {%- endfor %}
+</ul>
+{% endmacro %}