@trackunit/react-components 0.2.3 → 0.3.1

package/index.cjs.js

@@ -1703,7 +1703,7 @@ const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
     "block",
     "border",
     "border-solid",
-    "border-secondary-200",
+    "border-secondary-300",
     "rounded-md",
     "overflow-hidden",
 ]);
@@ -1712,8 +1712,8 @@ const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
     "items-center",
     "justify-between",
     "cursor-pointer",
-    "bg-secondary-50",
-    "hover:bg-secondary-200",
+    "bg-white",
+    "hover:bg-secondary-100",
     "px-3",
     "gap-4",
     "py-1.5",
@@ -1734,9 +1734,7 @@ const cvaCollapseAnimated = cssClassVarianceUtilities.cvaMerge(["overflow-y-hidd
         expanded: false,
     },
 });
-const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge([
-    "transition-transform"
-], {
+const cvaChevronIcon = cssClassVarianceUtilities.cvaMerge(["transition-transform"], {
     variants: {
         expanded: {
             true: "rotate-90",
@@ -4094,7 +4092,7 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge(["self-center", "fl
 
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
- 
+ *
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
@@ -4289,17 +4287,17 @@ const cvaPageHeaderLink = cssClassVarianceUtilities.cvaMerge([
  * Pageheader component is used to display a page header.
  *
  * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
- 
+ *
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
+const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, descriptionIcon, linkText = "Help Center Article", }) => {
     return (jsxRuntime.jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
         }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeader(), children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer({
                             actionPosition: actionPosition ? actionPosition : null,
-                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: backTo }) })) : undefined, jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsx(Tooltip, { className: "ml-4 mt-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsxRuntime.jsx(Tag, { className: "ml-4 mt-1", color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxRuntime.jsxs(reactRouter.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsxRuntime.jsx("div", { children: action })] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsxRuntime.jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: backTo }) })) : undefined, jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsxRuntime.jsx(Tooltip, { className: "ml-4 mt-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: descriptionIcon !== null && descriptionIcon !== void 0 ? descriptionIcon : "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsxRuntime.jsx(Tag, { className: "ml-4 mt-1", color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxRuntime.jsxs(reactRouter.Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsxRuntime.jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsxRuntime.jsx("div", { children: action })] }), children ? jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);

package/index.esm.js

@@ -1683,7 +1683,7 @@ const cvaCollapse = cvaMerge([
     "block",
     "border",
     "border-solid",
-    "border-secondary-200",
+    "border-secondary-300",
     "rounded-md",
     "overflow-hidden",
 ]);
@@ -1692,8 +1692,8 @@ const cvaCollapseHeader = cvaMerge([
     "items-center",
     "justify-between",
     "cursor-pointer",
-    "bg-secondary-50",
-    "hover:bg-secondary-200",
+    "bg-white",
+    "hover:bg-secondary-100",
     "px-3",
     "gap-4",
     "py-1.5",
@@ -1714,9 +1714,7 @@ const cvaCollapseAnimated = cvaMerge(["overflow-y-hidden", "transition-all"], {
         expanded: false,
     },
 });
-const cvaChevronIcon = cvaMerge([
-    "transition-transform"
-], {
+const cvaChevronIcon = cvaMerge(["transition-transform"], {
     variants: {
         expanded: {
             true: "rotate-90",
@@ -4074,7 +4072,7 @@ const cvaMenuItemPrefix = cvaMerge(["self-center", "flex-grow-0", "text-slate-40
 
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
- 
+ *
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
@@ -4269,17 +4267,17 @@ const cvaPageHeaderLink = cvaMerge([
  * Pageheader component is used to display a page header.
  *
  * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
- 
+ *
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText = "Help Center Article", }) => {
+const PageHeader = ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, descriptionIcon, linkText = "Help Center Article", }) => {
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: !tabsList,
         }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeader(), children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer({
                             actionPosition: actionPosition ? actionPosition : null,
-                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsx(Link, { to: backTo }) })) : undefined, jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "flex flex-row items-center", children: [jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsx(Tooltip, { className: "ml-4 mt-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsx(Tag, { className: "ml-4 mt-1", color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsx("div", { children: action })] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
+                        }), "data-testid": dataTestId ? `${dataTestId}-heading-container` : undefined, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo ? (jsx(Button, { asChild: true, className: "bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral", children: jsx(Link, { to: backTo }) })) : undefined, jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "flex flex-row items-center", children: [jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId ? `${dataTestId}-heading` : undefined, children: title }), description && !showLoading ? (jsx(Tooltip, { className: "ml-4 mt-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, iconProps: { name: descriptionIcon !== null && descriptionIcon !== void 0 ? descriptionIcon : "QuestionMarkCircle" }, label: description, placement: "bottom" })) : undefined, tag && !showLoading ? (jsx(Tag, { className: "ml-4 mt-1", color: tagColor, dataTestId: dataTestId ? `${dataTestId}-tag` : undefined, children: tag })) : undefined] }), link ? (jsxs(Link, { className: cvaPageHeaderLink(), "data-testid": "tooltip-link", target: "_blank", to: link, children: [linkText, jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" })] })) : undefined] }), showLoading ? (jsx(Spinner, { centering: "vertically", dataTestId: dataTestId ? `${dataTestId}-spinner` : undefined })) : null] }), jsx("div", { children: action })] }), children ? jsx("div", { className: cvaPageHeaderChildContainer(), children: children }) : null] }), tabsList] }));
 };
 
 const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);

package/package.json

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

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -55,7 +55,7 @@ export interface MenuItemProps extends CommonProps {
 }
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
- 
+ *
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */

package/src/components/PageHeader/PageHeader.d.ts

@@ -1,3 +1,4 @@
+import { IconName } from "@trackunit/ui-icons";
 import React, { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { TabListProps } from "../Tabs/TabList";
@@ -50,15 +51,19 @@ export interface PageHeaderProps extends CommonProps {
      * The link to the previous page which will be rendered inside an IconButton component to the left of the heading.
      */
     backTo?: string;
+    /**
+     * The icon to be used in the description.
+     */
+    descriptionIcon?: IconName;
     tabsList?: ReactElement<TabListProps>;
 }
 /**
  * Pageheader component is used to display a page header.
  *
  * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
- 
+ *
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {JSX.Element} PageHeader component
  */
-export declare const PageHeader: ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, linkText, }: PageHeaderProps) => ReactElement;
+export declare const PageHeader: ({ className, dataTestId, action, actionPosition, showLoading, description, link, title, tag, backTo, tagColor, children, tabsList, descriptionIcon, linkText, }: PageHeaderProps) => ReactElement;
 export {};