From 46b953f194180502e027661f0a2309b893415268 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Mon, 22 Aug 2022 15:09:57 +0100
Subject: [PATCH] altText for PhotoPack

---
 .../FeaturePhoto/FeaturePhoto.svelte          |  2 +-
 .../PhotoPack/PhotoPack.stories.svelte        | 32 +++++++++++++++++++
 src/components/PhotoPack/PhotoPack.svelte     | 15 +++++++++
 .../PhotoPack/stories/docs/missingAltText.md  |  1 +
 4 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/components/PhotoPack/stories/docs/missingAltText.md

diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index a3fc0f74..b4bb51db 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -83,7 +83,7 @@
       <figcaption>{caption}</figcaption>
     {/if}
     {#if !altText}
-      <div class="alt-warning">Missing altText</div>
+      <div class="alt-warning">altText</div>
     {/if}
   </figure>
 </Block>
diff --git a/src/components/PhotoPack/PhotoPack.stories.svelte b/src/components/PhotoPack/PhotoPack.stories.svelte
index 1db22aa2..c9c21236 100644
--- a/src/components/PhotoPack/PhotoPack.stories.svelte
+++ b/src/components/PhotoPack/PhotoPack.stories.svelte
@@ -5,6 +5,8 @@
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore
   import quickitDocs from './stories/docs/quickit.md?raw';
+  // @ts-ignore
+  import missingAltTextDocs from './stories/docs/missingAltText.md?raw';
 
   import PhotoPack from './PhotoPack.svelte';
   import { getPhotoPackPropsFromDoc } from './docProps';
@@ -100,6 +102,25 @@
       { Breakpoint: '450', Rows: '1, 2, 2' },
     ],
   };
+
+  const altTextImages = [
+    {
+      src: 'https://via.placeholder.com/1024x768.jpg',
+      altText: 'alt text',
+      caption:
+        'A residential building destroyed by shelling in the settlement of Borodyanka in the Kyiv region, Ukraine March 3, 2022. Picture taken with a drone. REUTERS/Maksim Levin',
+      maxHeight: 400,
+    },
+    {
+      src: 'https://via.placeholder.com/1640x1180.jpg',
+      altText: '',
+      caption:
+        'Surveillance footage shows a missile hitting a residential building in Kyiv, Ukraine, February 26, 2022, in this still image taken from a video obtained by REUTERS',
+    },
+  ];
+  const altTextLayouts = [
+    { breakpoint: 450, rows: [2] },
+  ];
 </script>
 
 <Meta {...meta} />
@@ -123,3 +144,14 @@
   {...withStoryDocs(quickitDocs)}
   args="{getPhotoPackPropsFromDoc(quickItBlock)}"
 />
+
+<Story
+  name="Mising altText"
+  args="{{
+    width: 'wide',
+    captionWidth: 'normal',
+    images: altTextImages,
+    layouts: altTextLayouts,
+  }}"
+  {...withStoryDocs(missingAltTextDocs)}
+/>
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 36a7e910..476802b0 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -102,6 +102,9 @@
               alt="{img.altText}"
               style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
             />
+            {#if !img.altText}
+              <div class="alt-warning">altText</div>
+            {/if}
           </figure>
         {/each}
       </div>
@@ -139,12 +142,24 @@
         flex: 1;
         margin: 0;
         padding: 0;
+        position: relative;
         img {
           margin: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
         }
+        div.alt-warning {
+          font-family: $font-family-display;
+          padding: 5px 10px;
+          background-color: red;
+          color: white;
+          position: absolute;
+          top: 0;
+          right: 0;
+          font-size: 14px;
+          line-height: 16px;
+        }
       }
     }
   }
diff --git a/src/components/PhotoPack/stories/docs/missingAltText.md b/src/components/PhotoPack/stories/docs/missingAltText.md
new file mode 100644
index 00000000..93304de2
--- /dev/null
+++ b/src/components/PhotoPack/stories/docs/missingAltText.md
@@ -0,0 +1 @@
+If any of your images is missing `altText` a small warning will overlay the photo.