import { storiesOf } from "@storybook/react";
import * as React from "react";
import {Card, message } from "../";
import {Timeline} from "../components/Timeline";
storiesOf("Timeline", module).add("Examples", () => (
Default Timeline
Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01
Setting type="card" for timeline gives d4sd timeline
Best to use the Card component inside a Timeline.item
Prelim Submissions
DISCOVER
Interactive timelime items and with pretext on left of item
The left side of the timeline is the left most point of all the circles
FEB 4 -
FEB 20}>
Prelim Submissions
More things in one item
MAR 1-
MAR 20}>
Hover over me!
MAR 20-
MAR 29}>
Hover over me as well!
extended bars to fill space
Prelim Submissions
More things in one item
Hover over me!
Hover over me as well!
));
// example of interactive timeline
const MessageTimeline = (props: any) => {
const handleHover = () => {
message.success("Hovered");
}
return {props.children}
}