@trackunit/react-components 0.1.25 → 0.1.26
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.js
CHANGED
|
@@ -705,7 +705,7 @@ const StyledHeading = tw.div `
|
|
|
705
705
|
* @returns {JSX.Element} CardHeader component
|
|
706
706
|
*/
|
|
707
707
|
const CardHeader = ({ heading, headingVariant = "primary", subHeading, onClose, dataTestId, className, children, accessories, density, extraClassName, hideSeparator = false, }) => {
|
|
708
|
-
return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), className: "
|
|
708
|
+
return (jsx(Root$8, Object.assign({ dataTestId: dataTestId, className: className, "$hideSeparator": hideSeparator, density: density }, { children: jsxs(Container$6, { children: [jsxs("div", Object.assign({ className: extraClassName }, { children: [jsxs(HeadingContainer$1, { children: [jsx(Heading$1, Object.assign({ className: "self-center", variant: headingVariant }, { children: heading })), accessories] }), subHeading && (jsx(Heading$1, Object.assign({ subtle: true, variant: "subtitle" }, { children: subHeading }))), children] })), onClose && (jsx(IconButton, { dataTestId: "card-header-close-button", variant: "transparent", color: "secondary", onClick: onClose, icon: jsx(Icon, { name: "XIcon", size: "small" }), className: "!h-min" }))] }) })));
|
|
709
709
|
};
|
|
710
710
|
const Root$8 = twx(DensityContainer) `
|
|
711
711
|
tu-card__header-density-container
|
|
@@ -3011,7 +3011,7 @@ const GridArea = ({ area, dataTestId, className, children }) => (jsx("section",
|
|
|
3011
3011
|
* @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
|
|
3012
3012
|
* @returns {JSX.Element} IntrinsicallyResponsiveGrid component
|
|
3013
3013
|
*/
|
|
3014
|
-
const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", gap = "auto", dataTestId, className, }) => (jsx(Layout$2, Object.assign({ "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$occupation": occupation, className: className }, { children: children })));
|
|
3014
|
+
const IntrinsicallyResponsiveGrid = ({ children, occupation = "auto-fill", minColumnWidth = "md", rowHeight = "1fr", gap = "auto", dataTestId, className, }) => (jsx(Layout$2, Object.assign({ "$minColumnWidth": minColumnWidth, "data-testid": dataTestId, "$gap": gap, "$rowHeight": rowHeight, "$occupation": occupation, className: className }, { children: children })));
|
|
3015
3015
|
const Layout$2 = tw.span `
|
|
3016
3016
|
tu-layout-IntrinsicallyResponsiveGrid
|
|
3017
3017
|
${({ $occupation }) => {
|
|
@@ -3065,6 +3065,16 @@ const Layout$2 = tw.span `
|
|
|
3065
3065
|
return tws `tu-gap-responsive`;
|
|
3066
3066
|
}
|
|
3067
3067
|
}};
|
|
3068
|
+
|
|
3069
|
+
${({ $rowHeight }) => {
|
|
3070
|
+
switch ($rowHeight) {
|
|
3071
|
+
case "auto":
|
|
3072
|
+
return tws `tu-layout-IntrinsicallyResponsiveGrid--row-auto`;
|
|
3073
|
+
case "1fr":
|
|
3074
|
+
default:
|
|
3075
|
+
return tws `tu-layout-IntrinsicallyResponsiveGrid--row-1fr`;
|
|
3076
|
+
}
|
|
3077
|
+
}};
|
|
3068
3078
|
`;
|
|
3069
3079
|
|
|
3070
3080
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CommonProps } from "../../common/CommonProps";
|
|
3
3
|
type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
|
|
4
|
+
type RowHeight = "auto" | "1fr";
|
|
4
5
|
type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
|
|
5
6
|
type Occupation = "auto-fill" | "auto-fit";
|
|
6
7
|
interface IntrinsicallyResponsiveGridProps extends CommonProps {
|
|
@@ -14,6 +15,7 @@ interface IntrinsicallyResponsiveGridProps extends CommonProps {
|
|
|
14
15
|
*/
|
|
15
16
|
occupation?: Occupation;
|
|
16
17
|
minColumnWidth?: ColumnWidth;
|
|
18
|
+
rowHeight?: RowHeight;
|
|
17
19
|
/**
|
|
18
20
|
* The gap size between children
|
|
19
21
|
*/
|
|
@@ -26,5 +28,5 @@ interface IntrinsicallyResponsiveGridProps extends CommonProps {
|
|
|
26
28
|
* @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
|
|
27
29
|
* @returns {JSX.Element} IntrinsicallyResponsiveGrid component
|
|
28
30
|
*/
|
|
29
|
-
export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
|
|
31
|
+
export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, rowHeight, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
|
|
30
32
|
export {};
|