From 9839e34f49c5573cb3780e56779b488880b8ff40 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 27 Mar 2025 12:51:59 -0700
Subject: [PATCH] finished migrating

---
 src/components/Scroller/Scroller.mdx          |   8 +-
 .../Scroller/Scroller.stories.svelte          |   7 +-
 src/components/Scroller/Scroller.svelte       | 201 ++++++++++++++++--
 src/components/Scroller/ScrollerOld.svelte    | 189 ----------------
 .../Scroller/ScrollerStashed.svelte           |  30 ---
 5 files changed, 185 insertions(+), 250 deletions(-)
 delete mode 100644 src/components/Scroller/ScrollerOld.svelte
 delete mode 100644 src/components/Scroller/ScrollerStashed.svelte

diff --git a/src/components/Scroller/Scroller.mdx b/src/components/Scroller/Scroller.mdx
index 5a5b5fdf..f804bd15 100644
--- a/src/components/Scroller/Scroller.mdx
+++ b/src/components/Scroller/Scroller.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas } from '@storybook/blocks';
+import { Meta } from '@storybook/blocks';
 
 import * as ScrollerStories from './Scroller.stories.svelte';
 
@@ -6,7 +6,9 @@ import * as ScrollerStories from './Scroller.stories.svelte';
 
 # Scroller
 
-The `Scroller` component TK
+The `Scroller` component TK.
+
+[Demo](?path=/story/components-graphics-scroller--demo)
 
 ```svelte
 <script>
@@ -15,5 +17,3 @@ The `Scroller` component TK
 
 <Scroller />
 ```
-
-<Canvas of={ScrollerStories.Test} />
diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte
index ad99d0b3..63986f0b 100644
--- a/src/components/Scroller/Scroller.stories.svelte
+++ b/src/components/Scroller/Scroller.stories.svelte
@@ -63,9 +63,7 @@
   };
 </script>
 
-<Story name="Test"></Story>
-
-<!-- <Story
+<Story
   name="Demo"
   args={{
     steps: [
@@ -94,7 +92,6 @@
     embedded: false,
   }}
 />
-
 <Story name="ArchieML" args={docBlock} />
 
 <Story
@@ -155,4 +152,4 @@
     embeddedLayout: 'fb',
     embedded: false,
   }}
-/> -->
+/>
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index 50c46710..f43fa56b 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -1,33 +1,190 @@
 <!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) -->
 <script lang="ts">
-  // @ts-ignore no types
   import ScrollerBase from './ScrollerBase/index.svelte';
+  import Background from './Background.svelte';
+  import Foreground from './Foreground.svelte';
+  import Embedded from './Embedded/index.svelte';
+  import Block from '../Block/Block.svelte';
 
-  let index = 0;
-  let offset = 0;
-  let progress = 0;
+  // Types
+  import type {
+    ContainerWidth,
+    ForegroundPosition,
+    ScrollerStep,
+  } from '../@types/global';
+
+  interface Props {
+    /** ID of the scroller container */
+    id?: string;
+
+    /**
+     * An array of step objects that define the steps in your scroller.
+     *
+     * Each step object in the array can have:
+     *
+     * - `background` A background component. **REQUIRED**
+     * - `backgroundProps` Optional props for background component.
+     * - `foreground` A component or markdown-formatted string. **REQUIRED**
+     * - `foregroundProps` Optional props for foreground component.
+     * - `altText` Optional alt text for the background, read aloud after the foregroud text. You can add it to each step or just to the first step to describe the entire scroller graphic. **RECOMMENDED**
+     *
+     */
+    steps: ScrollerStep[];
+    /** Width of the background */
+    backgroundWidth?: ContainerWidth;
+    /** Position of the foreground */
+    foregroundPosition?: ForegroundPosition;
+    /**
+     * Whether previous background steps should stack below the current one.
+     *
+     * - `true` _default_ Background graphics from previous steps will remain visible below the active one, allowing you to stack graphics with transparent backgrounds.
+     * - `false` Only the background graphic from the current step will show and backgrounds from previous steps are hidden.
+     */
+    stackBackground?: boolean;
+    /**
+     * How many background steps to load before and after the currently active one, effectively lazy-loading them.
+     *
+     * Setting to `0` disables lazy-loading and loads all backgrounds at once.
+     */
+    preload?: number;
+    /** Setting to `true` will unroll the scroll experience into a flat layout */
+    embedded?: boolean;
+    /**
+     * Layout order when `embedded` is `true`.
+     *
+     * - `fb` _default_ Foreground then background
+     * - `bf` Background then foreground
+     *
+     */
+    embeddedLayout?: 'fb' | 'bf';
+    /**
+     * Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    threshold?: number;
+    /**
+     * Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    top?: number;
+    /**
+     * Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    bottom?: number;
+    /**
+     * Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    parallax?: boolean;
+    /** Set a class to target with SCSS */
+    class?: string;
+  }
+
+  let {
+    id = '',
+    steps,
+    backgroundWidth = 'fluid',
+    foregroundPosition = 'middle',
+    stackBackground = true,
+    preload = 1,
+    embedded = false,
+    embeddedLayout = 'fb',
+    threshold = 0.5,
+    top = 0,
+    bottom = 1,
+    parallax = false,
+    class: cls = '',
+  }: Props = $props();
+
+  // Bindable variables passed to ScrollerBase
+  let index = $state(0);
+  let offset = $state(0);
+  let progress = $state(0);
 </script>
 
