@trackunit/react-components 0.0.163 → 0.0.165

package/components/Alert/Alert.d.ts

@@ -1,6 +1,6 @@
+import { IntentColors } from "@trackunit/ui-design-tokens";
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { IntentColors } from "../../constants";
 export declare type AlertActionType = "primary" | "secondary";
 export declare type AlertAction = {
     label: string;

package/components/Badge/Badge.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
+import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
-import { Colors } from "../../constants/colors";
 export declare type BadgeSize = "medium" | "large";
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
      */
-    color?: Colors;
+    color?: ThemeColors;
     /**
      * Specifies whether the badge is subtle or not.
      * Subtle badges have a light background color wither a darker text color.

package/components/Icon/Icon.d.ts

@@ -1,7 +1,7 @@
+import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
 import * as React from "react";
 import { CommonProps, Size } from "../../common/CommonProps";
-import { Colors } from "../../constants/colors";
 export interface IconProps extends CommonProps {
     /**
      * The name of the icon to be rendered.
@@ -13,7 +13,7 @@ export interface IconProps extends CommonProps {
      * Supports any colors from the theme.
      * Custom colors can be used by setting a text color in the className.
      */
-    color?: Colors;
+    color?: ThemeColors;
     /**
      * The size of the icon.
      * Small = 16x16px, medium = 20x20px, Large = 24x24px.

package/components/Indicator/Indicator.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
-import { Colors } from "../../constants/colors";
 export interface IndicatorProps extends CommonProps {
     /**
      * The icon to be rendered inside the indicator component
@@ -9,7 +9,7 @@ export interface IndicatorProps extends CommonProps {
     /**
      * A color token used to style the icon and the icon background
      */
-    color?: Colors;
+    color?: ThemeColors;
     /**
      * A text label to be displayed next to the indicator
      */

package/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface PageHeaderProps extends CommonProps {
+    /**
+     * Text to be displayed in the header.
+     */
+    title: string | React.ReactNode;
+    /**
+     * The description to be displayed inside the tip.
+     */
+    description?: string | React.ReactNode;
+    /**
+     * Additional actions to be rendered along with the header.
+     */
+    action?: React.ReactNode;
+    /**
+     * A tag that is displayed on the side of the header.
+     * A RectNode passed into the tag will be rendered as such.
+     * A string passed into the tag will render it using the tag component.
+     */
+    tag?: string;
+    /**
+     * Whether spinner should be shown while loading the data.
+     */
+    showLoading?: boolean;
+    /**
+     * Child nodes to be displayed inside the page header.
+     */
+    children?: React.ReactNode;
+    /**
+     * The link to the previous page which will be rendered inside an IconButton component to the left of the heading.
+     */
+    backTo?: string;
+}
+/**
+ * Pageheader component is used to display a page header.
+ *
+ * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
+ *
+ * @param {PageHeaderProps} props - The props for the PageHeader component
+ * @returns {JSX.Element} PageHeader component
+ */
+export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, title, tag, backTo, children, }: PageHeaderProps) => JSX.Element;

package/components/PageHeader/index.d.ts

@@ -0,0 +1 @@
+export * from "./PageHeader";

package/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import "./SectionHeader.css";
+export interface SectionHeaderProps extends CommonProps {
+    /**
+     * The title of the section.
+     */
+    title: string;
+    /**
+     * Subtitle of the section.
+     */
+    subtitle?: string;
+    /**
+     * The addon could be used to tell the state of a section header.
+     */
+    addon?: ReactNode;
+}
+/**
+ * The SectionHeader component is used on sections to set the section title.
+ *
+ * @param {SectionHeaderProps} props - The props for the section header component
+ * @returns {JSX.Element} SectionHeader component
+ */
+export declare const SectionHeader: ({ title, subtitle, dataTestId, addon }: SectionHeaderProps) => JSX.Element;

package/components/SectionHeader/index.d.ts

@@ -0,0 +1 @@
+export * from "./SectionHeader";

package/components/Tag/Tag.d.ts

@@ -1,13 +1,13 @@
+import { ThemeColors } from "@trackunit/ui-design-tokens";
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { Colors } from "../../constants/colors";
 export declare type TagSize = "small" | "medium";
 export interface TagProps extends CommonProps {
     /**
      * The color of the tag.
      *
      */
-    color?: Colors;
+    color?: ThemeColors;
     /**
      * A handler for a click event triggered on X icon.
      * If not passed then x icon won't be visible.

package/components/Tip/Tip.d.ts

@@ -15,11 +15,20 @@ export interface TipProps extends CommonProps {
      * The props for setting the tooltip on this tip.
      */
     tooltipProps?: Partial<TooltipProps>;
+    /**
+     * The element type the tip will be rendered as.
+     */
+    renderAs?: keyof JSX.IntrinsicElements;
+    /**
+     * The href attribute if the tip is rendered as an anchor tag.
+     */
+    link?: string | React.ReactNode;
 }
 /**
  * The Tip component is used to show helpful tips or contextual information to the users.
+ * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
  *
  * @param {TipProps} props - The props for the Tip component
  * @returns {JSX.Element} Tip component
  */
