@trackunit/react-components 0.0.134 → 0.0.136

package/components/Card/CardHeader.d.ts

@@ -14,7 +14,7 @@ export interface CardHeaderProps extends CommonProps {
      */
     headingVariant?: HeadingVariant;
     /** Adds an extra heading below the main heading. */
-    subHeading?: string;
+    subHeading?: string | React.ReactNode;
     /**
      * Items to render next to the heading
      */

package/components/Indicator/Indicator.d.ts

@@ -18,6 +18,14 @@ export interface IndicatorProps extends CommonProps {
      * A boolean parameter to display or hide icon background, default value is true
      */
     withBackground?: boolean;
+    /**
+     * A boolean parameter to display or hide label and instead show as html title on hover, default value is true
+     */
+    withLabel?: boolean;
+    /**
+     * A boolean parameter to make the indicator ping thus drawing more attention, default value is false
+     */
+    ping?: boolean;
 }
 /**
  * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
@@ -31,4 +39,4 @@ export interface IndicatorProps extends CommonProps {
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component
  */
-export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, ...rest }: IndicatorProps) => JSX.Element;
+export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, ...rest }: IndicatorProps) => JSX.Element;

package/components/Menu/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./MenuButton";
 export * from "./MenuItem";
 export * from "./MenuList";

package/constants/colors.d.ts

@@ -43,10 +43,31 @@ export declare const activityColors: {
     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";

package/index.js

@@ -348,11 +348,25 @@ const activityColors = {
   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({}, generalColors), intentColors), criticalityColors), activityColors);
+const colors = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, generalColors), intentColors), criticalityColors), activityColors), rentalStatusColors);
 
 const IconSizeClassMap = {
   small: tws`tu-icon--small`,
@@ -1368,7 +1382,7 @@ const Container$7 = tw.div`
   tu-card__header
 `;
 const HeadingContainer = tw.div`
-  tu-card__header-heading-container 
+  tu-card__header-heading-container
 `;
 
 /**
@@ -2640,20 +2654,26 @@ const Indicator$1 = _a => {
     icon,
     label,
     color = colors.UNKNOWN,
-    withBackground = true
+    withBackground = true,
+    withLabel = true,
+    ping = false
   } = _a,
-      rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground"]);
+      rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping"]);
 
   return jsxs(Container$4, Object.assign({
     "$color": color,
     "data-testid": dataTestId
   }, rest, {
-    children: [jsx(IconBackground, Object.assign({
+    title: !withLabel ? label : undefined
+  }, {
+    children: [jsxs(IconBackground, Object.assign({
       "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background",
       "$withBackground": withBackground
     }, {
-      children: icon
-    })), label !== undefined && jsx(Label$2, Object.assign({
+      children: [ping && jsx(Ping, {
+        "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping"
+      }), icon]
+    })), label !== undefined && withLabel && jsx(Label$2, Object.assign({
       "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label"
     }, {
       children: label
@@ -2725,6 +2745,9 @@ const IconBackground = tw.div`
 const Label$2 = tw.div`
   tu-indicator__label
 `;
+const Ping = tw.span`
+  tu-indicator__ping
+`;
 
 /**
  * The LegendItem component is used to show form legends.
@@ -2781,42 +2804,6 @@ const Label$1 = tw.span`
   text-sm
 `;
 
-/**
- * The MenuButton component.
- *
- * @param {IMobileButton} props - The props for the MenuButton component
- * @returns {JSX.Element} MenuButton component
- */
-
-const MenuButton = ({
-  onClick,
-  className,
-  dataTestId
-}) => {
-  return jsx(MobileIconButton, {
-    icon: jsx(Icon$1, {
-      name: "DotsHorizontalIcon",
-      size: "small"
-    }),
-    size: "small",
-    circular: true,
-    onClick: onClick,
-    className: className,
-    "data-testid": dataTestId
-  });
-};
-const MobileIconButton = tw(IconButton)`
-  !text-gray-800
-  !bg-white
-  active:outline-gray-400
-  active:!shadow-none
-  focus:!shadow-none
-  shadow-lg
-  !border
-  !border-solid
-  !border-gray-300
-`;
-
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
  *
@@ -5385,4 +5372,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$3 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, 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, 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, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$3 as Label, LegendItem, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, 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 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.134",
+  "version": "0.0.136",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/css-core": "0.0.48",
+    "@trackunit/css-core": "0.0.49",
     "@trackunit/tailwind-styled-components": "0.0.43",
     "react": "17.0.1",
     "@trackunit/ui-design-tokens": "0.0.42",

package/components/Menu/MenuButton.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-interface IMobileButton {
-    onClick: () => void;
-    className?: string;
-    dataTestId?: string;
-}
-/**
- * The MenuButton component.
- *
- * @param {IMobileButton} props - The props for the MenuButton component
- * @returns {JSX.Element} MenuButton component
- */
-export declare const MenuButton: ({ onClick, className, dataTestId }: IMobileButton) => JSX.Element;
-export {};