@trackunit/react-components 0.0.136 → 0.0.139

package/components/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-export declare type AlertIntent = "info" | "warning" | "danger" | "success";
+import { IntentColors } from "../../constants";
 export declare type AlertActionType = "primary" | "secondary";
 export declare type AlertAction = {
     label: string;
@@ -13,10 +13,10 @@ export interface AlertProps extends CommonProps {
      */
     children: React.ReactNode;
     /**
-     * Intent of the alert component.
+     * Color of the alert component.
      *
      */
-    intent?: AlertIntent;
+    color?: IntentColors;
     /**
      * Title of the alert component.
      */
@@ -50,4 +50,4 @@ export interface AlertProps extends CommonProps {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {JSX.Element} Alert component
  */
-export declare const Alert: ({ intent, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClose, dataTestId, autoScroll, inline, }: AlertProps) => JSX.Element;

package/components/BaseInput/BaseInput.d.ts

@@ -4,31 +4,31 @@ declare type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElemen
 declare type FieldSize = "small" | "medium";
 export interface BaseInputProps extends FilteredInputProps, CommonProps {
     /**
-     * An React element to render before the text in the input.
+     * A React element to render before the text in the input.
      * This is typically used to render an icon.
-     * For other elements than icons, please concider using the addonBefore prop.
+     * For elements other than icons, please consider using the addonBefore prop.
      */
     prefix?: React.ReactNode;
     /**
-     * An React element to render after the text in the input.
+     * A React element to render after the text in the input.
      * This is typically used to render an icon.
-     * For other elements than icons, please concider using the addonAfter prop.
+     * For other elements than icons, please consider using the addonAfter prop.
      */
     suffix?: React.ReactNode;
     /**
-     * An React element to render in a separate container before the text in the input.
+     * A React element to render in a separate container before the text in the input.
      * This is typically used to render text.
-     * For icons, please concider using the prefix prop.
+     * For icons, please consider using the prefix prop.
      */
     addonBefore?: React.ReactNode;
     /**
-     * An React element to render in a separate container after the text in the input.
+     * A React element to render in a separate container after the text in the input.
      * This is typically used to render text.
-     * For icons, please concider using the suffix prop.
+     * For icons, please consider using the suffix prop.
      */
     addonAfter?: React.ReactNode;
     /**
-     * An ReactNode to render at the end of the input field before the addonAfter.
+     * A ReactNode to render at the end of the input field before the addonAfter.
      * Mainly meant for the icon button actions for special input types.
      */
     actions?: React.ReactNode;

package/components/DayPicker/DayPickerPopover.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
 import { Size } from "../../common";
-import { ButtonIntent } from "../buttons";
+import { ButtonColor } from "../buttons";
 import { PopoverPlacement } from "../Popover";
 export interface DayPickerPopoverProps {
     disabledDays?: Matcher | Matcher[] | undefined;
     className?: string;
     onDaySelect: (day: Date) => void;
     selectedDay?: Date;
-    intent?: ButtonIntent;
+    color?: ButtonColor;
     size?: Size;
     placement?: PopoverPlacement;
     buttonContent: JSX.Element;
@@ -20,4 +20,4 @@ export interface DayPickerPopoverProps {
  * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
  * @returns {JSX.Element} DayPickerPopover component
  */
-export declare const DayPickerPopover: ({ disabledDays, className, selectedDay, onDaySelect, intent, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;
+export declare const DayPickerPopover: ({ disabledDays, className, selectedDay, onDaySelect, color, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;

package/components/buttons/Button/Button.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Size } from "../../../common";
-import { ButtonCommonProps, ButtonIntent, ButtonType, ButtonVariant } from "../shared/ButtonProps";
+import { ButtonColor, ButtonCommonProps, ButtonType, ButtonVariant } from "../shared/ButtonProps";
 export interface StyledButtonProps {
     $variant: ButtonVariant;
     $size: Size;
     $square: boolean;
-    $intent: ButtonIntent;
+    $color: ButtonColor;
     $fullWidth: boolean;
 }
 export interface ButtonProps extends ButtonCommonProps {

package/components/buttons/shared/ButtonProps.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { CommonProps, Size } from "../../../common/CommonProps";
+import { GeneralColors, IntentColors } from "../../../constants";
 export declare type ButtonVariant = "filled" | "transparent";
-export declare type ButtonIntent = "primary" | "secondary" | "danger" | "warning" | "tertiary";
+export declare type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "info" | "warning" | "danger"> | "tertiary";
 export declare type ButtonType = "button" | "submit";
 export interface ButtonCommonProps extends CommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -20,7 +21,7 @@ export interface ButtonCommonProps extends CommonProps {
     /**
      * The button's variant. Values are filled, transparent, plain.
      */
-    intent?: ButtonIntent;
+    color?: ButtonColor;
     /**
      * The variant of the button.
      */

package/components/buttons/shared/helpers.d.ts

@@ -1,7 +1,7 @@
 import { Size } from "../../../common";
-import { ButtonIntent, ButtonVariant } from "./ButtonProps";
+import { ButtonColor, ButtonVariant } from "./ButtonProps";
 interface ButtonProps {
-    $intent: ButtonIntent;
+    $color: ButtonColor;
     $variant: ButtonVariant;
     $size: Size;
 }
@@ -10,7 +10,7 @@ interface ButtonProps {
  *
  * @returns {string} - Classnames for the button
  */
-export declare const getStyles: () => ({ $intent, $variant }: ButtonProps) => string;
+export declare const getStyles: () => ({ $color, $variant }: ButtonProps) => any;
 /**
  * Helper to get the needed classname for padding.
  *

package/constants/colors.d.ts

@@ -7,6 +7,7 @@
  */
 export declare const generalColors: {
     readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
     readonly ACCENT: "accent";
     readonly NEUTRAL: "neutral";
 };
@@ -80,6 +81,7 @@ export declare const colors: {
     readonly WARNING: "warning";
     readonly DANGER: "danger";
     readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
     readonly ACCENT: "accent";
     readonly NEUTRAL: "neutral";
 };

package/index.css

@@ -88,15 +88,15 @@
   }
 
   &--warning {
-    @apply bg-orange-50
-      text-orange-600
-      hover:bg-orange-200
-      hover:text-orange-800
-      active:text-orange-700
-      active:bg-orange-100
-      focus:ring-orange-300
-      disabled:bg-orange-50
-      disabled:hover:bg-orange-50
+    @apply bg-warning-50
+      text-warning-600
+      hover:bg-warning-200
+      hover:text-warning-800
+      active:text-warning-700
+      active:bg-warning-100
+      focus:ring-warning-300
+      disabled:bg-warning-50
+      disabled:hover:bg-warning-50
       disabled:text-slate-400;
   }
 
@@ -146,10 +146,10 @@
   }
 
   &--transparent-warning {
-    @apply text-orange-600
-      active:bg-orange-500/20
-      focus:ring-orange-300
-      hover:bg-orange-500/10
+    @apply text-warning-600
+      active:bg-warning-500/20
+      focus:ring-warning-300
+      hover:bg-warning-500/10
       disabled:hover:bg-transparent;
   }
 

package/index.js

@@ -164,7 +164,7 @@ const Container$9 = tw.div`
  */
 
 const getStyles = () => ({
-  $intent,
+  $color,
   $variant
 }) => {
   const styles = {
@@ -183,7 +183,7 @@ const getStyles = () => ({
       warning: tws`tu-button--transparent tu-button--transparent-warning`
     }
   };
-  return styles[$variant][$intent];
+  return styles[$variant][$color];
 };
 /**
  * Helper to get the needed classname for padding.
@@ -223,7 +223,7 @@ const Button = React.forwardRef((_a, ref) => {
     fullWidth = false,
     prefix,
     suffix,
-    intent = "primary",
+    color = "primary",
     variant = "filled",
     type = "button",
     size = "medium",
@@ -234,7 +234,7 @@ const Button = React.forwardRef((_a, ref) => {
     tabIndex,
     renderAs = "button"
   } = _a,
-      rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "intent", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs"]);
+      rest = __rest(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs"]);
 
   return jsxs(StyledButton$1, Object.assign({
     "$as": renderAs,
@@ -242,7 +242,7 @@ const Button = React.forwardRef((_a, ref) => {
     disabled: disabled || loading,
     type: type,
     className: className,
-    "$intent": intent,
+    "$color": color,
     "$fullWidth": fullWidth,
     "$variant": variant,
     "$size": size,
@@ -313,6 +313,7 @@ const IconContainer$2 = tw.div`
  */
 const generalColors = {
   PRIMARY: "primary",
+  SECONDARY: "secondary",
   ACCENT: "accent",
   NEUTRAL: "neutral"
 };
@@ -443,6 +444,9 @@ const Root$4 = tw.span`
     case colors.PRIMARY:
       return tws`tu-icon--primary`;
 
+    case colors.SECONDARY:
+      return tws`tu-icon--secondary`;
+
     case colors.ACCENT:
       return tws`tu-icon--accent`;
 
@@ -535,7 +539,7 @@ const ActionButton = ({
     children: jsx(StyledIconButton, {
       dataTestId: "testIconButtonId",
       size: "small",
-      intent: "tertiary",
+      color: "tertiary",
       icon: jsx(Icon$1, {
         size: "small",
         name: getIconName()
@@ -688,7 +692,7 @@ const StyledText$4 = tw.text`
  */
 
 const Alert = ({
-  intent = "info",
+  color = "info",
   title,
   className,
   children,
@@ -701,8 +705,8 @@ const Alert = ({
 }) => {
   const ref = React.useRef();
 
-  const getIconFromIntent = () => {
-    switch (intent) {
+  const getIconFromColor = () => {
+    switch (color) {
       case "danger":
         return jsx(Icon$1, {
           name: "ExclamationIcon",
@@ -728,8 +732,8 @@ const Alert = ({
     }
   };
 
-  const getButtonIntent = () => {
-    switch (intent) {
+  const getButtonColor = () => {
+    switch (color) {
       case "danger":
         return "danger";
 
@@ -770,7 +774,7 @@ const Alert = ({
     }
   }, [ref, autoScroll]);
   return jsxs(Container$8, Object.assign({
-    "$intent": intent,
+    "$color": color,
     className: className,
     "data-testid": dataTestId,
     "$inline": inline,
@@ -780,7 +784,7 @@ const Alert = ({
     children: [jsx(IconContainer$1, Object.assign({
       "$inline": inline
     }, {
-      children: getIconFromIntent()
+      children: getIconFromColor()
     })), jsxs(Content$1, Object.assign({
       "$inline": inline
     }, {
@@ -793,7 +797,7 @@ const Alert = ({
           children: jsx(IconButton, {
             size: "small",
             variant: "transparent",
-            intent: "secondary",
+            color: "secondary",
             onClick: onClose,
             icon: jsx(Icon$1, {
               name: "XIcon",
@@ -809,14 +813,14 @@ const Alert = ({
         children: [secondaryAction && jsx(Button, Object.assign({
           size: "small",
           variant: "transparent",
-          intent: getButtonIntent(),
+          color: getButtonColor(),
           onClick: secondaryAction.onClick,
           loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading
         }, {
           children: secondaryAction.label
         })), primaryAction && jsx(Button, Object.assign({
           size: "small",
-          intent: getButtonIntent(),
+          color: getButtonColor(),
           onClick: primaryAction.onClick,
           loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading
         }, {
@@ -827,7 +831,7 @@ const Alert = ({
           children: jsx(IconButton, {
             size: "small",
             variant: "transparent",
-            intent: "secondary",
+            color: "secondary",
             onClick: onClose,
             icon: jsx(Icon$1, {
               name: "XIcon",
@@ -846,7 +850,7 @@ const CloseButtonContainer = tw.div`
 `;
 
 const getBackgroundColor = () => ({
-  $intent
+  $color
 }) => {
   const colors = {
     danger: tws`tu-alert--danger`,
@@ -854,7 +858,7 @@ const getBackgroundColor = () => ({
     success: tws`tu-alert--success`,
     info: tws`tu-alert--info`
   };
-  return colors[$intent];
+  return colors[$color];
 };
 
 const Container$8 = tw.div`
@@ -937,6 +941,7 @@ const getBadgeModifierClass = () => ({
 }) => {
   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`,
@@ -1012,7 +1017,7 @@ const BaseInput = React.forwardRef((_a, ref) => {
       "data-testid": `${dataTestId}-suffix`
     }, {
       children: suffix
-    })) : null, actions !== null && addonBefore !== actions ? actions : null, addonAfter !== null && addonBefore !== addonAfter ? jsx(AddonAfter, Object.assign({
+    })) : null, actions !== null && addonBefore !== actions ? actions : null, addonAfter !== null && addonAfter !== undefined && addonBefore !== addonAfter ? jsx(AddonAfter, Object.assign({
       "data-testid": `${dataTestId}-addonAfter`
     }, {
       children: addonAfter
@@ -1365,7 +1370,7 @@ const CardHeader = ({
       }), onClose && jsx(IconButton, {
         dataTestId: "card-header-close-button",
         variant: "transparent",
-        intent: "secondary",
+        color: "secondary",
         onClick: onClose,
         icon: jsx(Icon$1, {
           name: "XIcon",
@@ -1655,6 +1660,7 @@ const Checkbox = React.forwardRef((_a, ref) => {
     }, {
       children: icon
     })), label && jsx(Label$3, Object.assign({
+      className: tws`cursor-pointer`,
       htmlFor: uuid,
       disabled: isReadonly,
       isInvalid: isReadonly ? false : isInvalid,
@@ -1734,7 +1740,7 @@ const Collapse = ({
           }),
           size: "medium",
           variant: "transparent",
-          intent: "secondary"
+          color: "secondary"
         })]
       })
     })), jsx(Collapsible, Object.assign({
@@ -2160,7 +2166,7 @@ const DateInput = forwardRef((_a, ref) => {
       }),
       actions: selectedDay && jsx(RemoveValueContainer, {
         children: jsx(Button, Object.assign({
-          intent: "tertiary",
+          color: "tertiary",
           onClick: e => {
             e.preventDefault();
             setSelectedDay(undefined);
@@ -2536,7 +2542,7 @@ const DayPickerPopover = ({
   className,
   selectedDay,
   onDaySelect,
-  intent = "secondary",
+  color = "secondary",
   placement = "bottom",
   size = "small",
   buttonContent,
@@ -2557,7 +2563,7 @@ const DayPickerPopover = ({
   });
   return jsxs(Fragment$1, {
     children: [jsx(Button, Object.assign({
-      intent: intent,
+      color: color,
       size: size,
       className: className,
       prefix: jsx(Icon$1, {
@@ -2689,6 +2695,9 @@ const Container$4 = tw.div`
     case colors.PRIMARY:
       return tws`tu-indicator--primary`;
 
+    case colors.SECONDARY:
+      return tws`tu-indicator--secondary`;
+
     case colors.ACCENT:
       return tws`tu-indicator--accent`;
 
@@ -3274,6 +3283,7 @@ const getColorModifierClass = () => ({
 }) => {
   const colorClasses = {
     primary: tws`tu-tag--primary`,
+    secondary: tws`tu-tag--secondary`,
     accent: tws`tu-tag--accent`,
     success: tws`tu-tag--success`,
     danger: tws`tu-tag--danger`,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.136",
+  "version": "0.0.139",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.49",
+    "@trackunit/css-core": "0.0.50",
     "@trackunit/tailwind-styled-components": "0.0.43",
     "react": "17.0.1",
     "@trackunit/ui-design-tokens": "0.0.42",