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

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

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

var _VisuallyHidden = _interopRequireDefault(require("../VisuallyHidden"));

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

var _Illo = require("./Illo.css");

var _Illo2 = require("./Illo.utils");

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

var Illo = function Illo(props) {
  var className = props.className,
      color = props.color,
      colorSecondary = props.colorSecondary,
      colorUi = props.colorUi,
      colorUiDark = props.colorUiDark,
      colorUiLight = props.colorUiLight,
      colorUiTransparent = props.colorUiTransparent,
      colorUiWhite = props.colorUiWhite,
      name = props.name,
      size = props.size,
      style = props.style,
      title = props.title,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "color", "colorSecondary", "colorUi", "colorUiDark", "colorUiLight", "colorUiTransparent", "colorUiWhite", "name", "size", "style", "title"]);
  var componentClassName = (0, _classnames.default)('c-Illo', color && 'has-color', colorSecondary && 'has-colorSecondary', size && "is-" + size, className);
  var IlloComponent = _Illo2.svgSet[name];
  var iconTitle = title || name;
  var componentStyle = (0, _extends2.default)({}, style, {
    color: color
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Illo.IlloUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
    className: componentClassName,
    "data-illo-name": name,
    style: componentStyle,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Illo.CenteredContentUI, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Illo.IconUI, {
        className: "c-Illo__icon",
        title: iconTitle,
        children: IlloComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IlloComponent, {})
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisuallyHidden.default, {
      children: iconTitle
    })]
  }));
};

Illo.defaultProps = {
  color: '',
  colorSecondary: '',
  colorUi: '',
  colorUiDark: '',
  colorUiLight: '',
  colorUiTransparent: 'transparent',
  colorUiWhite: 'white',
  'data-cy': 'Illo',
  size: '60'
};
Illo.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Custom color for SVG image on primary paths. */
  color: _propTypes.default.string,

  /** Custom color for SVG image on secondary paths. */
  colorSecondary: _propTypes.default.string,

  /** Custom color for SVG image on UI themed paths. */
  colorUi: _propTypes.default.string,

  /** Custom color for SVG image on UI dark themed paths. */
  colorUiDark: _propTypes.default.string,

  /** Custom color for SVG image on UI light themed paths. */
  colorUiLight: _propTypes.default.string,

  /** Custom color for SVG image on UI transparent themed paths. Default `transparent`. */
  colorUiTransparent: _propTypes.default.string,

  /** Custom color for SVG image on UI white themed paths. Default `white`. */
  colorUiWhite: _propTypes.default.string,

  /** Determines the SVG image. Required. */
  name: _propTypes.default.string,

  /** Callback function when component is clicked. */
  onClick: _propTypes.default.func,

  /** Adjusts the size of the component. */
  size: _propTypes.default.oneOf(['40', '60', '72', '80', '90', 40, 60, 72, 80, 90]),

  /** Provides a name for the component. */
  title: _propTypes.default.string,

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