From 1332a4f3c9ba1c1a3639adb1f2ab216b63d8adad Mon Sep 17 00:00:00 2001
From: Andrew Hosgood <andrew.hosgood@nationalarchives.gov.uk>
Date: Thu, 5 Oct 2023 10:05:46 +0100
Subject: [PATCH] Reduce all example image sizes

---
 .../components/card/card.stories.js           | 36 +++++++++----------
 .../components/hero/hero.stories.js           |  8 ++---
 .../components/picture/picture.stories.js     |  4 +--
 .../colour-schemes/colour-schemes.stories.js  | 14 ++++----
 4 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
index fcde1180..3547ecb2 100644
--- a/src/nationalarchives/components/card/card.stories.js
+++ b/src/nationalarchives/components/card/card.stories.js
@@ -94,8 +94,8 @@ Standard.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   htmlElement: "article",
@@ -110,8 +110,8 @@ Simple.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   htmlElement: "article",
   classes: "tna-card--demo",
@@ -127,8 +127,8 @@ Meta.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
   meta: [
     { text: "24th September 2023", icon: "calendar" },
@@ -150,8 +150,8 @@ Boxed.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   style: "boxed",
@@ -169,8 +169,8 @@ Accent.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   style: "accent",
@@ -187,8 +187,8 @@ Horizontal.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   actions: [
@@ -213,8 +213,8 @@ HorizontalBoxed.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   actions: [
@@ -240,8 +240,8 @@ HorizontalAccent.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   label: "New",
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   actions: [
@@ -350,8 +350,8 @@ Grid.args = {
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
-  imageWidth: 1996,
-  imageHeight: 1331,
+  imageWidth: 499,
+  imageHeight: 333,
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
   htmlElement: "article",
   classes: "tna-card--demo",
diff --git a/src/nationalarchives/components/hero/hero.stories.js b/src/nationalarchives/components/hero/hero.stories.js
index 16852d30..cddf62d4 100644
--- a/src/nationalarchives/components/hero/hero.stories.js
+++ b/src/nationalarchives/components/hero/hero.stories.js
@@ -42,8 +42,8 @@ Standard.args = {
   image: {
     src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
     alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
+    width: 499,
+    height: 333,
     information: "An interesting photo by a famous photographer ©2023",
   },
   classes: "tna-hero--demo",
@@ -84,8 +84,8 @@ TitleOnly.args = {
   image: {
     src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
     alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
+    width: 499,
+    height: 333,
   },
   classes: "tna-hero--demo",
 };
diff --git a/src/nationalarchives/components/picture/picture.stories.js b/src/nationalarchives/components/picture/picture.stories.js
index 3bbbbe9b..a75debf3 100644
--- a/src/nationalarchives/components/picture/picture.stories.js
+++ b/src/nationalarchives/components/picture/picture.stories.js
@@ -53,8 +53,8 @@ export const Standard = Template.bind({});
 Standard.args = {
   src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   alt: "The National Archives office",
-  width: 1996,
-  height: 1331,
+  width: 499,
+  height: 333,
   caption: "<p>This is a pretty image</p>",
   transcript: "<p>Lorem ipsum transcript</p>",
   translation: "<p>Lorem ipsum translation</p>",
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
index 2e885fd0..40e7f8a3 100644
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
+++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -46,8 +46,8 @@ const Template = ({ theme, accent }) => {
     imageSrc:
       "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
     imageAlt: "The National Archives office",
-    imageWidth: 1996,
-    imageHeight: 1331,
+    imageWidth: 499,
+    imageHeight: 333,
     label: "New",
     body: "<p>Card body</p>",
     actions: [
@@ -157,11 +157,13 @@ const Template = ({ theme, accent }) => {
       ${Hero({
         params: {
           heading: "Title",
+          body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
           image: {
             src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
             alt: "The National Archives office",
-            width: 1996,
-            height: 1331,
+            width: 499,
+            height: 333,
+            information: "An interesting photo by a famous photographer ©2023",
           },
           classes: "tna-hero--demo",
         },
@@ -487,8 +489,8 @@ const Template = ({ theme, accent }) => {
             params: {
               src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
               alt: "The National Archives office",
-              width: 1996,
-              height: 1331,
+              width: 499,
+              height: 333,
               caption: "<p>This is a pretty image</p>",
               transcript: "<p>Lorem ipsum transcript</p>",
               translation: "<p>Lorem ipsum translation</p>",