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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<script module>
import { BarbiTheme, Panel } from '$lib';
import { defineMeta } from '@storybook/addon-svelte-csf';
const { Story } = defineMeta({
title: 'Components/Atoms/Panel',
component: Panel,
});
</script>
<script>
</script>
<Story name="Simple Panel">
{#snippet children(args)}
<BarbiTheme />
<Panel {...args}>
The most basic panel type
</Panel>
<Panel flat {...args}>
A basic panel without shadow
</Panel>
{/snippet}
</Story>
<Story name="Sizable Panel">
{#snippet children(args)}
<BarbiTheme />
<Panel space="none" {...args}>
space="none"
</Panel>
<Panel space="sm" {...args}>
space="sm"
</Panel>
<Panel space="md" {...args}>
space="md"
</Panel>
<Panel space="lg" {...args}>
space="lg"
</Panel>
{/snippet}
</Story>
<Story name="Coloured Panel">
{#snippet children(args)}
<BarbiTheme />
<div class="storyboard-grid">
<Panel variant="primary" {...args}>
variant="primary"
</Panel>
<Panel variant="secondary" {...args}>
variant="secondary"
</Panel>
<Panel variant="success" {...args}>
variant="success"
</Panel>
<Panel variant="error" {...args}>
variant="error"
</Panel>
<Panel variant="emphasis" {...args}>
variant="emphasis"
</Panel>
<Panel variant="mustard" {...args}>
variant="mustard"
</Panel>
<Panel variant="pastel" {...args}>
variant="pastel"
</Panel>
<Panel variant="brick" {...args}>
variant="brick"
</Panel>
<Panel variant="neon" {...args}>
variant="neon"
</Panel>
<Panel variant="slate" {...args}>
variant="slate"
</Panel>
</div>
{/snippet}
</Story>
<Story name="Hover Effect Panel">
{#snippet children(args)}
<BarbiTheme />
<Panel {...args} hover>
hover={true}
</Panel>
{/snippet}
</Story>
<Story name="Press Effect Panel">
{#snippet children(args)}
<BarbiTheme />
<Panel {...args} hover active>
hover={true} active={true}
</Panel>
<Panel {...args} tag="button" hover active>
hover={true} active={true}
</Panel>
{/snippet}
</Story>
<style>
.storyboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: max-content;
gap: var(--spacing-md);
}
</style>