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

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

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];
};

const StyledText = styled(({ element, children, className, dataTest }) => {
  const TextElement = element;
  return React.createElement(
    TextElement,
    { className: className, "data-test": dataTest },
    children
  );
}).withConfig({
  displayName: "Text__StyledText"
})(["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;