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

var _Icon2 = require("./Icon.utils");

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

var Icon = function Icon(props) {
  var center = props.center,
      className = props.className,
      clickable = props.clickable,
      faint = props.faint,
      ignoreClick = props.ignoreClick,
      isWithHiddenTitle = props.isWithHiddenTitle,
      inline = props.inline,
      muted = props.muted,
      onClick = props.onClick,
      offsetLeft = props.offsetLeft,
      offsetRight = props.offsetRight,
      name = props.name,
      shade = props.shade,
      size = props.size,
      state = props.state,
      subtle = props.subtle,
      title = props.title,
      withCaret = props.withCaret,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["center", "className", "clickable", "faint", "ignoreClick", "isWithHiddenTitle", "inline", "muted", "onClick", "offsetLeft", "offsetRight", "name", "shade", "size", "state", "subtle", "title", "withCaret"]);
  var componentClassName = (0, _classnames.default)('c-Icon', center && 'is-center', clickable && 'is-clickable', !clickable && ignoreClick && 'is-noInteract', faint && 'is-faint', inline && 'is-inline', name && "is-iconName-" + name, offsetLeft && 'is-offsetLeft', offsetRight && 'is-offsetRight', muted && 'is-muted', shade && "is-" + shade, state && "is-" + state, subtle && 'is-subtle', size && "is-" + size, withCaret && 'withCaret', className);
  var IconComponent = _Icon2.svgSet[name];
  var CaretComponent = _Icon2.svgSet['caret-down'];
  var iconTitle = title || name;
  var caretMarkup = withCaret ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    className: "c-Icon__icon is-caret",
    title: "Caret",
    children: CaretComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(CaretComponent, {})
  }) : null;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Icon.IconUI, (0, _extends2.default)({
    "aria-hidden": true,
    role: "img"
  }, (0, _getValidProps.default)(rest), {
    className: componentClassName,
    onClick: onClick,
    "data-icon-name": name,
    title: iconTitle,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "c-Icon__icon",
      children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {})
    }), caretMarkup, isWithHiddenTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisuallyHidden.default, {
      children: iconTitle
    }) : null]
  }));
};

function noop() {}

Icon.defaultProps = {
  center: false,
  clickable: false,
  'data-cy': 'Icon',
  ignoreClick: true,
  isWithHiddenTitle: true,
  muted: false,
  name: 'emoji',
  onClick: noop,
  offsetLeft: false,
  offsetRight: false,
  size: '20',
  withCaret: false
};
Icon.propTypes = {
  /** Center aligns component. */
  center: _propTypes.default.bool,

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

  /** Enables the component to be clickable. */
  clickable: _propTypes.default.bool,

  /** Ignores click events. Bubbles click event to parent component. */
  ignoreClick: _propTypes.default.bool,

  /** Displays the component as `inline-block`. */
  inline: _propTypes.default.bool,

  /** Applies muted styles. */
  muted: _propTypes.default.bool,

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

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

  /** Changes icon color to represent a state. */
  state: _propTypes.default.oneOf(['error', 'success', 'warning']),

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

  /** Adjusts the size of the component. */
  size: _propTypes.default.oneOf([8, 10, 12, 13, 14, 15, 16, 18, 20, 24, 32, 48, 52, 72, '8', '10', '12', '13', '14', '15', '16', '18', '20', '24', '32', '48', '52', '72']),

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

  /** Renders a caret icon, next to the component's SVG icon. */
  withCaret: _propTypes.default.bool,
  faint: _propTypes.default.bool,
  isWithHiddenTitle: _propTypes.default.bool,
  offsetLeft: _propTypes.default.bool,
  offsetRight: _propTypes.default.bool,
  subtle: _propTypes.default.bool,

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