@trackunit/react-components 0.1.43 → 0.1.45

package/index.js

@@ -488,7 +488,7 @@ const IconContainer$1 = tw.div `
  * @returns {JSX.Element} Badge component
  */
 const Badge = (_a) => {
-    var { color = "danger", subtle = false, className, count, max, hideZero = false, dataTestId } = _a; __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId"]);
+    var { color = "primary", subtle = false, className, count, max, hideZero = false, dataTestId } = _a; __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId"]);
     if (hideZero && count === 0) {
         return null;
     }
@@ -498,20 +498,7 @@ const Badge = (_a) => {
 const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     const colorClasses = {
         primary: $subtle ? tws `tu-badge--primary-subtle` : tws `tu-badge--primary`,
-        secondary: $subtle ? tws `tu-badge--secondary-subtle` : tws `tu-badge--secondary`,
-        accent: $subtle ? tws `tu-badge--accent-subtle` : tws `tu-badge--accent`,
-        success: $subtle ? tws `tu-badge--success-subtle` : tws `tu-badge--success`,
         danger: $subtle ? tws `tu-badge--danger-subtle` : tws `tu-badge--danger`,
-        warning: $subtle ? tws `tu-badge--warning-subtle` : tws `tu-badge--warning`,
-        info: $subtle ? tws `tu-badge--info-subtle` : tws `tu-badge--info`,
-        neutral: $subtle ? tws `tu-badge--neutral-subtle` : tws `tu-badge--neutral`,
-        good: $subtle ? tws `tu-badge--good-subtle` : tws `tu-badge--good`,
-        low: $subtle ? tws `tu-badge--low-subtle` : tws `tu-badge--low`,
-        critical: $subtle ? tws `tu-badge--critical-subtle` : tws `tu-badge--critical`,
-        working: $subtle ? tws `tu-badge--working-subtle` : tws `tu-badge--working`,
-        idle: $subtle ? tws `tu-badge--idle-subtle` : tws `tu-badge--idle`,
-        stopped: $subtle ? tws `tu-badge--stopped-subtle` : tws `tu-badge--stopped`,
-        unknown: $subtle ? tws `tu-badge--unknown-subtle` : tws `tu-badge--unknown`,
     };
     return colorClasses[$color];
 };
@@ -1142,8 +1129,8 @@ const HelpAddon = tw.span `
  */
 const DateField = forwardRef((_a, ref) => {
     var { label, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
-    const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(DateInput, Object.assign({ ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 const localeLookup = {
@@ -1353,6 +1340,12 @@ const Container$4 = tw.div `
             return tws `tu-indicator--moving`;
         case "unknown":
             return tws `tu-indicator--unknown`;
+        case "unused":
+            return tws `tu-indicator--unused`;
+        case "utilized":
+            return tws `tu-indicator--utilized`;
+        case "heavily_utilized":
+            return tws `tu-indicator--heavily-utilized`;
         case "on_rent":
             return tws `tu-indicator--on-rent`;
         case "available":
@@ -1374,7 +1367,7 @@ const Container$4 = tw.div `
 `;
 const IconBackground = tw.div `
   tu-indicator__icon-background
-  
+
   ${({ $withBackground }) => {
     return $withBackground ? "" : "tu-indicator__icon-background--none";
 }}
@@ -1589,8 +1582,8 @@ const NumberInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ r
  */
 const NumberField = forwardRef((_a, ref) => {
     var { label, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
-    const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsx(NumberInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2638,14 +2631,14 @@ const TextAreaField = React.forwardRef((_a, ref) => {
 const TextField = React.forwardRef((_a, ref) => {
     var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
     const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
-    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const handleChange = React.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
+    return (jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
             (maxLength !== null && maxLength !== undefined && (jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsx(TextInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.67",
+    "@trackunit/css-core": "0.0.68",
     "@trackunit/tailwind-styled-components": "0.0.52",
     "react": "18.2.0",
-    "@trackunit/ui-design-tokens": "0.0.54",
+    "@trackunit/ui-design-tokens": "0.0.55",
     "@trackunit/react-core-contexts-test": "0.1.24",
     "echarts": "5.4.0",
     "echarts-for-react": "3.0.2",

package/src/components/Badge/Badge.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
+type BadgeColors = Extract<ThemeColors, "primary" | "danger">;
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
      */
-    color?: ThemeColors;
+    color?: BadgeColors;
     /**
      * Specifies whether the badge is subtle or not.
      * Subtle badges have a light background color wither a darker text color.