From 63c5de531775ec04916fc9fd79e2543716dbd6d3 Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <mail@andrewhosgood.com>
Date: Wed, 22 May 2024 12:20:37 +0100
Subject: [PATCH] Lazy load card images (#123)

* Allow card images to be loaded lazily

* Update CHANGELOG.md
---
 CHANGELOG.md                                       |  4 ++++
 .../components/card/card.stories.js                |  3 +++
 src/nationalarchives/components/card/fixtures.json | 14 ++++++++++++++
 .../components/card/macro-options.json             |  6 ++++++
 src/nationalarchives/components/card/template.njk  |  2 +-
 5 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d001cc24..8ba6cf3d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,11 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - New accordion and details components added
+- Card images can be loaded lazily with `lazyImage`
 
 ### Changed
 ### Deprecated
 ### Removed
 ### Fixed
+
+- Small images in hero components on smaller devices now fill the width of the component
+
 ### Security
 
 ## [0.1.54](https://github.com/nationalarchives/tna-frontend/compare/v0.1.53...v0.1.54) - 2024-05-13
diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
index c4bf195c..9da9d52c 100644
--- a/src/nationalarchives/components/card/card.stories.js
+++ b/src/nationalarchives/components/card/card.stories.js
@@ -16,6 +16,7 @@ const argTypes = {
   imageHeight: { control: { type: "number", min: 1 } },
   imageType: { control: "text" },
   imageSources: { control: "object" },
+  lazyImage: { control: "boolean" },
   label: { control: "text" },
   labelColour: {
     control: "inline-radio",
@@ -63,6 +64,7 @@ const Template = ({
   imageHeight,
   imageType,
   imageSources,
+  lazyImage,
   label,
   labelColour,
   meta,
@@ -91,6 +93,7 @@ const Template = ({
       imageHeight,
       imageType,
       imageSources,
+      lazyImage,
       label,
       labelColour,
       meta,
diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
index e4d93a40..fd8528eb 100644
--- a/src/nationalarchives/components/card/fixtures.json
+++ b/src/nationalarchives/components/card/fixtures.json
@@ -94,6 +94,20 @@
       },
       "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
     },
+    {
+      "name": "with lazily loaded image",
+      "options": {
+        "title": "Card title",
+        "headingLevel": 3,
+        "imageSrc": "https://loremflickr.com/640/360",
+        "imageAlt": "A placeholder image",
+        "imageWidth": 640,
+        "imageHeight": 360,
+        "lazyImage": true,
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" loading=\"lazy\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
+    },
     {
       "name": "with image and alternative sources",
       "options": {
diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json
index 8cf0d5dc..2adf92a6 100644
--- a/src/nationalarchives/components/card/macro-options.json
+++ b/src/nationalarchives/components/card/macro-options.json
@@ -110,6 +110,12 @@
       }
     ]
   },
+  {
+    "name": "lazyImage",
+    "type": "boolean",
+    "required": false,
+    "description": "If true, make the image a lazily-loaded image."
+  },
   {
     "name": "label",
     "type": "string",
diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
index 86e45fd1..8692281a 100644
--- a/src/nationalarchives/components/card/template.njk
+++ b/src/nationalarchives/components/card/template.njk
@@ -46,7 +46,7 @@
         {%- endfor %}
         <source srcset="{{ params.imageSrc }}" type="{{ params.imageType if params.imageType else 'image/jpeg' }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
         {%- endif %}
-        <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+        <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}"{%- if params.lazyImage %} loading="lazy"{% endif %}>
       </picture>
       {%- if params.label %}
       <div class="tna-chip{% if params.labelColour %} tna-chip--{{ params.labelColour }}{% endif %} tna-card__image-label">