-
Notifications
You must be signed in to change notification settings - Fork 0
/
storybook.tsx
63 lines (58 loc) · 1.03 KB
/
storybook.tsx
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
import React from "react"
import { storiesOf } from "@storybook/react"
import {
boomshak,
camelProps,
compile,
RegularBackground,
RegularForeground,
} from "./boomshak"
function Boomshak({
text,
layers = undefined,
lineHeight = 16,
}): React.ReactElement {
const element = boomshak({
text,
layers,
lineHeight,
})
return compile(
element,
([name, props, children], i) => {
return React.createElement(
name,
{
key: i,
...camelProps(props)
},
children,
)
}
)
}
const stories = storiesOf("boomshak", module)
;[64, 32, 16].forEach(lineHeight => {
stories.add(`boomshak [${lineHeight}]`, () => (
<Boomshak
text="boomshak"
lineHeight={lineHeight}
/>
))
})
stories.add(`custom layer`, () => (
<Boomshak
text="custom"
layers={[
{
...RegularBackground,
"stroke-width": 1,
},
{
...RegularForeground,
"stroke-width": 0.6,
},
]}
lineHeight={64}
/>
))