-export declare const Tip: ({ children, iconProps, tooltipProps, dataTestId, ...rest }: TipProps) => JSX.Element;
+export declare const Tip: ({ children, iconProps, tooltipProps, dataTestId, link, renderAs, className, }: TipProps) => JSX.Element;

package/components/ValueBar/ValueBarHelper.d.ts

@@ -15,13 +15,6 @@ export declare const getScore: (value: number, min: number, max: number) => numb
  * @returns {string} color value
  */
 export declare const getDefaultFillColor: (score: number) => string;
-/**
- * Helper function to get normalized color
- *
- * @param {number} levelColor - color, ex --color-green-600
- * @returns {string} normalized color value
- */
-export declare const getNormalizedLevelColor: (levelColor: string) => string;
 /**
  * Helper function to get custom color used by the ValueBar
  *

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { CommonProps, Size } from "../../../common/CommonProps";
-import { GeneralColors, IntentColors } from "../../../constants";
 export declare type ButtonVariant = "filled" | "transparent";
 export declare type ButtonColor = Extract<GeneralColors, "primary" | "secondary"> | Extract<IntentColors, "info" | "warning" | "danger"> | "tertiary";
 export declare type ButtonType = "button" | "submit";

package/components/index.d.ts

@@ -21,10 +21,11 @@ export * from "./Menu";
 export * from "./Modal";
 export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
-export * from "./PageHeading";
+export * from "./PageHeader";
 export * from "./Popover";
 export * from "./Prompt";
 export * from "./RadioGroup";
+export * from "./SectionHeader";
 export * from "./Select";
 export * from "./SkeletonLines";
 export * from "./Spacer";

package/index.css

@@ -20,7 +20,6 @@
     px-2.5
     h-min
     w-min
-    drop-shadow
     focus:ring
     focus:ring-offset-1
     focus:outline-none
@@ -116,10 +115,6 @@
       disabled:text-slate-400;
   }
 
-  &--transparent {
-    @apply drop-shadow-none;
-  }
-
   &--transparent-primary {
     @apply text-primary-600
       hover:text-primary-700
@@ -213,16 +208,6 @@
   }
 }
 
-.tu-pageheading {
-  @apply w-full;
-
-  &__flex{
-    @apply flex
-      items-center
-      flex-wrap-reverse
-      gap-2;
-  }
-}
 /* CSS related to the RadioGroup component */
 .tu-radiogroup {
   @apply flex 
@@ -334,6 +319,17 @@
   }
 }
 
