@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
112 lines (111 loc) • 3.27 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
import defaultTheme from "../../defaultTheme";
import { TYPE_OPTIONS, WEIGHT_OPTIONS, ELEMENT_OPTIONS, SIZE_OPTIONS } from "../consts";
import { textAlign } from "../../utils/rtl";
import { getLinkStyle } from "../../TextLink/deprecated";
import { spacingUtility } from "../../utils/common";
const getTypeToken = ({
theme,
type
}) => {
const typeTokens = {
[TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextPrimary,
[TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextSecondary,
[TYPE_OPTIONS.INFO]: theme.orbit.colorTextInfo,
[TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextSuccess,
[TYPE_OPTIONS.WARNING]: theme.orbit.colorTextWarning,
[TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextCritical,
[TYPE_OPTIONS.WHITE]: theme.orbit.colorTextWhite
};
return typeTokens[type];
};
const getWeightToken = ({
theme,
weight
}) => {
const weightTokens = {
[WEIGHT_OPTIONS.NORMAL]: theme.orbit.fontWeightNormal,
[WEIGHT_OPTIONS.MEDIUM]: theme.orbit.fontWeightMedium,
[WEIGHT_OPTIONS.BOLD]: theme.orbit.fontWeightBold
};
if (!weight) return null;
return weightTokens[weight];
};
const getSizeToken = ({
theme,
size
}) => {
const sizeTokens = {
[SIZE_OPTIONS.EXTRA_LARGE]: theme.orbit.fontSizeTextExtraLarge,
[SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
[SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeTextNormal,
[SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeTextSmall
};
if (!size) return null;
return sizeTokens[size];
};
const getLineHeightToken = ({
theme,
size
}) => {
const lineHeightTokens = {
[SIZE_OPTIONS.EXTRA_LARGE]: theme.orbit.lineHeightTextExtraLarge,
[SIZE_OPTIONS.LARGE]: theme.orbit.lineHeightTextLarge,
[SIZE_OPTIONS.NORMAL]: theme.orbit.lineHeightTextNormal,
[SIZE_OPTIONS.SMALL]: theme.orbit.lineHeightTextSmall
};
if (!size) return null;
return lineHeightTokens[size];
};
/**
* @deprecated use .orbit-text selector instead
*/
export const StyledText = styled(({
element: TextElement = ELEMENT_OPTIONS.P,
children,
className,
dataTest,
id
}) => /*#__PURE__*/React.createElement(TextElement, {
className: className,
"data-test": dataTest,
id: id
}, children)).withConfig({
displayName: "deprecated__StyledText",
componentId: "sc-11myi7a-0"
})(["", ""], ({
theme,
align,
uppercase,
size,
weight,
strikeThrough,
$type,
italic,
withBackground,
margin
}) => css(["font-family:", ";background:", ";font-size:", ";font-weight:", ";color:", ";line-height:", ";text-align:", ";text-transform:", ";text-decoration:", ";font-style:", ";margin:0;", ";a:not(.orbit-text-link){", ";}"], theme.orbit.fontFamily, withBackground && convertHexToRgba(getTypeToken({
theme,
type: $type
}), 10), getSizeToken({
theme,
size
}), getWeightToken({
theme,
weight
}), getTypeToken({
theme,
type: $type
}), getLineHeightToken({
theme,
size
}), textAlign(align), uppercase && `uppercase`, strikeThrough && `line-through`, italic && `italic`, spacingUtility(margin), getLinkStyle({
theme,
$type
})));
StyledText.defaultProps = {
theme: defaultTheme
};
export default StyledText;