-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.tsx
77 lines (73 loc) · 2.27 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { forwardRef } from "react";
import { LabelPairedChevronRightSmRegularIcon } from "@deriv/quill-icons/LabelPaired";
import { LinkProps } from "./types";
import clsx from "clsx";
import "./link.scss";
import { CaptionText, Text } from "@components/Typography";
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
(
{
className,
size = "md",
disabled,
color = "black",
icon,
hasChevron = false,
children,
target = "_blank",
href,
...rest
},
ref,
) => {
return (
<a
ref={ref}
target={target}
href={disabled ? "javascript:void(0)" : href}
{...rest}
className={clsx(
"link",
`link__color-${color}`,
disabled && "link--disabled",
className,
)}
>
{icon && (
<span data-testid="dt-link-icon" className="link__icon">
{icon}
</span>
)}
{size === "caption" ? (
<CaptionText color={color}>{children}</CaptionText>
) : (
<Text
color={color}
size={
size === "sm"
? "sm"
: size === "lg"
? "lg"
: size === "xl"
? "xl"
: "md"
}
>
{children}
</Text>
)}
{hasChevron && (
<LabelPairedChevronRightSmRegularIcon
data-testid="dt-link-chevron"
className={clsx(
`link__icon-color-${color}`,
`link__icon-size-${size}`,
)}
/>
)}
</a>
);
},
);
Link.displayName = "Link";
export default Link;