1 | import { storiesOf } from "@storybook/react";
|
2 | import * as React from "react";
|
3 | import { Button } from "../components/Button";
|
4 |
|
5 | storiesOf("Button", module).add("All", () => (
|
6 | <div className="storycontainer">
|
7 | <div className="story-module spaced">
|
8 | <h3>Small Buttons (fixed)</h3>
|
9 | <Button.Google>GOOGLE</Button.Google>
|
10 | <Button.Facebook>GOOGLE</Button.Facebook>
|
11 | <Button type="primary-outline" size="small">
|
12 | PREVIOUS
|
13 | </Button>
|
14 | <Button type="primary" size="small">
|
15 | NEXT
|
16 | </Button>
|
17 | <Button type="primary" size="small">
|
18 | VERY STRETCHED OUT BUTTON
|
19 | </Button>
|
20 | <Button type="secondary-outline" size="small">
|
21 | PREVIOUS
|
22 | </Button>
|
23 | <Button type="secondary" size="small">
|
24 | NEXT
|
25 | </Button>
|
26 | <Button type="secondary" size="small">
|
27 | VERY STRETCHED OUT BUTTON
|
28 | </Button>
|
29 | <Button type="primary" disabled size="small">
|
30 | disabled :()
|
31 | </Button>
|
32 | <Button type="primary-outline" disabled size="small">
|
33 | disabled outline
|
34 | </Button>
|
35 | </div>
|
36 | <div className="story-module spaced">
|
37 | <h3>Medium Buttons (sizable)</h3>
|
38 | <Button type="primary-outline">PREVIOUS</Button>
|
39 | <Button type="primary">NEXT</Button>
|
40 | <Button type="primary">VERY STRETCHED OUT BUTTON</Button>
|
41 | <Button type="secondary-outline">PREVIOUS</Button>
|
42 | <Button type="secondary">NEXT</Button>
|
43 | <Button type="secondary">VERY STRETCHED OUT BUTTON</Button>
|
44 | </div>
|
45 | <div className="story-module spaced">
|
46 | <h3>Large Buttons (fixed)</h3>
|
47 | <Button type="primary-outline" size="large">
|
48 | PREVIOUS
|
49 | </Button>
|
50 | <Button type="primary" size="large">
|
51 | NEXT
|
52 | </Button>
|
53 | <Button type="primary" size="large">
|
54 | VERY STRETCHED OUT BUTTON LIKE REALLY STRETCHED
|
55 | </Button>
|
56 | <Button type="secondary-outline" size="large">
|
57 | PREVIOUS
|
58 | </Button>
|
59 | <Button type="secondary" size="large">
|
60 | NEXT
|
61 | </Button>
|
62 | <Button type="secondary" size="large">
|
63 | VERY STRETCHED OUT BUTTON LIKE REALLY STRETCHED
|
64 | </Button>
|
65 | </div>
|
66 | </div>
|
67 | ));
|