@trackunit/react-components 0.0.51 → 0.0.54

package/components/TextInput/TextInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from "../baseInput/BaseInput";
+import { BaseInputProps } from "../BaseInput/BaseInput";
 declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface TextInputProps extends BaseInputExposedProps {
 }

package/components/{tip → Tip}/Tip.d.ts

@@ -1,12 +1,10 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
-import { IconProps } from "../icon/Icon";
-import { TooltipProps } from "../tooltip";
+import { IconProps } from "../Icon/Icon";
+import { TooltipProps } from "../Tooltip";
 export interface TipProps extends CommonProps {
     /**
      * Child nodes to render inside the tip.
-     *
-     * @memberof TipProps
      */
     children: React.ReactNode;
     iconProps?: Partial<IconProps>;

package/components/{tooltip → Tooltip}/Tooltip.d.ts

@@ -1,59 +1,41 @@
 import * as React from "react";
-import { PopoverPlacement } from "../popover";
-import { TextType } from "../text";
+import { PopoverPlacement } from "../Popover";
+import { TextType } from "../Text";
 export interface TooltipProps {
     /**
      * The text to be displayed in the tooltip.
-     *
-     * @memberof TooltipProps
      */
     label: string | React.ReactNode;
     /**
      * Where the tooltip should be placed.
-     *
-     * @memberof TooltipProps
      */
     placement?: PopoverPlacement;
     /**
      * Child nodes
-     *
-     * @memberof TooltipProps
      */
     children?: React.ReactNode;
     /**
      * Id of test component.
-     *
-     * @memberof TooltipProps
      */
     dataTestId?: string;
     /**
      * Whether the tooltip is disabled or not.
-     *
-     * @memberof TooltipProps
      */
     disabled?: boolean;
     /**
      *  To select either "light" or "dark" mode.
-     *
-     * @memberof TooltipProps
      */
     mode?: "light" | "dark";
     /**
      * Offset value of the tooltip.
-     *
-     * @memberof TooltipProps
      */
     offset?: [number, number];
     /**
      * Additional classes to the component.
-     *
-     * @memberof TooltipProps
      */
     className?: string;
     /**
      * Type of content.
-     *
-     * @memberof TooltipProps
      */
     contentTextType?: TextType;
 }

package/components/buttons/{button → Button}/Button.d.ts

@@ -11,38 +11,26 @@ export interface ButtonProps extends ButtonCommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
      * Child nodes. Can be used to pass in text to be displayed on the button.
-     *
-     * @memberof ButtonProps
      */
     children?: React.ReactNode;
     /**
      * Whether button is fullWidth or not.
-     *
-     * @memberof ButtonProps
      */
     fullWidth?: boolean;
     /**
      * The button prefix.
-     *
-     * @memberof ButtonProps
      */
     prefix?: React.ReactNode;
     /**
      * The button suffix.
-     *
-     * @memberof ButtonProps
      */
     suffix?: React.ReactNode;
     /**
      * The type of the button. Values can be "submit" or "button".
-     *
-     * @memberof ButtonProps
      */
     type?: ButtonType;
     /**
      * The element type the button will be rendered as.
-     *
-     * @memberof ButtonProps
      */
     renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /**

package/components/buttons/{icon-button → IconButton}/IconButton.d.ts

@@ -3,14 +3,10 @@ import { ButtonCommonProps, ButtonSize } from "../shared/ButtonProps";
 export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The icon to display.
-     *
-     * @memberof IconButtonProps
      */
     icon: React.ReactNode;
     /**
      * Whether the button is circular or not.
-     *
-     * @memberof IconButtonProps
      */
     circular?: boolean;
     /**
@@ -22,8 +18,6 @@ export interface IconButtonProps extends ButtonCommonProps {
     renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /**
      * The size of the button. Defaults to "small".
-     *
-     * @memberof IconButtonProps
      */
     size?: ButtonSize;
 }

package/components/buttons/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./button/Button";
-export * from "./icon-button/IconButton";
+export * from "./Button/Button";
+export * from "./IconButton/IconButton";
 export * from "./shared/ButtonProps";
-export * from "./star-button/StarButton";
+export * from "./StarButton/StarButton";

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

@@ -8,44 +8,30 @@ export interface ButtonCommonProps extends CommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
      * Whether the button is loading.
