@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Scroller/Scroller.stories.svelte

@@ -1,42 +1,39 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import interactiveDocs from "./stories/docs/interactive.md?raw";
-import ai2svelteDocs from "./stories/docs/ai2svelte.md?raw";
-import archieMLDocs from "./stories/docs/archieML.md?raw";
-import Scroller from "./Scroller.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Graphics/Scroller",
-  component: Scroller,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    steps: { control: false },
-    backgroundWidth: {
-      control: "select",
-      options: ["normal", "wide", "wider", "widest", "fluid"]
-    },
-    foregroundPosition: {
-      control: "select",
-      options: ["middle", "left", "right", "left opposite", "right opposite"]
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Scroller from './Scroller.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Graphics/Scroller',
+    component: Scroller,
+    argTypes: {
+      steps: { control: false },
+      backgroundWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      foregroundPosition: {
+        control: 'select',
+        options: ['middle', 'left', 'right', 'left opposite', 'right opposite'],
+      },
+      embeddedLayout: {
+        control: 'select',
+        options: ['fb', 'bf'],
+      },
     },
-    embeddedLayout: {
-      control: "select",
-      options: ["fb", "bf"]
-    }
-  }
-};
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+<script lang="ts">
+  import MyBackground from './demo/components/basic/Step.svelte';
+  import MyInteractiveForeground from './demo/components/basic/InteractiveForeground.svelte';
+
+  // ai2svelte backgrounds
+  import AiMap1 from './demo/components/ai2svelte/ai-scroller-1.svelte';
+  import AiMap2 from './demo/components/ai2svelte/ai-scroller-2.svelte';
+  import AiMap3 from './demo/components/ai2svelte/ai-scroller-3.svelte';
 
-  import BasicStep from './stories/components/basic/Step.svelte';
-  import InteractiveForeground from './stories/components/basic/InteractiveForeground.svelte';
-  import AiMap1 from './stories/components/ai2svelte/ai-scroller-1.svelte';
-  import AiMap2 from './stories/components/ai2svelte/ai-scroller-2.svelte';
-  import AiMap3 from './stories/components/ai2svelte/ai-scroller-3.svelte';
+  // ai2svelte foreground
+  import AiForeground from './demo/components/ai2svelte/ai-foreground.svelte';
 
   const aiCharts = {
     AiMap1,
@@ -44,55 +41,77 @@ export const meta = {
     AiMap3,
   };
 
+  const foregroundComponents = {
+    AiForeground,
+  };
+
   const docBlock = {
-    type: 'scroller',
-    width: 'fluid',
-    foregroundPosition: 'middle',
+    foregroundPosition: 'right',
     id: 'my-scroller',
-    stackBackground: true,
+    stackBackground: 'true',
     steps: [
       {
         background: aiCharts.AiMap1,
-        text: '#### Step 1\n\nLorem ipsum',
+        foreground: "#### Step 1\n\nHere's where something happend.",
         altText: 'A map showing the Upper West side in New York City.',
       },
       {
         background: aiCharts.AiMap2,
-        text: '#### Step 2\n\nLorem ipsum',
+        foreground: '#### Step 2\n\nSomething happened on some street...',
         altText: 'The same map now highlights 98th Street.',
       },
       {
         background: aiCharts.AiMap3,
-        text: '#### Step 3\n\nLorem ipsum',
+        foreground: '#### Step 3\n\n... and now there are multiple protests.',
         altText:
           'The same map now highlights three locations near 98th Street where something particulary important happened.',
       },
     ],
-  };
-</script>
+  } as const;
 
-<Template let:args>
-  <Scroller {...args} />
-</Template>
+  const docBlockCustomForeground = {
+    foregroundPosition: 'left',
+    id: 'my-scroller',
+    stackBackground: 'true',
+    steps: [
+      {
+        background: aiCharts.AiMap1,
+        foreground: "#### Step 1\n\nHere's where something happend.",
+        altText: 'A map showing the Upper West side in New York City.',
+      },
+      {
+        background: aiCharts.AiMap2,
+        foreground: foregroundComponents.AiForeground,
+        altText: 'The same map now highlights 98th Street.',
+      },
+      {
+        background: aiCharts.AiMap3,
+        foreground: '#### Step 3\n\n... and now there are multiple protests.',
+        altText:
+          'The same map now highlights three locations near 98th Street where something particulary important happened.',
+      },
+    ],
+  } as const;
+</script>
 
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     steps: [
       {
-        background: BasicStep,
+        background: MyBackground,
         backgroundProps: { colour: 'red' },
         foreground: '#### Step 1\n\nLorem ipsum red',
         altText: 'Red background',
       },
       {
-        background: BasicStep,
+        background: MyBackground,
         backgroundProps: { colour: 'blue' },
         foreground: '#### Step 2\n\nLorem ipsum blue',
         altText: 'Blue background',
       },
       {
-        background: BasicStep,
+        background: MyBackground,
         backgroundProps: { colour: 'green' },
         foreground: '#### Step 3\n\nLorem ipsum green',
         altText: 'Green background',
@@ -100,71 +119,59 @@ export const meta = {
     ],
     foregroundPosition: 'middle',
     backgroundWidth: 'fluid',
-    embeddedLayout: 'fb',
-    embedded: false,
-  }}"
+  }}
 />
 
