@activecollab/components 2.0.395 → 2.0.397

package/dist/index.js

@@ -15071,54 +15071,95 @@
   });
   Breadcrumbs.displayName = "Breadcrumbs";
 
+  var DEFAULT_DIMENSION = 8;
+  var LARGE_FONT_FROM_DIMENSION = 18;
+  var CIRCLE_PADDING_INLINE = 5;
+  var PILL_PADDING_INLINE = 10;
+  var DIGIT_INLINE_SIZE = 7;
+  var SMALL_CIRCLE_BELOW_DIMENSION = 16;
+  var dimensionOf = function dimensionOf(props) {
+    var _props$dimension;
+    return (_props$dimension = props.dimension) !== null && _props$dimension !== void 0 ? _props$dimension : DEFAULT_DIMENSION;
+  };
+  var paddingInlineOf = function paddingInlineOf(props) {
+    if (!props.hasLabel) {
+      return 0;
+    }
+    if (props.shape === "pill") {
+      return PILL_PADDING_INLINE;
+    }
+    var dimension = dimensionOf(props);
+    if (dimension >= SMALL_CIRCLE_BELOW_DIMENSION) {
+      return CIRCLE_PADDING_INLINE;
+    }
+
+    // A small circle keeps a single digit inside its box only with less padding.
+    return Math.max(0, Math.floor((dimension - DIGIT_INLINE_SIZE) / 2));
+  };
   var StyledBadge$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledBadge",
     componentId: "sc-6o8do5-0"
-  })(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], FontStyle, function (props) {
+  })(["", " align-items:center;background-color:", ";block-size:", ";border-radius:999px;box-sizing:border-box;color:", ";display:flex;font-size:", ";font-variant-numeric:tabular-nums;font-weight:700;inline-size:auto;justify-content:center;min-inline-size:", ";padding-inline:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", " ", ""], FontStyle, function (props) {
     return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
   }, function (props) {
-    return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
+    return dimensionOf(props) + "px";
   }, function (props) {
-    return props.dimension + "px";
+    return !props.textColor ? "var(--color-theme-100)" : props.textColor;
   }, function (props) {
-    return props.dimension + "px";
+    return dimensionOf(props) >= LARGE_FONT_FROM_DIMENSION ? "12px" : "10px";
   }, function (props) {
-    return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
+    return dimensionOf(props) + "px";
+  }, function (props) {
+    return paddingInlineOf(props) + "px";
   }, function (_ref) {
-    var isStandalone = _ref.isStandalone;
-    return isStandalone && styled.css(["position:static;z-index:0;"]);
+    var shadows = _ref.shadows;
+    return shadows && styled.css(["box-shadow:var(--shadow-tertiary);text-shadow:0 1px 2px rgba(0,0,0,0.25);"]);
   }, function (_ref2) {
-    var position = _ref2.position;
-    return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
+    var isStandalone = _ref2.isStandalone;
+    return isStandalone && styled.css(["position:static;z-index:0;"]);
   }, function (_ref3) {
     var position = _ref3.position;
-    return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
+    return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
   }, function (_ref4) {
     var position = _ref4.position;
-    return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
+    return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
   }, function (_ref5) {
     var position = _ref5.position;
+    return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
+  }, function (_ref6) {
+    var position = _ref6.position;
     return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
   });
 
+  var getLabel = function getLabel(value, cap) {
+    if (!value) {
+      return null;
+    }
+    return cap && value > cap ? "".concat(cap, "+") : value;
+  };
+
   /**
    * @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.
+   * 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 size of a badge (width and height) in pixels.
+   * @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="red" dimension={16} />
+   *   <Badge position="top-right" backgroundColor="var(--red-alert)" dimension={16} value={7} cap={99} />
    * </IconButton>
    *
    * @see
-   * https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
+   * https://system.activecollab.com/?path=/story/components-indicators-badge--badge
    */
   var Badge = function Badge(_ref) {
     var _ref$dimension = _ref.dimension,
@@ -15127,18 +15168,28 @@
       _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;
+    var label = getLabel(value, cap);
     return /*#__PURE__*/React__default["default"].createElement(StyledBadge$1, {
       className: classNames__default["default"]("c-badge", className),
       dimension: dimension,
       position: position,
+      shape: shape,
+      shadows: shadows,
+      hasLabel: label !== null,
       isStandalone: isStandalone,
       backgroundColor: backgroundColor,
-      role: "status",
-      value: value
-    }, value && value > 100 ? 99 + "+" : value);
+      textColor: textColor,
+      role: "status"
+    }, label);
   };
 
   var _excluded$1p = ["weight", "children"];