scroller props example

src/components/GraphicBlock/stories/docs/ai2svelte.md

@@ -1,4 +1,4 @@
-You can use `GraphicBlock` with components created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
+A more detailed example of using `GraphicBlock` with components created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
 
 ```svelte
 <script>

src/components/GraphicBlock/stories/docs/quickit.md

@@ -1,9 +1,27 @@
-An example of using `GraphicBlock` in the Graphics Kit with an ai2svelte chart and a Google Doc.
+For Graphics Kit users, the `GraphicBlock` component is built-in to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics.
+
+First, import your ai2svelte graphic in `App.svelte` and add it to the `aiCharts` object;
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Other stuff...
+
+  import AiMap from './ai2svelte/my-map.svelte';
+
+  const aiCharts = {
+    // Other charts...
+    AiMap,
+  };
+</script>
+```
+
+Then add the following structure to your Google Doc, taking care that the name of your chart in the `aiCharts` object matches the name of your `Chart`:
 
 ```yaml
 # Google doc block
-Type: ai2svelte
-ID: my-map
+Type: ai-graphic
+Chart: AiMap
 Width: normal
 TextWidth: normal
 Title: Earthquake in Haiti
@@ -15,40 +33,3 @@ Notes: \Note: A shakemap represents the ground shaking produced by an earthquake
 Aria: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
 :end
 ```
-
-```svelte
-<!-- App.svelte -->
-<script>
-  // Import the component ai2svelte made
-  import MyMap from './ai2svelte/my-map.svelte';
-  
-  // These should be already imported for you.
-  import { GraphicBlock } from '@reuters-graphics/graphics-components';
-  import content from '$locales/en/content.json';
-  import { assets } from '$app/paths';
-</script>
-
-{#each content.blocks as block}
-  {#if block.Type === 'text'}
-    <!-- ... other blocks -->
-
-  <!-- Copy/paste into your blocks loop! -->
-  {:else if block.Type === 'ai2svelte' && block.ID === 'my-map'}
-    <GraphicBlock
-      width={block.Width}
-      textWidth={block.TextWidth}
-      title={block.Title}
-      description={block.Description}
-      notes={block.Notes}
-      ariaDescription={block.Aria}
-    >
-      <MyMap basePath={assets} />
-    </GraphicBlock>
-  <!-- END copy/paste -->
-
-
-  {/if}
-{/each}
-```
-
-> **Note:** Unlike other components you may use in the Kit, ai2svelte graphics have to be added individually to `App.svelte` and the ai2svelte component for each graphic passed into its respective `GraphicBlock`. That's why each block in the Google Doc has an `ID` key.

src/components/Scroller/Scroller.stories.svelte

@@ -7,6 +7,8 @@
   import interactiveDocs from './stories/docs/interactive.md?raw';
   // @ts-ignore
   import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
+  // @ts-ignore
+  import quickitDocs from './stories/docs/quickit.md?raw';
 
   import Scroller from './Scroller.svelte';
 
@@ -18,9 +20,30 @@
 
   import {
     withComponentDocs,
-    withStoryDocs,
+    withStoryDocs
   } from '$lib/docs/utils/withParams.js';
 
+  import { getScrollerPropsFromDoc } from './docProps';
+
+  const aiCharts = {
+    AiMap1,
+    AiMap2,
+    AiMap3,
+  };
+
+  const docBlock = {
+    Type: 'scroller',
+    Width: 'fluid',
+    ForegroundPosition: 'middle',
+    ID: 'my-scroller',
+    StackBackground: 'true',
+    Steps: [
+      { Background: 'AiMap1', Text: '#### Step 1\n\nLorem ipsum' },
+      { Background: 'AiMap2', Text: '#### Step 2\n\nLorem ipsum' },
+      { Background: 'AiMap3', Text: '#### Step 3\n\nLorem ipsum' },
+    ],
+  };
+
   const meta = {
     title: 'Components/Scroller',
     component: Scroller,
@@ -64,6 +87,12 @@
   }}
 />
 
