@trackunit/react-components 0.1.129 → 0.1.130
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs +2 -2
- package/index.js +2 -2
- package/package.json +1 -1
- package/src/components/PageHeader/PageHeader.d.ts +6 -1
package/index.cjs
CHANGED
|
@@ -37183,8 +37183,8 @@ const cvaPageHeaderChildContainer = cssClassVarianceUtilities.cvaMerge(["flex",
|
|
|
37183
37183
|
* @param {PageHeaderProps} props - The props for the PageHeader component
|
|
37184
37184
|
* @returns {JSX.Element} PageHeader component
|
|
37185
37185
|
*/
|
|
37186
|
-
const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }) => {
|
|
37187
|
-
return (jsxRuntime.jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeftIcon" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, link: link, children: description }))] }), tag && !showLoading && jsxRuntime.jsx(Tag, { dataTestId: dataTestId, children: tag }), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
|
|
37186
|
+
const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
|
|
37187
|
+
return (jsxRuntime.jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxRuntime.jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsxRuntime.jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsxRuntime.jsx(Icon, { name: "ArrowLeftIcon" }) })), jsxRuntime.jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsxRuntime.jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, link: link, children: description }))] }), tag && !showLoading && jsxRuntime.jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag }), showLoading && jsxRuntime.jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsxRuntime.jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
|
|
37188
37188
|
};
|
|
37189
37189
|
|
|
37190
37190
|
const cvaPagination = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
|
package/index.js
CHANGED
|
@@ -37156,8 +37156,8 @@ const cvaPageHeaderChildContainer = cvaMerge(["flex", "flex-wrap", "gap-x-6", "i
|
|
|
37156
37156
|
* @param {PageHeaderProps} props - The props for the PageHeader component
|
|
37157
37157
|
* @returns {JSX.Element} PageHeader component
|
|
37158
37158
|
*/
|
|
37159
|
-
const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }) => {
|
|
37160
|
-
return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, link: link, children: description }))] }), tag && !showLoading && jsx(Tag, { dataTestId: dataTestId, children: tag }), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
|
|
37159
|
+
const PageHeader = ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }) => {
|
|
37160
|
+
return (jsxs("div", { className: cvaPageHeader({ className: `${className} tu-page-header` }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaPageHeaderHeadingAccessoriesContainer(), "data-testid": dataTestId && `${dataTestId}-heading-container`, children: [jsxs("div", { className: cvaPageHeaderHeadingContainer(), children: [backTo && (jsx(IconButton, { to: backTo, color: "tertiary", variant: "transparent", size: "small", icon: jsx(Icon, { name: "ArrowLeftIcon" }) })), jsx("h1", { className: cvaPageHeaderHeading(), "data-testid": dataTestId && `${dataTestId}-heading`, children: title }), description && !showLoading && (jsx(Tip, { dataTestId: dataTestId && `${dataTestId}-tip`, iconProps: { name: "QuestionMarkCircleIcon" }, link: link, children: description }))] }), tag && !showLoading && jsx(Tag, { dataTestId: dataTestId, color: tagColor, children: tag }), showLoading && jsx(Spinner, { dataTestId: dataTestId && `${dataTestId}-spinner`, centering: "vertically" }), action] }), jsx("div", { className: cvaPageHeaderChildContainer(), children: children })] }));
|
|
37161
37161
|
};
|
|
37162
37162
|
|
|
37163
37163
|
const cvaPagination = cvaMerge(["flex", "items-center", "gap-1"]);
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
+
import { TagColors } from "../Tag";
|
|
3
4
|
export interface PageHeaderProps extends CommonProps {
|
|
4
5
|
/**
|
|
5
6
|
* Text to be displayed in the header.
|
|
@@ -23,6 +24,10 @@ export interface PageHeaderProps extends CommonProps {
|
|
|
23
24
|
* A string passed into the tag will render it using the tag component.
|
|
24
25
|
*/
|
|
25
26
|
tag?: string;
|
|
27
|
+
/**
|
|
28
|
+
* A theme color value can be used for tag component
|
|
29
|
+
*/
|
|
30
|
+
tagColor?: TagColors;
|
|
26
31
|
/**
|
|
27
32
|
* Whether spinner should be shown while loading the data.
|
|
28
33
|
*/
|
|
@@ -44,4 +49,4 @@ export interface PageHeaderProps extends CommonProps {
|
|
|
44
49
|
* @param {PageHeaderProps} props - The props for the PageHeader component
|
|
45
50
|
* @returns {JSX.Element} PageHeader component
|
|
46
51
|
*/
|
|
47
|
-
export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }: PageHeaderProps) => JSX.Element;
|
|
52
|
+
export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, tagColor, children, }: PageHeaderProps) => JSX.Element;
|