Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 4x 4x 4x 4x 4x 4x 4x 4x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 4x 4x 22x 22x 22x 22x 4x | import React, { forwardRef } from "react";
import { LinkProps, LinkStyleProps } from "./Link.types";
import Text from "../Text/Text";
import styled from "styled-components";
import { useTheme } from "../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../helpers/helpers";
import colorTokens from "../../tokens/colors.json";
import {Link as ReactRouterLink} from "react-router-dom";
const Link = forwardRef<HTMLAnchorElement, LinkProps>(({
href,
children,
variant = "default",
size = "medium",
className,
target,
style,
color = colorTokens.default.primary.main,
preciseColor,
tabIndex,
onClick,
onKeyDown,
"data-testid": dataTestId,
}, ref) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
const _color =
preciseColor ?? colorPalette![color].accentScale[10];
const isRelative = href && href.startsWith("/");
const LinkText = () => {
return typeof children === "string" ? (
<Text preciseColor={_color} size={size} variant="span">
{children}
</Text>
) : (
children
);
};
return (isRelative ?
<StyledReactRouterLink to={href} ref={ref} tabIndex={tabIndex} target={target} $color={_color} $variant={variant} data-testid={dataTestId} onClick={onClick} onKeyDown={onKeyDown} style={style} className={className}>
{LinkText()}
</StyledReactRouterLink> :
<StyledLink
ref={ref}
tabIndex={tabIndex}
$color={_color}
$variant={variant}
target={target}
href={href}
className={className}
style={style}
onClick={onClick}
data-testid={dataTestId}
onKeyDown={onKeyDown}
>
{LinkText()}
</StyledLink>
);
});
export default Link;
const StyledLink = styled.a<LinkStyleProps>`
color: ${(props) => props.$color};
width: fit-content;
text-decoration: ${(props) =>
props.$variant === "underline" ? "underline" : "none"};
cursor: pointer;
display: inline-block;
&:hover {
text-decoration: ${(props) =>
props.$variant === "default" ? "none" : "underline"};
}
&:focus-visible {
outline: 1px solid ${(props) => props.$color};
outline-offset: 2px;
border-radius: 0.25rem;
}
`;
const StyledReactRouterLink = styled(ReactRouterLink)<LinkStyleProps>`
color: ${(props) => props.$color};
width: fit-content;
text-decoration: ${(props) =>
props.$variant === "underline" ? "underline" : "none"};
cursor: pointer;
display: inline-block;
&:hover {
text-decoration: ${(props) =>
props.$variant === "default" ? "none" : "underline"};
}
&:focus-visible {
outline: 1px solid ${(props) => props.$color};
outline-offset: 2px;
border-radius: 0.25rem;
}
`;
|