import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as s}from"./index-Z-6k0Xrj.js";import{S as c}from"./Scroller.stories-Dkiataa7.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./ScrollerBase-DJMKplMV.js";import"./index-client-BAw8T8-V.js";import"./this-CrUBQEQ_.js";import"./window-DXjFTZv5.js";import"./each-CVpBMMjG.js";import"./Markdown-DUxFwijc.js";import"./Block-D3Ui8rd-.js";import"./size-DMdj3-I9.js";function r(o){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...t(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:c}),`
`,e.jsx(n.h1,{id:"scroller",children:"Scroller"}),`
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Scroller"})," component creates a basic scrollytelling graphic with layout options."]}),`
`,e.jsxs(n.p,{children:["This component is designed to handle most common layouts for scrollytelling. To make something more complex, customise ",e.jsx(n.a,{href:"?path=/story/components-graphics-scrollerbase--docs",children:"ScrollerBase"}),", which is a Svelte 5 version of the ",e.jsx(n.a,{href:"https://github.com/sveltejs/svelte-scroller",rel:"nofollow",children:"svelte-scroller"}),"."]}),`
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scroller--demo",children:"Demo"})}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { Scroller } from '@reuters-graphics/graphics-components';

  import MyBackground from './MyBackground.svelte'; // Your own background component

  // Array of step objects that define the steps in your scroller.
  const steps = [
    {
      background: MyBackground,
      backgroundProps: { colour: 'red' }, // Optional props for your background component
      foreground: '#### Step 1\\n\\nLorem ipsum red',
      altText: 'Red background',
    },
    {
      background: MyBackground,
      backgroundProps: { colour: 'blue' },
      foreground: '#### Step 2\\n\\nLorem ipsum blue',
      altText: 'Blue background',
    },
    {
      background: MyBackground,
      backgroundProps: { colour: 'green' },
      foreground: '#### Step 3\\n\\nLorem ipsum green',
      altText: 'Green background',
    },
  ];
<\/script>

