@trackunit/react-form-components 0.0.419 → 0.0.421
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.js
CHANGED
|
@@ -888,12 +888,12 @@ const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
|
|
|
888
888
|
* A card version of a radio button that includes an icon, headings and a description.
|
|
889
889
|
*/
|
|
890
890
|
const OptionCard = React.forwardRef((_a, ref) => {
|
|
891
|
-
var { icon, heading, subheading, description, disabled, id, value, className, dataTestId, customImage } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId", "customImage"]);
|
|
891
|
+
var { icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "contentClassName", "dataTestId", "customImage"]);
|
|
892
892
|
const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + uuid.v4();
|
|
893
893
|
return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", Object.assign({ className: "peer absolute h-0 w-0 opacity-0", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled &&
|
|
894
894
|
icon &&
|
|
895
895
|
!customImage &&
|
|
896
|
-
React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), disabled && customImage && jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), !disabled && !customImage && icon, !disabled && customImage && jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), heading && (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })), (subheading || description) && (jsxRuntime.jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })), description && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, type: "span", children: description }))] }))] })] }));
|
|
896
|
+
React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), disabled && customImage && jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), !disabled && !customImage && icon, !disabled && customImage && jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), heading && (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })), (subheading || description) && (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })), description && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, type: "span", children: description }))] }))] })] }));
|
|
897
897
|
});
|
|
898
898
|
|
|
899
899
|
/**
|
package/index.esm.js
CHANGED
|
@@ -858,12 +858,12 @@ const cvaOptionCardContainer = cvaMerge(["contents"]);
|
|
|
858
858
|
* A card version of a radio button that includes an icon, headings and a description.
|
|
859
859
|
*/
|
|
860
860
|
const OptionCard = forwardRef((_a, ref) => {
|
|
861
|
-
var { icon, heading, subheading, description, disabled, id, value, className, dataTestId, customImage } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId", "customImage"]);
|
|
861
|
+
var { icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "contentClassName", "dataTestId", "customImage"]);
|
|
862
862
|
const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + v4();
|
|
863
863
|
return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", Object.assign({ className: "peer absolute h-0 w-0 opacity-0", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled &&
|
|
864
864
|
icon &&
|
|
865
865
|
!customImage &&
|
|
866
|
-
cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), disabled && customImage && jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), !disabled && !customImage && icon, !disabled && customImage && jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), heading && (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent(), children: [subheading && (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })), description && (jsx(Text, { align: "center", subtle: true, type: "span", children: description }))] }))] })] }));
|
|
866
|
+
cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), disabled && customImage && jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), !disabled && !customImage && icon, !disabled && customImage && jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }), heading && (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })), (subheading || description) && (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading && (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })), description && (jsx(Text, { align: "center", subtle: true, type: "span", children: description }))] }))] })] }));
|
|
867
867
|
});
|
|
868
868
|
|
|
869
869
|
/**
|
package/package.json
CHANGED
|
@@ -21,6 +21,10 @@ export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
|
|
|
21
21
|
* A custom image to be displayed instead of icon (ex logo)
|
|
22
22
|
*/
|
|
23
23
|
customImage?: CustomImage;
|
|
24
|
+
/**
|
|
25
|
+
* Styles for the OptionCard content.
|
|
26
|
+
*/
|
|
27
|
+
contentClassName?: string;
|
|
24
28
|
}
|
|
25
29
|
interface CustomImage {
|
|
26
30
|
src: string;
|