@trackunit/react-components 0.0.54 → 0.0.56-abo-fuel-consumption-rest-api.1

package/components/Badge/Badge.d.ts

@@ -2,18 +2,7 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export declare type BadgeSize = "default" | "large";
-declare type BadgeVariant = "badge" | "pill" | "tag";
-interface TagProps extends BaseBadgeProps {
-    /**
-     * The name of the variant.
-     */
-    variant: "tag";
-    /**
-     * A handler for a click event triggered on x icon
-     * if not passed then x icon won't be visible
-     */
-    onClose?: () => void;
-}
+declare type BadgeVariant = "badge" | "pill";
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
@@ -25,9 +14,8 @@ interface BaseBadgeProps extends CommonProps {
      */
     subtle?: boolean;
     /**
-     * Whether badge should be displayed as a pill, tag or badge.
+     * Whether badge should be displayed as a pill or badge.
      * For the pill variant, numeric values above 99 will be displayed as 99+.
-     * Tag will display x icon if you provide onClose handler.
      * Badge is subtle by default.
      */
     variant?: BadgeVariant;
@@ -46,7 +34,7 @@ interface BaseBadgeProps extends CommonProps {
      */
     size?: BadgeSize;
 }
-export declare type BadgeProps = BaseBadgeProps | TagProps;
+export declare type BadgeProps = BaseBadgeProps;
 /**
  * The Badge component us used to display states or similar short informative text.
  *

package/components/Icon/Icon.d.ts

@@ -33,6 +33,12 @@ export interface IconProps extends CommonProps {
      */
     fillColor?: string;
     forwardedRef?: React.RefObject<HTMLSpanElement>;
+    /**
+     * Custom styles object used to override existing styles or add some extra styling
+     *
+     * @memberof IconProps
+     */
+    style?: Record<string, string>;
 }
 /**
  * The Icon component is ued to display an Icon.
@@ -40,4 +46,4 @@ export interface IconProps extends CommonProps {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, fillColor, type, forwardedRef, }: IconProps) => JSX.Element | null;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }: IconProps) => JSX.Element | null;

package/components/Tag/Tag.d.ts

@@ -0,0 +1,44 @@
+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 {
+    /**
+     * 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
+     *
+     */
+    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.
+     *
+     */
+    children?: React.ReactNode;
+    /**
+     * Size of the tag.
+     *
+     */
+    size?: TagSize;
+}
+/**
+ * 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, ...rest }: TagProps) => JSX.Element;
+export {};

package/components/Tag/index.d.ts

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

package/components/index.d.ts

@@ -28,6 +28,7 @@ export * from "./Select";
 export * from "./SkeletonLines";
 export * from "./Spacer";
 export * from "./Spinner";
+export * from "./Tag";
 export * from "./Text";
 export * from "./TextArea";
 export * from "./TextField";

package/index.js

@@ -350,6 +350,7 @@ const Icon$1 = ({
   onClick,
   fillColor,
   type,
+  style,
   forwardedRef
 }) => {
   const iconSizeClassName = React.useMemo(() => IconSizeClassMap[size], [size]);
@@ -381,9 +382,9 @@ const Icon$1 = ({
       children: jsx(IconComponent, {
         "data-testid": `${dataTestId}-${name}`,
         className: `${iconSizeClassName} ${colorClassNames} ${className} ${name} aspect-square`,
-        style: fillColor ? {
+        style: fillColor ? Object.assign(Object.assign({}, style), {
           fill: fillColor
-        } : {}
+        }) : Object.assign({}, style)
       })
     }))
   }));
@@ -514,7 +515,7 @@ const Text = ({
   className,
   dataTestId
 }) => {
-  return jsx(StyledText$3, Object.assign({
+  return jsx(StyledText$4, Object.assign({
     "$as": type,
     className: className,
     "$align": align,
@@ -573,7 +574,7 @@ const getTextAlignment = () => ({
   return alignments[$align];
 };
 
-const StyledText$3 = tw.text`
+const StyledText$4 = tw.text`
   tu-text
   ${getFontColor$1()}
   ${p => p.$italicize ? tws`tu-text--italic` : ""}
@@ -681,7 +682,7 @@ const Alert = ({
     ref: ref,
     role: "alert"
   }, {
-    children: [jsx(IconContainer, Object.assign({
+    children: [jsx(IconContainer$1, Object.assign({
       "$inline": inline
     }, {
       children: getIconFromIntent()
@@ -757,7 +758,7 @@ const RightAligned = tw.div`
   alert__right-aligned
   ${p => p.$inline ? tws`alert__right-aligned--inline` : null}
 `;
-const IconContainer = tw.div`
+const IconContainer$1 = tw.div`
   alert__icon-container
   ${p => p.$inline ? tws`alert__icon-container--inline` : null}
 `;
@@ -778,49 +779,36 @@ const Badge = _a => {
     color = "neutral",
     subtle = false,
     className,
-    variant = "badge",
+    variant = "pill",
     dataTestId,
     children,
     size = "default"
-  } = _a,
-      rest = __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
+  } = _a;
+      __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
 
   const isPill = variant === "pill";
-  const tagProps = rest;
-  return jsxs(StyledText$2, Object.assign({
+  return jsx(StyledText$3, Object.assign({
     "$variant": variant,
     className: className,
     "$color": color,
     "$size": size,
     "$subtle": subtle ? subtle : isPill,
     "data-testid": dataTestId,
-    "$as": "span",
-    "$withXIcon": tagProps.onClose ? true : false
+    "$as": "span"
   }, {
-    children: [isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children, variant === "tag" && tagProps.onClose && jsx(StyledIcon, {
-      name: "XCircleIcon",
-      dataTestId: dataTestId + "Icon",
-      onClick: tagProps.onClose,
-      type: "solid",
-      size: size === "default" ? "normal" : "large"
-    })]
+    children: isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children
   }));
 };
 
-const getSizeModifierClass = () => ({
+const getSizeModifierClass$1 = () => ({
   $size,
-  $variant,
-  $withXIcon
+  $variant
 }) => {
   const sizeModifierClass = {
     large: tws`badge--large`,
     default: ""
   };
-  const tagSizeModifierClass = {
-    large: $withXIcon ? tws`tag--icon tag--icon-large` : tws`tag--icon tag--large`,
-    default: $withXIcon ? tws`tag--icon tag--icon-small` : ""
-  };
-  return $variant === "tag" ? tagSizeModifierClass[$size] : sizeModifierClass[$size];
+  return sizeModifierClass[$size];
 };
 
 const getBadgeModifierClass = () => ({
@@ -846,15 +834,12 @@ const getBadgeModifierClass = () => ({
   return colorClasses[$color];
 };
 
-const StyledText$2 = tw.text`
+const StyledText$3 = tw.text`
   ${p => {
   switch (p.$variant) {
     case "badge":
       return tws`badge`;
 
-    case "tag":
-      return tws`badge--tag`;
-
     case "pill":
       return tws`badge--pill`;
 
@@ -863,10 +848,7 @@ const StyledText$2 = tw.text`
   }
 }}
   ${getBadgeModifierClass()}
-  ${getSizeModifierClass()}
-`;
-const StyledIcon = tw(Icon$1)`
-tag__icon
+  ${getSizeModifierClass$1()}
 `;
 
 /**
@@ -2086,7 +2068,7 @@ const PopoverListItem = ({
   }, {
     children: [prefix && jsx("div", {
       children: prefix
-    }), jsx(StyledText$1, Object.assign({
+    }), jsx(StyledText$2, Object.assign({
       weight: selected ? "bold" : "default",
       "$selected": selected
     }, {
@@ -2111,7 +2093,7 @@ const PopoverListItem = ({
     })) : content
   }));
 };
-const StyledText$1 = tw(Text)`
+const StyledText$2 = tw(Text)`
   ${p => p.$selected ? tws`text-primary-600` : tws`text-neutral-600`}
   group-hover:text-primary-500
 `;
@@ -2148,7 +2130,7 @@ const PopoverTitle = ({
     className: className,
     "data-testid": dataTestId
   }, {
-    children: [jsx(StyledText, Object.assign({
+    children: [jsx(StyledText$1, Object.assign({
       type: "div",
       subtle: true,
       size: "small",
@@ -2172,7 +2154,7 @@ const Container$5 = tw.div`
       mb-1
     ` : null}
 `;
-const StyledText = tw(Text)`
+const StyledText$1 = tw(Text)`
   flex-1
   text-neutral-500
 `;
@@ -3868,6 +3850,93 @@ const SkeletonLine = tw.div`
 `;
 SkeletonLines.displayName = "SkeletonLines";
 
+/**
+ * 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
+ */
+
+const Tag = _a => {
+  var {
+    className,
+    dataTestId,
+    children,
+    size = "default",
+    onClose,
+    color = "primary"
+  } = _a;
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+
+  return jsxs(StyledText, Object.assign({
+    className: className,
+    "$size": size,
+    "data-testid": dataTestId,
+    "$as": "span",
+    "$color": color,
+    "$withXIcon": !!onClose
+  }, {
+    children: [children, onClose && jsx(IconContainer, Object.assign({
+      onClick: onClose
+    }, {
+      children: jsx(Icon$1, {
+        name: "XCircleIcon",
+        dataTestId: dataTestId + "Icon",
+        type: "solid",
+        style: {
+          "-webkit-transition": "-webkit-transform 0.150s"
+        },
+        className: size === "default" ? tws`tag__icon` : tws`tag__icon tag__icon--small`
+      })
+    }))]
+  }));
+};
+
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
+}) => {
+  const tagSizeModifierClass = {
+    default: $withXIcon ? tws`tag--withIcon ` : tws` `,
+    small: $withXIcon ? tws`tag--small tag--withIcon` : tws`tag--small`
+  };
+  return tagSizeModifierClass[$size];
+};
+
+const getColorModifierClass = () => ({
+  $color
+}) => {
+  const colorClasses = {
+    primary: tws`tag--primary`,
+    accent: tws`tag--accent`,
+    success: tws`tag--success`,
+    danger: tws`tag--danger`,
+    warning: tws`tag--warning`,
+    info: tws`tag--info`,
+    neutral: tws`tag--neutral`,
+    good: tws`tag--good`,
+    low: tws`tag--low`,
+    critical: tws`tag--critical`,
+    working: tws`tag--working`,
+    idle: tws`tag--idle`,
+    stopped: tws`tag--stopped`,
+    unknown: tws`tag--unknown`
+  };
+  return colorClasses[$color];
+};
+
+const StyledText = tw.text`
+  tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+flex
+self-center	
+`;
+
 const TextArea = React.forwardRef(({
   id,
   name,
@@ -4269,4 +4338,4 @@ const useTimeout = ({
   };
 };
 
-export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$2 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.54",
+  "version": "0.0.56-abo-fuel-consumption-rest-api.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "MIT",
   "dependencies": {
-    "@trackunit/css-core": "0.0.39",
-    "@trackunit/tailwind-styled-components": "0.0.37",
+    "@trackunit/css-core": "0.0.40-abo-fuel-consumption-rest-api.1",
+    "@trackunit/tailwind-styled-components": "0.0.38-abo-fuel-consumption-rest-api.1",
     "react": "17.0.1",
-    "@trackunit/ui-design-tokens": "0.0.36",
+    "@trackunit/ui-design-tokens": "0.0.37-abo-fuel-consumption-rest-api.1",
     "echarts-for-react": "^3.0.2",
     "uuid": "^8.3.2",
     "@react-spring/web": "^9.4.4",
     "react-use": "^17.3.2",
     "react-day-picker": "^8.0.3",
     "date-fns": "^2.28.0",
-    "@trackunit/ui-icons": "0.0.36",
+    "@trackunit/ui-icons": "0.0.37-abo-fuel-consumption-rest-api.1",
     "react-useportal": "^1.0.16",
     "react-helmet": "^6.1.0",
     "@popperjs/core": "^2.11.4",