@trackunit/react-components 0.0.122 → 0.0.124

package/common/CommonProps.d.ts

@@ -9,3 +9,4 @@ export interface CommonProps {
     dataTestId?: string;
 }
 export declare type Density = "none" | "compact" | "comfortable" | "spacious" | "auto";
+export declare type Size = "small" | "medium" | "large";

package/components/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
-export declare type BadgeSize = "default" | "large";
+export declare type BadgeSize = "medium" | "large";
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.

package/components/BaseInput/BaseInput.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
 declare type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix">;
-declare type FieldSize = "small" | "default";
+declare type FieldSize = "small" | "medium";
 export interface BaseInputProps extends FilteredInputProps, CommonProps {
     /**
      * An React element to render before the text in the input.

package/components/Chart/Chart.d.ts

@@ -58,6 +58,10 @@ export interface ChartProps extends CommonProps {
      * Type of rendered used. Either "svg" or "canvas".
      */
     renderer?: "svg" | "canvas";
+    /**
+     * Value used to find element by `data-testid` attribute.
+     */
+    dataTestId?: string;
 }
 /**
  * The Chart component is a wrapper component for ECharts.
@@ -69,4 +73,4 @@ export interface ChartProps extends CommonProps {
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
-export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, merge, loadingOption, timezoneLabel, renderer, }: ChartProps) => JSX.Element;
+export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;

package/components/DayPicker/DayPickerPopover.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
-import { ButtonIntent, ButtonSize } from "../buttons";
+import { Size } from "../../common";
+import { ButtonIntent } from "../buttons";
 import { PopoverPlacement } from "../Popover";
 export interface DayPickerPopoverProps {
     disabledDays?: Matcher | Matcher[] | undefined;
@@ -8,7 +9,7 @@ export interface DayPickerPopoverProps {
     onDaySelect: (day: Date) => void;
     selectedDay?: Date;
     intent?: ButtonIntent;
-    size?: ButtonSize;
+    size?: Size;
     placement?: PopoverPlacement;
     buttonContent: JSX.Element;
     language: string;

package/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
 import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
+import { CommonProps, Size } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export interface IconProps extends CommonProps {
     /**
@@ -16,14 +16,14 @@ export interface IconProps extends CommonProps {
     color?: Colors;
     /**
      * The size of the icon.
-     * Small = 16x16px, Normal = 20x20px, Large = 24x24px.
+     * Small = 16x16px, medium = 20x20px, Large = 24x24px.
      * Default value is Large.
      * If a custom size is needed, set it in the className.
      */
-    size?: "small" | "normal" | "large";
+    size?: Size;
     /**
      * Select if the icon should be rendered as solid or outline.
-     * Default value depends on the Size prop, small == solid, normal == solid, large == outline.
+     * Default value depends on the Size prop, small == solid, medium == solid, large == outline.
      * Trackunit icons might not support both outline and Solid.
      */
     type?: "solid" | "outline";

package/components/Select/shared.d.ts

@@ -8,7 +8,7 @@ export interface SelectOption {
     value: string;
     options?: SelectOption[];
 }
-export declare type SelectSize = "small" | "default";
+export declare type SelectSize = "small" | "medium";
 export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
     /**
      * Label to be displayed.

package/components/Spinner/Spinner.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="react" />
-import { CommonProps } from "../../common/CommonProps";
-export declare type SpinnerSize = "small" | "regular" | "large";
+import { CommonProps, Size } from "../../common/CommonProps";
 export interface SpinnerProps extends CommonProps {
     /**
      * Defines the size of the spinner.
      */
-    size?: SpinnerSize;
+    size?: Size;
     /**
      * When true, the spinner will be centered in the parent element using css grid.
      */

