@trackunit/react-components 0.0.51 → 0.0.54

package/components/{indicator → Indicator}/Indicator.d.ts

@@ -4,31 +4,29 @@ import { Colors } from "../../constants/colors";
 export interface IndicatorProps extends CommonProps {
     /**
      * The icon to be rendered inside the indicator component
-     *
-     * @memberof IndicatorProps
      */
     icon: JSX.Element;
     /**
      * A color token used to style the icon and the icon background
-     *
-     * @memberof IndicatorProps
      */
     color?: Colors;
     /**
      * A text label to be displayed next to the indicator
-     *
-     * @memberof IndicatorProps
      */
     label?: string;
     /**
      * A boolean parameter to display or hide icon background, default value is true
-     *
-     * @memberof IndicatorProps
      */
     withBackground?: boolean;
 }
 /**
- * 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

package/components/{label → Label}/Label.d.ts

@@ -3,26 +3,18 @@ import { CommonProps } from "../../common/CommonProps";
 export interface LabelProps extends CommonProps {
     /**
      * ID of the label.
-     *
-     * @memberof LabelProps
      */
     id?: string;
     /**
      * Specifies the element to which the label belongs to.
-     *
-     * @memberof LabelProps
      */
     htmlFor: string | false;
     /**
      * The label value.
-     *
-     * @memberof LabelProps
      */
     label?: React.ReactNode;
     /**
      *  Description for the label.
-     *
-     * @memberof LabelProps
      */
     description?: React.ReactNode;
 }

package/components/{menu → Menu}/MenuItem.d.ts

@@ -1,40 +1,30 @@
 /// <reference types="react" />
-export interface IMenuItemProps {
+export interface MenuItemProps {
     /**
      * The icon to be rendered in the menu item.
-     *
-     * @memberof IMenuItemProps
      */
     icon?: JSX.Element;
     /**
      * Label of the menu item
-     *
-     * @memberof IMenuItemProps
      */
     label?: string;
     /**
      * Additional tailwind classes to be applied to the component.
-     *
-     * @memberof IMenuItemProps
      */
     className?: string;
     /**
      * Test id to be used for the component.
-     *
-     * @memberof IMenuItemProps
      */
     dataTestId?: string;
     /**
      * onClick event.
-     *
-     * @memberof IMenuItemProps
      */
     onClick: () => void;
 }
 /**
  * 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
  */
-export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: IMenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: MenuItemProps) => JSX.Element;

package/components/{menu → Menu}/MenuList.d.ts

@@ -1,32 +1,26 @@
 /// <reference types="react" />
-import { IMenuItemProps } from "./MenuItem";
-export interface IMenuListItemProps extends IMenuItemProps {
+import { MenuItemProps } from "./MenuItem";
+export interface MenuListItemProps extends MenuItemProps {
     showDivider?: boolean;
 }
-export interface IMenuListProps {
+export interface MenuListProps {
     /**
      * Additional tailwind classes to be applied to the component.
-     *
-     * @memberof IMenuListProps
      */
     className?: string;
     /**
      * Test id to be used for the component.
-     *
-     * @memberof IMenuListProps
      */
     dataTestId?: string;
     /**
      * List of menu items to be rendered.
-     *
-     * @memberof IMenuListProps
      */
-    menuItems: IMenuListItemProps[];
+    menuItems: MenuListItemProps[];
 }
 /**
  * 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
  */
-export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: IMenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: MenuListProps) => JSX.Element;

package/components/{modal → Modal}/Modal.d.ts

@@ -4,32 +4,22 @@ declare type ModalWidth = "slim" | "narrow" | "normal" | "wide" | "full";
 export interface ModalProps extends CommonProps {
     /**
      * Whether modal is open or not.
-     *
-     * @memberof ModalProps
      */
     isOpen?: boolean;
     /**
      * Whether modal should be closed when clicked outside of it.
-     *
-     * @memberof ModalProps
      */
     onDismissClick?: () => void;
     /**
      * Child elements to be rendered inside the modal.
-     *
-     * @memberof ModalProps
      */
     children: React.ReactNode;
     /**
      * Test id to be applied to the modal.
-     *
-     * @memberof ModalProps
      */
     dataTestId?: string;
     /**
      * Maximum width of the modal.
-     *
-     * @memberof ModalProps
      */
     maxWidth?: ModalWidth;
 }

package/components/{multiRowTableCell → MultiRowTableCell}/MultiRowTableCell.d.ts

@@ -1,30 +1,24 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
-interface IMultiRowTableCellProps extends CommonProps {
+interface MultiRowTableCellProps extends CommonProps {
     /**
      * Main header.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     main: string;
     /**
      * Secondary string.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     secondary?: string;
     /**
      * Grid area.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     area?: string;
 }
 /**
  * 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
  */
-export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: IMultiRowTableCellProps) => JSX.Element;
+export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: MultiRowTableCellProps) => JSX.Element;
 export {};

package/components/NumberField/NumberField.d.ts

@@ -1,14 +1,19 @@
 /// <reference types="react" />
-import { FormGroupProps } from "../formGroup/FormGroup";
+import { FormGroupProps } from "../FormGroup/FormGroup";
 import { NumberInputProps } from "../NumberInput/NumberInput";
 declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
 export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
-     *
-     * @memberof NumberFieldProps
      */
     errorMessage?: string;
 }
