wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ty again

Browse source
This commit is contained in:
Jon McClure 2022-08-26 20:15:58 +01:00
parent bdeb4a94d1
commit 15ed1bccc8
3 changed files with 98 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/components/Scroller/Scroller.stories.svelte
View file

@ -20,7 +20,7 @@
import {
withComponentDocs,
withStoryDocs
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
import { getScrollerPropsFromDoc } from './docProps';
@ -74,53 +74,90 @@
<Story
name="Default"
args={{
args="{{
steps: [
{ background: BasicStep, backgroundProps: { colour: 'red' }, foreground: '#### Step 1\n\nLorem ipsum red' },
{ background: BasicStep, backgroundProps: { colour: 'blue' }, foreground: '#### Step 2\n\nLorem ipsum blue' },
{ background: BasicStep, backgroundProps: { colour: 'green' }, foreground: '#### Step 3\n\nLorem ipsum green' },
{
background: BasicStep,
backgroundProps: { colour: 'red' },
foreground: '#### Step 1\n\nLorem ipsum red',
},
{
background: BasicStep,
backgroundProps: { colour: 'blue' },
foreground: '#### Step 2\n\nLorem ipsum blue',
},
{
background: BasicStep,
backgroundProps: { colour: 'green' },
foreground: '#### Step 3\n\nLorem ipsum green',
},
],
foregroundPosition: 'middle',
backgroundWidth: 'fluid',
embeddedLayout: 'fb',
embedded: false,
}}
}}"
/>
<Story
name="🚀 QUICKIT"
args={getScrollerPropsFromDoc(docBlock, aiCharts)}
args="{getScrollerPropsFromDoc(docBlock, aiCharts)}"
{...withStoryDocs(quickitDocs)}
/>
<Story
name="Foreground components"
args={{
args="{{
steps: [
{ background: BasicStep, backgroundProps: { colour: 'red' }, foreground: InteractiveForeground },
{ background: BasicStep, backgroundProps: { colour: 'blue' }, foreground: '#### Step 2\n\nLorem ipsum blue' },
{ background: BasicStep, backgroundProps: { colour: 'green' }, foreground: InteractiveForeground, foregroundProps: { count: 100 } },
{
background: BasicStep,
backgroundProps: { colour: 'red' },
foreground: InteractiveForeground,
},
{
background: BasicStep,
backgroundProps: { colour: 'blue' },
foreground: '#### Step 2\n\nLorem ipsum blue',
},
{
background: BasicStep,
backgroundProps: { colour: 'green' },
foreground: InteractiveForeground,
foregroundProps: { count: 100 },
},
],
foregroundPosition: 'middle',
backgroundWidth: 'fluid',
embeddedLayout: 'fb',
embedded: false,
}}
}}"
{...withStoryDocs(interactiveDocs)}
/>
<Story
name="Ai2svelte"
args={{
args="{{
steps: [
{ background: AiMap1, backgroundProps: { colour: 'red' }, foreground: '#### Step 1\n\nLorem ipsum' },
{ background: AiMap2, backgroundProps: { colour: 'blue' }, foreground: '#### Step 2\n\nLorem ipsum' },
{ background: AiMap3, backgroundProps: { colour: 'green' }, foreground: '#### Step 3\n\nLorem ipsum' },
{
background: AiMap1,
backgroundProps: { colour: 'red' },
foreground: '#### Step 1\n\nLorem ipsum',
},
{
background: AiMap2,
backgroundProps: { colour: 'blue' },
foreground: '#### Step 2\n\nLorem ipsum',
},
{
background: AiMap3,
backgroundProps: { colour: 'green' },
foreground: '#### Step 3\n\nLorem ipsum',
},
],
foregroundPosition: 'middle',
backgroundWidth: 'fluid',
embeddedLayout: 'fb',
embedded: false,
}}
}}"
{...withStoryDocs(ai2svelteDocs)}
/>
/>

4
src/components/Scroller/docProps.ts
View file

@ -1,4 +1,4 @@
import type { ComponentType, SvelteComponentTyped } from 'svelte';
import type { ComponentType } from 'svelte';
interface BlockStep {
Background: string;
@ -17,7 +17,7 @@ interface Block {
interface AiCharts {
[key: string]: ComponentType,
};
}
export const getScrollerPropsFromDoc = (docBlock: Block, aiCharts: AiCharts, assetsPath: string = '') => {
return {

60
src/components/Scroller/stories/docs/ai2svelte.md
View file

@ -11,19 +11,30 @@ A more detailed example of using `Scroller` with graphics created by [ai2svelte]
import { assets } from '$app/paths'; // If using with the Graphics Kit
const steps = [
{ 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' },
]
{
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>
<Scroller
steps="{steps}"
backgroundWidth="fluid"
foregroundPosition="middle"
stackBackground={true}
embedded={false}
stackBackground="{true}"
embedded="{false}"
/>
```
@ -55,34 +66,45 @@ Lorem Ipsum
// This should be already imported for you.
import content from '$locales/en/content.json';
// Get the data for the block in content by its ID
const scrollerBlock = content.blocks.find(block => block.ID === 'map-scrolly');
const scrollerBlock = content.blocks.find(
(block) => block.ID === 'map-scrolly'
);
// Now plug your text into your step foregrounds
const steps = [
{ background: MyAiMap1, backgroundProps: { basePath: assets }, foreground: scrollerBlock.Step1Text },
{ background: MyAiMap2, backgroundProps: { basePath: assets }, foreground: scrollerBlock.Step2Text },
{ background: MyAiMap3, backgroundProps: { basePath: assets }, foreground: scrollerBlock.Step3Text },
]
{
background: MyAiMap1,
backgroundProps: { basePath: assets },
foreground: scrollerBlock.Step1Text,
},
{
background: MyAiMap2,
backgroundProps: { basePath: assets },
foreground: scrollerBlock.Step2Text,
},
{
background: MyAiMap3,
backgroundProps: { basePath: assets },
foreground: scrollerBlock.Step3Text,
},
];
</script>
{#each content.blocks as block}
{#if block.Type === 'text'}
<!-- ... other blocks -->
<!-- Copy/paste into your blocks loop! -->
<!-- Copy/paste into your blocks loop! -->
{:else if block.Type === 'scroller' && block.ID === 'map-scrolly'}
<Scroller
steps="{steps}"
backgroundWidth="fluid"
foregroundPosition="middle"
stackBackground={true}
embedded={false}
stackBackground="{true}"
embedded="{false}"
/>
<!-- END copy/paste -->
<!-- END copy/paste -->
{/if}
{/each}
```