Skip to content
This repository was archived by the owner on Jun 5, 2019. It is now read-only.

Commit cf10d0d

Browse files
committed
Adds storybook meta components for consistency.
1 parent ed6a855 commit cf10d0d

File tree

6 files changed

+122
-7
lines changed

6 files changed

+122
-7
lines changed
Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
import * as React from 'react'
22
import { storiesOf } from '@storybook/react'
3+
import {
4+
StorybookStory as Story,
5+
StorybookGroup as Group,
6+
} from '../../../platform/components/storybook'
37

4-
import { FunDog } from './index'
8+
import { FunDog } from './fun-dog'
59

6-
storiesOf('Fun Dog', module).add('default', () => <FunDog />)
10+
storiesOf('Fun Dog', module).add('default', () =>
11+
<Story>
12+
<Group title='is a doggo'>
13+
<div style={{ display: 'flex', flexDirection: 'row' }}>
14+
<FunDog />
15+
</div>
16+
</Group>
17+
</Story>,
18+
)
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './storybook-label'
2+
export * from './storybook-group'
3+
export * from './storybook-story'
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as React from 'react'
2+
import { CSSProperties } from 'react'
3+
import { StorybookLabel } from './storybook-label'
4+
5+
export const StorybookGroup: React.StatelessComponent<{ title: string }> = props => {
6+
const style: CSSProperties = {
7+
paddingBottom: 20,
8+
}
9+
return (
10+
<div style={style}>
11+
<StorybookLabel title={props.title} />
12+
{props.children}
13+
</div>
14+
)
15+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as React from 'react'
2+
import { CSSProperties } from 'react'
3+
4+
const textStyle: CSSProperties = {
5+
marginLeft: -20,
6+
color: '#3d3d3d',
7+
borderBottom: '1px solid #eee',
8+
paddingBottom: 5,
9+
marginBottom: 5,
10+
fontFamily: 'Helvetica Neue',
11+
fontSize: 14,
12+
}
13+
14+
export const StorybookLabel: React.StatelessComponent<{ title: string }> = props =>
15+
<p style={textStyle}>
16+
{props.title}
17+
</p>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from 'react'
2+
import { CSSProperties } from 'react'
3+
4+
const style: CSSProperties = {
5+
paddingLeft: 20,
6+
paddingRight: 20,
7+
}
8+
9+
export const StorybookStory: React.StatelessComponent<{}> = props =>
10+
<div style={style}>
11+
{props.children}
12+
</div>
Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,66 @@
11
import * as React from 'react'
2+
import { StorybookStory as Story, StorybookGroup as Group } from '../storybook'
3+
24
import { storiesOf } from '@storybook/react'
35

46
import { Text } from './index'
57

6-
storiesOf('Text', module).add('default', () => <Text>Hello World!</Text>).add('with children', () =>
7-
<Text>
8-
<strong>I am STRONG</strong>
9-
</Text>,
10-
)
8+
storiesOf('Text', module)
9+
.add('text styles', () =>
10+
<Story>
11+
<Group title='regular text'>
12+
<Text>Hello World!</Text>
13+
<Text>$123.45</Text>
14+
<Text>The quick brown fox jumped over the slow lazy dog.</Text>
15+
</Group>
16+
<Group title='huge paragraph'>
17+
<Text>
18+
Wayfarers intelligentsia salvia sartorial keffiyeh locavore direct trade flexitarian
19+
vexillologist ugh single-origin coffee. Hexagon heirloom direct trade palo santo
20+
distillery, PBR&B bespoke fanny pack adaptogen affogato bitters kombucha sartorial taiyaki
21+
next level. Cliche artisan iPhone bushwick church-key. Artisan forage mustache, chartreuse
22+
vexillologist echo park cronut. 8-bit fanny pack 90's post-ironic venmo vegan. Humblebrag
23+
cliche pork belly, cronut twee wayfarers salvia meditation plaid cornhole. Tumeric
24+
literally yr XOXO, ennui single-origin coffee blog jianbing jean shorts plaid typewriter
25+
prism whatever pabst flannel. Tousled lomo next level pickled mixtape. Everyday carry
26+
ennui polaroid chartreuse, biodiesel trust fund hashtag umami cardigan hot chicken
27+
locavore gochujang quinoa coloring book williamsburg. Next level 8-bit cornhole brunch
28+
venmo. Enamel pin normcore DIY jianbing irony thundercats. Taxidermy quinoa kinfolk,
29+
hexagon godard hell of banjo forage ugh blog. Kale chips umami +1 shabby chic air plant
30+
keffiyeh authentic whatever sriracha wayfarers letterpress tofu brooklyn next level
31+
salvia. Selfies readymade vegan synth chillwave pug banjo dreamcatcher freegan. Artisan
32+
cliche subway tile mumblecore, whatever pok pok tote bag celiac hella poke tousled
33+
listicle. Deep v unicorn scenester cred direct trade kickstarter microdosing cardigan
34+
mustache ennui tumblr umami farm-to-table literally listicle. Post-ironic semiotics venmo
35+
gochujang cray green juice lo-fi cardigan tilde prism pop-up jean shorts shoreditch occupy
36+
readymade. Portland messenger bag art party, succulents cred lyft bespoke. Kinfolk plaid
37+
selfies pinterest iPhone pug narwhal, fashion axe coloring book meditation tousled. Lyft
38+
trust fund copper mug DIY la croix banh mi. Jianbing raclette man bun mustache tote bag.
39+
Vinyl taiyaki kombucha tattooed, try-hard blog freegan you probably haven't heard of them
40+
schlitz shaman listicle chambray. Swag slow-carb enamel pin affogato migas bespoke fashion
41+
axe flannel prism marfa activated charcoal pop-up shabby chic. Oh. You need a little dummy
42+
text for your mockup? How quaint. I bet you’re still using Bootstrap too…
43+
</Text>
44+
</Group>
45+
<Group title='style={{ color: &quot;red&quot; }}'>
46+
<Text style={{ color: 'red' }}>Hello World!</Text>
47+
</Group>
48+
</Story>,
49+
)
50+
.add('with nested children', () =>
51+
<Story>
52+
<Group title='with nested children'>
53+
<Text>
54+
<p>
55+
<strong>I am STRONG</strong>
56+
</p>
57+
<p>
58+
<i>I am ITALIC</i>
59+
</p>
60+
<p>
61+
<Text>I am another nested Text component.</Text>
62+
</p>
63+
</Text>
64+
</Group>
65+
</Story>,
66+
)

0 commit comments

Comments
 (0)