@trackunit/react-components 0.0.43 → 0.0.44

package/components/badge/Badge.d.ts

@@ -1,47 +1,47 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-export declare type BadgeIntent = "primary" | "secondary" | "success" | "danger" | "warning";
+import { Colors } from "../../constants/colors";
 export declare type BadgeSize = "default" | "large";
 declare type BadgeVariant = "badge" | "pill" | "tag";
 export interface TagProps extends BaseBadgeProps {
     /**
      * The name of the variant.
      *
-     * @type string}
      * @memberof TagProps
      */
     variant: "tag";
     /**
      * A handler for a click event triggered on x icon
      * if not passed then x icon won't be visible
-     * @type {() => void}
+     *
+     * @type () => void
      * @memberof TagProps
      */
     onClose?: () => void;
 }
 export interface BaseBadgeProps extends CommonProps {
     /**
-     * The intent of the badge.
+     * The color of the badge.
      *
-     * @type {BadgeIntent}
+     * @type "primary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown"
      * @memberof BadgeProps
      */
-    intent?: BadgeIntent;
+    color?: Colors;
     /**
-     * Specifies whether the intent style should be subtle or not.
+     * Specifies whether the badge is subtle or not.
+     * Subtle badges have a light background color wither a darker text color.
      *
-     * @type {boolean}
+     * @type boolean
      * @memberof BadgeProps
      */
     subtle?: boolean;
     /**
-     * Whether badge should be displayed as a pill, tag or badge
-     * pill numeric values above 99 will be displayed as 99+.
-     * tag will display x icon, you have to provide onClose handler
-     *
-     * Badge will use subtle intent by default.
+     * Whether badge should be displayed as a pill, tag or badge.
+     * For the pill variant, numeric values above 99 will be displayed as 99+.
+     * Tag will display x icon if you provide onClose handler.
+     * Badge is subtle by default.
      *
-     * @type {BadgeVariant}
+     * @type "badge" | "pill" | "tag"
      * @memberof BadgeProps
      */
     variant?: BadgeVariant;
@@ -64,11 +64,11 @@ export interface BaseBadgeProps extends CommonProps {
     /**
      * Size of the badge.
      *
-     * @type {BadgeSize}
+     * @type "default" | "large"
      * @memberof BadgeProps
      */
     size?: BadgeSize;
 }
 export declare type BadgeProps = BaseBadgeProps | TagProps;
-export declare const Badge: ({ intent, subtle, className, variant, dataTestId, children, size, ...rest }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ color, subtle, className, variant, dataTestId, children, size, ...rest }: BadgeProps) => JSX.Element;
 export {};

package/index.js

@@ -697,7 +697,7 @@ const IconContainer = tw.div`
 
 const Badge = _a => {
   var {
-    intent = "secondary",
+    color = "neutral",
     subtle = false,
     className,
     variant = "badge",
@@ -705,14 +705,14 @@ const Badge = _a => {
     children,
     size = "default"
   } = _a,
-      rest = __rest(_a, ["intent", "subtle", "className", "variant", "dataTestId", "children", "size"]);
+      rest = __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
 
   const isPill = variant === "pill";
   const tagProps = rest;
   return jsxs(StyledText$2, Object.assign({
     "$variant": variant,
     className: className,
-    "$intent": intent,
+    "$color": color,
     "$size": size,
     "$subtle": subtle ? subtle : isPill,
     "data-testid": dataTestId,
@@ -746,17 +746,26 @@ const getSizeModifierClass = () => ({
 };
 
 const getBadgeModifierClass = () => ({
-  $intent,
+  $color,
   $subtle
 }) => {
-  const intentClass = {
+  const colorClasses = {
     primary: $subtle ? tws`badge--primary-subtle` : tws`badge--primary`,
-    secondary: $subtle ? tws`badge--secondary-subtle` : tws`badge--secondary`,
+    accent: $subtle ? tws`badge--accent-subtle` : tws`badge--accent`,
     success: $subtle ? tws`badge--success-subtle` : tws`badge--success`,
     danger: $subtle ? tws`badge--danger-subtle` : tws`badge--danger`,
-    warning: $subtle ? tws`badge--warning-subtle` : tws`badge--warning`
+    warning: $subtle ? tws`badge--warning-subtle` : tws`badge--warning`,
+    info: $subtle ? tws`badge--info-subtle` : tws`badge--info`,
+    neutral: $subtle ? tws`badge--neutral-subtle` : tws`badge--neutral`,
+    good: $subtle ? tws`badge--good-subtle` : tws`badge--good`,
+    low: $subtle ? tws`badge--low-subtle` : tws`badge--low`,
+    critical: $subtle ? tws`badge--critical-subtle` : tws`badge--critical`,
+    working: $subtle ? tws`badge--working-subtle` : tws`badge--working`,
+    idle: $subtle ? tws`badge--idle-subtle` : tws`badge--idle`,
+    stopped: $subtle ? tws`badge--stopped-subtle` : tws`badge--stopped`,
+    unknown: $subtle ? tws`badge--unknown-subtle` : tws`badge--unknown`
   };
-  return intentClass[$intent];
+  return colorClasses[$color];
 };
 
 const StyledText$2 = tw.text`
@@ -3038,7 +3047,7 @@ const PageHeading = ({
       }, {
         children: title
       })), badge && jsx(Badge, Object.assign({
-        intent: "primary"
+        color: "primary"
       }, {
         children: badge
       }))]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "repository": "https://github.com/Trackunit/manager",
   "license": "MIT",
   "dependencies": {