pixelize-design-library 2.1.36 → 2.1.38

package/dist/Components/ProductCard/ProductCard.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ProductCardProps } from './ProductCardProps';
-declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, onAddToCart, batch, description, avalabilitys, onClick, size, }: ProductCardProps) => React.JSX.Element;
+declare const ProductCard: ({ label, productImage, rating, reviews, tags, options, button, batch, description, avalabilitys, onClick, size, }: ProductCardProps) => React.JSX.Element;
 export default ProductCard;

package/dist/Components/ProductCard/ProductCard.js

@@ -35,26 +35,29 @@ var Button_1 = __importDefault(require("../Button/Button"));
 var ProductLabel_1 = __importDefault(require("./ProductLabel"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var ProductCard = function (_a) {
-    var label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, onAddToCart = _a.onAddToCart, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? 'sm' : _b;
-    var _c = (0, react_1.useState)(false), hover = _c[0], setHover = _c[1];
+    var _b;
+    var label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onClick = _a.onClick, _c = _a.size, size = _c === void 0 ? "sm" : _c;
+    var _d = (0, react_1.useState)(false), hover = _d[0], setHover = _d[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var sizeStyles = {
-        xs: { cardWidth: '16.25rem', imgHeight: '11.25rem', padding: 3, },
-        sm: { cardWidth: '18rem', imgHeight: '13rem', padding: 4, },
-        md: { cardWidth: '20rem', imgHeight: '15rem', padding: 5, },
-        lg: { cardWidth: '22rem', imgHeight: '17rem', padding: 6, },
+        xs: { cardWidth: "16.25rem", imgHeight: "11.25rem", padding: 3 },
+        sm: { cardWidth: "18rem", imgHeight: "13rem", padding: 4 },
+        md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
+        lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
     };
-    var _d = sizeStyles[size], cardWidth = _d.cardWidth, imgHeight = _d.imgHeight, padding = _d.padding;
+    var _e = sizeStyles[size], cardWidth = _e.cardWidth, imgHeight = _e.imgHeight, padding = _e.padding;
     var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
     var safeSize = allowedSizes.includes(size) ? size : "md";
     return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: cardWidth, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
-        react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick },
-            react_1.default.createElement(react_2.Image, { src: hover && productImage.hover ? productImage.hover : productImage.visibile, alt: label, w: "full", h: "full" }),
-            batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || 'green', position: "absolute", top: 2, right: 2, fontSize: {
-                    xs: 'xs',
-                    sm: 'sm',
-                    md: 'md',
-                    lg: 'lg',
+        react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer" },
+            react_1.default.createElement(react_2.Image, { src: hover && productImage.hover
+                    ? productImage.hover
+                    : productImage.visibile, alt: label, w: "full", h: "full" }),
+            batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
+                    xs: "xs",
+                    sm: "sm",
+                    md: "md",
+                    lg: "lg",
                 }[size], px: {
                     xs: 1,
                     sm: 2,
@@ -67,9 +70,10 @@ var ProductCard = function (_a) {
                     lg: 2,
                 }[size] }, batch.label))),
         react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding },
-            react_1.default.createElement(ProductLabel_1.default, { label: label, description: description, size: size }),
+            react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
+                react_1.default.createElement(ProductLabel_1.default, { label: label, description: description, size: size })),
             tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
             options && react_1.default.createElement(ProductPrice_1.default, { options: options, size: size }),
-            onAddToCart && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: onAddToCart }, "Add to Cart")))));
+            (button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (_b = button.label) !== null && _b !== void 0 ? _b : "Add to Cart")))));
 };
 exports.default = ProductCard;

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -8,6 +8,10 @@ export type ProductCardProps = {
     reviews?: string | number;
     options?: options[];
     onClick?: () => void;
+    button?: {
+        label: string;
+        onClick: () => void;
+    };
     onAddToCart?: () => void;
     batch?: batch;
     size?: SizeType;