Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script module>
import { BarbiTheme, CheckerboardPattern } from '$lib';
import { defineMeta } from '@storybook/addon-svelte-csf';
const { Story } = defineMeta({
title: 'Components/Patterns/Checkerboard',
component: CheckerboardPattern,
// tags: ['autodocs'],
argTypes: {
scale: { name: 'Scale', control: 'number' },
scrollDirection: { name: 'Scroll Direction', control: 'radio', options: [null, 'up-left'] },
},
args: {
scale: 1,
}
});
</script>
<script>
</script>
<Story name="Default Pattern">
{#snippet children(args)}
<BarbiTheme />
<CheckerboardPattern {...args} />
{/snippet}
</Story>
<Story
name="Modified Colours"
args={{ style: '--pattern-light: #ECA400; --pattern-dark: #27476E;', scale: 2 }}
>
{#snippet children(args)}
<BarbiTheme />
<CheckerboardPattern {...args} />
{/snippet}
</Story>
<Story
name="Scaled Pattern"
args={{ scale: 4 }}
>
{#snippet children(args)}
<BarbiTheme />
<CheckerboardPattern {...args} />
{/snippet}
</Story>
<Story
name="Scrolling Pattern"
args={{ scale: 4, scrollDirection: 'up-left' }}
>
{#snippet children(args)}
<BarbiTheme />
<CheckerboardPattern {...args} />
{/snippet}
</Story>