From 774b25da72b8135c2e41e51bdda128045d58af92 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Tue, 29 Nov 2022 01:51:49 +0000
Subject: [PATCH] basic carousel

---
 package.json                                  |   3 +-
 .../PhotoCarousel.stories.svelte              |  82 +++++
 .../PhotoCarousel/PhotoCarousel.svelte        | 284 ++++++++++++++++++
 .../PhotoCarousel/stories/docs/component.md   |  21 ++
 .../PhotoCarousel/stories/docs/withCustom.md  |  27 ++
 .../PhotoCarousel/stories/photos.json         |  72 +++++
 src/index.js                                  |   1 +
 yarn.lock                                     |  12 +
 8 files changed, 501 insertions(+), 1 deletion(-)
 create mode 100644 src/components/PhotoCarousel/PhotoCarousel.stories.svelte
 create mode 100644 src/components/PhotoCarousel/PhotoCarousel.svelte
 create mode 100644 src/components/PhotoCarousel/stories/docs/component.md
 create mode 100644 src/components/PhotoCarousel/stories/docs/withCustom.md
 create mode 100644 src/components/PhotoCarousel/stories/photos.json

diff --git a/package.json b/package.json
index 7e837f5c..2b570c44 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@splidejs/svelte-splide": "^0.2.9",
     "@sveltejs/svelte-scroller": "^2.0.7",
     "bootstrap": "^5.2.0",
     "classnames": "^2.3.1",
@@ -222,4 +223,4 @@
     ".": "./dist/index.js"
   },
   "svelte": "./dist/index.js"
