@helpscout/hsds-react/components/OptionTile/OptionTile.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 _OptionTile = _interopRequireDefault(require("./OptionTile.Container"));

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

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

var _OptionTile2 = require("./OptionTile.css");

var _OptionIcon = _interopRequireDefault(require("./OptionIcon"));

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

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

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

  var _proto = OptionTile.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        className = _this$props.className,
        children = _this$props.children,
        icon = _this$props.icon,
        iconTitle = _this$props.iconTitle,
        minHeight = _this$props.minHeight,
        title = _this$props.title,
        style = _this$props.style,
        subtitle = _this$props.subtitle,
        textAlign = _this$props.textAlign,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["className", "children", "icon", "iconTitle", "minHeight", "title", "style", "subtitle", "textAlign"]);
    var componentClassName = (0, _classnames.default)('c-OptionTile', className);
    var styles = (0, _extends2.default)({}, style, {
      minHeight: minHeight
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionTile2.OptionTileUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      style: styles,
      title: title,
      textAlign: textAlign,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionTile2.HeaderUI, {
        className: "c-OptionTile__header",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionTile2.CenteredContentUI, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionIcon.default, {
            icon: icon,
            iconTitle: iconTitle
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionTile2.ContentUI, {
        className: "c-OptionTile__content",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionTile2.TitleUI, {
          className: "c-OptionTile__titleWrapper",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
            className: "c-OptionTile__title",
            block: true,
            isPlainLink: true,
            noUnderline: true,
            weight: "500",
            size: "14",
            children: title
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
          className: "c-OptionTile__subtitle",
          shade: "muted",
          noUnderline: true,
          children: subtitle
        })]
      })]
    }));
  };

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

OptionTile.Container = _OptionTile.default;
OptionTile.defaultProps = {
  'data-cy': 'OptionTile',
  icon: 'chat',
  title: 'Title',
  style: {},
  subtitle: 'Description',
  textAlign: 'center'
};
OptionTile.propTypes = {
  children: _propTypes.default.any,

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

  /** Icon to render within the `OptionIcon` */
  icon: _propTypes.default.string,

  /** The title for the Icon. */
  iconTitle: _propTypes.default.string,
  minHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  to: _propTypes.default.string,

  /** The title for the component. */
  title: _propTypes.default.string,
  style: _propTypes.default.object,

  /** The subtitle for the component. */
  subtitle: _propTypes.default.string,
  textAlign: _propTypes.default.string,

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