package/components/Tag/Tag.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
-export declare type TagSize = "default" | "small";
+export declare type TagSize = "small" | "medium";
 export interface TagProps extends CommonProps {
     /**
      * The color of the tag.

package/components/Text/Text.d.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
+import { CommonProps, Size } from "../../common/CommonProps";
 export declare type TextType = "p" | "span" | "div";
-export declare type TextSize = "small" | "default" | "large";
 export declare type TextAlign = "left" | "center" | "right";
-export declare type TextWeight = "default" | "thick" | "bold";
+export declare type TextWeight = "normal" | "thick" | "bold";
 export interface TextProps extends CommonProps {
     /**
      * Child nodes.
@@ -14,15 +13,15 @@ export interface TextProps extends CommonProps {
      */
     type?: TextType;
     /**
-     * Size of element. Values can be "default", "small", or "large".
+     * Size of element. Values can be "small", "medium", or "large".
      */
-    size?: TextSize;
+    size?: Size;
     /**
      * Alignment of the text. Values can be "left", "center", or "right".
      */
     align?: TextAlign;
     /**
-     * Weight of the text. Values can be "default", "thick", or "bold".
+     * Weight of the text. Values can be "normal", "thick", or "bold".
      */
     weight?: TextWeight;
     /**

package/components/Toggle/Toggle.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import "./Toggle.css";
-export declare type ToggleSize = "small" | "default";
+export declare type ToggleSize = "small" | "medium";
 export interface ToggleProps extends CommonProps {
     /**
      * ID of the toggle.

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

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

package/components/buttons/IconButton/IconButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
+import { Size } from "../../../common";
 import "../shared/Button.css";
-import { ButtonCommonProps, ButtonSize } from "../shared/ButtonProps";
+import { ButtonCommonProps } from "../shared/ButtonProps";
 export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The icon to display.
@@ -19,6 +20,6 @@ export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The size of the button. Defaults to "small".
      */
-    size?: ButtonSize;
+    size?: Size;
 }
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { CommonProps } from "../../../common/CommonProps";
+import { CommonProps, Size } from "../../../common/CommonProps";
 export declare type ButtonVariant = "filled" | "transparent";
 export declare type ButtonIntent = "primary" | "secondary" | "danger" | "warning" | "tertiary";
 export declare type ButtonType = "button" | "submit";
-export declare type ButtonSize = "small" | "normal" | "large";
 export interface ButtonCommonProps extends CommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