+.tu-section-header {
+  @apply w-full;
+
+  &__flex {
+    @apply flex
+      items-center
+      flex-wrap-reverse
+      gap-2;
+  }
+}
+
 .tu-textarea {
   @apply tu-input-base 
     block

package/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./common";
 export * from "./components";
-export * from "./constants";
 export * from "./hooks";
 export * from "./layout";

package/index.js

@@ -19,7 +19,7 @@ export { default as ValueType } from 'react-select';
 import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
-import { getColorValue } from '@trackunit/ui-design-tokens';
+import { color } from '@trackunit/ui-design-tokens';
 
 const docs = {
   source: {
@@ -176,11 +176,11 @@ const getStyles = () => ({
       warning: tws`tu-button--warning`
     },
     transparent: {
-      primary: tws`tu-button--transparent tu-button--transparent-primary`,
-      secondary: tws`tu-button--transparent tu-button--transparent-secondary`,
-      danger: tws`tu-button--transparent tu-button--transparent-danger`,
-      tertiary: tws`tu-button--transparent tu-button--transparent-tertiary`,
-      warning: tws`tu-button--transparent tu-button--transparent-warning`
+      primary: tws`tu-button--transparent-primary`,
+      secondary: tws`tu-button--transparent-secondary`,
+      danger: tws`tu-button--transparent-danger`,
+      tertiary: tws`tu-button--transparent-tertiary`,
+      warning: tws`tu-button--transparent-warning`
     }
   };
   return styles[$variant][$color];
@@ -303,72 +303,6 @@ const IconContainer$2 = tw.div`
   ${p => p.$size === "small" ? tws`tu-button__container--small` : null}
 `;
 
-/**
- * ? A collection of all the types and tokens related to the named colors in the default theme.
- */
-
-/**
- * The general color palette
- * Should be available in most if not all colored components
- */
-const generalColors = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  ACCENT: "accent",
-  NEUTRAL: "neutral"
-};
-/**
- * The intent color palette
- * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
- */
-
-const intentColors = {
-  INFO: "info",
-  SUCCESS: "success",
-  WARNING: "warning",
-  DANGER: "danger"
-};
-/**
- * The Criticality color palette
- * Should be available in any component that could be used to display the criticality of an asset or event
- */
-
-const criticalityColors = {
-  GOOD: "good",
-  LOW: "low",
-  CRITICAL: "critical"
-};
-/**
- * The Activity color palette
- * Should be available in any component that could be used to display the Activity state of an asset
- */
-
-const activityColors = {
-  WORKING: "working",
-  IDLE: "idle",
-  STOPPED: "stopped",
-  UNKNOWN: "unknown"
-};
-/**
- * The Rental status color palette
- * Should be available in any component that could be used to display the rental status of an asset
- */
-
-const rentalStatusColors = {
-  ON_RENT: "ON_RENT",
-  RETURNED: "RETURNED",
-  AVAILABLE: "AVAILABLE",
-  PICKUP_READY: "PICKUP_READY",
-  TRANSFER: "TRANSFER",
-  IN_REPAIR: "IN_REPAIR",
-  OTHER_RENTAL_STATUS: "OTHER_RENTAL_STATUS"
-};
-/**
- * The full color palette
- */
-
-const colors = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalColors), intentColors), criticalityColors), activityColors), rentalStatusColors);
-
 const IconSizeClassMap = {
   small: tws`tu-icon--small`,
   medium: tws`tu-icon--medium`,
@@ -441,49 +375,49 @@ const Root$4 = tw.span`
   $color
 }) => {
   switch ($color) {
-    case colors.PRIMARY:
+    case "primary":
       return tws`tu-icon--primary`;
 
-    case colors.SECONDARY:
+    case "secondary":
       return tws`tu-icon--secondary`;
 
-    case colors.ACCENT:
+    case "accent":
       return tws`tu-icon--accent`;
 
-    case colors.NEUTRAL:
+    case "neutral":
       return tws`tu-icon--neutral`;
 
-    case colors.INFO:
+    case "info":
       return tws`tu-icon--info`;
 
-    case colors.SUCCESS:
+    case "success":
       return tws`tu-icon--success`;
 
-    case colors.WARNING:
+    case "warning":
       return tws`tu-icon--warning`;
 
-    case colors.DANGER:
+    case "danger":
       return tws`tu-icon--danger`;
 
-    case colors.GOOD:
+    case "good":
       return tws`tu-icon--good`;
 
-    case colors.LOW:
+    case "low":
       return tws`tu-icon--low`;
 
-    case colors.CRITICAL:
+    case "critical":
       return tws`tu-icon--critical`;
 
-    case colors.WORKING:
+    case "working":
       return tws`tu-icon--working`;
 
-    case colors.IDLE:
+    case "idle":
       return tws`tu-icon--idle`;
 
-    case colors.STOPPED:
+    case "stopped":
       return tws`tu-icon--stopped`;
 
-    case colors.UNKNOWN:
+    case "unknown":
       return tws`tu-icon--unknown`;
 
     default:
@@ -1283,7 +1217,7 @@ const Body = tw.div`
  * @returns {JSX.Element} Heading component
  */
 
-const Heading = ({
+const Heading$1 = ({
   children,
   variant = "primary",
   inverted = false,
@@ -1361,13 +1295,13 @@ const CardHeader = ({
   }, {
     children: jsxs(Container$7, {
       children: [jsxs("div", {
-        children: [jsxs(HeadingContainer, {
-          children: [jsx(Heading, Object.assign({
+        children: [jsxs(HeadingContainer$1, {
+          children: [jsx(Heading$1, Object.assign({
             variant: headingVariant
           }, {
             children: heading
           })), accessories]
-        }), subHeading && jsx(Heading, Object.assign({
+        }), subHeading && jsx(Heading$1, Object.assign({
           subtle: true,
           variant: "subtitle"
         }, {
@@ -1392,7 +1326,7 @@ const BottomBorderedDensityContainer = twx(DensityContainer)`
 const Container$7 = tw.div`
   tu-card__header
 `;
-const HeadingContainer = tw.div`
+const HeadingContainer$1 = tw.div`
   tu-card__header-heading-container
 `;
 
@@ -2270,30 +2204,39 @@ const Content = tw.div`
 
 /**
  * The Tip component is used to show helpful tips or contextual information to the users.
+ * The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
  *
  * @param {TipProps} props - The props for the Tip component
  * @returns {JSX.Element} Tip component
  */
 
-const Tip = _a => {
-  var _b;
+const Tip = ({
+  children,
+  iconProps,
+  tooltipProps,
+  dataTestId,
+  link,
+  renderAs = "span",
+  className
+}) => {
+  var _a;
 
-  var {
-    children,
-    iconProps,
-    tooltipProps,
-    dataTestId
-  } = _a,
-      rest = __rest(_a, ["children", "iconProps", "tooltipProps", "dataTestId"]);
+  const ifAnchorTag = () => {
+    return renderAs === "a";
+  };
 
   return jsx(TipContainer, Object.assign({
-    "data-testid": dataTestId
-  }, rest, {
+    "data-testid": dataTestId,
+    "$as": renderAs,
+    href: ifAnchorTag() ? link === null || link === void 0 ? void 0 : link.toString() : undefined,
+    target: ifAnchorTag() ? "_blank" : undefined,
+    className: className
+  }, {
     children: jsx(Tooltip, Object.assign({
       label: children,
       dataTestId: `${dataTestId}-tooltip`
     }, tooltipProps, {
-      className: `${(_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _b !== void 0 ? _b : ""} tu-tip-tooltip`
+      className: `${(_a = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _a !== void 0 ? _a : ""} tu-tip-tooltip`
     }, {
       children: jsx(Icon$1, Object.assign({
         name: "QuestionMarkCircleIcon",
@@ -2303,7 +2246,7 @@ const Tip = _a => {
     }))
   }));
 };
-const TipContainer = tw.span`
+const TipContainer = tw.text`
   tu-tip
 `;
 
@@ -2608,7 +2551,7 @@ const Indicator$1 = _a => {
     dataTestId,
     icon,
     label,
-    color = colors.UNKNOWN,
+    color = "unknown",
     withBackground = true,
     withLabel = true,
     ping = false
@@ -2641,67 +2584,67 @@ const Container$4 = tw.div`
   $color
 }) => {
   switch ($color) {
-    case colors.PRIMARY:
+    case "primary":
       return tws`tu-indicator--primary`;
 
-    case colors.SECONDARY:
+    case "secondary":
       return tws`tu-indicator--secondary`;
 
-    case colors.ACCENT:
+    case "accent":
       return tws`tu-indicator--accent`;
 
-    case colors.NEUTRAL:
+    case "neutral":
       return tws`tu-indicator--neutral`;
 
-    case colors.INFO:
+    case "info":
       return tws`tu-indicator--info`;
 
-    case colors.SUCCESS:
+    case "success":
       return tws`tu-indicator--success`;
 
-    case colors.WARNING:
+    case "warning":
       return tws`tu-indicator--warning`;
 
-    case colors.DANGER:
+    case "danger":
       return tws`tu-indicator--danger`;
 
-    case colors.GOOD:
+    case "good":
       return tws`tu-indicator--good`;
 
-    case colors.LOW:
+    case "low":
       return tws`tu-indicator--low`;
 
-    case colors.CRITICAL:
+    case "critical":
       return tws`tu-indicator--critical`;
 
-    case colors.WORKING:
+    case "working":
       return tws`tu-indicator--working`;
 
-    case colors.IDLE:
+    case "idle":
       return tws`tu-indicator--idle`;
 
-    case colors.STOPPED:
+    case "stopped":
       return tws`tu-indicator--stopped`;
 
-    case colors.UNKNOWN:
+    case "unknown":
       return tws`tu-indicator--unknown`;
 
-    case colors.ON_RENT:
+    case "on_rent":
       return tws`tu-indicator--on-rent`;
 
-    case colors.AVAILABLE:
+    case "available":
       return tws`tu-indicator--available`;
 
-    case colors.PICKUP_READY:
+    case "pickup_ready":
       return tws`tu-indicator--pickup-ready`;
 
-    case colors.TRANSFER:
+    case "transfer":
       return tws`tu-indicator--transfer`;
 
-    case colors.IN_REPAIR:
+    case "in_repair":
       return tws`tu-indicator--in-repair`;
 
-    case colors.OTHER_RENTAL_STATUS:
+    case "other_rental_status":
       return tws`tu-indicator--other-rental-status`;
 
     default:
@@ -3112,79 +3055,196 @@ const NumberField = forwardRef((_a, ref) => {
 });
 
 /**
- * The Spacer component is used for adding a bit of space in the ui.
+ *  The tag component is used to categorize elements in the ui.
  *
- * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
+ *  This could be to tell the state of an asset, or label a page as Beta.
+ *
+ *  The tag is also used in multiselect components to show selected options.
+ *
+ *  **Do:** Use short labels for easy scanning.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
  */
 
-const Spacer = ({
-  minHeight,
-  border,
-  dataTestId
+const Tag = React.forwardRef((_a, ref) => {
+  var {
+    className,
+    dataTestId,
+    children,
+    size = "medium",
+    onClose,
+    color = "primary"
+  } = _a;
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+
+  return jsxs(StyledText, Object.assign({
+    className: className,
+    "$size": size,
+    "data-testid": `${dataTestId}-tag`,
+    "$as": "span",
+    "$color": color,
+    "$withXIcon": !!onClose,
+    ref: ref
+  }, {
+    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
+    jsx(IconContainer, Object.assign({
+      onMouseDown: onClose
+    }, {
+      children: jsx(Icon$1, {
+        name: "XCircleIcon",
+        dataTestId: dataTestId + "Icon",
+        type: "solid",
+        style: {
+          WebkitTransition: "-webkit-transform 0.150s"
+        },
+        className: size === "medium" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
+      })
+    }))]
+  }));
+});
+
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
 }) => {
-  return jsx(Space, {
-    "data-testid": dataTestId,
-    minHeight: minHeight,
-    border: border
-  });
+  const tagSizeModifierClass = {
+    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];
 };
 
-const GetSpacerHeight = () => ({
-  minHeight
+const getColorModifierClass = () => ({
+  $color
 }) => {
-  switch (minHeight) {
-    case "normal":
-      return tws`tu-spacer--normal`;
-
-    case "large":
-      return tws`tu-spacer--large`;
-
-    default:
-      return "";
-  }
+  const colorClasses = {
+    primary: tws`tu-tag--primary`,
+    secondary: tws`tu-tag--secondary`,
+    accent: tws`tu-tag--accent`,
+    success: tws`tu-tag--success`,
+    danger: tws`tu-tag--danger`,
+    warning: tws`tu-tag--warning`,
+    info: tws`tu-tag--info`,
+    neutral: tws`tu-tag--neutral`,
+    good: tws`tu-tag--good`,
+    low: tws`tu-tag--low`,
+    critical: tws`tu-tag--critical`,
+    working: tws`tu-tag--working`,
+    idle: tws`tu-tag--idle`,
+    stopped: tws`tu-tag--stopped`,
+    unknown: tws`tu-tag--unknown`
+  };
+  return colorClasses[$color];
 };
 
-const Space = tw.div`
-  ${p => `${p.border ? `tu-spacer--border` : null}`}
-  ${GetSpacerHeight()}
+const StyledText = tw.span`
+  tu-tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+  tu-tag__icon-container
 `;
 
 /**
- * The PageHeading component is used on pages to set the Browser page title.
+ * Pageheader component is used to display a page header.
  *
- * @param {PageHeadingProps} props - The props for the PageHeading component
- * @returns {JSX.Element} PageHeading component
+ * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
+ *
+ * @param {PageHeaderProps} props - The props for the PageHeader component
+ * @returns {JSX.Element} PageHeader component
  */
 
-const PageHeading = ({
-  title,
-  subtitle,
+const PageHeader = ({
+  className,
   dataTestId,
-  addon
+  action,
+  showLoading,
+  description,
+  title,
+  tag,
+  backTo,
+  children
 }) => {
-  return jsxs(PageHeadingContainer, {
-    children: [jsx(Helmet, {
-      title: title
-    }), jsxs(StyledFlex, {
-      children: [jsx(Heading, Object.assign({
-        variant: "secondary",
+  return jsxs(StyledPageHeader, Object.assign({
+    className: className,
+    "data-testid": dataTestId
+  }, {
+    children: [jsxs(HeadingAndAccessoriesContainer, Object.assign({
+      "data-testid": `${dataTestId}-heading-container`
+    }, {
+      children: [jsxs(HeadingContainer, {
+        children: [backTo && jsx(IconButton, {
+          to: backTo,
+          color: "tertiary",
+          variant: "transparent",
+          size: "small",
+          icon: jsx(Icon$1, {
+            name: "ArrowLeftIcon"
+          })
+        }), jsx(Heading, Object.assign({
+          "data-testid": `${dataTestId}-heading`
+        }, {
+          children: title
+        })), description && jsx(StyledTip, Object.assign({
+          link: description,
+          dataTestId: `${dataTestId}-tip`,
+          iconProps: {
+            name: "QuestionMarkCircleIcon"
+          },
+          renderAs: isValidHttpUrl(description) ? "a" : "span"
+        }, {
+          children: isValidHttpUrl(description) ? "Learn more" : description
+        }))]
+      }), tag && jsx(Tag, Object.assign({
         dataTestId: dataTestId
       }, {
-        children: title
-      })), addon]
-    }), subtitle && jsx(Heading, Object.assign({
-      variant: "subtitle",
-      subtle: true
-    }, {
-      children: subtitle
-    })), jsx(Spacer, {
-      minHeight: "normal"
+        children: tag
+      })), showLoading && jsx(Spinner, {
+        dataTestId: `${dataTestId}-spinner`,
+        centered: true
+      }), action]
+    })), jsx(ChildContainer, {
+      children: children
     })]
-  });
+  }));
+};
+
+const isValidHttpUrl = description => {
+  if (!description || typeof description !== "string") {
+    return false;
+  }
+
+  let url;
+
+  try {
+    url = new URL(description);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
 };
-const PageHeadingContainer = tw.div`tu-pageheading`;
-const StyledFlex = tw.div`tu-pageheading__flex`;
+
+const StyledPageHeader = tw.div`
+  tu-page-header
+`;
+const HeadingAndAccessoriesContainer = tw.div`
+  tu-page-header__heading-accessories-container
+`;
+const HeadingContainer = tw.div`
+  tu-page-header__heading-container
+`;
+const Heading = tw.h1`
+  tu-page-header__heading
+`;
+const ChildContainer = tw.div`
+  tu-page-header__child-container
+`;
+const StyledTip = twx(Tip)`
+  ${p => isValidHttpUrl(p.link) ? tws`tu-page-header__tip` : null}
+`;
 
 function useConfirmExit(confirmExit, when = true) {
   const {
@@ -3382,6 +3442,81 @@ ${({
 }) => $disabled && tws`tu-radioitem__description--disabled`}
 `;
 
+/**
+ * The Spacer component is used for adding a bit of space in the ui.
+ *
+ * @param {SpacerProps} props - The props for the Spacer component
+ * @returns {JSX.Element} Spacer component
+ */
+
+const Spacer = ({
+  minHeight,
+  border,
+  dataTestId
+}) => {
+  return jsx(Space, {
+    "data-testid": dataTestId,
+    minHeight: minHeight,
+    border: border
+  });
+};
+
+const GetSpacerHeight = () => ({
+  minHeight
+}) => {
+  switch (minHeight) {
+    case "normal":
+      return tws`tu-spacer--normal`;
+
+    case "large":
+      return tws`tu-spacer--large`;
+
+    default:
+      return "";
+  }
+};
+
+const Space = tw.div`
+  ${p => `${p.border ? `tu-spacer--border` : null}`}
+  ${GetSpacerHeight()}
+`;
+
+/**
+ * The SectionHeader component is used on sections to set the section title.
+ *
+ * @param {SectionHeaderProps} props - The props for the section header component
+ * @returns {JSX.Element} SectionHeader component
+ */
+
+const SectionHeader = ({
+  title,
+  subtitle,
+  dataTestId,
+  addon
+}) => {
+  return jsxs(SectionHeaderContainer, {
+    children: [jsx(Helmet, {
+      title: title
+    }), jsxs(StyledFlex, {
+      children: [jsx(Heading$1, Object.assign({
+        variant: "secondary",
+        dataTestId: dataTestId
+      }, {
+        children: title
+      })), addon]
+    }), subtitle && jsx(Heading$1, Object.assign({
+      variant: "subtitle",
+      subtle: true
+    }, {
+      children: subtitle
+    })), jsx(Spacer, {
+      minHeight: "normal"
+    })]
+  });
+};
+const SectionHeaderContainer = tw.div`tu-section-header`;
+const StyledFlex = tw.div`tu-section-header__flex`;
+
 /**
  * The SelectContainer component.
  *
@@ -3489,99 +3624,6 @@ const SelectPrefix = tw.div`
   tu-select__prefix 
 `;
 
-/**
- *  The tag component is used to categorize elements in the ui.
- *
- *  This could be to tell the state of an asset, or label a page as Beta.
- *
- *  The tag is also used in multiselect components to show selected options.
- *
- *  **Do:** Use short labels for easy scanning.
- *
- * @param {TagProps} props - The props for the tag component
- * @returns {JSX.Element} tag component
- */
-
-const Tag = React.forwardRef((_a, ref) => {
-  var {
-    className,
-    dataTestId,
-    children,
-    size = "medium",
-    onClose,
-    color = "primary"
-  } = _a;
-      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
-
-  return jsxs(StyledText, Object.assign({
-    className: className,
-    "$size": size,
-    "data-testid": `${dataTestId}-tag`,
-    "$as": "span",
-    "$color": color,
-    "$withXIcon": !!onClose,
-    ref: ref
-  }, {
-    children: [children, onClose && // a fix for multiselect deselecting tags working together with fade out animation
-    jsx(IconContainer, Object.assign({
-      onMouseDown: onClose
-    }, {
-      children: jsx(Icon$1, {
-        name: "XCircleIcon",
-        dataTestId: dataTestId + "Icon",
-        type: "solid",
-        style: {
-          WebkitTransition: "-webkit-transform 0.150s"
-        },
-        className: size === "medium" ? tws`tu-tag__icon` : tws`tu-tag__icon tu-tag__icon--small`
-      })
-    }))]
-  }));
-});
-
-const getSizeModifierClass = () => ({
-  $size,
-  $withXIcon
-}) => {
-  const tagSizeModifierClass = {
-    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];
-};
-
-const getColorModifierClass = () => ({
-  $color
-}) => {
-  const colorClasses = {
-    primary: tws`tu-tag--primary`,
-    secondary: tws`tu-tag--secondary`,
-    accent: tws`tu-tag--accent`,
-    success: tws`tu-tag--success`,
-    danger: tws`tu-tag--danger`,
-    warning: tws`tu-tag--warning`,
-    info: tws`tu-tag--info`,
-    neutral: tws`tu-tag--neutral`,
-    good: tws`tu-tag--good`,
-    low: tws`tu-tag--low`,
-    critical: tws`tu-tag--critical`,
-    working: tws`tu-tag--working`,
-    idle: tws`tu-tag--idle`,
-    stopped: tws`tu-tag--stopped`,
-    unknown: tws`tu-tag--unknown`
-  };
-  return colorClasses[$color];
-};
-
-const StyledText = tw.span`
-  tu-tag
-  ${getSizeModifierClass()}
-  ${getColorModifierClass()}
-`;
-const IconContainer = tw.div`
-  tu-tag__icon-container
-`;
-
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
  *
@@ -4841,28 +4883,14 @@ const getScore = (value, min, max) => {
 
 const getDefaultFillColor = score => {
   if (score < 0.3) {
-    return getColorValue("--color-red-500");
+    return color("DANGER", 500, "CSS");
   }
 
   if (score >= 0.6) {
-    return getColorValue("--color-green-600");
-  }
-
-  return getColorValue("--color-amber-300");
-};
-/**
- * Helper function to get normalized color
- *
- * @param {number} levelColor - color, ex --color-green-600
- * @returns {string} normalized color value
- */
-
-const getNormalizedLevelColor = levelColor => {
-  if (levelColor.startsWith("--color")) {
-    return getColorValue(levelColor);
+    return color("SUCCESS", 600, "CSS");
   }
 
-  return levelColor;
+  return color("WARNING", 300, "CSS");
 };
 /**
  * Helper function to get custom color used by the ValueBar
@@ -4876,14 +4904,14 @@ const getFillColor = (score, levelColors) => {
   var _a, _b;
 
   if (levelColors.low && score < (levelColors.low.level || 0)) {
-    return getNormalizedLevelColor(levelColors.low.color);
+    return levelColors.low.color;
   }
 
   if (levelColors.high && score >= (levelColors.high.level || 0)) {
-    return getNormalizedLevelColor(levelColors.high.color);
+    return levelColors.high.color;
   }
 
-  return getNormalizedLevelColor((_b = (_a = levelColors.medium) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : "--color-amber-300");
+  return (_b = (_a = levelColors.medium) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : color("WARNING", 300);
 };
 /**
  * Helper function to get color used by the ValueBar
@@ -4946,7 +4974,7 @@ const ValueBar = ({
         "$size": size,
         x: `${barWidth + 2}%`,
         y: "11",
-        fill: valueColor !== null && valueColor !== void 0 ? valueColor : getColorValue("--color-neutral-400")
+        fill: valueColor !== null && valueColor !== void 0 ? valueColor : color("NEUTRAL", 400, "CSS")
       }, {
         children: [Number(value.toFixed(1)), unit || ""]
       }))]
@@ -5338,4 +5366,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, rentalStatusColors, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading$1 as Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeader, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, SectionHeader, Select, SelectPrefix, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, docs, getOrderedOptions, getValueBarColorByValue, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.163",
+  "version": "0.0.165",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.52",
+    "@trackunit/css-core": "0.0.53",
     "@trackunit/tailwind-styled-components": "0.0.46",
     "react": "17.0.2",
-    "@trackunit/ui-design-tokens": "0.0.44",
+    "@trackunit/ui-design-tokens": "0.0.45",
     "echarts-for-react": "^3.0.2",
     "echarts": "^5.4.0",
     "uuid": "^8.3.2",
@@ -16,10 +16,10 @@
     "react-day-picker": "^8.3.0",
     "@trackunit/ui-icons": "0.0.47",
     "react-useportal": "1.0.16",
-    "react-helmet": "^6.1.0",
     "@react-spring/web": "9.5.2",
     "react-router-dom": "6.4.1",
     "@popperjs/core": "^2.11.6",
+    "react-helmet": "^6.1.0",
     "react-select": "^5.4.0",
     "jest-canvas-mock": "^2.4.0"
   },

package/components/PageHeading/PageHeading.d.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from "react";
-import { CommonProps } from "../../common/CommonProps";
-import "./PageHeading.css";
-export interface PageHeadingProps extends CommonProps {
-    /**
-     * The title of the page.
-     */
-    title: string;
-    /**
-     * Subtitle of the page.
-     */
-    subtitle?: string;
-    /**
-     * The addon could be used to tell the state of a pageheading.
-     */
-    addon?: ReactNode;
-}
-/**
- * The PageHeading component is used on pages to set the Browser page title.
- *
- * @param {PageHeadingProps} props - The props for the PageHeading component
- * @returns {JSX.Element} PageHeading component
- */
-export declare const PageHeading: ({ title, subtitle, dataTestId, addon }: PageHeadingProps) => JSX.Element;

package/components/PageHeading/index.d.ts

@@ -1 +0,0 @@
-export * from "./PageHeading";

package/constants/colors.d.ts

@@ -1,88 +0,0 @@
-/**
- * ? A collection of all the types and tokens related to the named colors in the default theme.
- */
-/**
- * The general color palette
- * Should be available in most if not all colored components
- */
-export declare const generalColors: {
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-    readonly ACCENT: "accent";
-    readonly NEUTRAL: "neutral";
-};
-export declare type GeneralColors = typeof colors[keyof typeof generalColors];
-/**
- * The intent color palette
- * Should be available for most colored components such as "Button", "Alert", "Indicator", "Badge"
- */
-export declare const intentColors: {
-    readonly INFO: "info";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-};
-export declare type IntentColors = typeof colors[keyof typeof intentColors];
-/**
- * The Criticality color palette
- * Should be available in any component that could be used to display the criticality of an asset or event
- */
-export declare const criticalityColors: {
-    readonly GOOD: "good";
-    readonly LOW: "low";
-    readonly CRITICAL: "critical";
-};
-export declare type CriticalityColors = typeof colors[keyof typeof criticalityColors];
-/**
- * The Activity color palette
- * Should be available in any component that could be used to display the Activity state of an asset
- */
-export declare const activityColors: {
-    readonly WORKING: "working";
-    readonly IDLE: "idle";
-    readonly STOPPED: "stopped";
-    readonly UNKNOWN: "unknown";
-};
-export declare type ActivityColors = typeof colors[keyof typeof activityColors];
-/**
- * The Rental status color palette
- * Should be available in any component that could be used to display the rental status of an asset
- */
-export declare const rentalStatusColors: {
-    readonly ON_RENT: "ON_RENT";
-    readonly RETURNED: "RETURNED";
-    readonly AVAILABLE: "AVAILABLE";
-    readonly PICKUP_READY: "PICKUP_READY";
-    readonly TRANSFER: "TRANSFER";
-    readonly IN_REPAIR: "IN_REPAIR";
-    readonly OTHER_RENTAL_STATUS: "OTHER_RENTAL_STATUS";
-};
-export declare type RentalStatusColors = typeof colors[keyof typeof rentalStatusColors];
-/**
- * The full color palette
- */
-export declare const colors: {
-    readonly ON_RENT: "ON_RENT";
-    readonly RETURNED: "RETURNED";
-    readonly AVAILABLE: "AVAILABLE";
-    readonly PICKUP_READY: "PICKUP_READY";
-    readonly TRANSFER: "TRANSFER";
-    readonly IN_REPAIR: "IN_REPAIR";
-    readonly OTHER_RENTAL_STATUS: "OTHER_RENTAL_STATUS";
-    readonly WORKING: "working";
-    readonly IDLE: "idle";
-    readonly STOPPED: "stopped";
-    readonly UNKNOWN: "unknown";
-    readonly GOOD: "good";
-    readonly LOW: "low";
-    readonly CRITICAL: "critical";
-    readonly INFO: "info";
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly DANGER: "danger";
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-    readonly ACCENT: "accent";
-    readonly NEUTRAL: "neutral";
-};
-export declare type Colors = typeof colors[keyof typeof colors];

package/constants/index.d.ts

@@ -1 +0,0 @@
-export * from "./colors";