-<Story name="ArchieML" args="{docBlock}" {...withStoryDocs(archieMLDocs)} />
+<Story name="ArchieML and ai2svelte" exportName="ArchieML">
+  <Scroller
+    id={docBlock.id}
+    foregroundPosition={docBlock.foregroundPosition}
+    stackBackground={docBlock.stackBackground === 'true'}
+    steps={docBlock.steps.map((step) => ({
+      background: step.background,
+      foreground: step.foreground,
+      altText: step.altText,
+    }))}
+  />
+</Story>
 
 <Story
-  name="Foreground components"
-  args="{{
+  name="Custom foreground"
+  exportName="CustomForeground"
+  args={{
     steps: [
       {
-        background: BasicStep,
+        background: MyBackground,
         backgroundProps: { colour: 'red' },
-        foreground: InteractiveForeground,
+        foreground: MyInteractiveForeground,
       },
       {
-        background: BasicStep,
+        background: MyBackground,
         backgroundProps: { colour: 'blue' },
         foreground: '#### Step 2\n\nLorem ipsum blue',
       },
       {
-        background: BasicStep,
+        background: MyBackground,
         backgroundProps: { colour: 'green' },
-        foreground: InteractiveForeground,
+        foreground: MyInteractiveForeground,
         foregroundProps: { count: 100 },
       },
     ],
-    foregroundPosition: 'middle',
-    backgroundWidth: 'fluid',
-    embeddedLayout: 'fb',
-    embedded: false,
-  }}"
-  {...withStoryDocs(interactiveDocs)}
+  }}
 />
 
 <Story
-  name="Ai2svelte"
-  args="{{
-    steps: [
-      {
-        background: AiMap1,
-        backgroundProps: { colour: 'red' },
-        foreground: '#### Step 1\n\nLorem ipsum',
-        altText: 'A map showing the Upper West side in New York City.',
-      },
-      {
-        background: AiMap2,
-        backgroundProps: { colour: 'blue' },
-        foreground: '#### Step 2\n\nLorem ipsum',
-        altText:
-          'The same map now highlights 98th Street where something interesting happened.',
-      },
-      {
-        background: AiMap3,
-        backgroundProps: { colour: 'green' },
-        foreground: '#### Step 3\n\nLorem ipsum',
-        altText:
-          'The same map now highlights three locations near 98th Street where something particulary important happened.',
-      },
-    ],
-    foregroundPosition: 'middle',
-    backgroundWidth: 'fluid',
-    embeddedLayout: 'fb',
-    embedded: false,
-  }}"
-  {...withStoryDocs(ai2svelteDocs)}
-/>
+  name="Custom foreground with ArchiemL"
+  exportName="CustomforegroundArchieML"
+>
+  <Scroller
+    id={docBlockCustomForeground.id}
+    foregroundPosition={docBlockCustomForeground.foregroundPosition}
+    stackBackground={docBlockCustomForeground.stackBackground === 'true'}
+    steps={docBlockCustomForeground.steps.map((step) => ({
+      background: step.background,
+      foreground: step.foreground,
+      altText: step.altText,
+    }))}
+  />
+</Story>

package/dist/components/Scroller/Scroller.stories.svelte.d.ts

@@ -1,40 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        steps: {
-            control: boolean;
-        };
-        backgroundWidth: {
-            control: string;
-            options: string[];
-        };
-        foregroundPosition: {
-            control: string;
-            options: string[];
-        };
-        embeddedLayout: {
-            control: string;
-            options: string[];
-        };
+import Scroller from './Scroller.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof Scroller;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ScrollerProps = typeof __propDef.props;
-export type ScrollerEvents = typeof __propDef.events;
-export type ScrollerSlots = typeof __propDef.slots;
-export default class Scroller extends SvelteComponent<ScrollerProps, ScrollerEvents, ScrollerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Scroller: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Scroller = InstanceType<typeof Scroller>;
+export default Scroller;

package/dist/components/Scroller/Scroller.svelte

@@ -1,31 +1,106 @@
 <!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) -->
-<script>export let id = "";
-export let steps = [];
-export let backgroundWidth = "fluid";
-export let foregroundPosition = "middle";
-export let stackBackground = true;
-export let preload = 1;
-export let embedded = false;
-export let embeddedLayout = "fb";
-export let threshold = 0.5;
-export let top = 0;
-export let bottom = 1;
-export let parallax = false;
-let cls = "";
-export { cls as class };
-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";
-let index = 0;
-let offset;
-let progress;
+<script lang="ts">
+  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';
+
+  // Types
+  import type {
+    ContainerWidth,
+    ForegroundPosition,
+    ScrollerStep,
+  } from '../@types/global';
+
+  interface Props {
+    /**
+     * 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 foreground 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;
+    /** ID of the scroller container */
+    id?: string;
+    /** 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>
 
 {#if !embedded}
   <Block width="fluid" class="scroller-container fmy-6 {cls}" {id}>
-    <SvelteScroller
+    <ScrollerBase
       bind:index
       bind:offset
       bind:progress
@@ -35,28 +110,30 @@ let progress;
       {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>
+      {#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>
-      </div>
-
-      <div slot="foreground" class="foreground {foregroundPosition} w-full">
-        <Foreground {steps} />
-      </div>
-    </SvelteScroller>
+      {/snippet}
+      {#snippet foregroundSnippet()}
+        <div class="foreground {foregroundPosition} w-full">
+          <Foreground {steps} />
+        </div>
+      {/snippet}
+    </ScrollerBase>
   </Block>
 {:else}
   <Block width="widest" class="scroller-container embedded" {id}>