wix-style-react/dist/es/src/Text/Text.js

wix-style-react

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React from 'react';
import { oneOf, bool, string, any } from 'prop-types';
import style from './Text.st.css';
import deprecationLog from '../utils/deprecationLog';

/*
 * Temporary fix: SIZES, SKINS, WEIGHTS constants are copied here from constants.js
 * in order to have AutoDocs able to parse them.
 * See this issue: https://github.com/wix/wix-ui/issues/784
 */
export var SIZES = {
  tiny: 'tiny',
  small: 'small',
  medium: 'medium'
};

export var SKINS = {
  standard: 'standard',
  error: 'error',
  success: 'success',
  premium: 'premium'
};

export var WEIGHTS = {
  thin: 'thin',
  normal: 'normal',
  bold: 'bold'
};

var Text = function Text(_ref) {
  var size = _ref.size,
      secondary = _ref.secondary,
      skin = _ref.skin,
      light = _ref.light,
      bold = _ref.bold,
      weight = _ref.weight,
      tagName = _ref.tagName,
      children = _ref.children,
      rest = _objectWithoutProperties(_ref, ['size', 'secondary', 'skin', 'light', 'bold', 'weight', 'tagName', 'children']);

  if (bold !== undefined) {
    deprecationLog('Text prop "bold" is deprecated, use "weight" prop instead');
  } else {
    bold = false;
  }

  /* eslint-disable no-unused-vars */

  var dataHook = rest.dataHook,
      textProps = _objectWithoutProperties(rest, ['dataHook']);

  return React.createElement(tagName, _extends({}, textProps, style('root', {
    size: size,
    secondary: secondary,
    skin: skin,
    light: light && skin === SKINS.standard,
    weight: weight,
    bold: bold
  }, rest)), children);
};

Text.displayName = 'Text';

Text.propTypes = {
  /** tag name that will be rendered */
  tagName: string,

  /** class to be applied to the root element */
  className: string,

  /** font size of the text */
  size: oneOf(Object.keys(SIZES)),

  /** any nodes to be rendered (usually text nodes) */
  children: any,

  /** is the text type is secondary. Affects the font color */
  secondary: bool,

  /** skin color of the text */
  skin: oneOf(Object.keys(SKINS)),

  /** is the text has dark or light skin */
  light: bool,

  /** font weight of the text */
  weight: oneOf(Object.keys(WEIGHTS)),

  /** is the text bold */
  bold: bool
};

Text.defaultProps = {
  size: SIZES.medium,
  secondary: false,
  skin: SKINS.standard,
  light: false,
  weight: WEIGHTS.thin,
  tagName: 'span'
};

export default Text;