-     *
-     * @memberof ButtonCommonProps
      */
     loading?: boolean;
     /**
      * Whether the button is disabled.
-     *
-     * @memberof ButtonCommonProps
      */
     disabled?: boolean;
     /**
      * Button with square aspect ratio.
-     *
-     * @memberof ButtonCommonProps
      */
     square?: boolean;
     /**
      * The button's variant. Values are filled, transparent, plain.
-     *
-     * @memberof ButtonCommonProps
      */
     intent?: ButtonIntent;
     /**
      * The variant of the button.
-     *
-     * @memberof ButtonCommonProps
      */
     variant?: ButtonVariant;
     /**
      * The size of the button.
-     *
-     * @memberof ButtonCommonProps
      */
     size?: ButtonSize;
     /**
      * The link to be used for the button.
-     *
-     * @memberof ButtonCommonProps
      */
     to?: string;
     title?: string;

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

@@ -1,4 +1,4 @@
-import { ButtonIntent, ButtonSize, ButtonVariant } from "../shared/ButtonProps";
+import { ButtonIntent, ButtonSize, ButtonVariant } from "./ButtonProps";
 interface ButtonProps {
     $intent: ButtonIntent;
     $variant: ButtonVariant;

package/components/index.d.ts

@@ -1,37 +1,37 @@
-export * from "./alert";
-export * from "./badge";
-export * from "./baseInput";
+export * from "./Alert";
+export * from "./Badge";
+export * from "./BaseInput";
 export * from "./buttons";
-export * from "./card";
-export * from "./chart";
-export * from "./checkbox";
-export * from "./collapse";
-export * from "./copyableText";
-export * from "./dateField";
-export * from "./dayPicker";
-export * from "./formGroup/FormGroup";
-export * from "./heading";
-export * from "./icon/Icon";
-export * from "./indicator";
-export * from "./label";
-export * from "./legendItem";
-export * from "./menu";
-export * from "./modal";
-export * from "./multiRowTableCell";
+export * from "./Card";
+export * from "./Chart";
+export * from "./Checkbox";
+export * from "./Collapse";
+export * from "./CopyableText";
+export * from "./DateField";
+export * from "./DayPicker";
+export * from "./FormGroup/FormGroup";
+export * from "./Heading";
+export * from "./Icon/Icon";
+export * from "./Indicator";
+export * from "./Label";
+export * from "./LegendItem";
+export * from "./Menu";
+export * from "./Modal";
+export * from "./MultiRowTableCell";
 export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
-export * from "./pageHeading";
-export * from "./popover";
-export * from "./prompt";
-export * from "./radioGroup";
-export * from "./select";
-export * from "./skeletonLines";
-export * from "./spacer";
-export * from "./spinner";
-export * from "./text";
-export * from "./textArea";
-export * from "./textField";
+export * from "./PageHeading";
+export * from "./Popover";
+export * from "./Prompt";
+export * from "./RadioGroup";
+export * from "./Select";
+export * from "./SkeletonLines";
+export * from "./Spacer";
+export * from "./Spinner";
+export * from "./Text";
+export * from "./TextArea";
+export * from "./TextField";
 export * from "./TextInput/TextInput";
-export * from "./tip";
-export * from "./toggle";
-export * from "./tooltip";
+export * from "./Tip";
+export * from "./Toggle";
+export * from "./Tooltip";

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
@@ -670,7 +678,8 @@ const Alert = ({
     className: className,
     "data-testid": dataTestId,
     "$inline": inline,
-    ref: ref
+    ref: ref,
+    role: "alert"
   }, {
     children: [jsx(IconContainer, Object.assign({
       "$inline": inline
@@ -754,7 +763,11 @@ const IconContainer = tw.div`
 `;
 
 /**
- * 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
@@ -1288,7 +1301,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
  */
 
@@ -2458,7 +2471,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
@@ -2469,7 +2488,7 @@ const Indicator$1 = _a => {
     dataTestId,
     icon,
     label,
-    color,
+    color = colors.UNKNOWN,
     withBackground = true
   } = _a,
       rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground"]);
@@ -2690,7 +2709,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
  */
 
@@ -2733,7 +2752,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
  */
 
@@ -2954,7 +2973,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
  */
 
@@ -2987,7 +3006,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
  */
 
@@ -3005,7 +3024,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
  */
 
@@ -3069,7 +3088,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
  */
 
@@ -3196,7 +3215,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
  */
 
@@ -3241,6 +3260,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,
@@ -3421,7 +3448,7 @@ function usePrompt(message, when = true) {
 /**
  * The Prompt function.
  *
- * @param {IPromptProps} Props -
+ * @param {PromptProps} Props -
  * @returns {void} void
  */
 
@@ -3983,6 +4010,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,

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.51",
+  "version": "0.0.54",
   "repository": "https://github.com/Trackunit/manager",
   "license": "MIT",
   "dependencies": {