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

var _Badge = _interopRequireDefault(require("../Badge"));

var _StatusDot = _interopRequireDefault(require("../StatusDot"));

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

var _StatusBadge = require("./StatusBadge.css");

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

var StatusBadge = function StatusBadge(props) {
  var borderColor = props.borderColor,
      children = props.children,
      className = props.className,
      count = props.count,
      icon = props.icon,
      inline = props.inline,
      isUnread = props.isUnread,
      outerBorderColor = props.outerBorderColor,
      size = props.size,
      status = props.status,
      style = props.style,
      title = props.title,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["borderColor", "children", "className", "count", "icon", "inline", "isUnread", "outerBorderColor", "size", "status", "style", "title"]);
  var statusDotProps = {
    borderColor: borderColor,
    outerBorderColor: outerBorderColor,
    title: title
  };
  var componentClassName = (0, _classnames.default)('c-StatusBadge', className);
  var hasStatus = Boolean(status);
  var statusDotMarkup = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusBadge.StatusDotUI, {
    className: "c-StatusBadge__statusDot",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
      duration: 100,
      in: hasStatus,
      sequence: "scale fade",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusDot.default, (0, _extends2.default)({}, statusDotProps, {
        status: status
      }))
    })
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StatusBadge.StatusBadgeUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
    className: componentClassName,
    children: [statusDotMarkup, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
      isSquare: true,
      className: "c-StatusBadge__badge",
      children: count
    })]
  }));
};

StatusBadge.defaultProps = {
  count: 0,
  'data-cy': 'StatusBadge'
};
StatusBadge.propTypes = {
  /** Color for the StatusDot border. */
  borderColor: _propTypes.default.string,

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

  /** Count to display within the Badge. */
  count: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Color for the StatusDot's outer border. */
  outerBorderColor: _propTypes.default.string,

  /** Status style to render to the StatusDot. */
  status: _propTypes.default.oneOf(['online', 'offline', 'busy', 'new', 'active', 'inactive', '']),

  /** Custom text for the HTML `title` attributes. */
  title: _propTypes.default.string
};
var _default = StatusBadge;
exports.default = _default;