@activecollab/components/dist/cjs/components/Badge/Badge.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Badge = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Styles = require("./Styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
 * @component Badge
 * @description
 * In some products, you might need to show a badge on the right corner of the avatar.
 * We call this a badge. Here's an example that shows if the user is online.
 *
 * @prop {position} - dictates the position of a badge.
 * @prop {dimension} - controls the size of a badge (width and height) in pixels.
 * @prop {backgroundColor} - background-color of a badge.
 *
 * @example
 * <IconButton variant="text gray" size="big">
 *   <BellOffIcon />
 *   <Badge position="top-right" backgroundColor="red" dimension={16} />
 * </IconButton>
 *
 * @see
 * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
 */
var Badge = exports.Badge = function Badge(_ref) {
  var _ref$dimension = _ref.dimension,
    dimension = _ref$dimension === void 0 ? 8 : _ref$dimension,
    className = _ref.className,
    _ref$position = _ref.position,
    position = _ref$position === void 0 ? "bottom-left" : _ref$position,
    backgroundColor = _ref.backgroundColor,
    value = _ref.value,
    _ref$isStandalone = _ref.isStandalone,
    isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
  return /*#__PURE__*/_react.default.createElement(_Styles.StyledBadge, {
    className: (0, _classnames.default)("c-badge", className),
    dimension: dimension,
    position: position,
    isStandalone: isStandalone,
    backgroundColor: backgroundColor,
    role: "status",
    value: value
  }, value && value > 100 ? 99 + "+" : value);
};
//# sourceMappingURL=Badge.js.map