-<ScrollerBase top={0.2} bottom={0.8} bind:index bind:offset bind:progress>
-  {#snippet backgroundSnippet()}
-    <p>
-      This is the background content. It will stay fixed in place while the
-      foreground scrolls over the top.
-    </p>
+{#if !embedded}
+  <Block width="fluid" class="scroller-container fmy-6 {cls}" {id}>
+    <ScrollerBase
+      bind:index
+      bind:offset
+      bind:progress
+      {threshold}
+      {top}
+      {bottom}
+      {parallax}
+      query="div.step-foreground-container"
+    >
+      {#snippet backgroundSnippet()}
+        <div
+          class="background min-h-screen relative p-0 flex justify-center"
+          class:right={foregroundPosition === 'left opposite'}
+          class:left={foregroundPosition === 'right opposite'}
+          aria-hidden="true"
+        >
+          <div class="scroller-graphic-well w-full">
+            <Block
+              width={backgroundWidth}
+              class="background-container step-{index +
+                1} my-0 min-h-screen flex justify-center items-center relative"
+            >
+              <Background {index} {steps} {preload} {stackBackground} />
+            </Block>
+          </div>
+        </div>
+      {/snippet}
+      {#snippet foregroundSnippet()}
+        <div class="foreground {foregroundPosition} w-full">
+          <Foreground {steps} />
+        </div>
+      {/snippet}
+    </ScrollerBase>
+  </Block>
+{:else}
+  <Block width="widest" class="scroller-container embedded" {id}>
+    <Embedded {steps} {embeddedLayout} {backgroundWidth} />
+  </Block>
+{/if}
 
-    <p>Index {index} is currently active.</p>
-  {/snippet}
+<style lang="scss">
+  div.background {
+    &.left {
+      width: 50%;
+      float: left;
+      @media (max-width: 1200px) {
+        justify-content: center;
+        width: 100%;
+        float: initial;
+      }
+    }
+    &.right {
+      width: 50%;
+      float: right;
+      @media (max-width: 1200px) {
+        justify-content: center;
+        width: 100%;
+        float: initial;
+      }
+    }
 
-  {#snippet foregroundSnippet()}
-    <section>This is the first section.</section>
-    <section>This is the second section.</section>
-    <section>This is the third section.</section>
-  {/snippet}
-</ScrollerBase>
+    div.scroller-graphic-well {
+      padding: 0 15px;
+    }
+  }
 
-<style>
-  section {
-    height: 80vh;
-    outline: 2px solid pink;
+  div.foreground {
+    &.right {
+      width: 50%;
+      float: right;
+      @media (max-width: 1200px) {
+        width: 100%;
+        float: initial;
+      }
+    }
+
+    &.left {
+      width: 50%;
+      float: left;
+      @media (max-width: 1200px) {
+        width: 100%;
+        float: initial;
+      }
+    }
   }
 </style>
diff --git a/src/components/Scroller/ScrollerOld.svelte b/src/components/Scroller/ScrollerOld.svelte
deleted file mode 100644
index 434133cc..00000000
--- a/src/components/Scroller/ScrollerOld.svelte
+++ /dev/null
@@ -1,189 +0,0 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
-<!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) -->
-<script lang="ts">
-  // @ts-ignore no types
-  import SvelteScroller from '@sveltejs/svelte-scroller';
-  import Background from './Background.svelte';
-  import Foreground from './Foreground.svelte';
-  import Embedded from './Embedded/index.svelte';
-  import Block from '../Block/Block.svelte';
-
-  // Types
-  import type {
-    ContainerWidth,
-    ForegroundPosition,
-    ScrollerStep,
-  } from '../@types/global';
-
-  interface Props {
-    /** ID of the scroller container */
-    id?: string;
-
-    /**
-     * An array of step objects that define the steps in your scroller.
-     *
-     * Each step object in the array can have:
-     *
-     * - `background` A background component. **REQUIRED**
-     * - `backgroundProps` Optional props for background component.
-     * - `foreground` A component or markdown-formatted string. **REQUIRED**
-     * - `foregroundProps` Optional props for foreground component.
-     * - `altText` Optional alt text for the background, read aloud after the foregroud text. You can add it to each step or just to the first step to describe the entire scroller graphic. **RECOMMENDED**
-     *
-     */
-    steps: ScrollerStep[];
-    /** Width of the background */
-    backgroundWidth?: ContainerWidth;
-    /** Position of the foreground */
-    foregroundPosition?: ForegroundPosition;
-    /**
-     * Whether previous background steps should stack below the current one.
-     *
-     * - `true` _default_ Background graphics from previous steps will remain visible below the active one, allowing you to stack graphics with transparent backgrounds.
-     * - `false` Only the background graphic from the current step will show and backgrounds from previous steps are hidden.
-     */
-    stackBackground?: boolean;
-    /**
-     * How many background steps to load before and after the currently active one, effectively lazy-loading them.
-     *
-     * Setting to `0` disables lazy-loading and loads all backgrounds at once.
-     */
-    preload?: number;
-    /** Setting to `true` will unroll the scroll experience into a flat layout */
-    embedded?: boolean;
-    /**
-     * Layout order when `embedded` is `true`.
-     *
-     * - `fb` _default_ Foreground then background
-     * - `bf` Background then foreground
-     *
-     */
-    embeddedLayout?: 'fb' | 'bf';
-    /**
-     * Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-     */
-    threshold?: number;
-    /**
-     * Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-     */
-    top?: number;
-    /**
-     * Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-     */
-    bottom?: number;
-    /**
-     * Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-     */
-    parallax?: boolean;
-    /** Set a class to target with SCSS */
-    class?: string;
-  }
-
-  let {
-    id = '',
-    steps,
-    backgroundWidth = 'fluid',
-    foregroundPosition = 'middle',
-    stackBackground = true,
-    preload = 1,
-    embedded = false,
-    embeddedLayout = 'fb',
-    threshold = 0.5,
-    top = 0,
-    bottom = 1,
-    parallax = false,
-    class: cls = '',
-  }: Props = $props();
-
-  let index = $state(0);
-  let offset = $state(0);
-  let progress = $state(0);
-</script>
-
-{#if !embedded}
-  <Block width="fluid" class="scroller-container fmy-6 {cls}" {id}>
-    <SvelteScroller
-      bind:index
-      bind:offset
-      bind:progress
-      {threshold}
-      {top}
-      {bottom}
-      {parallax}
-      query="div.step-foreground-container"
-    >
-      <div
-        slot="background"
-        class="background min-h-screen relative p-0 flex justify-center"
-        class:right={foregroundPosition === 'left opposite'}
-        class:left={foregroundPosition === 'right opposite'}
-        aria-hidden="true"
-      >
-        <div class="scroller-graphic-well w-full">
-          <Block
-            width={backgroundWidth}
-            class="background-container step-{index +
-              1} my-0 min-h-screen flex justify-center items-center relative"
-          >
-            <Background {index} {steps} {preload} {stackBackground} />
-          </Block>
-        </div>
-      </div>
-
-      <div slot="foreground" class="foreground {foregroundPosition} w-full">
-        <Foreground {steps} />
-      </div>
-    </SvelteScroller>
-  </Block>
-{:else}
-  <Block width="widest" class="scroller-container embedded" {id}>
-    <Embedded {steps} {embeddedLayout} {backgroundWidth} />
-  </Block>
-{/if}
-
-<style lang="scss">
-  div.background {
-    &.left {
-      width: 50%;
-      float: left;
-      @media (max-width: 1200px) {
-        justify-content: center;
-        width: 100%;
-        float: initial;
-      }
-    }
-    &.right {
-      width: 50%;
-      float: right;
-      @media (max-width: 1200px) {
-        justify-content: center;
-        width: 100%;
-        float: initial;
-      }
-    }
-
-    div.scroller-graphic-well {
-      padding: 0 15px;
-    }
-  }
-
-  div.foreground {
-    &.right {
-      width: 50%;
-      float: right;
-      @media (max-width: 1200px) {
-        width: 100%;
-        float: initial;
-      }
-    }
-
-    &.left {
-      width: 50%;
-      float: left;
-      @media (max-width: 1200px) {
-        width: 100%;
-        float: initial;
-      }
-    }
-  }
-</style>
diff --git a/src/components/Scroller/ScrollerStashed.svelte b/src/components/Scroller/ScrollerStashed.svelte
deleted file mode 100644
index 13faffd3..00000000
--- a/src/components/Scroller/ScrollerStashed.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-  // import ScrollerBase from './ScrollerBase/index.svelte';
-
-  let index, offset, progress;
-</script>
-
-hi!
-
-<!-- <ScrollerBase top={0.2} bottom={0.8} bind:index bind:offset bind:progress>
-  <div slot="background">
-    <p>
-      This is the background content. It will stay fixed in place while the
-      foreground scrolls over the top.
-    </p>
-
-    <p>Section {index + 1} is currently active.</p>
-  </div>
-
-  <div slot="foreground">
-    <section>This is the first section.</section>
-    <section>This is the second section.</section>
-    <section>This is the third section.</section>
-  </div>
-</ScrollerBase> -->
-
-<style>
-  section {
-    height: 80vh;
-  }
-</style>