UNPKG

3.13 kBTypeScriptView Raw
1import { storiesOf } from "@storybook/react";
2import * as React from "react";
3
4import {Card, message } from "../";
5import {Timeline} from "../components/Timeline";
6
7storiesOf("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// example of interactive timeline
88const 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}