@trackunit/react-components 0.0.83-alpha-9c24ee877.0 → 0.0.98

package/common/LegacyComponentStory.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Default story for legacy components.
+ *
+ *@returns {JSX.Element} Legacy Component Story
+ */
+export declare const LegacyComponentStory: () => JSX.Element;

package/components/Badge/Badge.d.ts

@@ -1,8 +1,7 @@
-import * as React from "react";
+/// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export declare type BadgeSize = "default" | "large";
-declare type BadgeVariant = "badge" | "pill";
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
@@ -13,12 +12,6 @@ interface BaseBadgeProps extends CommonProps {
      * Subtle badges have a light background color wither a darker text color.
      */
     subtle?: boolean;
-    /**
-     * Whether badge should be displayed as a pill or badge.
-     * For the pill variant, numeric values above 99 will be displayed as 99+.
-     * Badge is subtle by default.
-     */
-    variant?: BadgeVariant;
     /**
      * Custom classNames can be added to make adjustments where needed.
      * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
@@ -26,9 +19,18 @@ interface BaseBadgeProps extends CommonProps {
      */
     className?: string;
     /**
-     * Child nodes of the Badge.
+     * The count to be displayed on the badge.
+     */
+    count?: number;
+    /**
+     * The max value to be displayed in the badge.
+     * Any value above this will be appended with a +.
      */
-    children?: React.ReactNode;
+    max?: number;
+    /**
+     * If enabled the badge is shown even if the count is 0.
+     */
+    hideZero?: boolean;
     /**
      * Size of the badge.
      */
@@ -36,14 +38,10 @@ interface BaseBadgeProps extends CommonProps {
 }
 export declare type BadgeProps = BaseBadgeProps;
 /**
- * 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._
+ * The Badge component is used to display a notification badge with an optional number value.
  *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component
  */
-export declare const Badge: ({ color, subtle, className, variant, dataTestId, children, size, ...rest }: BadgeProps) => JSX.Element;
+export declare const Badge: ({ color, subtle, className, count, max, hideZero, dataTestId, size, ...rest }: BadgeProps) => JSX.Element | null;
 export {};

package/components/Chart/Chart.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
+import { CommonProps } from "../../common";
 export interface IOptionsType {
     [key: string]: any;
 }
-export interface ChartProps {
+export interface ChartProps extends CommonProps {
     /**
      * Option values for EChart.
      */
@@ -31,10 +32,6 @@ export interface ChartProps {
      * Event fired when mouse leaves the chart.
      */
     mouseLeaveChart?: () => void;
-    /**
-     * Class values to be passed to the component.
-     */
-    className?: string;
     /**
      * CSS styles for the chart.
      */

package/components/Collapse/Collapse.d.ts

@@ -20,7 +20,7 @@ export interface CollapseProps extends CommonProps {
     label: React.ReactNode;
 }
 /**
- * The Collapse component is ued to condense non-important information.
+ * The Collapse component is used to condense non-important information.
  *
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component

package/components/CopyableText/CopyableText.d.ts

@@ -1,17 +1,16 @@
 /// <reference types="react" />
-interface CopyableTextProps {
+import { CommonProps } from "../../common";
+export interface CopyableTextProps extends CommonProps {
     /**
-     * The text to be displayed.
+     * The text shown in the ui.
+     * By default this is also the text that gets copied when component is clicked.
      */
     text?: string;
     /**
-     * Alternative text to be displayed.
+     * Alternative text to get copied to on click.
+     * This text is not visible in the ui.
      */
     alternativeText?: string;
-    /**
-     * ID of the component to be used while testing.
-     */
-    dataTestId?: string;
 }
 /**
  * The CopyableText component is used where the user should have easy access to copy some information.
@@ -20,4 +19,3 @@ interface CopyableTextProps {
  * @returns {JSX.Element} CopyableText component
  */
 export declare const CopyableText: ({ text, alternativeText, dataTestId }: CopyableTextProps) => JSX.Element;
-export {};

package/components/Heading/Heading.d.ts

@@ -20,7 +20,7 @@ export interface HeadingProps extends CommonProps {
     subtle?: boolean;
 }
 /**
- * The Heading component should be used for Headings.
+ * The Heading is used for a heading of a section (h1,h2,h3,h4).
  *
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component

package/components/Label/Label.d.ts

@@ -8,22 +8,17 @@ export interface LabelProps extends CommonProps {
     /**
      * Specifies the element to which the label belongs to.
      */
-    htmlFor: string | false;
+    htmlFor?: string;
     /**
      * The label value.
      */
-    label?: React.ReactNode;
-    /**
-     *  Description for the label.
-     */
-    description?: React.ReactNode;
+    children?: React.ReactNode;
 }
 /**
  * The Label component is used for labels for input fields.
- *
- * **Have a look at the FormGroup first**
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
  *
  * @param {LabelProps} props - The props for the Label component
  * @returns {JSX.Element} Label component
  */
-export declare const Label: ({ id, htmlFor, label, description, className, dataTestId }: LabelProps) => JSX.Element;
+export declare const Label: ({ id, htmlFor, children, className, dataTestId }: LabelProps) => JSX.Element;

package/components/PageHeading/PageHeading.d.ts

@@ -12,7 +12,7 @@ interface PageHeadingProps {
      * Test id to be used for the component.
      */
     dataTestId?: string;
-    badge?: string;
+    tag?: string;
 }
 /**
  * The PageHeading component used on pages.
@@ -20,5 +20,5 @@ interface PageHeadingProps {
  * @param {PageHeadingProps} props - The props for the PageHeading component
  * @returns {JSX.Element} PageHeading component
  */
-export declare const PageHeading: ({ title, subtitle, dataTestId, badge }: PageHeadingProps) => JSX.Element;
+export declare const PageHeading: ({ title, subtitle, dataTestId, tag }: PageHeadingProps) => JSX.Element;
 export {};

package/components/Select/Select/TagWithWidth.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TagProps } from "../../Tag";
+declare type TagsPropsNoRef = Omit<TagProps, "ref">;
+interface TagWithWidthProps extends TagsPropsNoRef {
+    onWidthKnown?: ({ width }: {
+        width: number;
+    }) => void;
+}
+/**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+export declare const TagWithWidth: ({ onWidthKnown, children, ...rest }: TagWithWidthProps) => JSX.Element;
+export {};

package/components/SkeletonLines/SkeletonLines.d.ts

@@ -10,17 +10,16 @@ export interface SkeletonLinesProps extends CommonProps {
      */
     height?: number | number[] | string;
     /**
-     * The width of each lines. Can be a number or an array of numbers or string.
+     * The width of each line. Can be a number or an array of numbers or string.
      */
     width?: number | number[] | string;
     /**
      * Margin of lines.
      */
     margin?: string;
-    /**
-     * Additional CSS classes.
-     */
-    className?: string;
 }
