@helpscout/hsds-react/components/Text/Text.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Text = require("./Text.css");

var _jsxRuntime = require("react/jsx-runtime");

var Text = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Text, _React$PureComponent);

  function Text() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = Text.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        allCaps = _this$props.allCaps,
        block = _this$props.block,
        children = _this$props.children,
        className = _this$props.className,
        center = _this$props.center,
        disableSelect = _this$props.disableSelect,
        faint = _this$props.faint,
        isPlainLink = _this$props.isPlainLink,
        lineHeightInherit = _this$props.lineHeightInherit,
        lineHeightReset = _this$props.lineHeightReset,
        linkStyle = _this$props.linkStyle,
        muted = _this$props.muted,
        noUnderline = _this$props.noUnderline,
        noWrap = _this$props.noWrap,
        selector = _this$props.selector,
        shade = _this$props.shade,
        size = _this$props.size,
        state = _this$props.state,
        subtle = _this$props.subtle,
        truncate = _this$props.truncate,
        weight = _this$props.weight,
        wordWrap = _this$props.wordWrap,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["allCaps", "block", "children", "className", "center", "disableSelect", "faint", "isPlainLink", "lineHeightInherit", "lineHeightReset", "linkStyle", "muted", "noUnderline", "noWrap", "selector", "shade", "size", "state", "subtle", "truncate", "weight", "wordWrap"]);
    var componentClassName = (0, _classnames.default)('c-Text', allCaps && 'is-all-caps', block && 'is-block', center && 'is-center', disableSelect && 'is-disableSelect', faint && 'is-faint is-shade-faint', isPlainLink && 'is-plainLink', muted && 'is-muted is-shade-muted', noUnderline && 'is-noUnderline', noWrap && 'is-no-wrap', lineHeightInherit && 'is-lineHeightInherit', lineHeightReset && 'is-lineHeightReset', linkStyle && 'is-linkStyle', selector && "is-" + selector, shade && "is-shade-" + shade, size && "is-" + size, state && "is-" + state, subtle && 'is-subtle is-shade-subtle', truncate && 'is-truncate', weight && "is-" + weight, wordWrap && 'is-wordWrap', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.TextUI, (0, _extends2.default)({
      as: selector
    }, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      children: children
    }));
  };

  return Text;
}(_react.default.PureComponent);

Text.defaultProps = {
  center: false,
  'data-cy': 'Text',
  disableSelect: false,
  isPlainLink: false,
  linkStyle: false,
  noUnderline: false,
  selector: 'span',
  size: '13',
  state: 'default',
  truncate: false
};
Text.propTypes = {
  allCaps: _propTypes.default.bool,
  block: _propTypes.default.bool,
  children: _propTypes.default.any,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  isPlainLink: _propTypes.default.bool,
  noUnderline: _propTypes.default.bool,
  selector: _propTypes.default.string,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Center aligns text. */
  center: _propTypes.default.bool,

  /** Disables text selection. */
  disableSelect: _propTypes.default.bool,

  /** Changes text color to a very light grey. */
  faint: _propTypes.default.bool,

  /** Applies [Link](../Link) styles. */
  linkStyle: _propTypes.default.bool,

  /** Inherit the line-height from a parent selector. */
  lineHeightInherit: _propTypes.default.bool,

  /** Resets the line-height to `1`. */
  lineHeightReset: _propTypes.default.bool,

  /** Changes text color to a light grey. */
  muted: _propTypes.default.bool,

  /** Prevents text from wrapping. */
  noWrap: _propTypes.default.bool,

  /** Changes text color shade. */
  shade: _propTypes.default.oneOf(['default', 'subtle', 'slightlyMuted', 'muted', 'faint', 'extraMuted', '', null]),

  /** Adjust text size. */
  size: _propTypes.default.oneOf(['10', 10, '11', 11, '12', 12, '13', 13, '14', 14, '15', 15, '20', 20, '48', 48]),

  /** Changes the text color based on state. */
  state: _propTypes.default.oneOf(['default', 'error', 'success', 'warning', '', null]),

  /** Changes text color to a lighter grey. */
  subtle: _propTypes.default.bool,

  /** Enables CSS truncation for text. */
  truncate: _propTypes.default.bool,

  /** Adjust text weight. */
  weight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Enables CSS `word-break` for text. */
  wordWrap: _propTypes.default.bool
};
var _default = Text;
exports.default = _default;