-
Notifications
You must be signed in to change notification settings - Fork 151
/
index.tsx
66 lines (59 loc) · 1.59 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
import styled from "styled-components";
import React from "react";
import { StyledText } from "../../Text";
import defaultTheme from "../../defaultTheme";
import type { Props as TextProps } from "../../Text/types";
import {
TYPE_OPTIONS,
WEIGHT_OPTIONS,
ELEMENT_OPTIONS,
ALIGN_OPTIONS,
SIZE_OPTIONS,
} from "../../Text/consts";
const getColorType = ({ type }: { type: TextProps["type"] }) => ({ theme }) => {
if (type === "secondary") return theme.orbit.colorTextSecondary;
if (type === "info") return theme.orbit.paletteBlueDark;
if (type === "success") return theme.orbit.paletteGreenDark;
if (type === "warning") return theme.orbit.paletteOrangeDark;
if (type === "critical") return theme.orbit.paletteRedDark;
return theme.orbit.colorTextPrimary;
};
const StyledTemporaryText = styled(StyledText)<
Omit<TextProps, "type"> & { $type: TextProps["type"] }
>`
color: ${getColorType};
`;
const TemporaryText = ({
type = TYPE_OPTIONS.PRIMARY,
size = SIZE_OPTIONS.NORMAL,
weight = WEIGHT_OPTIONS.NORMAL,
align = ALIGN_OPTIONS.LEFT,
as = ELEMENT_OPTIONS.P,
uppercase,
italic,
strikeThrough,
spaceAfter,
children,
withBackground,
}: TextProps) => {
return (
<StyledTemporaryText
$type={type}
size={size}
weight={weight}
align={align}
as={as}
uppercase={uppercase}
italic={italic}
strikeThrough={strikeThrough}
spaceAfter={spaceAfter}
withBackground={withBackground}
>
{children}
</StyledTemporaryText>
);
};
StyledTemporaryText.defaultProps = {
theme: defaultTheme,
};
export default TemporaryText;