From 703dec371d3368e3cdadb100605d48998112ec43 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Fri, 26 Aug 2022 20:09:11 +0100 Subject: [PATCH] scroller props example --- .../GraphicBlock/stories/docs/ai2svelte.md | 2 +- .../GraphicBlock/stories/docs/quickit.md | 61 +++++++------------ .../Scroller/Scroller.stories.svelte | 31 +++++++++- src/components/Scroller/docProps.ts | 35 +++++++++++ .../Scroller/stories/docs/ai2svelte.md | 8 +-- .../Scroller/stories/docs/quickit.md | 52 ++++++++++++++++ src/index.js | 1 + 7 files changed, 144 insertions(+), 46 deletions(-) create mode 100644 src/components/Scroller/docProps.ts create mode 100644 src/components/Scroller/stories/docs/quickit.md diff --git a/src/components/GraphicBlock/stories/docs/ai2svelte.md b/src/components/GraphicBlock/stories/docs/ai2svelte.md index 3c968f33..e87c2c0e 100644 --- a/src/components/GraphicBlock/stories/docs/ai2svelte.md +++ b/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 +``` + +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 - - - -{#each content.blocks as block} - {#if block.Type === 'text'} - - - - {:else if block.Type === 'ai2svelte' && block.ID === 'my-map'} - - - - - - - {/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. diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte index f1a4de7e..6412d867 100644 --- a/src/components/Scroller/Scroller.stories.svelte +++ b/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 @@ }} /> + + { + 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, + })), + }; +}; diff --git a/src/components/Scroller/stories/docs/ai2svelte.md b/src/components/Scroller/stories/docs/ai2svelte.md index 5739b837..532bca92 100644 --- a/src/components/Scroller/stories/docs/ai2svelte.md +++ b/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 diff --git a/src/components/Scroller/stories/docs/quickit.md b/src/components/Scroller/stories/docs/quickit.md new file mode 100644 index 00000000..b3438765 --- /dev/null +++ b/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 + + +``` + +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 +[] + +``` diff --git a/src/index.js b/src/index.js index d86f6020..91614905 100644 --- a/src/index.js +++ b/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';