@kiwicom/orbit-components/es/Text/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled from "styled-components";
import defaultTokens from "../defaultTokens";
import { TYPE_OPTIONS, WEIGHT_OPTIONS, ELEMENT_OPTIONS, ALIGN_OPTIONS, SIZE_OPTIONS } from "./consts";
import getSpacingToken from "../common/getSpacingToken";

const getTypeToken = () => ({
  theme,
  type
}) => {
  const typeTokens = {
    [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextPrimary,
    [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextSecondary,
    [TYPE_OPTIONS.ATTENTION]: theme.orbit.colorTextAttention,
    [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.BOLD]: theme.orbit.fontWeightBold
  };
  return weightTokens[weight];
};

const getSizeToken = () => ({
  theme,
  size
}) => {
  const sizeTokens = {
    [SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
    [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeTextNormal,
    [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeTextSmall
  };
  return sizeTokens[size];
};

export const StyledText = styled(({
  element,
  children,
  className,
  dataTest
}) => {
  const TextElement = element;
  return React.createElement(TextElement, {
    className: className,
    "data-test": dataTest
  }, children);
}).withConfig({
  displayName: "Text__StyledText",
  componentId: "sc-19qtt4y-0"
})(["font-family:", ";font-size:", ";font-weight:", ";color:", ";line-height:", ";text-align:", ";text-transform:", ";font-style:", ";margin:0;margin-bottom:", ";"], ({
  theme
}) => theme.orbit.fontFamily, getSizeToken(), getWeightToken(), getTypeToken(), ({
  theme
}) => theme.orbit.lineHeightText, ({
  align
}) => align, ({
  uppercase
}) => uppercase && `uppercase`, ({
  italic
}) => italic && `italic`, getSpacingToken);
StyledText.defaultProps = {
  theme: defaultTokens
};

const Text = ({
  type = TYPE_OPTIONS.PRIMARY,
  size = SIZE_OPTIONS.NORMAL,
  weight = WEIGHT_OPTIONS.NORMAL,
  align = ALIGN_OPTIONS.LEFT,
  element = ELEMENT_OPTIONS.P,
  uppercase = false,
  italic = false,
  dataTest,
  spaceAfter,
  children
}) => React.createElement(StyledText, {
  type: type,
  size: size,
  weight: weight,
  align: align,
  element: element,
  uppercase: uppercase,
  italic: italic,
  dataTest: dataTest,
  spaceAfter: spaceAfter
}, children);

export default Text;