+<Story
+  name="🚀 QUICKIT"
+  args={getScrollerPropsFromDoc(docBlock, aiCharts)}
+  {...withStoryDocs(quickitDocs)}
+/>
+
 <Story
   name="Foreground components"
   args={{

src/components/Scroller/docProps.ts

@@ -0,0 +1,35 @@
+import type { ComponentType, SvelteComponentTyped } from 'svelte';
+
+interface BlockStep {
+  Background: string;
+  Text: string;
+}
+
+interface Block {
+  Type: string;
+  Width: string;
+  ForegroundPosition: string;
+  StackBackground?: string;
+  EmbeddedLayout?: string;
+  ID?: string;
+  Steps: BlockStep[],
+}
+
+interface AiCharts {
+  [key: string]: ComponentType,
+};
+
+export const getScrollerPropsFromDoc = (docBlock: Block, aiCharts: AiCharts, assetsPath: string = '') => {
+  return {
+    id: docBlock.ID,
+    backgroundWidth: docBlock.Width,
+    foregroundPosition: docBlock.ForegroundPosition,
+    stackBackground: docBlock.StackBackground === 'true' || !docBlock.StackBackground,
+    embeddedLayout: docBlock.EmbeddedLayout,
+    steps: docBlock.Steps.map((step) => ({
+      background: aiCharts[step.Background],
+      backgroundProps: { assetsPath },
+      foreground: step.Text,
+    })),
+  };
+};

src/components/Scroller/stories/docs/ai2svelte.md

@@ -1,4 +1,4 @@
-You can, of course, use `Scroller` with graphics created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
+A more detailed example of using `Scroller` with graphics created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
 
 ```svelte
 <script>
@@ -11,9 +11,9 @@ You can, of course, use `Scroller` with graphics created by [ai2svelte](https://
   import { assets } from '$app/paths'; // If using with the Graphics Kit
 
   const steps = [
-    { background: MyAiMap1, backgroundProps: { basePath: assets }, foreground: '#### Step 1\n\nLorem ipsum' },
-    { background: MyAiMap2, backgroundProps: { basePath: assets }, foreground: '#### Step 2\n\nLorem ipsum' },
-    { background: MyAiMap3, backgroundProps: { basePath: assets }, foreground: '#### Step 3\n\nLorem ipsum' },
+    { background: MyAiMap1, backgroundProps: { assetsPath: assets }, foreground: '#### Step 1\n\nLorem ipsum' },
+    { background: MyAiMap2, backgroundProps: { assetsPath: assets }, foreground: '#### Step 2\n\nLorem ipsum' },
+    { background: MyAiMap3, backgroundProps: { assetsPath: assets }, foreground: '#### Step 3\n\nLorem ipsum' },
   ]
 </script>
 

src/components/Scroller/stories/docs/quickit.md

@@ -0,0 +1,52 @@
+For Graphics Kit users, the `Scroller` component is built-in for scrollytelling with [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics and text.
+
+First, import your ai2svelte graphics in `App.svelte` and add them to the `aiCharts` object;
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Other stuff...
+
+  import AiMap1 from './ai2svelte/my-map-1.svelte';
+  import AiMap2 from './ai2svelte/my-map-2.svelte';
+  import AiMap3 from './ai2svelte/my-map-3.svelte';
+
+  const aiCharts = {
+    // Other charts...
+    AiMap1,
+    AiMap2,
+    AiMap3,
+  };
+</script>
+```
+
+Then add the following structure to your Google Doc, taking care that the names of your charts in the `aiCharts` object match the names of your step backgrounds:
+
+```yaml
+# Google doc block
+Type: ai-scroller
+ID: my-map-scroller
+Width: normal
+ForegroundPosition: middle
+StackBackground: true
+[.Steps]
+  Background: AiMap1
+  Text: #### Step 1
+
+  Lorem ipsum
+  :end
+
+  Background: AiMap2
+  Text: #### Step 2
+
+  Lorem ipsum
+  :end
+
+  Background: AiMap3
+  Text: #### Step 3
+
+  Lorem ipsum
+  :end
+[]
+
+```

src/index.js

@@ -31,3 +31,4 @@ export { default as Visible } from './components/Visible/Visible.svelte';
 
 // Utilities
 export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps.js';
+export { getScrollerPropsFromDoc } from './components/Scroller/docProps.js';