@helpscout/hsds-react/components/BlankSlate/BlankSlate.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 _Illo = _interopRequireDefault(require("../Illo"));

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

var _BlankSlate = require("./BlankSlate.css");

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

var getIllo = function getIllo(_ref) {
  var illo = _ref.illo,
      illoName = _ref.illoName,
      illoSize = _ref.illoSize;
  var content = null;

  if (illo) {
    content = illo;
  } else if (illoName) {
    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Illo.default, {
      name: illoName,
      size: illoSize
    });
  }

  return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlankSlate.IlloUI, {
    children: content
  }) : content;
};

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

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

  var _proto = BlankSlate.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        className = _this$props.className,
        children = _this$props.children,
        illo = _this$props.illo,
        illoName = _this$props.illoName,
        illoSize = _this$props.illoSize,
        title = _this$props.title,
        message = _this$props.message,
        lightBackground = _this$props.lightBackground,
        alignTop = _this$props.alignTop,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["className", "children", "illo", "illoName", "illoSize", "title", "message", "lightBackground", "alignTop"]);
    var componentClassName = (0, _classnames.default)('c-BlankSlate', lightBackground ? 'with-light-background' : '', alignTop ? 'align-top' : '', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_BlankSlate.BlankSlateUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      children: [getIllo({
        illo: illo,
        illoName: illoName,
        illoSize: illoSize
      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlankSlate.HeadingUI, {
        size: "h3",
        children: title
      }), message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BlankSlate.TextUI, {
        children: message
      })]
    }));
  };

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

BlankSlate.defaultProps = {
  'data-cy': 'BlankSlate',
  lightBackground: false,
  alignTop: false,
  illoSize: 80
};
BlankSlate.propTypes = {
  /** Will aligned to the top the content of the component */
  alignTop: _propTypes.default.bool,

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

  /** An instance of an Illo Component */
  illo: _propTypes.default.any,

  /** DEPRECATED. Name of the illustration, from the Illo component. */
  illoName: _propTypes.default.string,

  /** DEPRECATED. Size of the illustration, from the Illo component. */
  illoSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Will add a light background to the component */
  lightBackground: _propTypes.default.bool,

  /** Message displayed in the content area. Can be HTML */
  message: _propTypes.default.any,

  /** Title displayed in the content area */
  title: _propTypes.default.string,

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