@trackunit/react-components 0.0.135 → 0.0.136

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/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`,
@@ -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.
@@ -5349,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, 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.135",
+  "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",