UNPKG

@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
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;