-
Notifications
You must be signed in to change notification settings - Fork 5
/
Paragraph.story.js
87 lines (83 loc) · 1.94 KB
/
Paragraph.story.js
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
import React from "react";
import PropTypes from "prop-types";
import { storiesOf } from "@storybook/react";
import { withInfo } from "@storybook/addon-info";
import { fontSizes, fontTypes } from "@crave/farmblocks-theme";
import Paragraph from "./Paragraph";
const text =
"Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.";
const Container = props => (
<div style={{ width: "300px", background: props.background }}>
{props.children}
</div>
);
Container.propTypes = {
children: PropTypes.node,
background: PropTypes.string
};
Container.defaultProps = { background: "white" };
storiesOf("Text/Paragraph", module)
.add(
"default - LARGE size, NORMAL type, left aligned",
withInfo()(() => (
<Container>
<Paragraph>{text}</Paragraph>
</Container>
))
)
.add(
"center align",
withInfo()(() => (
<Container>
<Paragraph align="center">{text}</Paragraph>
</Container>
))
)
.add(
"justify align",
withInfo()(() => (
<Container>
<Paragraph align="justify">{text}</Paragraph>
</Container>
))
)
.add(
"right align",
withInfo()(() => (
<Container>
<Paragraph align="right">{text}</Paragraph>
</Container>
))
)
.add(
"MEDIUM size",
withInfo()(() => (
<Container>
<Paragraph size={fontSizes.MEDIUM}>{text}</Paragraph>
</Container>
))
)
.add(
"SMALL size",
withInfo()(() => (
<Container>
<Paragraph size={fontSizes.SMALL}>{text}</Paragraph>
</Container>
))
)
.add(
"NEUTRAL type",
withInfo()(() => (
<Container>
<Paragraph type={fontTypes.NEUTRAL}>{text}</Paragraph>
</Container>
))
)
.add(
"WHITE type",
withInfo()(() => (
<Container background="cadetblue">
<Paragraph type={fontTypes.WHITE}>{text}</Paragraph>
</Container>
))
);