Merge branch 'main' of github.com:nationalarchives/tna-frontend

nationalarchives · May 22, 2024 · 4eb89b8 · 4eb89b8
2 parents bd31438 + 63c5de5
commit 4eb89b8
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">