+/**
+ * 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.
+ */
 export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/NumberInput/NumberInput.d.ts

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

package/components/{pageHeading → PageHeading}/PageHeading.d.ts

@@ -2,20 +2,14 @@
 interface PageHeadingProps {
     /**
      * The title of the page.
-     *
-     * @memberof PageHeadingProps
      */
     title: string;
     /**
      * Subtitle of the page.
-     *
-     * @memberof PageHeadingProps
      */
     subtitle?: string;
     /**
      * Test id to be used for the component.
-     *
-     * @memberof PageHeadingProps
      */
     dataTestId?: string;
     badge?: string;

package/components/{prompt → Prompt}/Prompt.d.ts

@@ -1,4 +1,4 @@
-interface IPromptProps {
+interface PromptProps {
     when: boolean;
     message: string;
 }
@@ -13,8 +13,8 @@ export declare function usePrompt(message: string, when?: boolean): void;
 /**
  * The Prompt function.
  *
- * @param {IPromptProps} Props -
+ * @param {PromptProps} Props -
  * @returns {void} void
  */
-export declare const Prompt: ({ when, message }: IPromptProps) => null;
+export declare const Prompt: ({ when, message }: PromptProps) => null;
 export {};

package/components/{radioGroup → RadioGroup}/RadioGroup.d.ts

@@ -2,50 +2,34 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 interface RadioGroupProps extends CommonProps {
     /**
-     *
-     * @memberof RadioGroupProps
      */
     children: React.ReactNode;
     /**
      * The id of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     id: string;
     /**
      * onChange handler for the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     onChange: (e: React.FormEvent<HTMLInputElement>) => void;
     /**
      * The value of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     value: string | number;
     /**
      * The name of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     name?: string;
     /**
      * The label of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     label?: string;
     /**
      * Whether the radiogroup is inline or not.
-     *
-     * @memberof RadioGroupProps
      */
     inline?: boolean;
     /**
      * Whether the radio group is disabled or not.
-     *
-     * @memberof RadioGroupProps
      */
     disabled?: boolean;
 }

package/components/{radioGroup → RadioGroup}/RadioItem.d.ts

@@ -3,14 +3,10 @@ import { CommonProps } from "../../common/CommonProps";
 interface RadioItemProps extends CommonProps {
     /**
      * The label of the radio item.
-     *
-     * @memberof RadioItemProps
      */
     label: React.ReactNode;
     /**
      * The value of the radio item.
-     *
-     * @memberof RadioItemProps
      */
     value: string | number;
 }

package/components/{select → Select}/shared.d.ts

@@ -12,56 +12,38 @@ export declare type SelectSize = "small" | "default";
 export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
     /**
      * Label to be displayed.
-     *
-     * @memberof ISelectProps
      */
     label?: string;
     /**
      * To hide the label.
-     *
-     * @memberof ISelectProps
      */
     hideLabel?: boolean;
     /**
      * Description for the select component.
-     *
-     * @memberof ISelectProps
      */
     description?: string;
     /**
      * Whether the component is invalid.
-     *
-     * @memberof ISelectProps
      */
     isInvalid?: boolean;
     /**
      * Whether the component is disabled.
-     *
-     * @memberof ISelectProps
      */
     isDisabled?: boolean;
     /**
      * Info of the select component.
-     *
-     * @memberof ISelectProps
      */
     info?: React.ReactNode;
     /**
      * Error of the select component.
-     *
-     * @memberof ISelectProps
      */
     error?: React.ReactNode;
     /**
      * Size of the component.
-     *
-     * @memberof ISelectProps
      */
     size?: SelectSize;
     /**
      * Whether component is asynchronous or not.
-     *
-     * @memberof ISelectProps
      */
     isAsync?: IsAsync;
 }

package/components/{skeletonLines → SkeletonLines}/SkeletonLines.d.ts

@@ -1,36 +1,26 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
-export interface ISkeletonLinesProps extends CommonProps {
+export interface SkeletonLinesProps extends CommonProps {
     /**
      * The number of lines to display.
-     *
-     * @memberof ISkeletonLinesProps
      */
     lines?: number;
     /**
      * The height of lines. Can be a number or an array of numbers or string.
-     *
-     * @memberof ISkeletonLinesProps
      */
     height?: number | number[] | string;
     /**
      * The width of each lines. Can be a number or an array of numbers or string.
-     *
-     * @memberof ISkeletonLinesProps
      */
     width?: number | number[] | string;
     /**
      * Margin of lines.
-     *
-     * @memberof ISkeletonLinesProps
      */
     margin?: string;
     /**
      * Additional CSS classes.
-     *
-     * @memberof ISkeletonLinesProps
      */
     className?: string;
 }
-export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: ISkeletonLinesProps) => JSX.Element>;
+export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
 export default SkeletonLines;

package/components/{spacer → Spacer}/Spacer.d.ts

@@ -4,14 +4,10 @@ interface SpacerProps extends CommonProps {
     /**
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px). Use className prop to use custom min-height values, example: min-h-[100px].
-     *
-     * @memberof SpacerProps
      */
     minHeight?: string;
     /**
      * The border of the spacer.
-     *
-     * @memberof SpacerProps
      */
     border?: boolean;
 }

package/components/{spinner → Spinner}/Spinner.d.ts

@@ -22,7 +22,15 @@ export interface SpinnerProps extends CommonProps {
     containerClassName?: string;
 }
 /**
- * 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

package/components/{text → Text}/Text.d.ts

@@ -7,62 +7,42 @@ export declare type TextWeight = "default" | "thick" | "bold";
 export interface TextProps extends CommonProps {
     /**
      * Child nodes.
-     *
-     * @memberof TextProps
      */
     children: React.ReactNode;
     /**
      * Type of element. Element can be of types "p", "span", or "div".
-     *
-     * @memberof TextProps
      */
     type?: TextType;
     /**
      * Size of element. Values can be "default", "small", or "large".
-     *
-     * @memberof TextProps
      */
     size?: TextSize;
     /**
      * Alignment of the text. Values can be "left", "center", or "right".
-     *
-     * @memberof TextProps
      */
     align?: TextAlign;
     /**
      * Weight of the text. Values can be "default", "thick", or "bold".
-     *
-     * @memberof TextProps
      */
     weight?: TextWeight;
     /**
      * Whether font styles are inverted.
-     *
-     * @memberof TextProps
      */
     inverted?: boolean;
     /**
      * Whether font styles are subtle or not.
-     *
-     * @memberof TextProps
      */
     subtle?: boolean;
     /**
      * Whether text is italicized.
-     *
-     * @memberof TextProps
      */
     italicize?: boolean;
     /**
      * Whether text is uppercase.
-     *
-     * @memberof TextProps
      */
     uppercase?: boolean;
     /**
      * Whether text is underlined or not.
-     *
-     * @memberof TextProps
      */
     underline?: boolean;
 }

package/components/{textField → TextField}/TextField.d.ts

@@ -1,21 +1,24 @@
 import * as React from "react";
-import { FormGroupProps } from "../formGroup/FormGroup";
+import { FormGroupProps } from "../FormGroup/FormGroup";
 import { TextInputProps } from "../TextInput/TextInput";
 declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
 export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
     /**
      * Set the Maximal length of the value for the input.
      * Adds a TextLenghtIndicator to the right of the helpText.
-     *
-     * @memberof TextFieldProps
      */
     maxLength?: number;
     /**
      * If a value is set, the field is rendered in its invalid state.
-     *
-     * @memberof TextFieldProps
      */
     errorMessage?: string;
 }
+/**
+ * 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._
+ */
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export {};