v0.1.26

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.25...HEAD)
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.26...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.26](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.25...v0.1.26) - 2024-05-13
+
+### Changed
+
+- Upgraded TNA Frontend to `v0.1.53`
+
 ## [0.1.25](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.24...v0.1.25) - 2024-04-04
 
 ### 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.26`              | `v0.1.53`                                  |
 | `0.1.25`              | `v0.1.51`, `v0.1.52`                       |
 | `0.1.23`, `0.1.24`    | `v0.1.50`                                  |
 | `0.1.21`, `0.1.22`    | `v0.1.49`                                  |

package.json

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

tna_frontend_jinja/templates/components/hero/macro.html

@@ -7,10 +7,13 @@
 {%- elif params.style == "accent" -%}
   {%- set containerClasses = containerClasses + ['tna-hero--accent'] -%}
 {%- endif -%}
-{%- if params.shifted -%}
-  {%- set containerClasses = containerClasses + ['tna-hero--shifted'] -%}
+{%- if params.layout == "shift" -%}
+  {%- set containerClasses = containerClasses + ['tna-hero--shift'] -%}
+{%- elif params.layout == "split" -%}
+  {%- set containerClasses = containerClasses + ['tna-hero--split'] -%}
 {%- 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 %}>
+{% set hasContent = params.title or params.body or params.text %}
+<{{ 'header' if hasContent 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">
@@ -33,15 +36,33 @@
       {%- endif -%}
       <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
     </picture>
-    {%- if params.content -%}
+    {%- if hasContent -%}
     <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">
-          {{ params.content | safe }}
+          {%- if params.title %}
+          {%- if params.supertitle %}
+          <hgroup class="tna-hgroup-{{ params.headingSize or 'xl' }} tna-hero__heading">
+            <h{{ params.headingLevel or '1' }} class="tna-hgroup__title">
+              <span class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</span>
+              {{ params.title }}
+            </h{{ params.headingLevel or '1' }}>
+          </hgroup>
+          {%- else %}
+          <h{{ params.headingLevel or '1' }} class=" tna-heading-{{ params.headingSize or 'xl' }} tna-hero__heading">
+            {{ params.title }}
+          </h{{ params.headingLevel or '1' }}>
+          {%- endif %}
+          {%- endif %}
+          {%- if params.text %}
+            <p>{{ params.text }}</p>
+          {%- else %}
+            {{ params.body | safe }}
+          {%- endif %}
         </div>
       </div>
     </div>
     {%- endif -%}
   </figure>
-</{{ 'header' if params.content else 'div' }}>
+</{{ 'header' if hasContent else 'div' }}>
 {% endmacro %}