Skip to content

Commit ebc739c

Browse files
tractorsstractorss
committed
chore: timeline-migration
1 parent 77266b2 commit ebc739c

File tree

10 files changed

+227
-247
lines changed

10 files changed

+227
-247
lines changed

‎src/examples/timeline.tsx‎

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,22 @@
11
import React from "react";
2-
import styled from "styled-components";
32
import Steps from "../lib/progress/steps";
43
import Timeline from "../lib/progress/timeline";
54
import CustomTimeline from "../lib/progress/timeline/custom";
65
import Circle from "../assets/svgs/check-circle-outline.svg";
76

8-
const StyledSteps = styled(Steps)`
9-
height: ${(props) => (props.horizontal ? "auto" : "300px")};
10-
width: ${(props) => (props.horizontal ? "500px" : "auto")};
11-
`;
12-
13-
const StyledTimeline = styled(Timeline)`
14-
margin: 0px 100px;
15-
`;
16-
17-
const PartyContainer = styled.div`
18-
display: flex;
19-
align-items: center;
20-
gap: 8px;
21-
`;
22-
23-
const StyledLabel = styled.label`
24-
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
25-
line-height: 19px;
26-
`;
27-
28-
const StyledLink = styled.a`
29-
font-size: 14px;
30-
color: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
31-
text-decoration: none;
32-
line-height: 19px;
33-
`;
34-
357
const TimelineProgress = () => (
368
<>
37-
<StyledSteps
9+
<Steps
10+
className="h-[300px]"
3811
items={[
3912
{ title: "Escrow Details", subitems: ["Type of Escrow", "Title"] },
4013
{ title: "Terms", subitems: ["Deliverable", "Payment", "Deadline"] },
4114
{ title: "Preview" },
4215
]}
4316
currentItemIndex={1}
4417
/>
45-
<StyledSteps
18+
<Steps
19+
className="w-[500px]"
4620
horizontal
4721
items={[
4822
{ title: "Escrow Details", subitems: ["Type of Escrow", "Title"] },
@@ -51,7 +25,8 @@ const TimelineProgress = () => (
5125
]}
5226
currentItemIndex={1}
5327
/>
54-
<StyledTimeline
28+
<Timeline
29+
className="mx-25"
5530
items={[
5631
{
5732
title: "Pay 200 DAI",
@@ -73,16 +48,19 @@ const TimelineProgress = () => (
7348
{
7449
title: "Pay 250 DAI",
7550
party: (
76-
<PartyContainer>
77-
<StyledLabel>alice.eth -</StyledLabel>
78-
<StyledLink
51+
<div className="flex items-center gap-2">
52+
<label className="text-klerosUIComponentsPrimaryText leading-4">
53+
alice.eth -
54+
</label>
55+
<a
56+
className="text-klerosUIComponentsPrimaryBlue text-sm"
7957
href="https://docs.kleros.io/"
8058
target="_blank"
8159
rel="noreferrer"
8260
>
8361
Justification
84-
</StyledLink>
85-
</PartyContainer>
62+
</a>
63+
</div>
8664
),
8765
subtitle: "06 Jul 2023 12:00 UTC",
8866
variant: "#4D00B4",

‎src/lib/progress/steps/bullet.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@ const Bullet: React.FC<BulletProps> = ({
2222
line,
2323
className,
2424
}) => (
25-
<div className={cn("flex w-fit grow basis-0", className)} aria-label={title}>
25+
<div
26+
className={cn("flex w-fit grow basis-0", className)}
27+
aria-label={title}
28+
role="listitem"
29+
aria-current={active ? "step" : undefined}
30+
aria-disabled={!active && !completed ? true : undefined}
31+
>
2632
<BulletCircle
2733
index={index}
2834
active={active}
@@ -37,6 +43,7 @@ const Bullet: React.FC<BulletProps> = ({
3743
? "text-klerosUIComponentsPrimaryText"
3844
: "text-klerosUIComponentsSecondaryText",
3945
)}
46+
id={`step-${index}-title`}
4047
>
4148
{title}
4249
</h2>

‎src/lib/progress/steps/horizontal-bullet.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ const HorizontalBullet: React.FC<HorizontalBulletProps> = ({
4848
paddingBottom ? { paddingBottom: `${paddingBottom}px` } : undefined
4949
}
5050
aria-label={title}
51+
role="listitem"
52+
aria-current={active ? "step" : undefined}
53+
aria-disabled={!active && !completed ? true : undefined}
5154
>
5255
<BulletCircle {...{ active, completed, index }} />
5356
<div
@@ -65,6 +68,7 @@ const HorizontalBullet: React.FC<HorizontalBulletProps> = ({
6568
? "text-klerosUIComponentsPrimaryText"
6669
: "text-klerosUIComponentsSecondaryText",
6770
)}
71+
id={`horizontal-step-${index}-title`}
6872
>
6973
{title}
7074
</h2>

‎src/lib/progress/steps/horizontal.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ const HorizontalSteps: React.FC<StepsProps> = ({
1616
)}
1717
{...props}
1818
aria-orientation="horizontal"
19+
role="list"
20+
aria-label="Horizontal progress steps"
1921
>
2022
{items.map((item, i) => (
2123
<Bullet

‎src/lib/progress/steps/vertical.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ const Steps: React.FC<StepsProps> = ({
1313
<div
1414
className={cn("flex h-full flex-col", className)}
1515
aria-orientation="vertical"
16+
role="list"
17+
aria-label="Vertical progress steps"
1618
>
1719
<div className="flex h-auto grow flex-col">
1820
{items.slice(0, -1).map(({ title, subitems }, i) => (

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

Lines changed: 88 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useRef } from "react";
2-
import styled, { css, keyframes } from "styled-components";
3-
import Spine, { VariantProp, variantColor } from "./spine";
2+
import Spine, { VariantProp, colorRegex } from "./spine";
43
export type { VariantProp };
5-
import { h2, p, small } from "../../../styles/common-style";
4+
import clsx from "clsx";
5+
import { cn, isUndefined } from "../../../utils";
66

77
export interface SideProp {
88
rightSided?: boolean;
@@ -12,138 +12,110 @@ export interface StateProp {
1212
state?: "loading" | "disabled" | "active";
1313
}
1414

15-
const loading = keyframes`
16-
0%{
17-
opacity: 1;
18-
}
19-
50%{
20-
opacity: 0.5;
21-
}
22-
100%{
23-
opacity: 1;
24-
}
25-
`;
26-
27-
const Wrapper = styled.div<SideProp & StateProp>`
28-
display: flex;
29-
position: relative;
30-
justify-content: ${({ rightSided }) =>
31-
rightSided ? "flex-start" : "flex-end"};
32-
${({ state }) => {
33-
if (state === "disabled")
34-
return css`
35-
opacity: 0.5;
36-
`;
37-
if (state === "loading")
38-
return css`
39-
animation: ${loading} 2s ease-in-out infinite normal;
40-
`;
41-
return css`
42-
opacity: 1;
43-
`;
44-
}}
45-
`;
46-
47-
const StyledTitle = styled.h2``;
48-
const StyledParty = styled.p``;
49-
const StyledSubtitle = styled.small``;
50-
const PartyElementWrapper = styled.div`
51-
display: inline-flex;
52-
`;
53-
54-
const TextContainer = styled.div<SideProp & VariantProp & { isLast: boolean }>`
55-
margin-${({ rightSided }) => (rightSided ? "left" : "right")}: 20px;
56-
order: ${({ rightSided }) => (rightSided ? 1 : -1)};
57-
display: flex;
58-
flex-direction: column;
59-
margin-bottom: ${({ isLast }) => (isLast ? "0" : "18px")};
60-
gap: 2px;
61-
text-align: ${({ rightSided }) => (rightSided ? "left" : "right")};
62-
63-
@media (max-width: 900px) {
64-
margin-${({ rightSided }) => (rightSided ? "left" : "right")}: 16px;
65-
margin-bottom: ${({ isLast }) => (isLast ? "0" : "16px")};
66-
gap: 4px;
67-
}
68-
69-
& ${StyledTitle} {
70-
${h2}
71-
order: ${({ rightSided }) => (rightSided ? 1 : 2)};
72-
font-size: 14px;
73-
line-height: 19px;
74-
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
75-
}
76-
77-
& ${StyledParty} {
78-
${p}
79-
order: ${({ rightSided }) => (rightSided ? 2 : 1)};
80-
81-
font-size: 14px;
82-
line-height: 19px;
83-
color: ${variantColor};
84-
}
85-
86-
& ${PartyElementWrapper} {
87-
order: ${({ rightSided }) => (rightSided ? 2 : 1)};
88-
max-height: 32px;
89-
overflow: hidden;
90-
}
91-
92-
& ${StyledSubtitle} {
93-
${small}
94-
align-self: flex-${({ rightSided }) => (rightSided ? "start" : "end")};
95-
font-size: 12px;
96-
line-height: 16px;
97-
}
98-
`;
99-
100-
const PartyTitleContainer = styled.div<SideProp>`
101-
display: flex;
102-
position: relative;
103-
align-items: center;
104-
flex-direction: row;
105-
flex-wrap: wrap;
106-
gap: 4px 8px;
107-
justify-content: ${({ rightSided }) =>
108-
rightSided ? "flex-start" : "flex-end"};
109-
`;
110-
11115
interface BulletProps extends VariantProp, SideProp, StateProp {
11216
title: string;
11317
party: string | React.ReactElement;
11418
subtitle: string;
115-
active?: boolean;
11619
Icon?: React.FC<React.SVGAttributes<SVGElement>>;
11720
line?: boolean;
11821
isLast: boolean;
22+
className?: string;
11923
}
12024

12125
const Bullet: React.FC<BulletProps> = (props) => {
122-
const { title, party, subtitle, ...restProps } = props;
123-
const { rightSided, variant, line, Icon, isLast, state, ...wrapperProps } =
124-
restProps;
26+
const { title, party, subtitle, className, ...restProps } = props;
27+
const { rightSided, variant, line, Icon, isLast, state } = restProps;
12528
const titleRef = useRef<HTMLHeadingElement>(null);
12629

12730
return (
128-
<Wrapper {...{ rightSided, state }} {...wrapperProps}>
31+
<div
32+
className={cn(
33+
"relative flex opacity-100",
34+
rightSided ? "justify-start" : "justify-end",
35+
{
36+
"opacity-50": state === "disabled",
37+
"animate-loading": state === "loading",
38+
},
39+
className,
40+
)}
41+
aria-label={`Timeline item: ${title}`}
42+
role="listitem"
43+
aria-current={state === "active" ? "step" : undefined}
44+
aria-busy={state === "loading" ? true : false}
45+
aria-disabled={state === "disabled" ? true : false}
46+
>
12947
<Spine {...{ variant, line, Icon, titleRef }} />
130-
<TextContainer
131-
className="text-container"
132-
{...{ variant, rightSided, isLast }}
48+
<div
49+
className={clsx(
50+
"flex flex-col gap-1 lg:gap-0.5",
51+
rightSided
52+
? ["ml-4 lg:ml-5", "order-1 text-left"]
53+
: ["mr-4 lg:mr-5", "-order-1 text-right"],
54+
isLast ? "mb-0" : "mb-4 lg:mb-4.5",
55+
)}
13356
>
134-
<PartyTitleContainer {...{ rightSided }}>
135-
<StyledTitle ref={titleRef}>{title}</StyledTitle>
57+
<div
58+
className={clsx(
59+
"relative",
60+
"flex flex-row flex-wrap items-center gap-x-2 gap-y-1",
61+
rightSided ? "justify-start" : "justify-end",
62+
)}
63+
>
64+
<h2
65+
className={clsx(
66+
"text-klerosUIComponentsPrimaryText text-sm font-semibold",
67+
rightSided ? "order-1" : "order-2",
68+
)}
69+
aria-label={`Timeline item title: ${title}`}
70+
ref={titleRef}
71+
>
72+
{title}
73+
</h2>
13674
{typeof party === `string` ? (
137-
<StyledParty>{party}</StyledParty>
75+
<p
76+
className={clsx(
77+
"text-sm font-normal break-words",
78+
rightSided ? "order-2" : "order-1",
79+
{
80+
"text-klerosUIComponentsSuccess": variant === "accepted",
81+
"text-klerosUIComponentsError": variant === "refused",
82+
"text-klerosUIComponentsPrimaryBlue": isUndefined(variant),
83+
},
84+
)}
85+
style={
86+
variant && colorRegex.test(variant)
87+
? {
88+
color: variant,
89+
}
90+
: undefined
91+
}
92+
aria-label={`Timeline item party: ${party}`}
93+
>
94+
{party}
95+
</p>
13896
) : (
139-
<PartyElementWrapper className="party-wrapper">
97+
<div
98+
className={clsx(
99+
"inline-flex max-h-8 overflow-hidden",
100+
rightSided ? "order-2" : "order-1",
101+
)}
102+
aria-label="Timeline item party element"
103+
>
140104
{party}
141-
</PartyElementWrapper>
105+
</div>
106+
)}
107+
</div>
108+
<small
109+
className={clsx(
110+
"text-klerosUIComponentsSecondaryText text-xs break-words",
111+
rightSided ? "self-start" : "self-end",
142112
)}
143-
</PartyTitleContainer>
144-
<StyledSubtitle>{subtitle}</StyledSubtitle>
145-
</TextContainer>
146-
</Wrapper>
113+
aria-label={`Timeline item date: ${subtitle}`}
114+
>
115+
{subtitle}
116+
</small>
117+
</div>
118+
</div>
147119
);
148120
};
149121

0 commit comments

Comments
 (0)