@@ -29,7 +28,7 @@ export interface ButtonCommonProps extends CommonProps {
     /**
      * The size of the button.
      */
-    size?: ButtonSize;
+    size?: Size;
     /**
      * The link to be used for the button.
      */

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

@@ -1,8 +1,9 @@
-import { ButtonIntent, ButtonSize, ButtonVariant } from "./ButtonProps";
+import { Size } from "../../../common";
+import { ButtonIntent, ButtonVariant } from "./ButtonProps";
 interface ButtonProps {
     $intent: ButtonIntent;
     $variant: ButtonVariant;
-    $size: ButtonSize;
+    $size: Size;
 }
 /**
  * Helper to get the needed classname from buttonProps.

package/index.css

@@ -242,7 +242,7 @@
       transition-all;
   }
 
-  &--default {
+  &--medium {
     @apply flex
       items-center
       p-1

package/index.js

@@ -98,7 +98,7 @@ function __rest(s, e) {
 
 const Spinner = ({
   mode = "light",
-  size = "regular",
+  size = "medium",
   centered = false,
   className,
   containerClassName,
@@ -129,7 +129,7 @@ const getSpinnerStyles = () => ({
     case "large":
       return tws`tu-spinner--large`;
 
-    case "regular":
+    case "medium":
     default:
       return;
   }
@@ -214,7 +214,7 @@ const Button = React.forwardRef((_a, ref) => {
     intent = "primary",
     variant = "filled",
     type = "button",
-    size = "normal",
+    size = "medium",
     square = false,
     dataTestId,
     title,
@@ -335,9 +335,9 @@ const activityColors = {
 const colors = Object.assign(Object.assign(Object.assign(Object.assign({}, generalColors), intentColors), criticalityColors), activityColors);
 
 const IconSizeClassMap = {
-  small: tws`w-4`,
-  normal: tws`w-5`,
-  large: tws`w-6` // 24x24px
+  small: tws`tu-icon--small`,
+  medium: tws`tu-icon--medium`,
+  large: tws`tu-icon--large` // 24x24px
 
 };
 /**
@@ -398,72 +398,58 @@ const Icon$1 = ({
   }));
 };
 const LoadingDot = tw.span`
-  relative
-  aspect-square
-
-  after:content-['']
-  after:absolute
-  after:h-2
-  after:w-2
-  after:bg-current
-  after:rounded-full
-  after:inset-1/2
-  after:-translate-x-1/2
-  after:-translate-y-1/2
-  after:opacity-50
+  tu-loading-dot
 `;
 const Root$3 = tw.span`
-  inline
-  relative
-
+  tu-icon
   ${({
   $color
 }) => {
   switch ($color) {
     case colors.PRIMARY:
-      return tws`text-primary-600`;
+      return tws`tu-icon--primary`;
 
     case colors.ACCENT:
-      return tws`text-accent-600`;
+      return tws`tu-icon--accent`;
 
     case colors.NEUTRAL:
-      return tws`text-neutral-600`;
+      return tws`tu-icon--neutral`;
 
     case colors.INFO:
-      return tws`text-info-600`;
+      return tws`tu-icon--info`;
 
     case colors.SUCCESS:
-      return tws`text-success-600`;
+      return tws`tu-icon--success`;
 
     case colors.WARNING:
-      return tws`text-warning-600`;
+      return tws`tu-icon--warning`;
 
     case colors.DANGER:
-      return tws`text-danger-600`;
+      return tws`tu-icon--danger`;
 
     case colors.GOOD:
-      return tws`text-good-600`;
+      return tws`tu-icon--good`;
 
     case colors.LOW:
-      return tws`text-low-600`;
+      return tws`tu-icon--low`;
 
     case colors.CRITICAL:
-      return tws`text-critical-600`;
+      return tws`tu-icon--critical`;
 
     case colors.WORKING:
-      return tws`text-working-600`;
+      return tws`tu-icon--working`;
 
     case colors.IDLE:
-      return tws`text-idle-600`;
+      return tws`tu-icon--idle`;
 
     case colors.STOPPED:
-      return tws`text-stopped-600`;
+      return tws`tu-icon--stopped`;
 
     case colors.UNKNOWN:
-      return tws`text-unknown-600`;
+      return tws`tu-icon--unknown`;
 
     default:
-      return "text-current";
+      return "tu-icon--default";
   }
 }}
 `;
@@ -516,9 +502,9 @@ const CustomIcon = tw(Icon$1)`
 const Text = ({
   children,
   type = "p",
-  size = "default",
+  size = "medium",
   align = "left",
-  weight = "default",
+  weight = "normal",
   underline = false,
   inverted = false,
   subtle = false,
@@ -664,7 +650,7 @@ const Alert = ({
     }, {
       children: title !== null && title !== void 0 ? title : children
     })), children && jsx(Description$2, Object.assign({
-      weight: !title ? "bold" : "default",
+      weight: !title ? "bold" : "normal",
       "$hasTitle": !!title
     }, {
       children: children
@@ -675,7 +661,7 @@ const Alert = ({
     }, {
       children: title !== null && title !== void 0 ? title : children
     })), children && jsx(Description$2, Object.assign({
-      weight: !title ? "bold" : "default",
+      weight: !title ? "bold" : "normal",
       "$hasTitle": !!title
     }, {
       children: children
@@ -816,7 +802,7 @@ const Badge = _a => {
     max,
     hideZero = false,
     dataTestId,
-    size = "default"
+    size = "medium"
   } = _a;
       __rest(_a, ["color", "subtle", "className", "count", "max", "hideZero", "dataTestId", "size"]);
 
@@ -843,7 +829,7 @@ const getSizeModifierClass$1 = () => ({
 }) => {
   const sizeModifierClass = {
     large: tws`tu-badge--large`,
-    default: ""
+    medium: ""
   };
   return sizeModifierClass[$size];
 };
@@ -899,7 +885,7 @@ const BaseInput = React.forwardRef((_a, ref) => {
     addonBefore,
     addonAfter,
     actions,
-    fieldSize = "default"
+    fieldSize = "medium"
   } = _a,
       rest = __rest(_a, ["className", "isInvalid", "dataTestId", "prefix", "suffix", "addonBefore", "addonAfter", "actions", "fieldSize"]);
 
@@ -1324,7 +1310,8 @@ const Chart = ({
   merge = true,
   loadingOption,
   timezoneLabel,
-  renderer = "canvas"
+  renderer = "canvas",
+  dataTestId
 }) => {
   var _a, _b;
 
@@ -1369,7 +1356,8 @@ const Chart = ({
     style: {
       height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px",
       width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%"
-    }
+    },
+    "data-testid": dataTestId
   }, {
     children: showLoading ? jsxs(SpinnerContainer, {
       children: [jsx(Spinner, {
@@ -1631,7 +1619,7 @@ const Collapse = ({
             size: "small",
             "$expanded": expanded
           }),
-          size: "normal",
+          size: "medium",
           variant: "transparent",
           intent: "secondary"
         })]
@@ -2047,7 +2035,7 @@ const DateInput = forwardRef((_a, ref) => {
       suffix: jsx(Icon$1, {
         dataTestId: "calendar",
         name: "CalendarIcon",
-        size: "normal",
+        size: "medium",
         type: "solid",
         onClick: !disabled ? onShow : undefined,
         forwardedRef: targetRef
@@ -2141,7 +2129,7 @@ const PopoverListItem = ({
     children: [prefix && jsx("div", {
       children: prefix
     }), jsx(StyledText$2, Object.assign({
-      weight: selected ? "bold" : "default",
+      weight: selected ? "bold" : "normal",
       "$selected": selected
     }, {
       children: children
@@ -2318,7 +2306,7 @@ const Tip = _a => {
     }, {
       children: jsx(Icon$1, Object.assign({
         name: "QuestionMarkCircleIcon",
-        size: "normal",
+        size: "medium",
         dataTestId: `${dataTestId}-icon`
       }, iconProps))
     }))
@@ -3156,7 +3144,7 @@ const Tag = React.forwardRef((_a, ref) => {
     className,
     dataTestId,
     children,
-    size = "default",
+    size = "medium",
     onClose,
     color = "primary"
   } = _a;
@@ -3182,7 +3170,7 @@ const Tag = React.forwardRef((_a, ref) => {
         style: {
           "-webkit-transition": "-webkit-transform 0.150s"
         },
-        className: size === "default" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
+        className: size === "medium" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
       })
     }))]
   }));
@@ -3193,7 +3181,7 @@ const getSizeModifierClass = () => ({
   $withXIcon
 }) => {
   const tagSizeModifierClass = {
-    default: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
+    medium: $withXIcon ? tws`tu-tag--with-icon ` : tws` `,
     small: $withXIcon ? tws`tu-tag--small tu-tag--with-icon` : tws`tu-tag--small`
   };
   return tagSizeModifierClass[$size];
@@ -3629,7 +3617,7 @@ const useCustomComponents = components => {
 const CreatableSelect = _a => {
   var {
     dataTestId,
-    size = "default",
+    size = "medium",
     id,
     label,
     hideLabel,
@@ -3686,7 +3674,7 @@ const CreatableSelect = _a => {
 const Select = _a => {
   var {
     dataTestId,
-    size = "default",
+    size = "medium",
     id,
     label,
     hideLabel,
@@ -4095,7 +4083,7 @@ const Toggle = React.forwardRef(({
   toggled = false,
   onChange,
   disabled,
-  size = "default",
+  size = "medium",
   id,
   tabIndex,
   required,
@@ -4178,7 +4166,7 @@ tu-toggle__switch-container
 }) => $disabled && tws`tu-toggle--disabled`};
   ${({
   $size
-}) => $size === "small" ? tws`tu-toggle--small` : tws`tu-toggle--default`};
+}) => $size === "small" ? tws`tu-toggle--small` : tws`tu-toggle--medium`};
   ${({
   $toggled
 }) => $toggled && tws`tu-toggle--toggled`}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.122",
+  "version": "0.0.124",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
@@ -20,7 +20,8 @@
     "@popperjs/core": "^2.11.4",
     "history": "^5.3.0",
     "react-router-dom": "^6.2.2",
-    "react-select": "^5.4.0"
+    "react-select": "^5.4.0",
+    "jest-canvas-mock": "^2.4.0"
   },
   "module": "./index.js",
   "main": "./index.js",