v0.1.25

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.24...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.25...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.25](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.24...v0.1.25) - 2024-04-04
+
+### Changed
+
+- Upgraded TNA Frontend to `v0.1.51`
+
 ## [0.1.24](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.23...v0.1.24) - 2024-03-28
 
 ### Fixed

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.25`              | `v0.1.51`                                  |
 | `0.1.23`, `0.1.24`    | `v0.1.50`                                  |
 | `0.1.21`, `0.1.22`    | `v0.1.49`                                  |
 | `0.1.20`              | `v0.1.48`                                  |

package.json

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

tna_frontend_jinja/templates/components/card/macro.html

@@ -19,7 +19,7 @@
       <h{{ params.headingLevel }} class="tna-hgroup__title">
         <span class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</span>
         {%- if params.href %}
-        <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ 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 }}="{{ value }}"{% endfor %}{% endif %}>{{ params.title }}</a>
         {%- else %}
         {{ params.title }}
         {%- endif %}
@@ -28,15 +28,15 @@
   {%- else %}
     <h{{ params.headingLevel }} class=" tna-heading-{{ params.headingSize or 's' }} tna-card__heading">
       {%- if params.href %}
-      <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ 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 }}="{{ value }}"{% 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" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    <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 %}>
     {%- else %}
     <div class="tna-card__image-container">
     {%- endif %}
@@ -50,7 +50,7 @@
         <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
       </picture>
       {%- if params.label %}
-      <div class="tna-chip tna-card__image-label">
+      <div class="tna-chip{% if params.labelColour %} tna-chip--{{ params.labelColour }}{% endif %} tna-card__image-label">
         {{ params.label }}
       </div>
       {%- endif %}

tna_frontend_jinja/templates/components/checkboxes/macro.html

@@ -26,7 +26,7 @@
 {% endmacro %}
 
 {% macro tnaCheckboxesElement(params, extraAttributes) %}
-<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}">
+<div class="tna-checkboxes{% if params.small or params.inline %} tna-checkboxes--small{% endif %}{% if params.inline %} tna-checkboxes--inline{% endif %}" id="{{ params.id }}">
   {%- for item in params['items'] %}
   <div class="tna-checkboxes__item">
     <input type="checkbox" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"

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

@@ -20,7 +20,7 @@
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
-    <div class="tna-date-input{% if params.inline %} tna-date-input--inline{% endif %}">
+    <div class="tna-date-input{% if params.inline %} tna-date-input--inline{% endif %}" id="{{ params.id }}">
       <div class="tna-date-input__item">
         <label for="{{ params.id }}-day" class="tna-date-input__item-label">
           Day

tna_frontend_jinja/templates/components/hero/macro.html

@@ -1,11 +1,21 @@
 {% macro tnaHero(params) %}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<{{ 'header' if params.heading else 'div' }} class="tna-hero {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
+{%- if params.style == "contrast" -%}
+  {%- set containerClasses = containerClasses + ['tna-hero--contrast'] -%}
+{%- elif params.style == "tint" -%}
+  {%- set containerClasses = containerClasses + ['tna-hero--tint'] -%}
+{%- elif params.style == "accent" -%}
+  {%- set containerClasses = containerClasses + ['tna-hero--accent'] -%}
+{%- endif -%}
+{%- if params.shifted -%}
+  {%- set containerClasses = containerClasses + ['tna-hero--shifted'] -%}
+{%- endif -%}
+<{{ 'header' if params.content else 'div' }} class="tna-hero {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
   <figure class="tna-hero__figure">
     {%- if params.imageCaption -%}
     <figcaption class="tna-hero__caption">
       <details class="tna-hero__details">
-        <summary class="tna-hero__details-summary">
+        <summary class="tna-hero__details-summary" title="About this image">
           About this <span class="tna-hero__details-summary-icon">i</span>mage
         </summary>
         <div class="tna-hero__information">
@@ -23,24 +33,15 @@
       {%- endif -%}
       <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
     </picture>
-    {%- if params.heading -%}
+    {%- if params.content -%}
     <div class="tna-container tna-hero__inner">
       <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
         <div class="tna-hero__content-inner">
-        {%- if params.heading -%}
-          <h1 class="tna-heading-xl tna-hero__heading">
-            {{ params.heading }}
-          </h1>
-        {%- endif -%}
-        {%- if params.text -%}
-          <p>{{ params.text }}</p>
-        {%- elif params.body -%}
-          {{ params.body | safe }}
-        {%- endif -%}
+          {{ params.content | safe }}
         </div>
       </div>
     </div>
     {%- endif -%}
   </figure>
-</{{ 'header' if params.heading else 'div' }}>
+</{{ 'header' if params.content else 'div' }}>
 {% endmacro %}

tna_frontend_jinja/templates/components/radios/macro.html

@@ -20,7 +20,7 @@
       <span class="tna-!--visually-hidden">Error:</span> {{ params.error.text }}
     </p>
     {%- endif %}
-    <div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}">
+    <div class="tna-radios{% if params.small or params.inline %} tna-radios--small{% endif %}{% if params.inline %} tna-radios--inline{% endif %}" id="{{ params.id }}">
       {%- for item in params['items'] %}
       <div class="tna-radios__item">
         <input type="radio" id="{{ params.id }}-{{ item.value }}" value="{{ item.value }}" name="{{ params.name }}"{% if params.selected and item.value == params.selected %} checked{% endif %}>

tna_frontend_jinja/templates/components/warning/macro.html

@@ -1,10 +1,10 @@
 {% macro tnaWarning(params) %}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-warning {{ ' '.join(containerClasses) }}" {%- if params.attributes %}{% for attribute, value in params.attributes.items() %} {{ attribute }}="{{ value }}"{% endfor %}{% endif %}>
-  <h{{ params.headingLevel }} class="tna-warning__heading tna-visually-hidden">
-    {{ params.heading or 'Important information' }}
+  <h{{ params.headingLevel }} class="tna-warning__heading">
+    <span class="tna-visually-hidden">{{ params.heading or 'Important information' }}</span>
+    <span class="tna-warning__heading-icon" aria-hidden="true">!</span>
   </h{{ params.headingLevel }}>
-  <span class="tna-warning__heading-icon" aria-hidden="true">!</span>
   <div class="tna-warning__body">
     {{ params.body | safe }}
   </div>