krl-alfred 2.24.6 → 2.24.8
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/ProductCardHorizontalMd/ProductCardHorizontalMd.d.ts +1 -1
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.js +20 -5
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.d.ts +6 -0
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.styled.js +27 -21
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.test.d.ts +1 -0
- package/dist/components/ProductCardHorizontalMd/ProductCardHorizontalMd.test.js +156 -0
- package/dist/components/ProductCardHorizontalMd/props.d.ts +3 -0
- package/dist/components/ProductCardHorizontalMd/props.js +2 -0
- package/dist/components/ProductCardHorizontalMd/stories/ProductCardHorizontalMd.stories.d.ts +124 -11
- package/dist/components/ProductCardHorizontalMd/stories/ProductCardHorizontalMd.stories.js +41 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts +1 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js +2 -2
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.d.ts +1 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +11 -7
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.test.d.ts +1 -0
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.test.js +73 -0
- package/dist/components/ProductCardHorizontalSm/props.d.ts +5 -1
- package/dist/components/ProductCardHorizontalSm/props.js +3 -1
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts +94 -0
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js +18 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.d.ts +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.js +2 -2
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.d.ts +1 -0
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +18 -17
- package/dist/components/ProductCardVertical/ProductCardVertical.test.js +23 -0
- package/dist/components/ProductCardVertical/props.d.ts +1 -0
- package/dist/components/ProductCardVertical/props.js +1 -0
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts +95 -1
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js +8 -1
- package/dist/components/RadioButton/layouts/horizontal/Horizontal.styled.js +3 -3
- package/dist/components/RadioButton/layouts/horizontal/Horizontal.test.js +8 -0
- package/dist/components/RadioGroup/RadioGroup.styled.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.test.js +14 -0
- package/dist/components/RadioGroup/stories/RadioGroup.stories.d.ts +54 -0
- package/dist/components/RadioGroup/stories/RadioGroup.stories.js +44 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.d.ts +1 -1
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +8 -2
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.d.ts +3 -0
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +52 -48
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.test.js +55 -0
- package/dist/components/ShoppingCartProduct/props.d.ts +2 -0
- package/dist/components/ShoppingCartProduct/props.js +2 -0
- package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.d.ts +74 -0
- package/dist/components/ShoppingCartProduct/stories/ShoppingCartProduct.stories.js +12 -1
- package/dist/components/Table/SortableRow.d.ts +7 -0
- package/dist/components/Table/SortableRow.js +39 -0
- package/dist/components/Table/Table.d.ts +1 -1
- package/dist/components/Table/Table.js +54 -6
- package/dist/components/Table/Table.styled.d.ts +1 -0
- package/dist/components/Table/Table.styled.js +4 -3
- package/dist/components/Table/Table.test.d.ts +1 -0
- package/dist/components/Table/Table.test.js +65 -0
- package/dist/components/Table/props.d.ts +13 -0
- package/dist/components/Table/props.js +4 -1
- package/dist/components/Table/stories/Table.stories.d.ts +43 -0
- package/dist/components/Table/stories/Table.stories.js +19 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const _default: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, oldPrice, newPrice, discountRate, variant, slug, component, onClick, hasLoading, hasPriceLoading, textSize, hasBgColor, }: import("./props").ProductCardHorizontalMd) => React.JSX.Element>;
|
|
2
|
+
declare const _default: React.MemoExoticComponent<({ title, description, listDescription, image, unitPriceText, totalPrice, oldPrice, newPrice, discountRate, variant, slug, component, onClick, hasLoading, hasPriceLoading, textSize, hasBgColor, campaigns, onCampaignCountClick, }: import("./props").ProductCardHorizontalMd) => React.JSX.Element>;
|
|
3
3
|
export default _default;
|
|
@@ -21,19 +21,26 @@ var props_1 = require("./props");
|
|
|
21
21
|
var ProductCardHorizontalMd_styled_1 = require("./ProductCardHorizontalMd.styled");
|
|
22
22
|
var SkeletonLoader_1 = __importDefault(require("../SkeletonLoader"));
|
|
23
23
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
24
|
+
var Badges_1 = __importDefault(require("../Badges"));
|
|
25
|
+
var MAX_VISIBLE_CAMPAIGNS = 3;
|
|
24
26
|
var CardLinkComponent = (0, react_1.memo)(function (_a) {
|
|
25
27
|
var Component = _a.component, slug = _a.slug, children = _a.children;
|
|
26
28
|
return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CardLink, __assign({ as: Component || "a", href: slug }, { children: children })));
|
|
27
29
|
});
|
|
28
30
|
var ProductCardHorizontalMd = function (_a) {
|
|
29
31
|
var _b;
|
|
30
|
-
var _c = _a.title, title = _c === void 0 ? props_1.ProductCardHorizontalMdDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardHorizontalMdDefault.description : _d, _e = _a.listDescription, listDescription = _e === void 0 ? props_1.ProductCardHorizontalMdDefault.listDescription : _e, _f = _a.image, image = _f === void 0 ? props_1.ProductCardHorizontalMdDefault.image : _f, _g = _a.unitPriceText, unitPriceText = _g === void 0 ? props_1.ProductCardHorizontalMdDefault.unitPriceText : _g, _h = _a.totalPrice, totalPrice = _h === void 0 ? props_1.ProductCardHorizontalMdDefault.totalPrice : _h, _j = _a.oldPrice, oldPrice = _j === void 0 ? props_1.ProductCardHorizontalMdDefault.oldPrice : _j, _k = _a.newPrice, newPrice = _k === void 0 ? props_1.ProductCardHorizontalMdDefault.newPrice : _k, _l = _a.discountRate, discountRate = _l === void 0 ? props_1.ProductCardHorizontalMdDefault.discountRate : _l, _m = _a.variant, variant = _m === void 0 ? props_1.ProductCardHorizontalMdDefault.variant : _m, _o = _a.slug, slug = _o === void 0 ? props_1.ProductCardHorizontalMdDefault.slug : _o, _p = _a.component, component = _p === void 0 ? props_1.ProductCardHorizontalMdDefault.component : _p, _q = _a.onClick, onClick = _q === void 0 ? props_1.ProductCardHorizontalMdDefault.onClick : _q, _r = _a.hasLoading, hasLoading = _r === void 0 ? props_1.ProductCardHorizontalMdDefault.hasLoading : _r, _s = _a.hasPriceLoading, hasPriceLoading = _s === void 0 ? props_1.ProductCardHorizontalMdDefault.hasPriceLoading : _s, _t = _a.textSize, textSize = _t === void 0 ? props_1.ProductCardHorizontalMdDefault.textSize : _t, _u = _a.hasBgColor, hasBgColor = _u === void 0 ? props_1.ProductCardHorizontalMdDefault.hasBgColor : _u;
|
|
32
|
+
var _c = _a.title, title = _c === void 0 ? props_1.ProductCardHorizontalMdDefault.title : _c, _d = _a.description, description = _d === void 0 ? props_1.ProductCardHorizontalMdDefault.description : _d, _e = _a.listDescription, listDescription = _e === void 0 ? props_1.ProductCardHorizontalMdDefault.listDescription : _e, _f = _a.image, image = _f === void 0 ? props_1.ProductCardHorizontalMdDefault.image : _f, _g = _a.unitPriceText, unitPriceText = _g === void 0 ? props_1.ProductCardHorizontalMdDefault.unitPriceText : _g, _h = _a.totalPrice, totalPrice = _h === void 0 ? props_1.ProductCardHorizontalMdDefault.totalPrice : _h, _j = _a.oldPrice, oldPrice = _j === void 0 ? props_1.ProductCardHorizontalMdDefault.oldPrice : _j, _k = _a.newPrice, newPrice = _k === void 0 ? props_1.ProductCardHorizontalMdDefault.newPrice : _k, _l = _a.discountRate, discountRate = _l === void 0 ? props_1.ProductCardHorizontalMdDefault.discountRate : _l, _m = _a.variant, variant = _m === void 0 ? props_1.ProductCardHorizontalMdDefault.variant : _m, _o = _a.slug, slug = _o === void 0 ? props_1.ProductCardHorizontalMdDefault.slug : _o, _p = _a.component, component = _p === void 0 ? props_1.ProductCardHorizontalMdDefault.component : _p, _q = _a.onClick, onClick = _q === void 0 ? props_1.ProductCardHorizontalMdDefault.onClick : _q, _r = _a.hasLoading, hasLoading = _r === void 0 ? props_1.ProductCardHorizontalMdDefault.hasLoading : _r, _s = _a.hasPriceLoading, hasPriceLoading = _s === void 0 ? props_1.ProductCardHorizontalMdDefault.hasPriceLoading : _s, _t = _a.textSize, textSize = _t === void 0 ? props_1.ProductCardHorizontalMdDefault.textSize : _t, _u = _a.hasBgColor, hasBgColor = _u === void 0 ? props_1.ProductCardHorizontalMdDefault.hasBgColor : _u, _v = _a.campaigns, campaigns = _v === void 0 ? props_1.ProductCardHorizontalMdDefault.campaigns : _v, _w = _a.onCampaignCountClick, onCampaignCountClick = _w === void 0 ? props_1.ProductCardHorizontalMdDefault.onCampaignCountClick : _w;
|
|
33
|
+
var campaignItems = Array.isArray(campaigns) ? campaigns.filter(Boolean) : [];
|
|
34
|
+
var visibleCampaigns = campaignItems.slice(0, MAX_VISIBLE_CAMPAIGNS);
|
|
35
|
+
var extraCampaignCount = campaignItems.length - visibleCampaigns.length;
|
|
36
|
+
var hasCampaigns = !hasLoading && visibleCampaigns.length > 0;
|
|
31
37
|
var styledProps = {
|
|
32
38
|
$hasLoading: hasLoading,
|
|
33
39
|
$textSize: textSize,
|
|
34
40
|
$hasBgColor: hasBgColor,
|
|
35
41
|
$variant: variant,
|
|
36
42
|
$discountRate: discountRate,
|
|
43
|
+
$hasCampaigns: hasCampaigns,
|
|
37
44
|
};
|
|
38
45
|
var filteredListDescription = (_b = listDescription === null || listDescription === void 0 ? void 0 : listDescription.filter(Boolean)) !== null && _b !== void 0 ? _b : [];
|
|
39
46
|
var hasListDescription = filteredListDescription.length > 0;
|
|
@@ -41,15 +48,23 @@ var ProductCardHorizontalMd = function (_a) {
|
|
|
41
48
|
var isDiscountVariant = variant === 'discount';
|
|
42
49
|
var showPriceLoading = hasPriceLoading && !hasLoading;
|
|
43
50
|
var hasDiscountPrice = hasLoading || showPriceLoading || oldPrice || newPrice || (discountRate != null && discountRate > 0);
|
|
51
|
+
var hasSlug = Boolean(slug && String(slug).trim());
|
|
52
|
+
var wrapWithLink = function (children) {
|
|
53
|
+
return hasLoading || !hasSlug ? (children) : ((0, jsx_runtime_1.jsx)(CardLinkComponent, __assign({ component: component, slug: slug }, { children: children })));
|
|
54
|
+
};
|
|
55
|
+
var campaignsRow = hasCampaigns ? ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CampaignsRow, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CampaignsList, { children: visibleCampaigns.map(function (campaignTitle, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CampaignBadge, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: campaignTitle }) }, "".concat(campaignTitle, "-").concat(index))); }) }), extraCampaignCount > 0 && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CampaignCountButton, __assign({ type: "button", onClick: function (e) {
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
e.stopPropagation();
|
|
58
|
+
onCampaignCountClick === null || onCampaignCountClick === void 0 ? void 0 : onCampaignCountClick();
|
|
59
|
+
} }, { children: ["+", extraCampaignCount] })))] })) : null;
|
|
44
60
|
var imageContent = ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ImageWrapper, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "64px", height: "64px", hasInset: true })) : (image) })));
|
|
45
61
|
var titleContent = ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Title, __assign({}, styledProps, { children: hasLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "180px", height: "19px", hasInset: true })] })) : (title) })));
|
|
46
|
-
var defaultCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [imageContent, (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.TextSection, { children: [titleContent, hasDescription && (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "140px", height: "17px", hasInset: true }) }))) : hasListDescription ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionList, __assign({}, styledProps, { children: filteredListDescription.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionListItem, { children: item }, "".concat(item, "-").concat(index))); }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: description }))))] }), (hasLoading || showPriceLoading || unitPriceText || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceSection, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(hasLoading || unitPriceText) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.UnitPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "120px", height: "17px" })) : (unitPriceText) })), (hasLoading || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.TotalPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "80px", height: "19px" })) : (totalPrice) }))] })) }))] })));
|
|
47
|
-
var discountCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [imageContent, (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.DiscountContentSection, { children: [titleContent, hasDiscountPrice && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceRow, __assign({}, styledProps, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, __assign({ "$isDiscount": true, "$fullRow": true }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(hasLoading || (discountRate != null && discountRate > 0)) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DiscountBadge, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "65px", height: "16px", hasInset: true })) : ("%".concat(discountRate)) })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceStack, { children: [(hasLoading || oldPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.OldPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "15px", hasInset: true })) : (oldPrice) }))), (hasLoading || newPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.NewPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "17px", hasInset: true })) : (newPrice) })))] })] })) })))] })] })));
|
|
62
|
+
var defaultCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [wrapWithLink(imageContent), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.ContentSection, { children: [wrapWithLink((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.MainRow, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.TextSection, { children: [titleContent, hasDescription && (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "140px", height: "17px", hasInset: true }) }))) : hasListDescription ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionList, __assign({}, styledProps, { children: filteredListDescription.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DescriptionListItem, { children: item }, "".concat(item, "-").concat(index))); }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.Description, __assign({}, styledProps, { children: description }))))] }), (hasLoading || showPriceLoading || unitPriceText || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceSection, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(hasLoading || unitPriceText) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.UnitPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "120px", height: "17px" })) : (unitPriceText) })), (hasLoading || totalPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.TotalPrice, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "80px", height: "19px" })) : (totalPrice) }))] })) }))] })), campaignsRow] })] })));
|
|
63
|
+
var discountCardBody = ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.CardBody, __assign({}, styledProps, { children: [wrapWithLink(imageContent), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.DiscountContentSection, { children: [wrapWithLink((0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.ContentSection, { children: [titleContent, hasDiscountPrice && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceRow, __assign({}, styledProps, { children: showPriceLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.PriceLoading, __assign({ "$isDiscount": true, "$fullRow": true }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave", variant: "primary" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(hasLoading || (discountRate != null && discountRate > 0)) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.DiscountBadge, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "65px", height: "16px", hasInset: true })) : ("%".concat(discountRate)) })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalMd_styled_1.PriceStack, { children: [(hasLoading || oldPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.OldPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "15px", hasInset: true })) : (oldPrice) }))), (hasLoading || newPrice) && ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.NewPrice, __assign({ "$hasLoading": hasLoading }, { children: hasLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "100%", height: "17px", hasInset: true })) : (newPrice) })))] })] })) })))] })), campaignsRow] })] })));
|
|
48
64
|
var cardBody = isDiscountVariant ? discountCardBody : defaultCardBody;
|
|
49
65
|
if (hasLoading) {
|
|
50
66
|
return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.CardLink, { children: cardBody }) })));
|
|
51
67
|
}
|
|
52
|
-
|
|
53
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { onClick: onClick }, { children: hasSlug ? ((0, jsx_runtime_1.jsx)(CardLinkComponent, __assign({ component: component, slug: slug }, { children: cardBody }))) : (cardBody) })));
|
|
68
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_styled_1.ProductCardHorizontalMdStyled, __assign({}, styledProps, { onClick: onClick }, { children: cardBody })));
|
|
54
69
|
};
|
|
55
70
|
exports.default = (0, react_1.memo)(ProductCardHorizontalMd);
|
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
import { ProductCardHorizontalMdStyledProps } from "./props";
|
|
3
3
|
export declare const CardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
|
|
4
4
|
export declare const CardBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
|
|
5
|
+
export declare const ContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
6
|
+
export declare const MainRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
7
|
+
export declare const CampaignsRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
8
|
+
export declare const CampaignsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
9
|
+
export declare const CampaignBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
10
|
+
export declare const CampaignCountButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
5
11
|
export declare const DiscountContentSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
6
12
|
export declare const PriceRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ProductCardHorizontalMdStyledProps> & ProductCardHorizontalMdStyledProps, never>>> & string;
|
|
7
13
|
export declare const DiscountBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
@@ -7,30 +7,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.ProductCardHorizontalMdStyled = exports.PriceLoading = exports.TotalPrice = exports.UnitPrice = exports.PriceSection = exports.DescriptionListItem = exports.DescriptionList = exports.Description = exports.Title = exports.TextSection = exports.ImageWrapper = exports.NewPrice = exports.OldPrice = exports.PriceStack = exports.DiscountBadge = exports.PriceRow = exports.DiscountContentSection = exports.CardBody = exports.CardLink = void 0;
|
|
10
|
+
exports.ProductCardHorizontalMdStyled = exports.PriceLoading = exports.TotalPrice = exports.UnitPrice = exports.PriceSection = exports.DescriptionListItem = exports.DescriptionList = exports.Description = exports.Title = exports.TextSection = exports.ImageWrapper = exports.NewPrice = exports.OldPrice = exports.PriceStack = exports.DiscountBadge = exports.PriceRow = exports.DiscountContentSection = exports.CampaignCountButton = exports.CampaignBadge = exports.CampaignsList = exports.CampaignsRow = exports.MainRow = exports.ContentSection = exports.CardBody = exports.CardLink = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.CardLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n text-decoration: none !important;\n color: inherit;\n\n &:hover,\n &:focus,\n &:visited,\n &:active {\n text-decoration: none !important;\n color: inherit;\n }\n\n &,\n & * {\n text-decoration: none !important;\n }\n"], ["\n display: block;\n text-decoration: none !important;\n color: inherit;\n\n &:hover,\n &:focus,\n &:visited,\n &:active {\n text-decoration: none !important;\n color: inherit;\n }\n\n &,\n & * {\n text-decoration: none !important;\n }\n"])));
|
|
13
|
-
exports.CardBody = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns:
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
exports.
|
|
17
|
-
exports.
|
|
18
|
-
exports.
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
21
|
-
exports.
|
|
22
|
-
exports.
|
|
12
|
+
exports.CardLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n min-width: 0;\n text-decoration: none !important;\n color: inherit;\n\n &:hover,\n &:focus,\n &:visited,\n &:active {\n text-decoration: none !important;\n color: inherit;\n }\n\n &,\n & * {\n text-decoration: none !important;\n }\n"], ["\n display: block;\n min-width: 0;\n text-decoration: none !important;\n color: inherit;\n\n &:hover,\n &:focus,\n &:visited,\n &:active {\n text-decoration: none !important;\n color: inherit;\n }\n\n &,\n & * {\n text-decoration: none !important;\n }\n"])));
|
|
13
|
+
exports.CardBody = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: ", ";\n gap: 1rem;\n width: 100%;\n min-width: 0;\n position: relative;\n"], ["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: ", ";\n gap: 1rem;\n width: 100%;\n min-width: 0;\n position: relative;\n"])), function (props) { return props.$hasCampaigns ? 'start' : 'center'; });
|
|
14
|
+
exports.ContentSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-width: 0;\n display: grid;\n row-gap: 0.5rem;\n position: relative;\n"], ["\n min-width: 0;\n display: grid;\n row-gap: 0.5rem;\n position: relative;\n"])));
|
|
15
|
+
exports.MainRow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n gap: 1rem;\n min-width: 0;\n"], ["\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n gap: 1rem;\n min-width: 0;\n"])));
|
|
16
|
+
exports.CampaignsRow = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 0.5rem;\n min-width: 0;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 0.5rem;\n min-width: 0;\n width: 100%;\n"])));
|
|
17
|
+
exports.CampaignsList = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 0.5rem;\n min-width: 0;\n flex: 0 1 auto;\n overflow: hidden;\n"], ["\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 0.5rem;\n min-width: 0;\n flex: 0 1 auto;\n overflow: hidden;\n"])));
|
|
18
|
+
exports.CampaignBadge = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n min-width: 0;\n flex: 0 1 auto;\n overflow: hidden;\n\n > div {\n display: block;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"], ["\n min-width: 0;\n flex: 0 1 auto;\n overflow: hidden;\n\n > div {\n display: block;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])));
|
|
19
|
+
exports.CampaignCountButton = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex-shrink: 0;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n color: var(--primary);\n font: var(--caption-semi-bold-12-15);\n"], ["\n flex-shrink: 0;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n color: var(--primary);\n font: var(--caption-semi-bold-12-15);\n"])));
|
|
20
|
+
exports.DiscountContentSection = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n min-width: 0;\n display: grid;\n row-gap: 0.5rem;\n position: relative;\n"], ["\n min-width: 0;\n display: grid;\n row-gap: 0.5rem;\n position: relative;\n"])));
|
|
21
|
+
exports.PriceRow = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: grid;\n align-items: center;\n grid-template-columns: ", ";\n gap: 0.5rem;\n position: relative;\n"], ["\n display: grid;\n align-items: center;\n grid-template-columns: ", ";\n gap: 0.5rem;\n position: relative;\n"])), function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; });
|
|
22
|
+
exports.DiscountBadge = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 65px;\n height: 47px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--dark);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--title-extra-bold-16-19);\n flex-shrink: 0;\n position: relative;\n"], ["\n width: 65px;\n height: 47px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--dark);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--title-extra-bold-16-19);\n flex-shrink: 0;\n position: relative;\n"])));
|
|
23
|
+
exports.PriceStack = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n min-width: 0;\n width: 100%;\n"])));
|
|
24
|
+
exports.OldPrice = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n color: var(--dark-opacity-25);\n font: var(--body-semi-bold-14-17);\n text-decoration: line-through;\n white-space: nowrap;\n position: relative;\n width: ", ";\n min-height: ", ";\n"], ["\n color: var(--dark-opacity-25);\n font: var(--body-semi-bold-14-17);\n text-decoration: line-through;\n white-space: nowrap;\n position: relative;\n width: ", ";\n min-height: ", ";\n"])), function (props) { return props.$hasLoading ? '50%' : 'auto'; }, function (props) { return props.$hasLoading ? '15px' : 'auto'; });
|
|
25
|
+
exports.NewPrice = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n color: var(--dark);\n font: var(--headline-extra-bold-18-22);\n white-space: nowrap;\n position: relative;\n width: ", ";\n min-height: ", ";\n"], ["\n color: var(--dark);\n font: var(--headline-extra-bold-18-22);\n white-space: nowrap;\n position: relative;\n width: ", ";\n min-height: ", ";\n"])), function (props) { return props.$hasLoading ? '50%' : 'auto'; }, function (props) { return props.$hasLoading ? '17px' : 'auto'; });
|
|
26
|
+
exports.ImageWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n width: 64px;\n height: 64px;\n flex-shrink: 0;\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n background: var(--theme-bg-color);\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"], ["\n width: 64px;\n height: 64px;\n flex-shrink: 0;\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n background: var(--theme-bg-color);\n box-sizing: border-box;\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n"])), function (props) { return props.$hasLoading || props.$hasBgColor ? "none" : "1px solid var(--grey-10)"; });
|
|
27
|
+
exports.TextSection = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n min-width: 0;\n display: grid;\n row-gap: 0.5rem;\n"], ["\n min-width: 0;\n display: grid;\n row-gap: 0.5rem;\n"])));
|
|
28
|
+
exports.Title = styled_components_1.default.strong(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: block;\n font: ", ";\n color: var(--dark);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n"], ["\n display: block;\n font: ", ";\n color: var(--dark);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n"])), function (props) { return props.$variant === 'discount' || props.$textSize === 'md'
|
|
23
29
|
? 'var(--title-extra-bold-16-19)'
|
|
24
30
|
: 'var(--body-semi-bold-14-17)'; });
|
|
25
31
|
var descriptionTextStyles = function (props) { return "\n font: ".concat(props.$textSize === 'md'
|
|
26
32
|
? 'var(--body-medium-14-17)'
|
|
27
33
|
: 'var(--body-regular-14-17)', ";\n color: ").concat(props.$hasBgColor ? 'var(--grey-40)' : 'inherit', ";\n"); };
|
|
28
|
-
exports.Description = styled_components_1.default.p(
|
|
29
|
-
exports.DescriptionList = styled_components_1.default.ul(
|
|
30
|
-
exports.DescriptionListItem = styled_components_1.default.li(
|
|
31
|
-
exports.PriceSection = styled_components_1.default.div(
|
|
32
|
-
exports.UnitPrice = styled_components_1.default.div(
|
|
33
|
-
exports.TotalPrice = styled_components_1.default.div(
|
|
34
|
-
exports.PriceLoading = styled_components_1.default.div(
|
|
35
|
-
exports.ProductCardHorizontalMdStyled = styled_components_1.default.div(
|
|
36
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
34
|
+
exports.Description = styled_components_1.default.p(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n margin: 0;\n ", ";\n position: relative;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n white-space: normal;\n"], ["\n margin: 0;\n ", ";\n position: relative;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n white-space: normal;\n"])), descriptionTextStyles);
|
|
35
|
+
exports.DescriptionList = styled_components_1.default.ul(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n min-width: 0;\n ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n row-gap: 0.25rem;\n column-gap: 0.5rem;\n"], ["\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n min-width: 0;\n ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n position: relative;\n row-gap: 0.25rem;\n column-gap: 0.5rem;\n"])), descriptionTextStyles);
|
|
36
|
+
exports.DescriptionListItem = styled_components_1.default.li(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n\n & + & {\n &::before {\n content: '';\n display: inline-block;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: currentColor;\n margin: 0 0.5rem;\n flex-shrink: 0;\n }\n }\n"], ["\n display: inline-flex;\n align-items: center;\n\n & + & {\n &::before {\n content: '';\n display: inline-block;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: currentColor;\n margin: 0 0.5rem;\n flex-shrink: 0;\n }\n }\n"])));
|
|
37
|
+
exports.PriceSection = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n flex-shrink: 0;\n display: grid;\n row-gap: 0.5rem;\n text-align: right;\n"], ["\n flex-shrink: 0;\n display: grid;\n row-gap: 0.5rem;\n text-align: right;\n"])));
|
|
38
|
+
exports.UnitPrice = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font: var(--body-regular-14-17);\n white-space: nowrap;\n position: relative;\n"], ["\n font: var(--body-regular-14-17);\n white-space: nowrap;\n position: relative;\n"])));
|
|
39
|
+
exports.TotalPrice = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n font: var(--body-bold-14-17);\n color: var(--dark);\n white-space: nowrap;\n position: relative;\n"], ["\n font: var(--body-bold-14-17);\n color: var(--dark);\n white-space: nowrap;\n position: relative;\n"])));
|
|
40
|
+
exports.PriceLoading = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n width: 100%;\n min-height: ", ";\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: ", ";\n width: 100%;\n min-height: ", ";\n\n ", "\n"])), function (props) { return props.$isDiscount ? 'flex-start' : 'flex-end'; }, function (props) { return props.$isDiscount ? '47px' : '44px'; }, function (props) { return props.$fullRow && "\n grid-column: 1 / -1;\n "; });
|
|
41
|
+
exports.ProductCardHorizontalMdStyled = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\n background-color: ", ";\n padding: 1rem;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n"], ["\n border: ", ";\n border-radius: 0.5rem;\n background-color: ", ";\n padding: 1rem;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n"])), function (props) { return props.$hasBgColor ? 'none' : '1px solid var(--grey-10)'; }, function (props) { return props.$hasBgColor ? 'var(--dark-opacity-3)' : 'var(--theme-bg-color)'; });
|
|
42
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
50
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
51
|
+
};
|
|
52
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
53
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
54
|
+
var react_1 = require("@testing-library/react");
|
|
55
|
+
var user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
56
|
+
var ProductCardHorizontalMd_1 = __importDefault(require("./ProductCardHorizontalMd"));
|
|
57
|
+
var baseProps = {
|
|
58
|
+
title: 'Çekirdek kahve',
|
|
59
|
+
description: 'İki ayda bir',
|
|
60
|
+
unitPriceText: '10 adet x 520 TL',
|
|
61
|
+
totalPrice: '5.200 TL',
|
|
62
|
+
};
|
|
63
|
+
var renderCard = function (props) {
|
|
64
|
+
if (props === void 0) { props = {}; }
|
|
65
|
+
return (0, react_1.render)((0, jsx_runtime_1.jsx)(ProductCardHorizontalMd_1.default, __assign({}, baseProps, props)));
|
|
66
|
+
};
|
|
67
|
+
describe('ProductCardHorizontalMd', function () {
|
|
68
|
+
it('renders title and price', function () {
|
|
69
|
+
renderCard();
|
|
70
|
+
expect(react_1.screen.getByText('Çekirdek kahve')).toBeInTheDocument();
|
|
71
|
+
expect(react_1.screen.getByText('5.200 TL')).toBeInTheDocument();
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
describe('ProductCardHorizontalMd campaigns', function () {
|
|
75
|
+
it('does not render a campaign row when campaigns is empty', function () {
|
|
76
|
+
renderCard({ campaigns: [] });
|
|
77
|
+
expect(react_1.screen.queryByRole('button', { name: /^\+\d+$/ })).not.toBeInTheDocument();
|
|
78
|
+
});
|
|
79
|
+
it('renders up to three campaigns without a remaining count', function () {
|
|
80
|
+
renderCard({
|
|
81
|
+
campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3'],
|
|
82
|
+
});
|
|
83
|
+
expect(react_1.screen.getByText('Kampanya 1')).toBeInTheDocument();
|
|
84
|
+
expect(react_1.screen.getByText('Kampanya 2')).toBeInTheDocument();
|
|
85
|
+
expect(react_1.screen.getByText('Kampanya 3')).toBeInTheDocument();
|
|
86
|
+
expect(react_1.screen.queryByRole('button', { name: /^\+\d+$/ })).not.toBeInTheDocument();
|
|
87
|
+
});
|
|
88
|
+
it('renders the first three campaigns and remaining count when there are more than three', function () {
|
|
89
|
+
renderCard({
|
|
90
|
+
campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3', 'Kampanya 4'],
|
|
91
|
+
});
|
|
92
|
+
expect(react_1.screen.getByText('Kampanya 1')).toBeInTheDocument();
|
|
93
|
+
expect(react_1.screen.getByText('Kampanya 2')).toBeInTheDocument();
|
|
94
|
+
expect(react_1.screen.getByText('Kampanya 3')).toBeInTheDocument();
|
|
95
|
+
expect(react_1.screen.getByRole('button', { name: '+1' })).toBeInTheDocument();
|
|
96
|
+
expect(react_1.screen.queryByText('Kampanya 4')).not.toBeInTheDocument();
|
|
97
|
+
});
|
|
98
|
+
it('calls onCampaignCountClick when the remaining count is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
99
|
+
var onCampaignCountClick;
|
|
100
|
+
return __generator(this, function (_a) {
|
|
101
|
+
switch (_a.label) {
|
|
102
|
+
case 0:
|
|
103
|
+
onCampaignCountClick = jest.fn();
|
|
104
|
+
renderCard({
|
|
105
|
+
campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3', 'Kampanya 4', 'Kampanya 5'],
|
|
106
|
+
onCampaignCountClick: onCampaignCountClick,
|
|
107
|
+
});
|
|
108
|
+
return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: '+2' }))];
|
|
109
|
+
case 1:
|
|
110
|
+
_a.sent();
|
|
111
|
+
expect(onCampaignCountClick).toHaveBeenCalledTimes(1);
|
|
112
|
+
return [2 /*return*/];
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
}); });
|
|
116
|
+
it('does not call card onClick when the remaining count is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
117
|
+
var onClick, onCampaignCountClick;
|
|
118
|
+
return __generator(this, function (_a) {
|
|
119
|
+
switch (_a.label) {
|
|
120
|
+
case 0:
|
|
121
|
+
onClick = jest.fn();
|
|
122
|
+
onCampaignCountClick = jest.fn();
|
|
123
|
+
renderCard({
|
|
124
|
+
slug: null,
|
|
125
|
+
onClick: onClick,
|
|
126
|
+
campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3', 'Kampanya 4'],
|
|
127
|
+
onCampaignCountClick: onCampaignCountClick,
|
|
128
|
+
});
|
|
129
|
+
return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: '+1' }))];
|
|
130
|
+
case 1:
|
|
131
|
+
_a.sent();
|
|
132
|
+
expect(onCampaignCountClick).toHaveBeenCalledTimes(1);
|
|
133
|
+
expect(onClick).not.toHaveBeenCalled();
|
|
134
|
+
return [2 /*return*/];
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
}); });
|
|
138
|
+
it('renders campaign titles as text so markup is not executed', function () {
|
|
139
|
+
renderCard({ campaigns: ['<img src="x" onerror="alert(1)">'] });
|
|
140
|
+
expect(react_1.screen.getByText('<img src="x" onerror="alert(1)">')).toBeInTheDocument();
|
|
141
|
+
expect(document.querySelector('img[src="x"]')).not.toBeInTheDocument();
|
|
142
|
+
});
|
|
143
|
+
it('does not crash when campaigns is not an array', function () {
|
|
144
|
+
renderCard({ campaigns: 'kampanya' });
|
|
145
|
+
expect(react_1.screen.getByText('Çekirdek kahve')).toBeInTheDocument();
|
|
146
|
+
expect(react_1.screen.queryByRole('button', { name: /^\+\d+$/ })).not.toBeInTheDocument();
|
|
147
|
+
});
|
|
148
|
+
it('keeps campaign badges and remaining count on a single row', function () {
|
|
149
|
+
renderCard({
|
|
150
|
+
campaigns: ['Kampanya 1', 'Kampanya 2', 'Kampanya 3', 'Kampanya 4'],
|
|
151
|
+
});
|
|
152
|
+
var countButton = react_1.screen.getByRole('button', { name: '+1' });
|
|
153
|
+
expect(countButton.parentElement).toHaveStyle({ flexWrap: 'nowrap' });
|
|
154
|
+
expect(countButton.previousElementSibling).toHaveStyle({ flexWrap: 'nowrap' });
|
|
155
|
+
});
|
|
156
|
+
});
|
|
@@ -21,6 +21,8 @@ export interface ProductCardHorizontalMd {
|
|
|
21
21
|
hasPriceLoading?: boolean;
|
|
22
22
|
textSize?: TEXTSIZE;
|
|
23
23
|
hasBgColor?: boolean;
|
|
24
|
+
campaigns?: string[];
|
|
25
|
+
onCampaignCountClick?(): void;
|
|
24
26
|
}
|
|
25
27
|
export interface ProductCardHorizontalMdStyledProps {
|
|
26
28
|
$hasLoading?: boolean;
|
|
@@ -28,6 +30,7 @@ export interface ProductCardHorizontalMdStyledProps {
|
|
|
28
30
|
$hasBgColor?: boolean;
|
|
29
31
|
$variant?: VARIANT;
|
|
30
32
|
$discountRate?: number;
|
|
33
|
+
$hasCampaigns?: boolean;
|
|
31
34
|
}
|
|
32
35
|
export declare const ProductCardHorizontalMdDefault: ProductCardHorizontalMd;
|
|
33
36
|
export type ProductCardHorizontalMdProps = typeof ProductCardHorizontalMdDefault;
|