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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.StyledText = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens");
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _consts = require("./consts");
var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));
var _rtl = require("../utils/rtl");
var _TextLink = require("../TextLink");
var _common = require("../utils/common");
var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));
const getTypeToken = ({
  theme,
  type
}) => {
  const typeTokens = {
    [_consts.TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextPrimary,
    [_consts.TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextSecondary,
    [_consts.TYPE_OPTIONS.INFO]: theme.orbit.colorTextInfo,
    [_consts.TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextSuccess,
    [_consts.TYPE_OPTIONS.WARNING]: theme.orbit.colorTextWarning,
    [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextCritical,
    [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.colorTextWhite
  };
  return typeTokens[type];
};
const getWeightToken = ({
  theme,
  weight
}) => {
  const weightTokens = {
    [_consts.WEIGHT_OPTIONS.NORMAL]: theme.orbit.fontWeightNormal,
    [_consts.WEIGHT_OPTIONS.MEDIUM]: theme.orbit.fontWeightMedium,
    [_consts.WEIGHT_OPTIONS.BOLD]: theme.orbit.fontWeightBold
  };
  if (!weight) return null;
  return weightTokens[weight];
};
const getSizeToken = ({
  theme,
  size
}) => {
  const sizeTokens = {
    [_consts.SIZE_OPTIONS.EXTRA_LARGE]: theme.orbit.fontSizeTextExtraLarge,
    [_consts.SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
    [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeTextNormal,
    [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeTextSmall
  };
  if (!size) return null;
  return sizeTokens[size];
};
const getLineHeightToken = ({
  theme,
  size
}) => {
  const lineHeightTokens = {
    [_consts.SIZE_OPTIONS.EXTRA_LARGE]: theme.orbit.lineHeightTextLarge,
    [_consts.SIZE_OPTIONS.LARGE]: theme.orbit.lineHeightTextLarge,
    [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.lineHeightTextNormal,
    [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.lineHeightTextSmall
  };
  if (!size) return null;
  return lineHeightTokens[size];
};
const StyledText = (0, _styledComponents.default)(({
  element: TextElement = _consts.ELEMENT_OPTIONS.P,
  children,
  className,
  dataTest,
  id
}) => /*#__PURE__*/React.createElement(TextElement, {
  className: className,
  "data-test": dataTest,
  id: id
}, children)).withConfig({
  displayName: "Text__StyledText",
  componentId: "sc-1dj99rd-0"
})(["", ""], ({
  theme,
  align,
  uppercase,
  size,
  weight,
  strikeThrough,
  $type,
  italic,
  withBackground,
  margin
}) => (0, _styledComponents.css)(["font-family:", ";background:", ";font-size:", ";font-weight:", ";color:", ";line-height:", ";text-align:", ";text-transform:", ";text-decoration:", ";font-style:", ";margin:0;", ";a:not(", "){", ";}"], theme.orbit.fontFamily, withBackground && (0, _orbitDesignTokens.convertHexToRgba)(getTypeToken({
  theme,
  type: $type
}), 10), getSizeToken({
  theme,
  size
}), getWeightToken({
  theme,
  weight
}), getTypeToken({
  theme,
  type: $type
}), getLineHeightToken({
  theme,
  size
}), (0, _rtl.textAlign)(align), uppercase && `uppercase`, strikeThrough && `line-through`, italic && `italic`, (0, _common.spacingUtility)(margin), _TextLink.StyledTextLink, (0, _TextLink.getLinkStyle)({
  theme,
  $type
})));
exports.StyledText = StyledText;
StyledText.defaultProps = {
  theme: _defaultTheme.default
};
const Text = ({
  type = _consts.TYPE_OPTIONS.PRIMARY,
  size = _consts.SIZE_OPTIONS.NORMAL,
  weight = _consts.WEIGHT_OPTIONS.NORMAL,
  align = _consts.ALIGN_OPTIONS.LEFT,
  margin,
  as = _consts.ELEMENT_OPTIONS.P,
  uppercase,
  italic,
  strikeThrough,
  dataTest,
  spaceAfter,
  children,
  withBackground,
  id
}) => {
  const theme = (0, _useTheme.default)();
  return /*#__PURE__*/React.createElement(StyledText, {
    id: id
    // TODO: remove spaceAfter in the next major version
    ,
    margin: (spaceAfter ? {
      bottom: (0, _getSpacingToken.default)({
        spaceAfter,
        theme
      })
    } : margin) || "0",
    $type: type,
    size: size,
    strikeThrough: strikeThrough,
    withBackground: withBackground,
    weight: weight,
    align: align,
    element: as,
    uppercase: uppercase,
    italic: italic,
    dataTest: dataTest
  }, children);
};
var _default = Text;
exports.default = _default;