2019-06-19 14:40:52 +00:00
|
|
|
import { storiesOf } from "@storybook/react";
|
2019-08-09 10:26:22 +00:00
|
|
|
import React from "react";
|
2019-06-19 14:40:52 +00:00
|
|
|
|
|
|
|
|
import Timeline, {
|
|
|
|
|
TimelineEvent,
|
|
|
|
|
TimelineNote
|
|
|
|
|
} from "@saleor/components/Timeline";
|
|
|
|
|
import Decorator from "../../Decorator";
|
|
|
|
|
|
|
|
|
|
storiesOf("Generics / Timeline", module)
|
|
|
|
|
.addDecorator(Decorator)
|
|
|
|
|
.add("default", () => (
|
|
|
|
|
<Timeline>
|
|
|
|
|
<TimelineEvent
|
|
|
|
|
date="2018-05-07T16:58:02+00:00"
|
|
|
|
|
title="Expansion panel 1"
|
|
|
|
|
/>
|
|
|
|
|
<TimelineEvent
|
|
|
|
|
date="2018-05-07T16:48:02+00:00"
|
|
|
|
|
title="Expansion panel 2"
|
|
|
|
|
/>
|
|
|
|
|
<TimelineEvent
|
|
|
|
|
date="2018-05-06T16:58:02+00:00"
|
|
|
|
|
title="Expansion panel 3"
|
|
|
|
|
/>
|
|
|
|
|
</Timeline>
|
|
|
|
|
))
|
|
|
|
|
.add("with expansion panels", () => (
|
|
|
|
|
<Timeline>
|
|
|
|
|
<TimelineEvent date="2018-05-07T16:58:02+00:00" title="Expansion panel 1">
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
|
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
|
|
|
|
</TimelineEvent>
|
|
|
|
|
<TimelineEvent date="2018-05-07T16:48:02+00:00" title="Expansion panel 2">
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
|
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
|
|
|
|
</TimelineEvent>
|
|
|
|
|
<TimelineEvent date="2018-05-06T16:58:02+00:00" title="Expansion panel 3">
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
|
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
|
|
|
|
</TimelineEvent>
|
|
|
|
|
</Timeline>
|
|
|
|
|
))
|
|
|
|
|
.add("with order notes", () => (
|
|
|
|
|
<Timeline>
|
|
|
|
|
<TimelineEvent date="2018-05-07T16:58:02+00:00" title="Expansion panel 1">
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
|
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
|
|
|
|
</TimelineEvent>
|
|
|
|
|
<TimelineNote
|
|
|
|
|
date="2018-05-07T16:58:02+00:00"
|
|
|
|
|
user={{ email: "admin@example.com" }}
|
|
|
|
|
message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
|
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget."
|
|
|
|
|
/>
|
|
|
|
|
<TimelineNote
|
|
|
|
|
date="2018-05-07T16:58:02+00:00"
|
|
|
|
|
user={{ email: "ceo@example.com" }}
|
|
|
|
|
message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
|
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget."
|
|
|
|
|
/>
|
|
|
|
|
<TimelineEvent date="2018-05-06T16:58:02+00:00" title="Expansion panel 3">
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
|
|
|
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
|
|
|
|
</TimelineEvent>
|
|
|
|
|
</Timeline>
|
|
|
|
|
));
|
