@tapcart/mobile-components 0.5.0 → 0.5.3
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/dist/components/ui/favorite.d.ts +2 -0
- package/dist/components/ui/favorite.d.ts.map +1 -1
- package/dist/components/ui/favorite.js +11 -2
- package/dist/components/ui/image.d.ts +3 -0
- package/dist/components/ui/image.d.ts.map +1 -1
- package/dist/components/ui/image.js +5 -4
- package/dist/components/ui/price.d.ts +2 -1
- package/dist/components/ui/price.d.ts.map +1 -1
- package/dist/components/ui/price.js +6 -2
- package/dist/components/ui/product-card.d.ts.map +1 -1
- package/dist/components/ui/product-card.js +15 -14
- package/dist/styles.css +19 -0
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import { type VariantProps } from "class-variance-authority";
|
|
|
3
3
|
declare const favoriteVariants: (props?: ({
|
|
4
4
|
size?: "small" | "large" | null | undefined;
|
|
5
5
|
showBackground?: boolean | null | undefined;
|
|
6
|
+
layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right" | null | undefined;
|
|
6
7
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
7
8
|
export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
|
|
8
9
|
selected?: boolean;
|
|
@@ -10,6 +11,7 @@ export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElem
|
|
|
10
11
|
icon?: string;
|
|
11
12
|
showBackground?: boolean;
|
|
12
13
|
cornerRadius?: number;
|
|
14
|
+
layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right";
|
|
13
15
|
}
|
|
14
16
|
declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
|
|
15
17
|
export { Favorite, favoriteVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB
|
|
1
|
+
{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;;mFA0BrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,sBAAsB,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,cAAc,CAAA;CAChG;AAED,QAAA,MAAM,QAAQ,yFAuCb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
|
|
@@ -24,17 +24,26 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-p
|
|
|
24
24
|
true: "bg-coreColors-inputBackground",
|
|
25
25
|
false: "",
|
|
26
26
|
},
|
|
27
|
+
layoutType: {
|
|
28
|
+
"below-image-on-right": "absolute right-0",
|
|
29
|
+
"top-right": "",
|
|
30
|
+
"top-left": "",
|
|
31
|
+
"bottom-left": "",
|
|
32
|
+
"bottom-right": "",
|
|
33
|
+
}
|
|
27
34
|
},
|
|
28
35
|
defaultVariants: {
|
|
29
36
|
size: "small",
|
|
30
37
|
showBackground: true,
|
|
38
|
+
layoutType: "below-image-on-right",
|
|
31
39
|
},
|
|
32
40
|
});
|
|
33
41
|
const Favorite = React.forwardRef((_a, ref) => {
|
|
34
|
-
var { className, size = "small", selected = false, onClick, icon = "heart-filled", showBackground = true, cornerRadius = 4 } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "icon", "showBackground", "cornerRadius"]);
|
|
42
|
+
var { className, size = "small", selected = false, onClick, icon = "heart-filled", showBackground = true, cornerRadius = 4, layoutType = "below-image-on-right" } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "icon", "showBackground", "cornerRadius", "layoutType"]);
|
|
35
43
|
return (_jsx("button", Object.assign({ onClick: onClick, ref: ref, className: cn(favoriteVariants({
|
|
36
44
|
size,
|
|
37
|
-
showBackground
|
|
45
|
+
showBackground,
|
|
46
|
+
layoutType,
|
|
38
47
|
}), className), style: {
|
|
39
48
|
borderRadius: `${cornerRadius}px`,
|
|
40
49
|
} }, props, { children: _jsx(Icon, { name: icon, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm" }) })));
|
|
@@ -57,6 +57,9 @@ type TapcartImageBaseProps = {
|
|
|
57
57
|
/** An optional prop to set styles for the image wrapper
|
|
58
58
|
*/
|
|
59
59
|
imageWrapperStyles?: any;
|
|
60
|
+
/** An optional prop to set image radius
|
|
61
|
+
*/
|
|
62
|
+
imageRadius?: number;
|
|
60
63
|
};
|
|
61
64
|
/**
|
|
62
65
|
* Tapcart’s Image component is a wrapper around the HTML image element.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAkC1D,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAUD,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,MAAM,CAAA;AAKrD,KAAK,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAI1D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAChE,qBAAqB,CAAA;AAEvB,KAAK,qBAAqB,GAAG;IAC3B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE;QAAE,iBAAiB,EAAE,IAAI,CAAA;KAAE,CAAC,CAAA;IAC1D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qFAAqF;IACrF,aAAa,CAAC,EAAE,aAAa,CAAA;IAE7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAA;IAExE;OACG;IACH,kBAAkB,CAAC,EAAE,GAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"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"}
|
|
@@ -65,13 +65,13 @@ function ImagePreload({ imgAttributes }) {
|
|
|
65
65
|
* {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
|
|
66
66
|
*/
|
|
67
67
|
export const Image = React.forwardRef((_a, ref) => {
|
|
68
|
-
var _b;
|
|
69
|
-
var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, imageWrapperStyles, srcSetOptions = {
|
|
68
|
+
var _b, _c;
|
|
69
|
+
var { alt, aspectRatio, crop = "center", data, decoding = "async", height = "auto", loader = shopifyLoader, loading = "lazy", sizes, src, imageWrapperStyles, imageRadius, srcSetOptions = {
|
|
70
70
|
intervals: 15,
|
|
71
71
|
startingWidth: 100,
|
|
72
72
|
incrementSize: 100,
|
|
73
73
|
placeholderWidth: 100,
|
|
74
|
-
}, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "imageWrapperStyles", "srcSetOptions", "width", "objectFit"]);
|
|
74
|
+
}, width = "100%", objectFit = "cover" } = _a, passthroughProps = __rest(_a, ["alt", "aspectRatio", "crop", "data", "decoding", "height", "loader", "loading", "sizes", "src", "imageWrapperStyles", "imageRadius", "srcSetOptions", "width", "objectFit"]);
|
|
75
75
|
/*
|
|
76
76
|
* Gets normalized values for width, height from data prop
|
|
77
77
|
*/
|
|
@@ -173,7 +173,8 @@ export const Image = React.forwardRef((_a, ref) => {
|
|
|
173
173
|
maxHeight: "100%",
|
|
174
174
|
height: "100%",
|
|
175
175
|
width: "100%",
|
|
176
|
-
|
|
176
|
+
borderRadius: `${imageRadius}px`,
|
|
177
|
+
} }))) : (_jsx("div", { className: "w-full h-full bg-stateColors-skeleton", style: Object.assign({ aspectRatio: aspectRatio && aspectRatio !== "auto" ? (_c = normalizedProps.aspectRatio) === null || _c === void 0 ? void 0 : _c.replace(":", "/") : "2/3" }, imageWrapperStyles) })) }))] }));
|
|
177
178
|
});
|
|
178
179
|
/**
|
|
179
180
|
* The shopifyLoader function is a simple utility function that takes a src, width,
|
|
@@ -8,7 +8,8 @@ interface PriceProps {
|
|
|
8
8
|
currency?: string;
|
|
9
9
|
locale?: string;
|
|
10
10
|
fontSize?: number;
|
|
11
|
+
textAlignment?: 'left' | 'center' | 'right' | '';
|
|
11
12
|
}
|
|
12
|
-
declare function Price({ price, priceHigh, priceRanges, isSale, compareAtPrice, compareAtPriceHigh, currency, locale, fontSize, }: PriceProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function Price({ price, priceHigh, priceRanges, isSale, compareAtPrice, compareAtPriceHigh, currency, locale, fontSize, textAlignment, }: PriceProps): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export { Price };
|
|
14
15
|
//# sourceMappingURL=price.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":"AAKA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":"AAKA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAC;CAClD;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAa,EACb,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,GACnB,EAAE,UAAU,2CAsGZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Money } from "./money";
|
|
3
3
|
import { Text } from "./text";
|
|
4
|
-
|
|
4
|
+
import { cn } from "../../lib/utils";
|
|
5
|
+
function Price({ price, priceHigh = 0, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', }) {
|
|
5
6
|
return (_jsx(_Fragment, { children: priceRanges ? (_jsx(_Fragment, { children: isSale &&
|
|
6
7
|
compareAtPrice !== undefined &&
|
|
7
|
-
compareAtPriceHigh !== undefined ? (_jsxs("div", Object.assign({ className: "flex flex-wrap
|
|
8
|
+
compareAtPriceHigh !== undefined ? (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsxs(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx("div", { className: cn("flex flex-wrap gap-2", {
|
|
9
|
+
"ml-auto": textAlignment === 'right',
|
|
10
|
+
"mr-auto": textAlignment === 'center',
|
|
11
|
+
}) }), _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), " -", " ", priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))] })), _jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }), " ", "-", " ", _jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale })] }))] }))) : (_jsxs(Text, Object.assign({ className: "text-textColors-priceText", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), " -", " ", priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))) })) : (_jsx(_Fragment, { children: isSale && compareAtPrice !== undefined ? (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsx(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: _jsx("span", Object.assign({ className: "mr-2" }, { children: _jsx(Money, { price: price, currency: currency, locale: locale }) })) })), _jsx(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize } }, { children: _jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }) }))] }))) : (_jsx(Text, Object.assign({ className: "text-textColors-priceText", style: { fontSize: `${fontSize}px` } }, { children: _jsx(Money, { price: price, currency: currency, locale: locale }) }))) })) }));
|
|
8
12
|
}
|
|
9
13
|
export { Price };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -134,7 +134,7 @@ const productCardFavoriteVariants = cva("absolute ", {
|
|
|
134
134
|
},
|
|
135
135
|
});
|
|
136
136
|
const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, className, }) => {
|
|
137
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
|
|
137
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21;
|
|
138
138
|
const { variants, images, title, tags } = product;
|
|
139
139
|
// Select the variant that has the lowest price that is available or just the lowest price if none are available
|
|
140
140
|
let searchVariants = variants.filter((variant) => variant.available);
|
|
@@ -218,31 +218,32 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
|
|
|
218
218
|
onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
|
|
219
219
|
}, icon: ((_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.type) === "internal"
|
|
220
220
|
? (_s = (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.icon) === null || _s === void 0 ? void 0 : _s.url
|
|
221
|
-
: undefined }))] }))), ((
|
|
221
|
+
: undefined, layoutType: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.layoutType }))] }))), ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
|
|
222
222
|
borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
|
|
223
223
|
borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
|
|
224
|
-
}, labelClassName: cn("outline-0 w-full", { uppercase: (
|
|
224
|
+
}, labelClassName: cn("outline-0 w-full", { uppercase: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.uppercase }, { "text-left": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "left" }, { "text-right": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "right" }, { "text-center": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "center" }), labelStyle: { fontSize: (_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
|
|
225
225
|
e.stopPropagation();
|
|
226
226
|
onQuickAdd === null || onQuickAdd === void 0 ? void 0 : onQuickAdd(e, product);
|
|
227
227
|
} }, { children: "+ Quick add" }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
|
|
228
228
|
"justify-end": belowBadge.horizontalPosition === "end",
|
|
229
|
-
}) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((
|
|
230
|
-
"text-left": ((
|
|
229
|
+
}) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.uppercase }, {
|
|
230
|
+
"text-left": ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.textAlignment) === "left",
|
|
231
231
|
}, {
|
|
232
|
-
"text-right": ((
|
|
232
|
+
"text-right": ((_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.textAlignment) === "right",
|
|
233
233
|
}, {
|
|
234
|
-
"text-center": ((
|
|
234
|
+
"text-center": ((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "center",
|
|
235
235
|
}, {
|
|
236
|
-
"line-clamp-2
|
|
237
|
-
|
|
236
|
+
"line-clamp-2": (_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.wrapText,
|
|
237
|
+
"line-clamp-1": !((_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.wrapText),
|
|
238
|
+
}, "text-textColors-productTitle"), style: { fontSize: (_7 = config.productTitle) === null || _7 === void 0 ? void 0 : _7.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end items-center", { "justify-start": ((_8 = config.price) === null || _8 === void 0 ? void 0 : _8.textAlignment) === "left" }, { "justify-end": ((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.textAlignment) === "right" }, { "justify-center": ((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.textAlignment) === "center" }) }, { children: [((_11 = config.price) === null || _11 === void 0 ? void 0 : _11.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
|
|
238
239
|
variant.compareAtPrice &&
|
|
239
|
-
parseFloat((
|
|
240
|
+
parseFloat((_12 = variant.compareAtPrice) === null || _12 === void 0 ? void 0 : _12.amount) >
|
|
240
241
|
parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
|
|
241
|
-
parseFloat((
|
|
242
|
+
parseFloat((_13 = variant.compareAtPrice) === null || _13 === void 0 ? void 0 : _13.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_14 = config.price) === null || _14 === void 0 ? void 0 : _14.fontSize })), ((_15 = config.favoritesIcon) === null || _15 === void 0 ? void 0 : _15.enabled) &&
|
|
242
243
|
config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
|
|
243
244
|
onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
|
|
244
|
-
}, size: "small", icon: ((
|
|
245
|
-
? (
|
|
246
|
-
: undefined, cornerRadius: (
|
|
245
|
+
}, size: "small", icon: ((_17 = (_16 = config.favoritesIcon) === null || _16 === void 0 ? void 0 : _16.icon) === null || _17 === void 0 ? void 0 : _17.type) === "internal"
|
|
246
|
+
? (_19 = (_18 = config.favoritesIcon) === null || _18 === void 0 ? void 0 : _18.icon) === null || _19 === void 0 ? void 0 : _19.url
|
|
247
|
+
: undefined, cornerRadius: (_20 = config.favoritesIcon) === null || _20 === void 0 ? void 0 : _20.cornerRadius, layoutType: (_21 = config.favoritesIcon) === null || _21 === void 0 ? void 0 : _21.layoutType }) })))] }))] }))] })) })));
|
|
247
248
|
};
|
|
248
249
|
export { ProductCard };
|
package/dist/styles.css
CHANGED
|
@@ -809,9 +809,15 @@ video {
|
|
|
809
809
|
.ml-2 {
|
|
810
810
|
margin-left: 0.5rem;
|
|
811
811
|
}
|
|
812
|
+
.ml-auto {
|
|
813
|
+
margin-left: auto;
|
|
814
|
+
}
|
|
812
815
|
.mr-2 {
|
|
813
816
|
margin-right: 0.5rem;
|
|
814
817
|
}
|
|
818
|
+
.mr-auto {
|
|
819
|
+
margin-right: auto;
|
|
820
|
+
}
|
|
815
821
|
.mt-1 {
|
|
816
822
|
margin-top: 0.25rem;
|
|
817
823
|
}
|
|
@@ -824,6 +830,12 @@ video {
|
|
|
824
830
|
.mt-auto {
|
|
825
831
|
margin-top: auto;
|
|
826
832
|
}
|
|
833
|
+
.line-clamp-1 {
|
|
834
|
+
overflow: hidden;
|
|
835
|
+
display: -webkit-box;
|
|
836
|
+
-webkit-box-orient: vertical;
|
|
837
|
+
-webkit-line-clamp: 1;
|
|
838
|
+
}
|
|
827
839
|
.line-clamp-2 {
|
|
828
840
|
overflow: hidden;
|
|
829
841
|
display: -webkit-box;
|
|
@@ -990,6 +1002,10 @@ video {
|
|
|
990
1002
|
.min-w-\[8rem\] {
|
|
991
1003
|
min-width: 8rem;
|
|
992
1004
|
}
|
|
1005
|
+
.min-w-\[fit-content\] {
|
|
1006
|
+
min-width: -moz-fit-content;
|
|
1007
|
+
min-width: fit-content;
|
|
1008
|
+
}
|
|
993
1009
|
.max-w-full {
|
|
994
1010
|
max-width: 100%;
|
|
995
1011
|
}
|
|
@@ -1043,6 +1059,9 @@ video {
|
|
|
1043
1059
|
--tw-rotate: 90deg;
|
|
1044
1060
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1045
1061
|
}
|
|
1062
|
+
.transform {
|
|
1063
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1064
|
+
}
|
|
1046
1065
|
@keyframes pulse {
|
|
1047
1066
|
|
|
1048
1067
|
50% {
|