@reuters-graphics/graphics-components 3.9.0 → 3.10.1

package/dist/llm-docs/components/HorizontalScroller.md

@@ -0,0 +1,523 @@
+# HorizontalScroller
+
+**Category:** Components/Graphics/HorizontalScroller
+
+**Import:** `import { HorizontalScroller } from '@reuters-graphics/graphics-components'`
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|:--------:|-------------|
+| `id` | `string` | `''` |  | Optional id for the scroller container |
+| `class` | `string` | `''` |  | Optional additional classes for the scroller container |
+| `height` | `string` | `'200lvh'` |  | Height of the scroller container in CSS `vh` units. Set it to `100lvh` when using inside ScrollerBase. |
+| `progress` | `number` | `$bindable(0)` |  | Bindable progress value. Ideal range: `[0-1]`. Bind ScrollerBase's progress to this prop. |
+| `direction` | `'left' \| 'right'` | `'right'` |  | Direction of movement |
+| `children` | `Snippet` | — |  | Content to scroll |
+| `stops` | `number[]` | `[]` |  | Array of numbers desired as stops for the scroller |
+| `handleScroll` | `boolean` | `true` |  | Should the component handle scroll events? Set it to `false` when using inside ScrollerBase. |
+| `scrubbed` | `boolean` | `true` |  | Whether the stops should be scrubbed |
+| `easing` | `(t: number) => number` | `(t) => t` |  | Easing function for the progress/stops |
+| `duration` | `number` | `400` |  | Duration of the easing animation in milliseconds. Effective only when scrubbed is false. |
+| `showDebugInfo` | `boolean` | `false` |  | Whether to show debug info |
+| `mappedStart` | `number` | `0` |  | Modified starting scale. Default is 0 |
+| `mappedEnd` | `number` | `1` |  | Modified ending scale. Default is 1 |
+
+## Examples
+
+### Demo
+
+```svelte
+<DemoComponent>
+  <DemoSnippetBlock />
+</DemoComponent>
+```
+
+### With stops and easing
+
+```svelte
+<DemoComponent
+  stops={[0.2, 0.5, 0.9]}
+  duration={400}
+  toggleScrub={true}
+  easing={quartInOut}
+>
+  <DemoSnippetBlock />
+</DemoComponent>
+```
+
+### Extended boundaries
+
+```svelte
+<DemoComponent
+  mappedStart={-0.5}
+  mappedEnd={1.5}
+  easing={quartInOut}
+  stops={[0, 1]}
+>
+  <DemoSnippetBlock />
+</DemoComponent>
+```
+
+### Custom children
+
+```svelte
+<DemoComponent>
+  <CustomChildrenBlock />
+</DemoComponent>
+```
+
+### Scrollable ai2svelte
+
+```svelte
+<ScrollableGraphic />
+```
+
+### Scrollable ai2svelte (advanced)
+
+```svelte
+<AdvancedScrollableGraphic />
+```
+
+### With ScrollerBase
+
+```svelte
+<WithScrollerBaseComponent />
+```
+
+## Documentation
+
+# HorizontalScroller
+
+The `HorizontalScroller` component creates a horizontal scrolling section that scrolls through any child content wider than `100vw`.
+
+To use `HorizontalScroller`, wrap it around the content that you want to horizontally scroll through. The scroll length is controlled by the height of the `HorizontalScroller` container, which is set by the prop `height`. `height` defaults to `200lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `400lvh`.
+
+The child content inside the `HorizontalScroller` must be wider than `100vw` so that there is overflow to horizontal scroll through. By default, only the top `100lvh` of the child content is visible. You can use CSS `transform: translate()` on the child content to adjust its vertical positioning within the visible area.
+
+> 💡TIP: Use `lvh` or `svh` units instead of `vh` unit for the height, as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile or other devices where elements such as the address bar toggle between being shown and hidden.
+
+> 💡TIP: Set the `showDebugInfo` prop to `true` to visualise the scroll progress and other useful information.
+
+See the full list of available props under the `Controls` tab in the [demo](?path=/story/components-graphics-horizontalscroller--demo).
+
+```svelte
+<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <!-- Optionally set `height` prop to adjust scroll length. Defaults to `200lvh` -->
+  <HorizontalScroller>
+    <!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
+    <div style="width: 400vw; height: 100lvh;">
+      <img
+        src="my-wide-image.jpg"
+        alt="alt text"
+        style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0;"
+      />
+    </div>
+  </HorizontalScroller>
+</Block>
+```
+
+## Controlling scroll behaviour with stops and easing
+
+The `HorizontalScroller` allows you to control the horizontal scroll behaviour and pacing with various props.
+
+**`stops`:**
+
+`stops` is an optional prop that accepts an array of numbers between `0` and `1`. At these points, which corresponds to the scroll `progress` values, the scrolling stops or slows down. This is useful for adding custom pauses based on progress.
+
+For example, as shown in the demo below, if you define `stops` as `[0.2, 0.5, 0.9]`, the scrolling will pause or slow down at these `progress` values as the user scrolls through the `HorizontalScroller` section.
+
+**`scrubbed`:**
+
+The `scrubbed` prop controls whether the scrolling is tied exactly to the scroll position (`scrubbed: true`) or is smoothed out (`scrubbed: false`). This prop defaults to `true`.
+
+If `scrubbed` is set to `false` and `stops` are defined, the scrolling transitions smoothly between the stop values.
+
+**`easing`** and **`duration`**:
+
+`easing` accepts any easing function from `svelte/easing` or a custom easing function, while `duration` sets the time, in milliseconds, for each transition between stops.
+
+So, if the stops are at irregular intervals — for example, `[0.2, 0.9]` — the scroll to the first stop will be much quicker than the scroll to the second stop since the distance to travel is different but the duration of the transition is the same.
+
+By default, `duration` is set to `400` milliseconds.
+
+[Demo](?path=/story/components-graphics-horizontalscroller--with-stops)
+
+```svelte
+<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import { quartInOut } from 'svelte/easing';
+</script>
+
+<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller
+    stops={[0.2, 0.5, 0.9]}
+    duration={400}
+    scrubbed={false}
+    easing={quartInOut}
+    showDebugInfo={true}
+  >
+    <!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
+    <div style="width: 200vw; height: 100lvh;">
+      <img
+        src="my-wide-image.jpg"
+        alt="alt text"
+        style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0;"
+      />
+    </div>
+  </HorizontalScroller>
+</Block>
+```
+
+## Extended boundaries
+
+`HorizontalScroller` has `mappedStart` and `mappedEnd` props, which extend the horizontal scroll boundaries beyond the default 0 to 1 range. This is useful when you want to create an overscroll effect or have more control over the horizontal scroll range. By default, these values are set to 0 and 1 respectively.
+
+If using custom `mappedStart` and `mappedEnd` values, you must also set `stops` values that are within the mapped range.
+
+> 💡TIP: In the debugging info box, `Progress` indicates the raw scroll progress value between `0` and `1`. `Mapped Progress` indicates the vertical progress mapped to `mappedStart` and `mappedEnd`. If they are not set, `Mapped Progress` is bound between 0 and 1 and matches `Progress`. `Eased Progress` indicates the scroll progress with any stops and easing applied. `Eased Progress` is what reflects the actual transition of the horizontal scroll position.
+
+[Demo](?path=/story/components-graphics-horizontalscroller--extended-boundaries)
+
+```svelte
+<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import { quartInOut } from 'svelte/easing';
+</script>
+
+<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller
+    mappedStart={-0.5}
+    mappedEnd={1.5}
+    stops={[0, 1]}
+    showDebugInfo={true}
+    easing={quartInOut}
+  >
+    <!-- Child content wider than 100vw. Only the top 100lvh is visible. -->
+    <div style="width: 200vw; height: 100lvh;">
+      <img
+        src="my-wide-image.jpg"
+        alt="alt text"
+        style="width: 100%; height: 100%; object-fit: cover; padding: 0; margin: 0;"
+      />
+    </div>
+  </HorizontalScroller>
+</Block>
+```
+
+## With ai2svelte components
+
+With [ai2svelte](https://reuters-graphics.github.io/ai2svelte/) v1.0.3 onwards, you can export your ai2svelte graphic with a wider-than-viewport layout and use it directly inside `HorizontalScroller` to create horizontally scrolling graphics.
+
+To do that, follow these steps:
+
+1. In Illustrator, rename your artboard with the breakpoint at which you want that artboard to be visible on the page. For example, to make the XL artboard visible on viewports wider than 1200px, rename it to `xl:1200`. You can have multiple artboards with different breakpoints.
+2. Add these properties to the ai2svelte settings and run the script to export the component.
+
+```yaml
+include_resizer_css: false
+respect_height: true
+allow_overflow: true
+```
+
+[Demo](?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte)
+
+```svelte
+<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import AiGraphic from './ai2svelte/ai-graphic.svelte';
+
+  // If using with the graphics kit
+  import { assets } from '$app/paths';
+
+  // Optional easing function
+  import { sineInOut } from 'svelte/easing';
+</script>
+
+<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller height="800lvh" easing={sineInOut} showDebugInfo>
+    <AiGraphic assetsPath={assets} />
+  </HorizontalScroller>
+</Block>
+```
+
+## With ai2svelte components: advanced
+
+You can use the bound prop `progress` to create advanced interactivity with an ai2svelte graphic.
+
+The demo below has 2 advanced interactions: fade in/out of caption boxes based on scroll position and parallax movement of a `png` layer.
+
+### Captions fading in/out
+
+Caption boxes are exported as `htext` [tagged layers](https://reuters-graphics.github.io/ai2svelte/users/tagged-layers/) in ai2svelte. In this example, we use the `handleScroll()` function to check the position of each caption box relative to the viewport width and set its opacity to `1` (visible) or `0` (hidden) based on whether the caption box is within the `threshold` of the viewport. In Adobe Illustrator, set `override_text: true` in the ai2svelte export settings to allow custom HTML content in tagged text layers.
+
+### Parallax effect with png layer
+
+This demo has a tagged `png` [layer](https://reuters-graphics.github.io/ai2svelte/users/tagged-layers/), which contains the foreground overlay image. The `handleScroll()` function uses the bound `progress` value to calculate a horizontal translation for the `png` layer, creating a parallax effect as the user scrolls through the `HorizontalScroller`.
+
+[Demo](?path=/story/components-graphics-horizontalscroller--scrollable-ai-2-svelte-advanced)
+
+```svelte
+<script lang="ts">
+  import {
+    HorizontalScroller,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import AiGraphic from './ai2svelte/ai-graphic.svelte';
+  import { sineInOut } from 'svelte/easing';
+
+  // If using with the graphics kit
+  import { assets } from '$app/paths';
+
+  // bind progress for advanced interactivity
+  let progress: number = $state(0);
+  let pngLayer: HTMLElement | null;
+  let captions: HTMLElement[] | null;
+  let threshold = 0.8;
+  let screenWidth: number = $state(0);
+
+  function handleScroll() {
+    // Create a parallax movement for the foreground png layer
+    if (pngLayer) {
+      pngLayer.style.transform = `scale(1.5) translateX(${map(progress, 0, 1, -15, 85)}%)`;
+    }
+
+    // For each caption, checks if position of the caption is below the threshold.
+    // If it is, show it. If not, hide it
+    if (captions?.length) {
+      captions.forEach((caption) => {
+        let captionWidth = caption.getBoundingClientRect().width;
+        let captionMidpoint =
+          caption.getBoundingClientRect().left + captionWidth / 2;
+
+        if (
+          captionMidpoint < screenWidth * threshold &&
+          caption.style.opacity !== '1'
+        ) {
+          caption.style.opacity = '1';
+        } else if (
+          captionMidpoint > screenWidth * threshold &&
+          caption.style.opacity !== '0'
+        ) {
+          caption.style.opacity = '0';
+        }
+      });
+    }
+  }
+
+  // Refetch new captions and png image every time the artboard changes
+  function onArtboardChange(artboard: HTMLElement) {
+    pngLayer = artboard.querySelector('.g-png-layer-overlay');
+    captions = Array.from(artboard.querySelectorAll('.g-captions'));
+
+    if (pngLayer) {
+      window.removeEventListener('scroll', handleScroll);
+      window.addEventListener('scroll', handleScroll, {
+        passive: true,
+      });
+
+      // to translate overlay layer on initial load
+      handleScroll();
+    }
+  }
+</script>
+
+<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller
+    height="800lvh"
+    bind:progress
+    easing={sineInOut}
+    showDebugInfo={true}
+  >
+    <AiGraphic
+      assetsPath={assets}
+      {onArtboardChange}
+      taggedText={{
+        htext: {
+          captions: {
+            caption1:
+              '<div class="scroller-caption"><strong>Caption 1!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
+            caption2:
+              '<div class="scroller-caption"><strong>Caption 2!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
+            caption3:
+              '<div class="scroller-caption"><strong>Caption 3!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
+            caption4:
+              '<div class="scroller-caption"><strong>Caption 4!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
+          },
+        },
+      }}
+    />
+  </HorizontalScroller>
+</Block>
+
+<style lang="scss">
+  :global(.scroller-caption) {
+    padding: 1rem;
+    margin: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 8px;
+    color: white;
+    filter: drop-shadow(0px 2px 16px rgba(0, 0, 0, 0.2));
+  }
+</style>
+```
+
+## With custom child components
+
+You can create a custom horizontal layout with any component and pass it as a child to the `HorizontalScroller`. Here's an example with `DatawrapperChart`, `Headline` and ai2svelte components laid out in a horizontal scroll.
+
+[Demo](?path=/story/components-graphics-horizontalscroller--custom-children)
+
+```svelte
+<script lang="ts">
+  import {
+    Block,
+    DatawrapperChart,
+    Headline,
+    HorizontalScroller,
+  } from '@reuters-graphics/graphics-components';
+  import AiChart from './ai2svelte/ai-chart.svelte';
+</script>
+
+<!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
+<Block width="fluid">
+  <HorizontalScroller>
+    <div id="horizontal-stack">
+      <div style="width: 100vw;">
+        <DatawrapperChart
+          title="Global abortion access"
+          ariaLabel="map"
+          id="abortion-rights-map"
+          src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html"
+          frameTitle=""
+          scrolling="no"
+          textWidth="normal"
+          width="wider"
+        />
+      </div>
+      <div style="width: 100vw;">
+        <Headline
+          hed="Reuters Graphics Interactive"
+          dek="The beginning of a beautiful page"
+          section="World News"
+        />
+      </div>
+      <div style="width: 100vw;">
+        <Block width="normal">
+          <AiChart />
+        </Block>
+      </div>
+    </div>
+  </HorizontalScroller>
+</Block>
+
+<style lang="scss">
+  #horizontal-stack {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    gap: 10vw;
+    height: 100%;
+  }
+</style>
+```
+
+## With ScrollerBase
+
+You can also integrate HorizontalScroller with `ScrollerBase` for a horizontal scroll with vertical captions.
+
+When using `HorizontalScroller` with `ScrollerBase` or other scrollers, you must:
+
+- Create a `progress` state variable and bind it to both `ScrollerBase` and `HorizontalScroller`
+- Set `HorizontalScroller`'s `height` to `100lvh`
+- Set `handleScroll` to `false`
+
+> **⚠️ Warning:** It is not recommended to use HorizontalScroller with vertical ScrollerBase. This example is only to serve the purpose of demonstrating how to control the HorizontalScroller with an external progress value (ScrollerBase's progress in this case).
+
+[Demo](?path=/story/components-graphics-horizontalscroller--with-scroller-base)
+
+```svelte
+<script lang="ts">
+  import {
+    HorizontalScroller,
+    ScrollerBase,
+    Block,
+  } from '@reuters-graphics/graphics-components';
+  import AiGraphic from './ai2svelte/ai-graphic.svelte';
+  import { circInOut } from 'svelte/easing';
+
+  // Optional: Bind your own variables to use them in your code.
+  let progress = $state(0);
+</script>
+
+<ScrollerBase bind:progress query="div.step-foreground-container">
+  {#snippet backgroundSnippet()}
+    <!-- Wrap `HorizontalScroller` in a fluid container for a full bleed experience -->
+    <Block width="fluid">
+      <HorizontalScroller
+        bind:progress
+        height="100lvh"
+        handleScroll={false}
+        showDebugInfo={true}
+      >
+        <AiGraphic />
+      </HorizontalScroller>
+    </Block>
+  {/snippet}
+  {#snippet foregroundSnippet()}
+    <!-- Add custom foreground HTML or component -->
+    <div class="step-foreground-container"><p>Step 1</p></div>
+    <div class="step-foreground-container"><p>Step 2</p></div>
+    <div class="step-foreground-container"><p>Step 3</p></div>
+    <div class="step-foreground-container"><p>Step 4</p></div>
+    <div class="step-foreground-container"><p>Step 5</p></div>
+  {/snippet}
+</ScrollerBase>
+
+<style lang="scss">
+  .step-foreground-container {
+    height: 100vh;
+    width: 50%;
+    background-color: rgba(0, 0, 0, 0);
+    padding: 1em;
+    margin: 0 auto 10px 0;
+    position: relative;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    p {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      padding: 1rem;
+      background-color: rgba(0, 0, 0, 0.8);
+      border-radius: 4px;
+      color: white;
+    }
+  }
+</style>
+```