+/**
+ * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ */
 export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
 export default SkeletonLines;

package/components/Spacer/Spacer.d.ts

@@ -3,7 +3,7 @@ import { CommonProps } from "../../common";
 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].
+     * Possible values are "normal"(8px), and "large" (32px).
      */
     minHeight?: string;
     /**

package/components/Tag/Tag.d.ts

@@ -2,25 +2,18 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export declare type TagSize = "default" | "small";
-interface TagProps extends CommonProps {
+export interface TagProps extends CommonProps {
     /**
-     * The color of the tag
+     * The color of the tag.
      *
      */
     color?: Colors;
     /**
-     * A handler for a click event triggered on x icon
-     * if not passed then x icon won't be visible
+     * A handler for a click event triggered on X icon.
+     * If not passed then x icon won't be visible.
      *
      */
     onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /**
-     * Custom classNames can be added to make adjustments where needed.
-     * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
-     * This will make the badge truncate the text if it is too long.
-     *
-     */
-    className?: string;
     /**
      * Child nodes of the tag.
      *
@@ -28,20 +21,17 @@ interface TagProps extends CommonProps {
     children?: React.ReactNode;
     /**
      * Size of the tag.
-     *
      */
     size?: TagSize;
-    onWidthKnown?: ({ width }: {
-        width: number;
-    }) => void;
 }
 /**
  * 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
  */
