From 53aad54cd8b14199f26155296b2eeb8ad2eafac6 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 26 Mar 2025 09:12:22 -0700
Subject: [PATCH] fixes assets handling

---
 .../PhotoCarousel/PhotoCarousel.mdx           | 28 +++++++++--------
 .../PhotoCarousel.stories.svelte              | 17 +++++------
 .../PhotoCarousel/PhotoCarousel.svelte        | 30 +++++++++----------
 .../demo/{photos.json => images.json}         |  0
 4 files changed, 39 insertions(+), 36 deletions(-)
 rename src/components/PhotoCarousel/demo/{photos.json => images.json} (100%)

diff --git a/src/components/PhotoCarousel/PhotoCarousel.mdx b/src/components/PhotoCarousel/PhotoCarousel.mdx
index 718535df..d2ef465f 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.mdx
+++ b/src/components/PhotoCarousel/PhotoCarousel.mdx
@@ -39,7 +39,7 @@ With the Graphics Kit, you'll likely get your text value from an ArchieML doc...
 type: photo-carousel
 
 # List of photo data
-[.photos]
+[.images]
   # Photo 1
   src: 'images/myImage.jpg', # The source path can be a URL or a local path
   altText: 'A picture of...',
@@ -62,6 +62,8 @@ type: photo-carousel
 
 ... which you'll parse out of a ArchieML block object before passing to the `PhotoCarousel` component.
 
+> **Note:** If you're using local images files stored in your Graphics Kit project, prefix `assets` to the image source path, as in the example below.
+
 ```svelte
 <!-- App.svelte -->
 <script>
@@ -69,16 +71,18 @@ type: photo-carousel
   import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 
   import content from '$locales/en/content.json';
-
-  // @TODO - Update this doc once the util to derive `photos` with `assets` in the image src path is written and tested. See ticket: https://github.com/reuters-graphics/bluprint_graphics-kit/issues/164
 </script>
 
 {#each content.blocks as block}
   {#if block.type === 'photo-carousel'}
-    <PhotoCarousel {block.photos}  />
+    <PhotoCarousel
+      images={block.images.map((img) => ({
+        ...img,
+        src: `${assets}/${img.src}`,
+      }))}
+    />
   {/if}
 {/each}
-
 ```
 
 <Canvas of={PhotoCarouselStories.Demo} />
@@ -88,15 +92,15 @@ type: photo-carousel
 To customise the credit and/or caption style, use the `credit` and `caption` [snippets](https://svelte.dev/docs/svelte/snippet) and pass `photo` as an argument.
 
 ```svelte
-<PhotoCarousel {photos}>
-  <!-- Pass `photo` and use the `photo.credit` string in the HTML -->
-  {#snippet credit(photo)}
-    <p class="custom-credit">{photo.credit}</p>
+<PhotoCarousel {images}>
+  <!-- Pass `image` and use the `image.credit` string in the HTML -->
+  {#snippet credit(image)}
+    <p class="custom-credit">{image.credit}</p>
   {/snippet}
 
-  <!-- Pass `photo` and use the `photo.caption` string in the HTML -->
-  {#snippet caption(photo)}
-    <p class="custom-caption">{photo.caption}</p>
+  <!-- Pass `image` and use the `image.caption` string in the HTML -->
+  {#snippet caption(image)}
+    <p class="custom-caption">{image.caption}</p>
   {/snippet}
 </PhotoCarousel>
 
diff --git a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
index 76db1c5c..0092f7f6 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
@@ -15,26 +15,25 @@
 </script>
 
 <script>
-  import photosJson from './demo/photos.json';
-  // import { PhotoCarouselImage } from '../@types/global';
+  import imagesJson from './demo/images.json';
 
-  const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
+  const images = imagesJson.map((img) => ({ ...img, altText: img.caption }));
 </script>
 
 <Story
   name="Demo"
   args={{
-    photos,
+    images,
   }}
 />
 
 <Story name="Custom text" exportName="CustomText">
-  <PhotoCarousel {photos}>
-    {#snippet credit(photo)}
-      <p class="custom-credit">{photo.credit}</p>
+  <PhotoCarousel {images}>
+    {#snippet credit(image)}
+      <p class="custom-credit">{image.credit}</p>
     {/snippet}
-    {#snippet caption(photo)}
-      <p class="custom-caption">{photo.caption}</p>
+    {#snippet caption(image)}
+      <p class="custom-caption">{image.caption}</p>
     {/snippet}
   </PhotoCarousel>
 </Story>
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index d3331d56..a420e542 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -26,8 +26,8 @@
   type ObjectFit = 'cover' | 'contain';
 
   interface Props {
-    /** Array of photos. */
-    photos: PhotoCarouselImage[];
+    /** Array of images. */
+    images: PhotoCarouselImage[];
     /** Width of the component within the text well: normal, wide, wider, widest, fluid */
     width?: ContainerWidth;
     /**
@@ -61,7 +61,7 @@
     textWidth = 'normal',
     id = '',
     cls = '',
-    photos,
+    images,
     maxHeight = 660,
     defaultImageObjectFit = 'cover',
     defaultImageObjectPosition = 'center center',
@@ -103,7 +103,7 @@
     >
       <div class="image-container">
         <SplideTrack>
-          {#each photos as photo}
+          {#each images as image}
             <SplideSlide>
               <div class="photo-slide w-full h-full relative">
                 <figure
@@ -112,23 +112,23 @@
                 >
                   <img
                     class="w-full h-full fmy-0"
-                    data-splide-lazy={photo.src}
-                    alt={photo.altText}
-                    style:object-fit={photo.objectFit || defaultImageObjectFit}
-                    style:object-position={photo.objectPosition ||
+                    data-splide-lazy={image.src}
+                    alt={image.altText}
+                    style:object-fit={image.objectFit || defaultImageObjectFit}
+                    style:object-position={image.objectPosition ||
                       defaultImageObjectPosition}
                   />
                   <!-- Render custom credit if credit snippet and string both exist -->
-                  {#if credit && photo.credit}
-                    {@render credit(photo)}
+                  {#if credit && image.credit}
+                    {@render credit(image)}
 
                     <!-- Otherwise, render with default credit style -->
-                  {:else if photo.credit}
+                  {:else if image.credit}
                     <span
                       class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
-                      class:contain-fit={photo.objectFit === 'contain' ||
+                      class:contain-fit={image.objectFit === 'contain' ||
                         defaultImageObjectFit === 'contain'}
-                      >{photo.credit}</span
+                      >{image.credit}</span
                     >
                   {/if}
                 </figure>
@@ -137,8 +137,8 @@
           {/each}
         </SplideTrack>
 
-        {#if photos[activeImageIndex].caption}
-          {@const activePhoto = photos[activeImageIndex]}
+        {#if images[activeImageIndex].caption}
+          {@const activePhoto = images[activeImageIndex]}
           <PaddingReset containerIsFluid={width === 'fluid'}>
             <Block width={textWidth}>
               <!-- Render custom caption if caption snippet and string both exist -->
diff --git a/src/components/PhotoCarousel/demo/photos.json b/src/components/PhotoCarousel/demo/images.json
similarity index 100%
rename from src/components/PhotoCarousel/demo/photos.json
rename to src/components/PhotoCarousel/demo/images.json