@helpscout/hsds-react/components/Heading/Heading.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 _Heading = require("./Heading.css");

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

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

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

  var _proto = Heading.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        center = _this$props.center,
        children = _this$props.children,
        className = _this$props.className,
        disableSelect = _this$props.disableSelect,
        light = _this$props.light,
        lineHeightInherit = _this$props.lineHeightInherit,
        lineHeightReset = _this$props.lineHeightReset,
        linkStyle = _this$props.linkStyle,
        noWrap = _this$props.noWrap,
        selector = _this$props.selector,
        size = _this$props.size,
        truncate = _this$props.truncate,
        weight = _this$props.weight,
        wordWrap = _this$props.wordWrap,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["center", "children", "className", "disableSelect", "light", "lineHeightInherit", "lineHeightReset", "linkStyle", "noWrap", "selector", "size", "truncate", "weight", "wordWrap"]);
    var componentClassName = (0, _classnames.default)('c-Heading', center && 'is-center', disableSelect && 'is-disableSelect', light && 'is-light', lineHeightInherit && 'is-lineHeightInherit', lineHeightReset && 'is-lineHeightReset', linkStyle && 'is-linkStyle', size && "is-" + size, truncate && 'is-truncate', weight && "is-" + weight, noWrap && 'is-noWrap', wordWrap && 'is-wordWrap', className);
    var selectorTag = selector || 'div';
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.HeadingUI, (0, _extends2.default)({
      as: selectorTag
    }, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      children: children
    }));
  };

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

Heading.defaultProps = {
  center: false,
  'data-cy': 'Heading',
  disableSelect: false,
  lineHeightInherit: false,
  lineHeightReset: false,
  linkStyle: false,
  truncate: false,
  noWrap: false,
  wordWrap: false
};
Heading.propTypes = {
  /** Center aligns text. */
  center: _propTypes.default.bool,

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

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

  /** Lightens the heading color. */
  light: _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,

  /** Applies `Link` styles. */
  linkStyle: _propTypes.default.bool,

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

  /** Sets HTML element. */
  selector: _propTypes.default.string,

  /** Adjust heading size. */
  size: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'big', 'md', 'small', '']),

  /** 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,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = Heading;
exports.default = _default;