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

ActiveCollab Components

import React from "react";
import classNames from "classnames";
import { StyledBadge } from "./Styles";
const getLabel = (value, cap) => {
  if (!value) {
    return null;
  }
  return cap && value > cap ? cap + "+" : value;
};

/**
 * @component Badge
 * @description
 * A small pill that sits on the corner of an avatar or an icon, or stands in a
 * row on its own. It shows a count, or nothing at all when it marks a state.
 *
 * @prop {position} - dictates the position of a badge.
 * @prop {dimension} - controls the height of a badge in pixels. The width grows with the content.
 * @prop {shape} - "pill" adds horizontal padding so the badge reads as long.
 * @prop {cap} - the highest number shown. Above it the badge renders `{cap}+`.
 * @prop {backgroundColor} - background-color of a badge.
 * @prop {textColor} - color of the number.
 * @prop {isStandalone} - takes the badge out of absolute positioning.
 *
 * @example
 * <IconButton variant="text gray" size="big">
 *   <BellOffIcon />
 *   <Badge position="top-right" backgroundColor="var(--red-alert)" dimension={16} value={7} cap={99} />
 * </IconButton>
 *
 * @see
 * https://system.activecollab.com/?path=/story/components-indicators-badge--badge
 */
export const Badge = _ref => {
  let _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,
    textColor = _ref.textColor,
    value = _ref.value,
    cap = _ref.cap,
    _ref$shape = _ref.shape,
    shape = _ref$shape === void 0 ? "circle" : _ref$shape,
    _ref$shadows = _ref.shadows,
    shadows = _ref$shadows === void 0 ? false : _ref$shadows,
    _ref$isStandalone = _ref.isStandalone,
    isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
  const label = getLabel(value, cap);
  return /*#__PURE__*/React.createElement(StyledBadge, {
    className: classNames("c-badge", className),
    dimension: dimension,
    position: position,
    shape: shape,
    shadows: shadows,
    hasLabel: label !== null,
    isStandalone: isStandalone,
    backgroundColor: backgroundColor,
    textColor: textColor,
    role: "status"
  }, label);
};
//# sourceMappingURL=Badge.js.map