1 | import { storiesOf } from "@storybook/react";
|
2 | import * as React from "react";
|
3 |
|
4 | import {Card, message } from "../";
|
5 | import {Timeline} from "../components/Timeline";
|
6 |
|
7 | storiesOf("Timeline", module).add("Examples", () => (
|
8 | <div className="storycontainer">
|
9 | <div className="story-module">
|
10 | <h3>Default Timeline</h3>
|
11 | <Timeline>
|
12 | <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
|
13 | <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
|
14 | <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
|
15 | <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
|
16 | </Timeline>
|
17 | </div>
|
18 | <div className="story-module" style={{marginLeft:90}}>
|
19 | <h3>Setting type="card" for timeline gives d4sd timeline</h3>
|
20 | <p>Best to use the Card component inside a Timeline.item</p>
|
21 | <br />
|
22 | <Timeline type="card">
|
23 | <Timeline.Item>
|
24 | <Card>
|
25 | <h2>Prelim Submissions</h2>
|
26 | </Card>
|
27 | </Timeline.Item>
|
28 | <Timeline.Item>
|
29 | <Card>
|
30 | <h2>DISCOVER</h2>
|
31 | </Card>
|
32 | </Timeline.Item>
|
33 | </Timeline>
|
34 | <div className="story-module" style={{marginLeft:0, marginTop:100}}>
|
35 | <h3>Interactive timelime items and with pretext on left of item</h3>
|
36 | <p>The left side of the timeline is the left most point of all the circles</p>
|
37 | <br/>
|
38 | <Timeline type="card">
|
39 | <Timeline.Item pretext={<h3>FEB 4 - <br /> FEB 20</h3>}>
|
40 | <Card>
|
41 | <h2>Prelim Submissions</h2>
|
42 | </Card>
|
43 | <Card>
|
44 | <h2>More things in one item</h2>
|
45 | </Card>
|
46 | </Timeline.Item>
|
47 | <MessageTimeline pretext={<h3>MAR 1- <br /> MAR 20</h3>}>
|
48 | <Card>
|
49 | <h2>Hover over me!</h2>
|
50 | </Card>
|
51 | </MessageTimeline>
|
52 | <MessageTimeline pretext={<h3>MAR 20- <br /> MAR 29</h3>}>
|
53 | <Card>
|
54 | <h2>Hover over me as well!</h2>
|
55 | </Card>
|
56 | </MessageTimeline>
|
57 | </Timeline>
|
58 | </div>
|
59 | <div className="story-module" style={{marginLeft:0, marginTop:100}}>
|
60 | <h3>extended bars to fill space</h3>
|
61 | <br/>
|
62 | <Timeline type="card" extended>
|
63 | <Timeline.Item>
|
64 | <Card>
|
65 | <h2>Prelim Submissions</h2>
|
66 | </Card>
|
67 | <Card>
|
68 | <h2>More things in one item</h2>
|
69 | </Card>
|
70 | </Timeline.Item>
|
71 | <MessageTimeline>
|
72 | <Card>
|
73 | <h2>Hover over me!</h2>
|
74 | </Card>
|
75 | </MessageTimeline>
|
76 | <MessageTimeline>
|
77 | <Card>
|
78 | <h2>Hover over me as well!</h2>
|
79 | </Card>
|
80 | </MessageTimeline>
|
81 | </Timeline>
|
82 | </div>
|
83 | </div>
|
84 | </div>
|
85 | ));
|
86 |
|
87 |
|
88 | const MessageTimeline = (props: any) => {
|
89 | const handleHover = () => {
|
90 | message.success("Hovered");
|
91 | }
|
92 | return <Timeline.Item onMouseEnter={handleHover} style={{cursor:'pointer'}} {...props}>{props.children}</Timeline.Item>
|
93 | }
|