Skip to content

Commit be29830

Browse files
Harman-singh-waraichHarman-singh-waraich
committed
chore: timeline-stories
1 parent ebc739c commit be29830

File tree

3 files changed

+217
-2
lines changed

3 files changed

+217
-2
lines changed

‎src/lib/progress/timeline/custom.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from "react";
2-
import Bullet, { SideProp, StateProp, VariantProp } from "./bullet";
2+
import Bullet, { StateProp, VariantProp } from "./bullet";
33
import { cn } from "../../../utils";
44

5-
interface TimelineItem extends SideProp, VariantProp, StateProp {
5+
interface TimelineItem extends VariantProp, StateProp {
66
title: string;
77
party: string | React.ReactElement;
88
subtitle: string;

‎src/stories/custom-timeline.stories.tsx

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import React from "react";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
4+
import { IPreviewArgs } from "./utils";
5+
6+
import TimelineComponent from "../lib/progress/timeline/custom";
7+
import Circle from "../assets/svgs/check-circle-outline.svg";
8+
9+
const meta = {
10+
component: TimelineComponent,
11+
title: "Progress/CustomTimeline",
12+
tags: ["autodocs"],
13+
} satisfies Meta<typeof TimelineComponent>;
14+
15+
export default meta;
16+
17+
type Story = StoryObj<typeof meta> & IPreviewArgs;
18+
19+
export const Timeline: Story = {
20+
args: {
21+
themeUI: "light",
22+
backgroundUI: "light",
23+
items: [
24+
{
25+
title: "Pay 250 DAI",
26+
party: "Yes",
27+
subtitle: "06 Jul 2023 12:00 UTC",
28+
variant: "#4D00B4",
29+
Icon: Circle,
30+
},
31+
{
32+
title: "Jury Decision - Round 1",
33+
party: "No",
34+
subtitle: "06 Jul 2023 12:00 UTC",
35+
variant: "#ca2314",
36+
},
37+
],
38+
},
39+
};
40+
41+
/** Step states can be changed to reflect their current status. */
42+
export const TimelineStates: Story = {
43+
args: {
44+
themeUI: "light",
45+
backgroundUI: "light",
46+
items: [
47+
{
48+
title: "Pay 250 DAI",
49+
party: "No",
50+
subtitle: "06 Jul 2023 12:00 UTC",
51+
variant: "#4D00B4",
52+
Icon: Circle,
53+
},
54+
{
55+
title: "Jury Decision - Round 1",
56+
party: "No",
57+
subtitle: "06 Jul 2023 12:00 UTC",
58+
variant: "#ca2314",
59+
state: "disabled",
60+
},
61+
{
62+
title: "Jury Decision - Round 2",
63+
party: "No",
64+
subtitle: "08 Jul 2023 12:00 UTC",
65+
variant: "#ca2314",
66+
state: "loading",
67+
},
68+
],
69+
},
70+
};
71+
72+
/** Custom Element can be provided for `party` for interactivity. */
73+
export const TimelineCustomParty: Story = {
74+
args: {
75+
themeUI: "light",
76+
backgroundUI: "light",
77+
items: [
78+
{
79+
title: "Pay 250 DAI",
80+
party: (
81+
<div className="flex items-center gap-2">
82+
<label className="text-klerosUIComponentsPrimaryText leading-4">
83+
alice.eth -
84+
</label>
85+
<a
86+
className="text-klerosUIComponentsPrimaryBlue text-sm"
87+
href="https://docs.kleros.io/"
88+
target="_blank"
89+
rel="noreferrer"
90+
>
91+
Justification
92+
</a>
93+
</div>
94+
),
95+
subtitle: "06 Jul 2023 12:00 UTC",
96+
variant: "#4D00B4",
97+
Icon: Circle,
98+
},
99+
{
100+
title: "Jury Decision - Round 1",
101+
party: "No",
102+
subtitle: "06 Jul 2023 12:00 UTC",
103+
variant: "#ca2314",
104+
state: "loading",
105+
},
106+
],
107+
},
108+
};
109+
110+
/** Alignment can be changed for individual steps.
111+
* All steps are right aligned by default.
112+
*/
113+
export const TimelineAlignment: Story = {
114+
args: {
115+
themeUI: "light",
116+
backgroundUI: "light",
117+
items: [
118+
{
119+
title: "Pay 250 DAI",
120+
party: (
121+
<div className="flex items-center gap-2">
122+
<label className="text-klerosUIComponentsPrimaryText leading-4">
123+
alice.eth -
124+
</label>
125+
<a
126+
className="text-klerosUIComponentsPrimaryBlue text-sm"
127+
href="https://docs.kleros.io/"
128+
target="_blank"
129+
rel="noreferrer"
130+
>
131+
Justification
132+
</a>
133+
</div>
134+
),
135+
subtitle: "06 Jul 2023 12:00 UTC",
136+
variant: "#4D00B4",
137+
Icon: Circle,
138+
},
139+
{
140+
title: "Jury Decision - Round 1",
141+
party: "No",
142+
subtitle: "06 Jul 2023 12:00 UTC",
143+
variant: "#ca2314",
144+
state: "loading",
145+
},
146+
],
147+
className: "w-[500px]",
148+
},
149+
};

‎src/stories/timeline.stories.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
3+
import { IPreviewArgs } from "./utils";
4+
5+
import TimelineComponent from "../lib/progress/timeline";
6+
7+
const meta = {
8+
component: TimelineComponent,
9+
title: "Progress/Timeline",
10+
tags: ["autodocs"],
11+
} satisfies Meta<typeof TimelineComponent>;
12+
13+
export default meta;
14+
15+
type Story = StoryObj<typeof meta> & IPreviewArgs;
16+
17+
export const Timeline: Story = {
18+
args: {
19+
themeUI: "light",
20+
backgroundUI: "light",
21+
items: [
22+
{
23+
title: "Pay 250 DAI",
24+
party: "Yes",
25+
subtitle: "06 Jul 2023 12:00 UTC",
26+
variant: "#4D00B4",
27+
rightSided: true,
28+
},
29+
{
30+
title: "Jury Decision - Round 1",
31+
party: "No",
32+
subtitle: "06 Jul 2023 12:00 UTC",
33+
variant: "#ca2314",
34+
rightSided: true,
35+
},
36+
],
37+
className: "w-[500px]",
38+
},
39+
};
40+
41+
/** Alignment can be changed for individual steps.
42+
* All steps are right aligned by default.
43+
*/
44+
export const TimelineAlignment: Story = {
45+
args: {
46+
themeUI: "light",
47+
backgroundUI: "light",
48+
items: [
49+
{
50+
title: "Pay 250 DAI",
51+
party: "Yes",
52+
subtitle: "06 Jul 2023 12:00 UTC",
53+
variant: "#4D00B4",
54+
rightSided: true,
55+
},
56+
{
57+
title: "Jury Decision - Round 1",
58+
party: "No",
59+
subtitle: "06 Jul 2023 12:00 UTC",
60+
variant: "#ca2314",
61+
rightSided: false,
62+
},
63+
],
64+
className: "w-[500px]",
65+
},
66+
};

0 commit comments

Comments
 (0)