Update hero caption to allow HTML (#65)

* Update hero caption to allow HTML * Update CHANGELOG.md
nationalarchives · Dec 14, 2023 · 9774ef5 · 9774ef5
1 parent 3ffadc3
commit 9774ef5
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,14 +16,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added XML and DOCTYPE to `src/nationalarchives/assets/images/tna-square-logo.svg`
 - Removed `fa-fw` from some icons
-- Message component has a `<div>` rather than a `<p>` for the message which allows `<p>` tags as content
+- Message component has a `<div>` rather than a `<p>` for the message which allows HTML as content
+- Hero component caption allows HTML rather than assuming text
 - Picture elements have a tinted background, a maximum height for images and break out of the grid on tiny devices
+- Changed hero caption icon text from "Image caption" to "About this image"
 - Updated the cookie banner attribute `data-policies-key` to `data-policieskey`
 
 ### Deprecated
 ### Removed
 
-- Picture elements no longer have `translation` and `transcript` options
+- Picture elements no longer have `translation` and `transcript` options (see "Added" above for alternative)
 
 ### Fixed
 ### Security

diff --git a/src/nationalarchives/components/hero/fixtures.json b/src/nationalarchives/components/hero/fixtures.json
@@ -49,7 +49,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><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\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><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\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
       "hidden": false
     },
     {
@@ -61,7 +61,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
       "hidden": false
     },
     {
@@ -85,7 +85,7 @@
         "imageType": "image/png",
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Gov.uk_logo.svg/250px-Gov.uk_logo.svg.png\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Gov.uk_logo.svg/250px-Gov.uk_logo.svg.png\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
       "hidden": false
     },
     {
@@ -103,7 +103,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
       "hidden": false
     },
     {
@@ -122,7 +122,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
       "hidden": false
     },
     {
@@ -142,7 +142,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>",
       "hidden": false
     },
     {
@@ -156,7 +156,7 @@
         "imageCaption": "An interesting photo by a famous photographer ©2023",
         "classes": "hero__test-class"
       },
-      "html": "<header class=\"tna-hero hero__test-class\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><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\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero hero__test-class\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><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\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
       "hidden": false
     },
     {
@@ -172,7 +172,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<header class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>mage caption</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><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\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "html": "<header class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><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\"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
       "hidden": false
     }
   ]

diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
@@ -74,7 +74,7 @@
   &__information {
     width: 45rem;
     max-width: 75vw;
-    padding: 0.5rem 3.25rem 0.5rem 1rem;
+    padding: 0.625rem 3.25rem 0.625rem 1rem;
 
     position: absolute;
     right: 0;

diff --git a/src/nationalarchives/components/hero/template.njk b/src/nationalarchives/components/hero/template.njk
@@ -5,11 +5,9 @@
     <figcaption class="tna-hero__caption">
       <details class="tna-hero__details">
         <summary class="tna-hero__details-summary">
-          <span class="tna-hero__details-summary-icon">I</span>mage caption
+          About this <span class="tna-hero__details-summary-icon">i</span>mage
         </summary>
-        <div class="tna-hero__information">
-          <p>{{ params.imageCaption }}</p>
-        </div>
+        <div class="tna-hero__information">{{ params.imageCaption | safe }}</div>
       </details>
     </figcaption>
     {%- endif -%}