@trackunit/react-components 0.0.52 → 0.0.55

package/index.js

@@ -28,10 +28,10 @@ const docs = {
 /**
  * Utility for common props on containers.
  *
- * @param {IUseContainerProps} ContainerProps - Props for the utility
+ * @param {UseContainerProps} ContainerProps - Props for the utility
  * @param {string} ContainerProps.className - Optional custom className
  * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
- * @returns {IUseContainerProps} - Object with undefined values removed
+ * @returns {UseContainerProps} - Object with undefined values removed
  */
 const useContainerProps = ({
   className,
@@ -81,7 +81,15 @@ function __rest(s, e) {
 }
 
 /**
- * The Spinner component should be used st show a loading state.
+ * The spinner component provides visual feedback that data is being processed.
+ *
+ * Spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
+ *
+ * Common actions that benefit from spinners include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
+ *
+ * Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
+ *
+ * Use when retrieving or refreshing small data amounts, such as status.
  *
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component
@@ -342,6 +350,7 @@ const Icon$1 = ({
   onClick,
   fillColor,
   type,
+  style,
   forwardedRef
 }) => {
   const iconSizeClassName = React.useMemo(() => IconSizeClassMap[size], [size]);
@@ -373,9 +382,9 @@ const Icon$1 = ({
       children: jsx(IconComponent, {
         "data-testid": `${dataTestId}-${name}`,
         className: `${iconSizeClassName} ${colorClassNames} ${className} ${name} aspect-square`,
-        style: fillColor ? {
+        style: fillColor ? Object.assign(Object.assign({}, style), {
           fill: fillColor
-        } : {}
+        }) : Object.assign({}, style)
       })
     }))
   }));
@@ -506,7 +515,7 @@ const Text = ({
   className,
   dataTestId
 }) => {
-  return jsx(StyledText$3, Object.assign({
+  return jsx(StyledText$4, Object.assign({
     "$as": type,
     className: className,
     "$align": align,
@@ -565,7 +574,7 @@ const getTextAlignment = () => ({
   return alignments[$align];
 };
 
-const StyledText$3 = tw.text`
+const StyledText$4 = tw.text`
   tu-text
   ${getFontColor$1()}
   ${p => p.$italicize ? tws`tu-text--italic` : ""}
@@ -673,7 +682,7 @@ const Alert = ({
     ref: ref,
     role: "alert"
   }, {
-    children: [jsx(IconContainer, Object.assign({
+    children: [jsx(IconContainer$1, Object.assign({
       "$inline": inline
     }, {
       children: getIconFromIntent()
@@ -749,13 +758,17 @@ const RightAligned = tw.div`
   alert__right-aligned
   ${p => p.$inline ? tws`alert__right-aligned--inline` : null}
 `;
-const IconContainer = tw.div`
+const IconContainer$1 = tw.div`
   alert__icon-container
   ${p => p.$inline ? tws`alert__icon-container--inline` : null}
 `;
 
 /**
- * The Badge component us used to display states or similar short form information.
+ * The Badge component us used to display states or similar short informative text.
+ *
+ * _**Do use** badges to show highlighted text based on the state._
+ *
+ * _**Do not use** badges for regular text in places where it makes no sense to use highlighted text._
  *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
@@ -766,49 +779,36 @@ const Badge = _a => {
     color = "neutral",
     subtle = false,
     className,
-    variant = "badge",
+    variant = "pill",
     dataTestId,
     children,
     size = "default"
-  } = _a,
-      rest = __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
+  } = _a;
+      __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
 
   const isPill = variant === "pill";
-  const tagProps = rest;
-  return jsxs(StyledText$2, Object.assign({
+  return jsx(StyledText$3, Object.assign({
     "$variant": variant,
     className: className,
     "$color": color,
     "$size": size,
     "$subtle": subtle ? subtle : isPill,
     "data-testid": dataTestId,
-    "$as": "span",
-    "$withXIcon": tagProps.onClose ? true : false
+    "$as": "span"
   }, {
-    children: [isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children, variant === "tag" && tagProps.onClose && jsx(StyledIcon, {
-      name: "XCircleIcon",
-      dataTestId: dataTestId + "Icon",
-      onClick: tagProps.onClose,
-      type: "solid",
-      size: size === "default" ? "normal" : "large"
-    })]
+    children: isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children
   }));
 };
 
-const getSizeModifierClass = () => ({
+const getSizeModifierClass$1 = () => ({
   $size,
-  $variant,
-  $withXIcon
+  $variant
 }) => {
   const sizeModifierClass = {
     large: tws`badge--large`,
     default: ""
   };
-  const tagSizeModifierClass = {
-    large: $withXIcon ? tws`tag--icon tag--icon-large` : tws`tag--icon tag--large`,
-    default: $withXIcon ? tws`tag--icon tag--icon-small` : ""
-  };
-  return $variant === "tag" ? tagSizeModifierClass[$size] : sizeModifierClass[$size];
+  return sizeModifierClass[$size];
 };
 
 const getBadgeModifierClass = () => ({
@@ -834,15 +834,12 @@ const getBadgeModifierClass = () => ({
   return colorClasses[$color];
 };
 
-const StyledText$2 = tw.text`
+const StyledText$3 = tw.text`
   ${p => {
   switch (p.$variant) {
     case "badge":
       return tws`badge`;
 
-    case "tag":
-      return tws`badge--tag`;
-
     case "pill":
       return tws`badge--pill`;
 
@@ -851,10 +848,7 @@ const StyledText$2 = tw.text`
   }
 }}
   ${getBadgeModifierClass()}
-  ${getSizeModifierClass()}
-`;
-const StyledIcon = tw(Icon$1)`
-tag__icon
+  ${getSizeModifierClass$1()}
 `;
 
 /**
@@ -1289,7 +1283,7 @@ gap-4
  * The Chart component is a wrapper component for ECharts.
  * Handles events and click functionality.
  *
- * @param {IChartProps} props - The props for the Chart component
+ * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
 
@@ -2074,7 +2068,7 @@ const PopoverListItem = ({
   }, {
     children: [prefix && jsx("div", {
       children: prefix
-    }), jsx(StyledText$1, Object.assign({
+    }), jsx(StyledText$2, Object.assign({
       weight: selected ? "bold" : "default",
       "$selected": selected
     }, {
@@ -2099,7 +2093,7 @@ const PopoverListItem = ({
     })) : content
   }));
 };
-const StyledText$1 = tw(Text)`
+const StyledText$2 = tw(Text)`
   ${p => p.$selected ? tws`text-primary-600` : tws`text-neutral-600`}
   group-hover:text-primary-500
 `;
@@ -2136,7 +2130,7 @@ const PopoverTitle = ({
     className: className,
     "data-testid": dataTestId
   }, {
-    children: [jsx(StyledText, Object.assign({
+    children: [jsx(StyledText$1, Object.assign({
       type: "div",
       subtle: true,
       size: "small",
@@ -2160,7 +2154,7 @@ const Container$5 = tw.div`
       mb-1
     ` : null}
 `;
-const StyledText = tw(Text)`
+const StyledText$1 = tw(Text)`
   flex-1
   text-neutral-500
 `;
@@ -2459,7 +2453,13 @@ const HelpAddon = tw.span`
 `;
 
 /**
- * The Indicator components are non-interactive elements that communicate essential aspects of the state of an asset.
+ * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
+ *
+ * Whenever an asset is presented, indicators provide the necessary information for a user to comprehend the state of the asset.
+ *
+ * _**Do use** indicators to communicate essential aspects of the state of an asset._
+ *
+ * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
  *
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
@@ -2470,7 +2470,7 @@ const Indicator$1 = _a => {
     dataTestId,
     icon,
     label,
-    color,
+    color = colors.UNKNOWN,
     withBackground = true
   } = _a,
       rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground"]);
@@ -2691,7 +2691,7 @@ const MobileIconButton = tw(IconButton)`
 /**
  * The MenuItem component should be used to inform the user of important information.
  *
- * @param {IMenuItemProps} props - The props for the MenuItem component
+ * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
 
@@ -2734,7 +2734,7 @@ const Label = tw.div`
 /**
  * The MenuList component is used for menus and selects.
  *
- * @param {IMenuListProps} props - The props for the MenuList component
+ * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
 
@@ -2955,7 +2955,7 @@ const useModal = ({
 /**
  * The MinTopFullContentLayout component.
  *
- * @param {IMinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
  * @returns {JSX.Element} MinTopFullContentLayout component
  */
 
@@ -2988,7 +2988,7 @@ const Layout$5 = tw.span`
  * on screens < mediaQuery.xxl
  *
  *
- * @param {IProps} props - The props for the FilterListMapLayout component
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
  * @returns {JSX.Element} FilterListMapLayout component
  */
 
@@ -3006,7 +3006,7 @@ const Layout$4 = tw.span`
  * Row min height can optionally be set here or managed by children
  * Scrolling happens if/when children's a min-height is reached
  *
- * @param {IFullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
  * @returns {JSX.Element} FullWidthRepeatingLayout component
  */
 
@@ -3070,7 +3070,7 @@ const GridArea = ({
  * A grid container that has a flexible number of columns.
  * Adds more columns if constraints allow it, otherwise wraps to next row
  *
- * @param {IIntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
  * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
 
@@ -3197,7 +3197,7 @@ const Layout = tw.div`
 /**
  * The MultiRowTableCell component extendins Table Cell component and formats your content supporting 2 rows.
  *
- * @param {IMultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {JSX.Element} MultiRowTableCell component
  */
 
@@ -3242,6 +3242,14 @@ const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
 }, props)));
 NumberInput.displayName = "NumberInput";
 
+/**
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
+ */
+
 const NumberField = forwardRef((_a, ref) => {
   var {
     label,
@@ -3422,7 +3430,7 @@ function usePrompt(message, when = true) {
 /**
  * The Prompt function.
  *
- * @param {IPromptProps} Props -
+ * @param {PromptProps} Props -
  * @returns {void} void
  */
 
@@ -3842,6 +3850,93 @@ const SkeletonLine = tw.div`
 `;
 SkeletonLines.displayName = "SkeletonLines";
 
+/**
+ * Tags allow users to enter information and filter content.
+ * Multiple or single tags can be used to categorise items.
+ * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+
+const Tag = _a => {
+  var {
+    className,
+    dataTestId,
+    children,
+    size = "default",
+    onClose,
+    color = "primary"
+  } = _a;
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+
+  return jsxs(StyledText, Object.assign({
+    className: className,
+    "$size": size,
+    "data-testid": dataTestId,
+    "$as": "span",
+    "$color": color,
+    "$withXIcon": !!onClose
+  }, {
+    children: [children, onClose && jsx(IconContainer, Object.assign({
+      onClick: onClose
+    }, {
+      children: jsx(Icon$1, {
+        name: "XCircleIcon",
+        dataTestId: dataTestId + "Icon",
+        type: "solid",
+        style: {
+          "-webkit-transition": "-webkit-transform 0.150s"
+        },
+        className: size === "default" ? tws`tag__icon` : tws`tag__icon tag__icon--small`
+      })
+    }))]
+  }));
+};
+
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
+}) => {
+  const tagSizeModifierClass = {
+    default: $withXIcon ? tws`tag--withIcon ` : tws` `,
+    small: $withXIcon ? tws`tag--small tag--withIcon` : tws`tag--small`
+  };
+  return tagSizeModifierClass[$size];
+};
+
+const getColorModifierClass = () => ({
+  $color
+}) => {
+  const colorClasses = {
+    primary: tws`tag--primary`,
+    accent: tws`tag--accent`,
+    success: tws`tag--success`,
+    danger: tws`tag--danger`,
+    warning: tws`tag--warning`,
+    info: tws`tag--info`,
+    neutral: tws`tag--neutral`,
+    good: tws`tag--good`,
+    low: tws`tag--low`,
+    critical: tws`tag--critical`,
+    working: tws`tag--working`,
+    idle: tws`tag--idle`,
+    stopped: tws`tag--stopped`,
+    unknown: tws`tag--unknown`
+  };
+  return colorClasses[$color];
+};
+
+const StyledText = tw.text`
+  tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+flex
+self-center	
+`;
+
 const TextArea = React.forwardRef(({
   id,
   name,
@@ -3984,6 +4079,14 @@ const Root = tw.span`
  font-mono
 `;
 
+/**
+ * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
+ *
+ * _**Do use** when the user has to input or edit simple text based information, such as metadata._
+ *
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
+ */
+
 const TextField = React.forwardRef((_a, ref) => {
   var {
     label,
@@ -4235,4 +4338,4 @@ const useTimeout = ({
   };
 };
 
-export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/layout/helper/MinTopFullContentLayout.d.ts

@@ -5,14 +5,14 @@ import { CommonProps } from "../../common/CommonProps";
  * Useful when toy want the second child to have 100% height and be scrollable
  * Example: FilterBar + Fleet List
  */
-interface IMinTopFullContentLayoutProps extends CommonProps {
+interface MinTopFullContentLayoutProps extends CommonProps {
     children: ReactNode;
 }
 /**
  * The MinTopFullContentLayout component.
  *
- * @param {IMinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
  * @returns {JSX.Element} MinTopFullContentLayout component
  */
-export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: IMinTopFullContentLayoutProps) => JSX.Element;
+export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: MinTopFullContentLayoutProps) => JSX.Element;
 export {};

package/layout/responsive/FilterListMapLayout.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface IProps {
+interface FilterListMapLayoutProps {
     children: React.ReactNode;
 }
 /**
@@ -15,8 +15,8 @@ interface IProps {
  * on screens < mediaQuery.xxl
  *
  *
- * @param {IProps} props - The props for the FilterListMapLayout component
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
  * @returns {JSX.Element} FilterListMapLayout component
  */
-export declare const FilterListMapLayout: ({ children }: IProps) => JSX.Element;
+export declare const FilterListMapLayout: ({ children }: FilterListMapLayoutProps) => JSX.Element;
 export {};

package/layout/responsive/FullWidthRepeatingLayout.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare type RowSizing = "Equal" | "MinContent" | "Unmanaged";
-interface IFullWidthRepeatingLayoutProps {
+interface FullWidthRepeatingLayoutProps {
     children: React.ReactNode;
     rowSizing?: RowSizing;
     rowMinHeight?: number;
@@ -12,8 +12,8 @@ interface IFullWidthRepeatingLayoutProps {
  * Row min height can optionally be set here or managed by children
  * Scrolling happens if/when children's a min-height is reached
  *
- * @param {IFullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
  * @returns {JSX.Element} FullWidthRepeatingLayout component
  */
-export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: IFullWidthRepeatingLayoutProps) => JSX.Element;
+export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: FullWidthRepeatingLayoutProps) => JSX.Element;
 export {};

package/layout/responsive/IntrinsicallyResponsiveGrid.d.ts

@@ -3,7 +3,7 @@ import { CommonProps } from "../../common/CommonProps";
 declare type ColumnWidth = "slim" | "narrow" | "normal" | "wide";
 declare type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
 declare type Occupation = "auto-fill" | "auto-fit";
-interface IIntrinsicallyResponsiveGridProps extends CommonProps {
+interface IntrinsicallyResponsiveGridProps extends CommonProps {
     /**
      * The children to be laid out
      */
@@ -23,8 +23,8 @@ interface IIntrinsicallyResponsiveGridProps extends CommonProps {
  * A grid container that has a flexible number of columns.
  * Adds more columns if constraints allow it, otherwise wraps to next row
  *
- * @param {IIntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
  * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
-export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, gap, dataTestId, className, }: IIntrinsicallyResponsiveGridProps) => JSX.Element;
+export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
 export {};

package/package.json

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