@trackunit/react-components 0.0.129 → 0.0.130

package/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+declare type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL";
+interface ActionButtonProps extends CommonProps {
+    /**
+     * The type of action performed when clicking the button.
+     */
+    type: ActionType;
+    /**
+     * The value to be passed into the button.
+     */
+    value?: string | null;
+    /**
+     * The onClick event.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+export declare const ActionButton: ({ type, value }: ActionButtonProps) => JSX.Element;
+export {};

package/components/ActionButton/index.d.ts

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

package/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./ActionButton";
 export * from "./Alert";
 export * from "./Badge";
 export * from "./BaseInput";

package/index.css

@@ -16,8 +16,7 @@
     rounded-lg
     cursor-pointer
     flex-none
-    py-1.5
-    px-3
+    p-2.5
     h-min
     drop-shadow
     focus:ring
@@ -46,7 +45,7 @@
   }
 
   &--small {
-    @apply py-1 px-2;
+    @apply p-2;
   }
 
   &--large {
@@ -161,6 +160,24 @@
       hover:bg-slate-600/10
       disabled:hover:bg-transparent;
   }
+
+  &__container {
+    @apply w-5
+      h-5
+      flex
+      justify-center
+      items-center
+      box-border;
+
+    &--small {
+      @apply w-4
+        h-4
+        flex
+        justify-center
+        items-center
+        box-border;
+    }
+  }
 }
 
 /* CSS related to the LAbel component */

package/index.js

@@ -287,12 +287,20 @@ const IconButton = React.forwardRef((_a, ref) => {
     disabled: disabled || loading,
     ref: ref
   }, rest, {
-    children: loading ? jsx(Spinner, {}) : icon
+    children: jsx(IconContainer$2, {
+      children: loading ? jsx(Spinner, {
+        size: size
+      }) : icon
+    })
   }));
 });
 const StyledButton = tw(Button)`
   ${p => p.$circular ? tws`tu-button--rounded` : null}
 `;
+const IconContainer$2 = tw.div`
+  tu-button__container
+  ${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.
@@ -465,6 +473,69 @@ const Root$3 = tw.span`
 }}
 `;
 
+/**
+ * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
+ *
+ * @param {ActionButtonProps} props - The props for the ActionButton component
+ * @returns {JSX.Element} ActionButton component
+ */
+
+const ActionButton = ({
+  type,
+  value
+}) => {
+  const getIconName = () => {
+    switch (type) {
+      case "PHONE_NUMBER":
+        return "PhoneOutgoingIcon";
+
+      case "WEB_ADDRESS":
+        return "ExternalLinkIcon";
+
+      case "EMAIL":
+      default:
+        return "MailIcon";
+    }
+  };
+
+  const ButtonAction = () => {
+    switch (type) {
+      case "EMAIL":
+        return window.open(`mailto:${value}`);
+
+      case "WEB_ADDRESS":
+        if (value) {
+          return window.open(value, "_blank", "noopener,noreferrer");
+        }
+
+        return null;
+
+      case "PHONE_NUMBER":
+      default:
+        return window.open(`tel:${value}`);
+    }
+  };
+
+  return jsx(ActionContainer, {
+    children: jsx(StyledIconButton, {
+      dataTestId: "testIconButtonId",
+      size: "small",
+      intent: "tertiary",
+      icon: jsx(Icon$1, {
+        size: "small",
+        name: getIconName()
+      }),
+      onClick: ButtonAction
+    })
+  });
+};
+const ActionContainer = tw.div`
+  tu-action-container
+`;
+const StyledIconButton = tw(IconButton)`
+  tu-action-button
+`;
+
 /**
  * The StarButton component is used for favorite actions or similar.
  *
@@ -5131,4 +5202,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { 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, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, 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, 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, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, intentColors, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.129",
+  "version": "0.0.130",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {