@trackunit/react-form-components 0.0.327 → 0.0.329

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.
Files changed (4) hide show
  1. package/index.cjs.js +5 -2
  2. package/index.esm.js +5 -2
  3. package/package.json +1 -1
  4. package/src/components/OptionCard/OptionCard.d.ts +9 -0
package/index.cjs.js CHANGED
@@ -786,9 +786,12 @@ const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
786
786
  * A card version of a radio button that includes an icon, headings and a description.
787
787
  */
788
788
  const OptionCard = React.forwardRef((_a, ref) => {
789
- var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
789
+ 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"]);
790
790
  const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + uuid.v4();
791
- return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", Object.assign({ className: "peer hidden", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled && icon && React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, 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 }))] }))] })] }));
791
+ return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", Object.assign({ className: "peer hidden", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled &&
792
+ icon &&
793
+ !customImage &&
794
+ 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 }))] }))] })] }));
792
795
  });
793
796
 
794
797
  /**
package/index.esm.js CHANGED
@@ -756,9 +756,12 @@ const cvaOptionCardContainer = cvaMerge(["contents"]);
756
756
  * A card version of a radio button that includes an icon, headings and a description.
757
757
  */
758
758
  const OptionCard = forwardRef((_a, ref) => {
759
- var { icon, heading, subheading, description, disabled, id, value, className, dataTestId } = _a, rest = __rest(_a, ["icon", "heading", "subheading", "description", "disabled", "id", "value", "className", "dataTestId"]);
759
+ 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"]);
760
760
  const htmlForId = id !== null && id !== void 0 ? id : "option-card-" + v4();
761
- return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", Object.assign({ className: "peer hidden", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled && icon && cloneElement(icon, { className: `${icon.props.className} text-secondary-400` }), !disabled && icon, 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 }))] }))] })] }));
761
+ return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", Object.assign({ className: "peer hidden", id: htmlForId, ref: ref, type: "radio", value: value }, rest)), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), htmlFor: htmlForId, children: [disabled &&
762
+ icon &&
763
+ !customImage &&
764
+ 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 }))] }))] })] }));
762
765
  });
763
766
 
764
767
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-components",
3
- "version": "0.0.327",
3
+ "version": "0.0.329",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
package/src/components/OptionCard/OptionCard.d.ts CHANGED
@@ -17,8 +17,17 @@ export interface IOptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
17
17
  * Descriptive text displayed inside the OptionCard.
18
18
  */
19
19
  description?: string | JSX.Element;
20
+ /**
21
+ * A custom image to be displayed instead of icon (ex logo)
22
+ */
23
+ customImage?: CustomImage;
24
+ }
25
+ interface CustomImage {
26
+ src: string;
27
+ className: string;
20
28
  }
21
29
  /**
22
30
  * A card version of a radio button that includes an icon, headings and a description.
23
31
  */
24
32
  export declare const OptionCard: import("react").ForwardRefExoticComponent<IOptionCardProps & import("react").RefAttributes<HTMLInputElement>>;
33
+ export {};