<Scroller {steps} foregroundPosition="middle" backgroundWidth="fluid" />
`})}),`
`,e.jsx(n.h2,{id:"using-with-archieml-and-ai2svelte",children:"Using with ArchieML and ai2svelte"}),`
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scroller--archie-ml",children:"Demo"})}),`
`,e.jsxs(n.p,{children:["In your graphics kit project, import your ai2svelte graphics in ",e.jsx(n.code,{children:"App.svelte"})," and add them to the ",e.jsx(n.code,{children:"aiCharts"})," object:"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
<script>
  import AiMap1 from './ai2svelte/my-map-1.svelte';
  import AiMap2 from './ai2svelte/my-map-2.svelte';
  import AiMap3 from './ai2svelte/my-map-3.svelte';

  import content from '$locales/en/content.json';

  // Graphics kit only
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
  import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...

  const aiCharts = {
    AiMap1,
    AiMap2,
    AiMap3,
    // Other charts...
  };
<\/script>
`})}),`
`,e.jsxs(n.p,{children:["Then add the following structure to your ArchieML doc, making sure that the names of your charts in the ",e.jsx(n.code,{children:"aiCharts"})," object match the names of each step's ",e.jsx(n.code,{children:"background"})," in the ArchieML doc:"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`# ArchieML doc
[blocks]
type: ai-scroller
id: my-map-scroller
width: fluid
foregroundPosition: right
stackBackground: true

# Array of step objects
  [.steps]
    background: AiMap1
    foreground: #### Step 1

    Here's where something happend.
    :end
    altText: A map showing the Upper West side in New York City.

    Can add paragraphs of alt text if you want to break up sentences.
    :end

    background: AiMap2
    foreground: #### Step 2

    Something happened on some street...
    :end
    altText: The same map now highlights 98th Street.
    :end

    background: AiMap3
    foreground: #### Step 3

    ... and now there are multiple protests.
    :end
    altText: The same map now highlights three locations near 98th Street where something particulary important happened.
    :end
  []
[]
`})}),`
`,e.jsxs(n.p,{children:["Then parse the relevant ArchieML block object before passing to the ",e.jsx(n.code,{children:"Scroller"})," component."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
{#each content.blocks as block}
  {#if block.type === 'ai-scroller'}
    <Scroller
      id={block.id}
      backgroundWidth={block.backgroundWidth}
      foregroundPosition={block.foregroundPosition}
      stackBackground={truthy(block.stackBackground)}
      steps={block.steps.map((step) => ({
        background: aiCharts[step.background],
        backgroundProps: { assetsPath: assets || '/' },
        foreground: step.foreground,
        altText: step.altText,
      }))}
    />
  {/if}
{/each}
`})}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," Some props, like ",e.jsx(n.code,{children:"stackBackground"}),", expect boolean values. If you're using the graphics kit, use the ",e.jsx(n.code,{children:"truthy()"})," util function to convert a string value to a boolean."]}),`
`]}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," In the graphics kit, the image source paths in ai2svelte components have to be fixed by passing ",e.jsx(n.code,{children:"assets"})," to each step object, like in the example above."]}),`
`]}),`
`,e.jsx(n.h2,{id:"custom-foreground",children:"Custom foreground"}),`
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scroller--custom-foreground",children:"Demo"})}),`
`,e.jsx(n.p,{children:"Instead of just text, you can use components as foregrounds, and optionally pass props to it."}),`
`,e.jsx(n.p,{children:"If you're customising your own foreground component, remember to add alt text that describes the background graphic."}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import MyBackground from './MyBackground.svelte'; // Your own background component
  import MyInteractiveForeground from './MyInteractiveForeground.svelte'; // Your custom foreground component

  const steps = [
    {
      background: MyBackground,
      backgroundProps: { colour: 'red' }, // Props for your background component, if needed
      foreground: MyInteractiveForeground, // Custom foreground component
    },
    {
      background: MyBackground,
      backgroundProps: { colour: 'blue' },
      foreground: '#### Step 2\\n\\nLorem ipsum blue', // You can still add a markdown string as foreground; you can mix and match
    },
    {
      background: MyBackground,
      backgroundProps: { colour: 'green' },
      foreground: MyInteractiveForeground,
      foregroundProps: { count: 100 }, // Props for your custom foreground component, if needed
    },
  ];
<\/script>

<Scroller {steps} />
`})}),`
`,e.jsx(n.h2,{id:"custom-foreground-with-archieml",children:"Custom foreground with ArchieML"}),`
`,e.jsx(n.p,{children:e.jsx(n.a,{href:"?path=/story/components-graphics-scroller--customforeground-archie-ml",children:"Demo"})}),`
`,e.jsx(n.p,{children:"You can use custom foreground components with ArchieML with a few additional steps."}),`
`,e.jsxs(n.p,{children:["In your graphics kit project's ",e.jsx(n.code,{children:"App.svelte"}),", import your custom foregroud components and add them to a ",e.jsx(n.code,{children:"foregroundComponents"})," object, just as you import ai2svelte background graphics and add them to the ",e.jsx(n.code,{children:"aiCharts"})," object:"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
<script>
  import content from '$locales/en/content.json';

  // Background ai2svelte graphics
  import AiMap1 from './ai2svelte/my-map-1.svelte';
  import AiMap2 from './ai2svelte/my-map-2.svelte';
  import AiMap3 from './ai2svelte/my-map-3.svelte';

  // Foreground components, which can be ai2svelte or not.
  import Foreground1 from './ai2svelte/my-foreground-1.svelte';

  // Graphics kit only
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
  import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...

  // Background ai2svelte graphics components
  const aiCharts = {
    AiMap1,
    AiMap2,
    AiMap3,
    // Other charts...
  };

  // Foreground components
  const foregroundComponents = {
    Foreground1,
    // Other components...
  };
<\/script>
`})}),`
`,e.jsxs(n.p,{children:["Then add the following structure to your ArchieML doc, making sure that the names of your charts in the ",e.jsx(n.code,{children:"aiCharts"})," and ",e.jsx(n.code,{children:"foregroundComponents"})," objects match the names of each step's ",e.jsx(n.code,{children:"background"})," and ",e.jsx(n.code,{children:"foreground"})," in the ArchieML doc:"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-yaml",children:`# ArchieML doc
[blocks]
type: ai-scroller
id: my-map-scroller
foregroundPosition: left
stackBackground: true

# Array of step objects
  [.steps]
    background: AiMap1
    # You can still use a markdown string even if other step/s use a custom foreground component
    foreground: #### Step 1

    Here's where something happend.
    :end
    altText: A map showing the Upper West side in New York City.
    :end

    background: AiMap2
    foreground: Foreground1 # The name of your custom foreground component
    altText: The same map now highlights 98th Street.
    :end
    background: AiMap3
    foreground: #### Step 3

    ... and now there are multiple protests.
    :end
    altText: The same map now highlights three locations near 98th Street where something particulary important happened.
    :end
  []
[]
`})}),`
`,e.jsxs(n.p,{children:["Then parse the relevant ArchieML block object before passing to the ",e.jsx(n.code,{children:"Scroller"})," component."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<!-- App.svelte -->
{#each content.blocks as block}
  {#if block.type === 'ai-scroller'}
    <Scroller
      id={block.id}
      backgroundWidth={block.width}
      foregroundPosition={block.foregroundPosition}
      stackBackground={truthy(block.stackBackground)}
      steps={block.steps.map((step) => ({
        background: aiCharts[step.background],
        backgroundProps: { assetsPath: assets || '/' },
        foreground: foregroundComponents[step.foreground] || step.foreground,
        foregroundProps: { assetsPath: assets || '/' },
        altText: step.altText,
      }))}
    />
  {/if}
{/each}
`})}),`
`,e.jsxs(n.blockquote,{children:[`
`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," You only need to pass ",e.jsx(n.code,{children:"foregroundProps: { assetsPath: assets || '/' }"})," in the graphics kit if your foreground components are ai2svelte graphicss."]}),`
`]})]})}function I(o={}){const{wrapper:n}={...t(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(r,{...o})}):r(o)}export{I as default};