@trackunit/react-components 0.1.267 → 0.1.269

package/index.cjs.js

@@ -1907,6 +1907,61 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
+const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
+const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
+    variants: {
+        color: {
+            primary: "text-primary-600",
+            secondary: "text-secondary-600",
+            accent: "text-accent-600",
+            neutral: "text-neutral-600",
+            info: "text-info-600",
+            success: "text-success-600",
+            warning: "text-warning-600",
+            danger: "text-danger-600",
+            black: "text-black",
+            white: "text-white",
+        },
+    },
+    defaultVariants: {
+        color: "neutral",
+    },
+});
+const cvaNoticeIcon = cssClassVarianceUtilities.cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
+    variants: {
+        color: {
+            primary: "text-primary-600",
+            secondary: "text-secondary-600",
+            accent: "text-accent-600",
+            neutral: "text-neutral-600",
+            info: "text-info-600",
+            success: "text-success-600",
+            warning: "text-warning-600",
+            danger: "text-danger-600",
+            black: "text-black",
+            white: "text-white",
+        },
+    },
+    defaultVariants: {
+        color: "neutral",
+    },
+});
+
+/**
+ * Notices are non-interactive elements that communicate information that the user needs to see, without directly prompting an action button.
+ *
+ * _**Do use** notices to communicate non-essential information that does not necessarily require action to be taken._
+ *
+ * _**Do not use** notices for essential information (use `<Alert/>` instead), or to communicate information related to the state of an asset (use `<Indicator/>` instead)._
+ 
+ * @param {NoticeProps} props - The props for the Notice component
+ * @returns {JSX.Element} Notice component
+ */
+const Notice = (_a) => {
+    var { dataTestId, icon, label, color = "neutral", withLabel = true, className } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withLabel", "className"]);
+    return (jsxRuntime.jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxRuntime.jsxs("div", Object.assign({ "aria-label": label, className: cvaNotice(), "data-testid": dataTestId }, rest, { children: [jsxRuntime.jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsxRuntime.jsx("div", { className: cvaNoticeLabel({ color }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] })) }));
+};
+
 const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
@@ -3059,6 +3114,7 @@ exports.MenuList = MenuList;
 exports.Modal = Modal;
 exports.ModalBackdrop = ModalBackdrop;
 exports.MoreMenu = MoreMenu;
+exports.Notice = Notice;
 exports.PackageNameStoryComponent = PackageNameStoryComponent;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;

package/index.esm.js

@@ -1876,6 +1876,61 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
+const cvaNotice = cvaMerge(["flex", "items-center"]);
+const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
+    variants: {
+        color: {
+            primary: "text-primary-600",
+            secondary: "text-secondary-600",
+            accent: "text-accent-600",
+            neutral: "text-neutral-600",
+            info: "text-info-600",
+            success: "text-success-600",
+            warning: "text-warning-600",
+            danger: "text-danger-600",
+            black: "text-black",
+            white: "text-white",
+        },
+    },
+    defaultVariants: {
+        color: "neutral",
+    },
+});
+const cvaNoticeIcon = cvaMerge(["rounded-full", "items-center", "justify-center", "flex", "relative"], {
+    variants: {
+        color: {
+            primary: "text-primary-600",
+            secondary: "text-secondary-600",
+            accent: "text-accent-600",
+            neutral: "text-neutral-600",
+            info: "text-info-600",
+            success: "text-success-600",
+            warning: "text-warning-600",
+            danger: "text-danger-600",
+            black: "text-black",
+            white: "text-white",
+        },
+    },
+    defaultVariants: {
+        color: "neutral",
+    },
+});
+
+/**
+ * Notices are non-interactive elements that communicate information that the user needs to see, without directly prompting an action button.
+ *
+ * _**Do use** notices to communicate non-essential information that does not necessarily require action to be taken._
+ *
+ * _**Do not use** notices for essential information (use `<Alert/>` instead), or to communicate information related to the state of an asset (use `<Indicator/>` instead)._
+ 
+ * @param {NoticeProps} props - The props for the Notice component
+ * @returns {JSX.Element} Notice component
+ */
+const Notice = (_a) => {
+    var { dataTestId, icon, label, color = "neutral", withLabel = true, className } = _a, rest = __rest(_a, ["dataTestId", "icon", "label", "color", "withLabel", "className"]);
+    return (jsx(Tooltip, { className: className, disabled: withLabel, label: label, placement: "bottom", children: jsxs("div", Object.assign({ "aria-label": label, className: cvaNotice(), "data-testid": dataTestId }, rest, { children: [jsx("div", { className: cvaNoticeIcon({ color }), "data-testid": dataTestId ? `${dataTestId}-icon` : "notice-icon", children: icon }), label !== undefined && withLabel ? (jsx("div", { className: cvaNoticeLabel({ color }), "data-testid": dataTestId ? `${dataTestId}-label` : "notice-label", children: label })) : null] })) }));
+};
+
 const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
@@ -3005,4 +3060,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

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

package/src/components/Notice/Notice.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
+import { CommonProps } from "../../common/CommonProps";
+export interface NoticeProps extends CommonProps {
+    /**
+     * The icon to be rendered inside the indicator component
+     */
+    icon: JSX.Element;
+    /**
+     * A color token used to style the icon and the icon background
+     */
+    color?: GeneralColors | IntentColors;
+    /**
+     * A text label to be displayed next to the icon
+     */
+    label?: string;
+    /**
+     * A boolean parameter to display or hide label and instead show as html title on hover, default value is true
+     */
+    withLabel?: boolean;
+}
+/**
+ * Notices are non-interactive elements that communicate information that the user needs to see, without directly prompting an action button.
+ *
+ * _**Do use** notices to communicate non-essential information that does not necessarily require action to be taken._
+ *
+ * _**Do not use** notices for essential information (use `<Alert/>` instead), or to communicate information related to the state of an asset (use `<Indicator/>` instead)._
+ 
+ * @param {NoticeProps} props - The props for the Notice component
+ * @returns {JSX.Element} Notice component
+ */
+export declare const Notice: ({ dataTestId, icon, label, color, withLabel, className, ...rest }: NoticeProps) => JSX.Element;

package/src/components/Notice/Notice.variants.d.ts

@@ -0,0 +1,7 @@
+export declare const cvaNotice: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaNoticeLabel: (props?: ({
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "black" | "white" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaNoticeIcon: (props?: ({
+    color?: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "black" | "white" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Notice/index.d.ts

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

package/src/components/index.d.ts

@@ -12,6 +12,7 @@ export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./Menu";
 export * from "./Modal";
+export * from "./Notice";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
 export * from "./Popover";