-export declare const Tag: ({ className, dataTestId, children, size, onClose, color, onWidthKnown, ...rest }: TagProps) => JSX.Element;
-export {};
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;

package/components/Tip/Tip.d.ts

@@ -7,7 +7,13 @@ export interface TipProps extends CommonProps {
      * Child nodes to render inside the tip.
      */
     children: React.ReactNode;
+    /**
+     * The props for setting the icon on this tip.
+     */
     iconProps?: Partial<IconProps>;
+    /**
+     * The props for setting the tooltip on this tip.
+     */
     tooltipProps?: Partial<TooltipProps>;
 }
 /**

package/components/Toggle/Toggle.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
+import "./Toggle.css";
 export declare type ToggleSize = "small" | "default";
 export interface ToggleProps extends CommonProps {
     /**
@@ -34,9 +35,23 @@ export interface ToggleProps extends CommonProps {
      * Name of the toggle.
      */
     name?: string;
+    /**
+     * The description of the toggle.
+     */
+    description?: string;
     /**
      * onBlur event handler.
      */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
+/**
+ * Use Toggle when you have to only enable/disable a feature.
+ *
+ * _**Do use** Toggle in forms or settings._
+ *
+ * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleProps} props - The props for the Toggle component
+ * @returns {JSX.Element} Toggle component
+ */
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/components/index.d.ts

@@ -17,7 +17,6 @@ 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";

package/index.css

@@ -162,3 +162,148 @@
       disabled:hover:bg-transparent;
   }
 }
+
+/* CSS related to the toggle component */
+.tu-toggle {
+  @apply rounded-full
+    bg-white
+    h-full
+    aspect-square
+    translate-x-0
+    transition-all;
+
+  &__wrapper {
+    @apply flex
+      items-center
+      p-0.5;
+  }
+
+  &__container {
+    @apply inline-block
+      items-center
+      w-fit	
+      mr-2
+      active:shadow
+      rounded-full
+      cursor-pointer
+      focus-within:ring
+      focus-within:ring-offset-2
+      focus-within:ring-blue-700;
+  }
+
+  &--align-bottom {
+    @apply mb-7;
+  }
+
+  &__switch-container {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      rounded-full
+      bg-slate-300
+      focus:bg-slate-400
+      hover:bg-slate-400
+      active:bg-slate-500;
+  }
+
+  &__switch {
+    @apply bg-white
+      rounded-full
+      h-full
+      w-5/12		
+      aspect-square
+      translate-x-4
+      transition-all;
+  }
+
+  &--default {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      w-9
+      h-5;
+  }
+
+  &--small {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      w-8
+      h-4;
+
+    .tu-toggle__switch {
+      @apply w-4/12;
+    }
+  }
+
+  &--toggled {
+    @apply flex
+      items-center
+      p-1
+      cursor-pointer
+      bg-blue-600
+      focus:bg-blue-700
+      hover:bg-blue-700
+      active:bg-blue-800;
+  }
+
+  &--disabled {
+    @apply flex
+      items-center
+      p-1
+      cursor-not-allowed
+      pointer-events-none
+      bg-slate-200;
+  }
+
+  &--disabled.tu-toggle--toggled {
+    @apply bg-slate-400;
+  }
+
+  &__input {
+    @apply absolute
+      opacity-0
+      -z-10;
+  }
+
+  &__label {
+    @apply hover:cursor-pointer
+      text-base
+      text-slate-900	
+      max-w-[250px]
+      whitespace-nowrap
+      overflow-hidden
+      text-ellipsis;
+
+    &--disabled {
+      @apply text-slate-400
+        group-hover:text-slate-400 
+        group-active:text-slate-400;
+    }
+  }
+
+  &--align-label {
+    @apply inline-block;
+  }
+
+  &__description {
+    @apply text-sm	
+      font-normal
+      font-sans
+      text-slate-500	
+      inline-block
+      max-w-[150px]
+      whitespace-nowrap
+      overflow-hidden
+      text-ellipsis;
+
+    &--disabled {
+      @apply text-slate-400
+        group-hover:text-slate-400 
+        group-active:text-slate-400;
+    }
+  }
+}