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

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

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

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

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

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var WrappedBadge = /*#__PURE__*/(0, _react.forwardRef)(function Badge(props, ref) {
  var children = props.children,
      color = props.color,
      count = props.count,
      className = props.className,
      display = props.display,
      inverted = props.inverted,
      isSquare = props.isSquare,
      size = props.size,
      status = props.status,
      textColor = props.textColor,
      white = props.white,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "color", "count", "className", "display", "inverted", "isSquare", "size", "status", "textColor", "white"]);
  var componentClassName = (0, _classnames.default)('c-Badge', count && 'is-count', display && "is-display-" + display, isSquare && "is-square", size && "is-" + size, status && "is-" + status, white && 'is-white', className);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, (0, _extends2.default)({}, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
    color: color,
    inverted: inverted,
    textColor: textColor
  }), {
    ref: ref,
    className: componentClassName,
    children: children
  }));
});
WrappedBadge.defaultProps = {
  'data-cy': 'Badge',
  display: 'inlineBlock',
  inverted: false,
  color: '',
  textColor: ''
};
WrappedBadge.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** A custom color value that can be passed in */
  color: _propTypes.default.string,
  count: _propTypes.default.bool,

  /** Determines the CSS `display` of the component. Default `inlineBlock`. */
  display: _propTypes.default.oneOf(['block', 'inlineBlock']),

  /** Inverts the colors of the background and text. */
  inverted: _propTypes.default.bool,

  /** Renders a square shape. */
  isSquare: _propTypes.default.bool,

  /** Adjust component size. */
  size: _propTypes.default.string,

  /** Changes the color of the component to the corresponding status. */
  status: _propTypes.default.oneOf(['error', 'info', 'success', 'warning']),

  /** Changes the color of text. */
  textColor: _propTypes.default.string,

  /** Applies a white style to the component. */
  white: _propTypes.default.bool,

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