-}
\ No newline at end of file
+}
diff --git a/src/components/PhotoCarousel/PhotoCarousel.stories.svelte b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
new file mode 100644
index 00000000..2a7ee363
--- /dev/null
+++ b/src/components/PhotoCarousel/PhotoCarousel.stories.svelte
@@ -0,0 +1,82 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // Don't lose the "?raw" in markdown imports!
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore
+  import customDocs from './stories/docs/withCustom.md?raw';
+
+  import PhotoCarousel from './PhotoCarousel.svelte';
+
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+
+  import photosJson from './stories/photos.json';
+
+  const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
+
+  const meta = {
+    title: 'Components/PhotoCarousel',
+    component: PhotoCarousel,
+    ...withComponentDocs(componentDocs),
+    // https://storybook.js.org/docs/svelte/essentials/controls
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <PhotoCarousel {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    width: 'wider',
+    photos,
+  }}"
+/>
+
+<Story
+  name="Custom credits and captions"
+  args="{{
+    width: 'wider',
+    photos,
+  }}"
+  {...withStoryDocs(customDocs)}
+>
+  <PhotoCarousel
+    {...{
+      width: 'wider',
+      photos,
+    }}
+  >
+    <p class="custom-credit" slot="credit" let:credit>{credit}</p>
+    <p class="custom-caption" slot="caption" let:caption>{caption}</p>
+  </PhotoCarousel>
+</Story>
+
+<style lang="scss">
+  p {
+    position: absolute;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.6);
+    font-family: sans-serif;
+    font-size: 0.8rem;
+    padding: 0 5px;
+    &.custom-credit {
+      top: 0;
+      right: 0;
+    }
+    &.custom-caption {
+      bottom: 5px;
+      left: 0;
+    }
+  }
+</style>
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
new file mode 100644
index 00000000..47679958
--- /dev/null
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -0,0 +1,284 @@
+<!-- @component `PhotoCarousel` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoCarousel--default) -->
+<script lang="ts">
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+
+  /** Width of the component within the text well. */
+  export let width: ContainerWidth = 'wider';
+
+  /** Add an ID to target with SCSS. */
+  export let id: string = '';
+
+  /** Add a class to target with SCSS. */
+  export let cls: string = '';
+
+  interface Image {
+    /**
+     * Image src
+     * @required
+     */
+    src: string;
+    /**
+     * Image alt-text
+     * @required
+     */
+    altText: string;
+    /** Optional caption */
+    caption?: string;
+    /** Optional credit */
+    credit?: string;
+    /** Optional object-fit rule */
+    objectFit?: string;
+    /** Optional object-position rule */
+    objectPosition?: string;
+  }
+
+  /**
+   * Array of photos.
+   * @required
+   */
+  export let photos: Image[] = [];
+
+  /**
+   * Max height of the carousel
+   */
+  export let maxHeight: number = 660;
+
+  type ObjectFit = 'cover' | 'contain';
+
+  /**
+   * Default Image object-fit style, either `cover` or `contain`.
+   */
+  export let defaultImageObjectFit: ObjectFit = 'cover';
+
+  /**
+   * Default image object-position style, e.g., `center center` or `50% 50%`.
+   */
+  export let defaultImageObjectPosition: string = 'center center';
+
+  /**
+   * ARIA label for the carousel.
+   * @required
+   */
+  export let carouselAriaLabel: string = 'Photo gallery';
+
+  /**
+   * Set height of the carousel as a ratio of its width
+   * as long as its below whatever you set in `maxHeight`.
+   */
+  export let heightRatio: number = 0.68;
+
+  /**
+   * Number of images to preload ahead of the active image.
+   */
+  export let preloadImages: number = 1;
+
+  import Block from '../Block/Block.svelte';
+  import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
+  import '@splidejs/svelte-splide/css/core';
+  import Fa from 'svelte-fa/src/fa.svelte';
+  import {
+    faChevronLeft,
+    faChevronRight,
+  } from '@fortawesome/free-solid-svg-icons';
+  import { fly } from 'svelte/transition';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+
+  let containerWidth;
+
+  let activeImageIndex = 0;
+
+  $: carouselHeight = containerWidth
+    ? Math.min(containerWidth * heightRatio, maxHeight)
+    : maxHeight;
+
+  const handleActiveChange = (e) => {
+    activeImageIndex = e.detail.dest;
+  };
+</script>
+
+<Block width="{width}" id="{id}" cls="photo-carousel {cls}">
+  <div class="carousel-container" bind:clientWidth="{containerWidth}">
+    <Splide
+      hasTrack="{false}"
+      options="{{
+        height: carouselHeight,
+        fixedHeight: carouselHeight,
+        lazyLoad: 'nearby',
+        preloadPages: preloadImages,
+      }}"
+      aria-label="{carouselAriaLabel}"
+      on:move="{handleActiveChange}"
+    >
+      <div class="image-container">
+        <SplideTrack>
+          {#each photos as photo, i}
+            <SplideSlide>
+              <div class="photo-slide">
+                <figure style="height: {carouselHeight}px;">
+                  <img
+                    data-splide-lazy="{photo.src}"
+                    alt="{photo.altText}"
+                    style:object-fit="{photo.objectFit ||
+                      defaultImageObjectFit}"
+                    style:object-position="{photo.objectPosition ||
+                      defaultImageObjectPosition}"
+                  />
+                  {#if $$slots.credit}
+                    <slot name="credit" credit="{photo.credit}" />
+                  {:else}
+                    <span
+                      class="credit"
+                      class:contain-fit="{photo.objectFit === 'contain' ||
+                        defaultImageObjectFit === 'contain'}"
+                      >{photo.credit}</span
+                    >
+                  {/if}
+                </figure>
+              </div>
+            </SplideSlide>
+          {/each}
+        </SplideTrack>
+
+        {#if photos[activeImageIndex].caption}
+          <PaddingReset containerIsFluid="{width === 'fluid'}">
+            {#if $$slots.caption}
+              <slot
+                name="caption"
+                caption="{photos[activeImageIndex].caption}"
+              />
+            {:else}
+              {#key activeImageIndex}
+                <p class="caption" in:fly|local="{{ x: 20, duration: 175 }}">
+                  {photos[activeImageIndex].caption}
+                </p>
+              {/key}
+            {/if}
+          </PaddingReset>
+        {/if}
+
+        <div class="splide__progress">
+          <div class="splide__progress__bar"></div>
+        </div>
+
+        <div class="splide__arrows">
+          <button class="splide__arrow splide__arrow--prev">
+            <Fa icon="{faChevronLeft}" fw />
+          </button>
+          <button class="splide__arrow splide__arrow--next">
+            <Fa icon="{faChevronRight}" fw />
+          </button>
+        </div>
+      </div>
+    </Splide>
+  </div>
+</Block>
+
+<style lang="scss">
+  @import '../../scss/fonts/variables';
+  @import '../../scss/colours/thematic/tr';
+
+  .carousel-container {
+    margin-bottom: 10px;
+    .photo-slide {
+      height: 100%;
+      width: 100%;
+      position: relative;
+      figure {
+        margin: 0;
+        width: 100%;
+        position: relative;
+        img {
+          height: 100%;
+          width: 100%;
+        }
+        span.credit {
+          position: absolute;
+          bottom: 4px;
+          left: 10px;
+          margin: 0;
+          font-size: 0.7rem;
+          color: white;
+          letter-spacing: 0.75px;
+          text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333,
+            1px 1px 0 #333;
+          font-family: var(--theme-font-family-note);
+          &.contain-fit {
+            left: 50%;
+            transform: translate(-50%, 0%);
+          }
+        }
+      }
+    }
+    :global {
+      .splide {
+        max-height: 100%;
+      }
+
+      .splide__arrows {
+        width: 275px;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        padding: 0px;
+        padding-top: 4px;
+        button {
+          display: flex;
+          font-size: 12px;
+          height: 30px;
+          width: 30px;
+          padding: 0;
+          justify-content: center;
+          align-items: center;
+          border: 1px solid transparent;
+          border-radius: 50%;
+          background-color: transparent;
+          color: var(--theme-colour-text-secondary);
+          opacity: 0.4;
+          &:hover {
+            opacity: 1;
+            border-color: var(--theme-colour-text-secondary);
+            color: var(--theme-colour-text-secondary);
+          }
+          &:disabled {
+            opacity: 0.4;
+            &:hover {
+              border-color: transparent;
+            }
+          }
+        }
+      }
+      ul.splide__pagination {
+        width: 200px;
+        padding: 0;
+        text-align: center;
+        margin: -26px auto 0;
+        display: flex;
+        flex-wrap: nowrap;
+        li {
+          flex-grow: 1;
+          button {
+            width: 100%;
+            height: 7px;
+            border-radius: 0;
+            margin: 0 0px;
+            padding: 0;
+            border: 1px solid var(--theme-colour-background);
+            background: var(--theme-colour-text-secondary);
+            opacity: 0.4;
+            &.is-active {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+    p.caption {
+      margin: 5px 0 0;
+      font-family: var(--theme-font-family-note, $font-family-display);
+      color: var(--theme-colour-text-secondary, $tr-medium-grey);
+      font-size: 0.85rem;
+      line-height: 1.1rem;
+      font-weight: 300;
+    }
+  }
+</style>
diff --git a/src/components/PhotoCarousel/stories/docs/component.md b/src/components/PhotoCarousel/stories/docs/component.md
new file mode 100644
index 00000000..c85a042f
--- /dev/null
+++ b/src/components/PhotoCarousel/stories/docs/component.md
@@ -0,0 +1,21 @@
+A simple, accessible photo carousel with lazy-loading and mobile swipe built in.
+
+```svelte
+<script>
+  import { PhotoCarousel } from '@reuters-graphics/graphics-components';
+
+  const photos = [
+    {
+      src: 'https://.../myImage.jpg',
+      altText: 'A picture of...',
+      caption: 'My caption...', // Optional
+      credit: 'REUTERS/Jane Doe', // Optional
+      objectFit: 'contain', // Optional
+      objectPosition: '50% 50%', // Optional
+    },
+    // ...
+  ];
+</script>
+
+<PhotoCarousel photos="{photos}" />
+```
diff --git a/src/components/PhotoCarousel/stories/docs/withCustom.md b/src/components/PhotoCarousel/stories/docs/withCustom.md
new file mode 100644
index 00000000..849ee394
--- /dev/null
+++ b/src/components/PhotoCarousel/stories/docs/withCustom.md
@@ -0,0 +1,27 @@
+Use named slots to style your own custom credits and/or captions.
+
+```svelte
+<PhotoCarousel photos="{photos}">
+  <p slot="credit" class="custom-credit" let:credit>{credit}</p>
+  <p slot="caption" class="custom-caption" let:caption>{caption}</p>
+</PhotoCarousel>
+
+<style lang="scss">
+  p {
+    position: absolute;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.6);
+    font-family: sans-serif;
+    font-size: 0.8rem;
+    padding: 0 5px;
+    &.custom-credit {
+      top: 0;
+      right: 0;
+    }
+    &.custom-caption {
+      bottom: 5px;
+      left: 0;
+    }
+  }
+</style>
+```
diff --git a/src/components/PhotoCarousel/stories/photos.json b/src/components/PhotoCarousel/stories/photos.json
new file mode 100644
index 00000000..543f86d2
--- /dev/null
+++ b/src/components/PhotoCarousel/stories/photos.json
@@ -0,0 +1,72 @@
+[
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194630Z_544493697_UP1E.jpeg",
+        "caption": "Spain's Sergio Busquets and Aymeric Laporte react before a Germany goal is disallowed following a VAR review.",
+        "credit": "REUTERS/Molly Darlington"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_2007900040_UP1.jpeg",
+        "caption": "Spain's Sergio Busquets fouls Germany's Jamal Musiala before being shown yellow card.",
+        "credit": "REUTERS/Kai Pfaffenbach"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194619Z_635809122_UP1E.jpeg",
+        "caption": "Spain's Sergio Busquets is shown a yellow card by referee Danny Desmond Makkelie.",
+        "credit": "REUTERS/Albert Gea"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T191015Z_1293757566_UP1.jpeg",
+        "caption": "Spain's Sergio Busquets in action with Germany's Thomas Muller.",
+        "credit": "REUTERS/John Sibley"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T181411Z_1_MTZXEIBR0QNN.jpeg",
+        "caption": "Spain fans inside the stadium before the match.",
+        "credit": "REUTERS/Albert Gea"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194827Z_345059331_UP1E.jpeg",
+        "caption": "Spain's Gavi.",
+        "credit": "REUTERS/Fabrizio Bensch"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T175149Z_1_MTZXEIBR0PMD.jpeg",
+        "caption": "",
+        "credit": "REUTERS/John Sibley"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T203232Z_890709671_UP1E.jpeg",
+        "caption": "Spain's Alvaro Morata scores their first goal.",
+        "credit": "REUTERS/Kai Pfaffenbach"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T203612Z_1399473226_UP1.jpeg",
+        "caption": "Spain's Alvaro Morata celebrates scoring their first goal.",
+        "credit": "REUTERS/Molly Darlington"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T204305Z_1795686896_UP1.jpeg",
+        "caption": "Germany's Niclas Fullkrug scores their first goal.",
+        "credit": "REUTERS/Molly Darlington"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T204528Z_151067034_UP1E.jpeg",
+        "caption": "Germany's Niclas Fullkrug celebrates scoring their first goal.",
+        "credit": "REUTERS/Molly Darlington"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205041Z_2076149593_UP1.jpeg",
+        "caption": "Spain coach Luis Enrique.",
+        "credit": "REUTERS/John Sibley"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205604Z_1468073277_UP1.jpeg",
+        "caption": "Germany's Manuel Neuer applauds fans after the match.",
+        "credit": "REUTERS/Kai Pfaffenbach"
+    },
+    {
+        "src": "https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T205854Z_408619749_UP1E.jpeg",
+        "caption": "Spain players applaud fans after the match.",
+        "credit": "REUTERS/Albert Gea"
+    }
+]
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index b77d3e76..01235f24 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,7 @@ export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as Hero } from './components/Hero/Hero.svelte';
 export { default as NoteText } from './components/NoteText/NoteText.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
+export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { pymChildStore } from './components/PymChild/stores.js';
diff --git a/yarn.lock b/yarn.lock
index 3fa5a6a6..5d6b5a85 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1526,6 +1526,18 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@splidejs/splide@^4.1.3":
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/@splidejs/splide/-/splide-4.1.4.tgz#02d029360569e7d75d28357a9727fc48322015a3"
+  integrity sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==
+
+"@splidejs/svelte-splide@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@splidejs/svelte-splide/-/svelte-splide-0.2.9.tgz#35659e305da61c32e3d65878c37c50e02d9a1cba"
+  integrity sha512-04ekJnDIJKEAhklKQMhkg4Yx0Ihtkk18eA9JeHPON0lDTngQxlOYdEYTJWH2UON45VxmVqoLHv04I++JphO36w==
+  dependencies:
+    "@splidejs/splide" "^4.1.3"
+
 "@storybook/addon-actions@6.5.9":
   version "6.5.9"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.5.9.tgz#d50d65631403e1a5b680961429d9c0d7bd383e68"