Allow responsive images in hero and card component

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Chips can be made plain with `tna-chip--plain`
 - Visual regression tests can now be run in the Storyobok UI
 - Allow right/left margins to be added to columns
+- Hero components can have different image sources with `<source>` elements
 
 ### Changed
 
@@ -37,6 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Font paths fixed for prototype kit, stylesheets and JavaScript loading
 - Better alignment of site name next to logo in header
 - Fixed right/left padding of logo and hamburger on small devices
+- Card image type is now variable when using sources
 
 ### Security
 

src/nationalarchives/components/card/card.stories.js

@@ -11,6 +11,7 @@ const argTypes = {
   imageAlt: { control: "text" },
   imageWidth: { control: { type: "number", min: 1 } },
   imageHeight: { control: { type: "number", min: 1 } },
+  imageType: { control: "text" },
   imageSources: { control: "object" },
   label: { control: "text" },
   meta: { control: "object" },
@@ -47,6 +48,7 @@ const Template = ({
   imageAlt,
   imageWidth,
   imageHeight,
+  imageType,
   imageSources,
   label,
   meta,
@@ -70,6 +72,7 @@ const Template = ({
       imageAlt,
       imageWidth,
       imageHeight,
+      imageType,
       imageSources,
       label,
       meta,
@@ -270,7 +273,7 @@ Sources.args = {
   imageHeight: 404,
   imageSources: [
     {
-      imageSrc: "https://www.gstatic.com/webp/gallery/2.webp",
+      src: "https://www.gstatic.com/webp/gallery/2.webp",
       type: "image/webp",
     },
   ],

src/nationalarchives/components/card/macro-options.json

@@ -54,6 +54,12 @@
     "required": false,
     "description": "The height of the image in pixels."
   },
+  {
+    "name": "imageType",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "imageSources",
     "type": "array",

src/nationalarchives/components/card/template.njk

@@ -38,10 +38,10 @@
     {%- endif -%}
       <picture class="tna-card__image">
         {%- if params.imageSources -%}
-        {%- for source in params.imageSources -%}
+        {%- for source in params.imageSources %}
         <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}">
-        {%- endfor -%}
-        <source srcset="{{ params.imageSrc }}" type="image/jpeg" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+        {%- 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 }}">
       </picture>

src/nationalarchives/components/hero/hero.scss

@@ -83,7 +83,7 @@
 
     @include colour.invert;
 
-    // @include typography.relative-font-size(16);
+    @include typography.relative-font-size(16);
   }
 
   &__image {
@@ -94,7 +94,12 @@
     inset: 0;
     z-index: 1;
 
-    object-fit: cover;
+    img {
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
   }
 
   &__details[open] &__details-summary {
@@ -234,6 +239,10 @@
       position: static;
 
       order: 1;
+
+      img {
+        height: auto;
+      }
     }
 
     &__inner {

src/nationalarchives/components/hero/hero.stories.js

@@ -8,14 +8,13 @@ const argTypes = {
   heading: { control: "text" },
   body: { control: "text" },
   text: { control: "text" },
-
   imageSrc: { control: { type: "file", accept: ".jpg" } },
   imageAlt: { control: "text" },
   imageWidth: { control: { type: "number", min: 1 } },
   imageHeight: { control: { type: "number", min: 1 } },
-
+  imageType: { control: "text" },
+  imageSources: { control: "object" },
   imageCaption: { control: "text" },
-
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -39,6 +38,8 @@ const Template = ({
   imageAlt,
   imageWidth,
   imageHeight,
+  imageType,
+  imageSources,
   imageCaption,
   classes,
   attributes,
@@ -52,6 +53,8 @@ const Template = ({
       imageAlt,
       imageWidth,
       imageHeight,
+      imageType,
+      imageSources,
       imageCaption,
       classes,
       attributes,
@@ -120,6 +123,27 @@ CaptionWithNoHeading.args = {
   classes: "tna-hero--demo",
 };
 
+export const Sources = Template.bind({});
+Sources.args = {
+  heading: "Title",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  imageSources: [
+    {
+      src: "https://www.gstatic.com/webp/gallery/2.webp",
+      type: "image/webp",
+      media: "(max-width: 48em)",
+      width: 550,
+      height: 404,
+    },
+  ],
+  classes: "tna-hero--demo",
+};
+
 export const Mobile = Template.bind({});
 Mobile.parameters = {
   viewport: {

src/nationalarchives/components/hero/macro-options.json

@@ -41,6 +41,50 @@
     "required": true,
     "description": ""
   },
+  {
+    "name": "imageType",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "imageSources",
+    "type": "array",
+    "required": true,
+    "description": "Alternative sources of the image which can include WebP files.",
+    "params": [
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "type",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "media",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
   {
     "name": "imageCaption",
     "type": "string",

src/nationalarchives/components/hero/template.njk

@@ -13,7 +13,15 @@
       </details>
     </figcaption>
     {%- endif -%}
-    <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" class="tna-hero__image" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+    <picture class="tna-hero__image">
+      {%- if params.imageSources -%}
+      {%- for source in params.imageSources %}
+      <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}"{% if source.media %} media="{{ source.media }}"{% endif %}>
+      {%- 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 }}">
+    </picture>
     {%- if params.heading -%}
     <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">