krl-alfred 2.17.38 → 2.17.39
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/CategoryMenu/stories/CategoryMenu.stories.d.ts +43 -0
- package/dist/components/OptionMenu/OptionMenu.js +4 -3
- package/dist/components/OptionMenu/OptionMenu.styled.js +2 -2
- package/dist/components/OptionMenu/props.d.ts +1 -0
- package/dist/components/OptionMenu/stories/OptionMenu.stories.d.ts +29 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts +1 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js +6 -2
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.d.ts +9 -0
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +12 -3
- package/dist/components/ProductCardHorizontalSm/props.d.ts +16 -0
- package/dist/components/ProductCardHorizontalSm/props.js +8 -0
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts +27 -1
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js +29 -2
- package/dist/components/ProductCardVertical/ProductCardVertical.d.ts +1 -1
- package/dist/components/ProductCardVertical/ProductCardVertical.js +2 -2
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +1 -1
- package/dist/components/ProductCardVertical/props.d.ts +2 -0
- package/dist/components/ProductCardVertical/props.js +1 -0
- package/dist/jsons/categories.d.ts +43 -0
- package/dist/jsons/categories.js +3 -1
- package/package.json +1 -1
|
@@ -24,6 +24,49 @@ export declare const Default: {
|
|
|
24
24
|
args: {
|
|
25
25
|
subMenuRowLength: number;
|
|
26
26
|
data: ({
|
|
27
|
+
id: number;
|
|
28
|
+
parentId: number;
|
|
29
|
+
name: string;
|
|
30
|
+
filterName: any;
|
|
31
|
+
isShowHeader: boolean;
|
|
32
|
+
slug: string;
|
|
33
|
+
productCount: number;
|
|
34
|
+
headerMediaUrl: string;
|
|
35
|
+
medias: any[];
|
|
36
|
+
icon: string;
|
|
37
|
+
children: ({
|
|
38
|
+
id: number;
|
|
39
|
+
parentId: number;
|
|
40
|
+
name: string;
|
|
41
|
+
filterName: any;
|
|
42
|
+
isShowHeader: boolean;
|
|
43
|
+
slug: string;
|
|
44
|
+
productCount: number;
|
|
45
|
+
headerMediaUrl: any;
|
|
46
|
+
medias: any[];
|
|
47
|
+
children: any[];
|
|
48
|
+
parent: any[];
|
|
49
|
+
hasBadge: boolean;
|
|
50
|
+
badgeText: string;
|
|
51
|
+
} | {
|
|
52
|
+
id: number;
|
|
53
|
+
parentId: number;
|
|
54
|
+
name: string;
|
|
55
|
+
filterName: any;
|
|
56
|
+
isShowHeader: boolean;
|
|
57
|
+
slug: string;
|
|
58
|
+
productCount: number;
|
|
59
|
+
headerMediaUrl: any;
|
|
60
|
+
medias: any[];
|
|
61
|
+
children: any[];
|
|
62
|
+
parent: any[];
|
|
63
|
+
hasBadge?: undefined;
|
|
64
|
+
badgeText?: undefined;
|
|
65
|
+
})[];
|
|
66
|
+
parent: any[];
|
|
67
|
+
component?: undefined;
|
|
68
|
+
hasCustomItem?: undefined;
|
|
69
|
+
} | {
|
|
27
70
|
id: number;
|
|
28
71
|
parentId: number;
|
|
29
72
|
name: string;
|
|
@@ -18,14 +18,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var props_1 = require("./props");
|
|
19
19
|
var OptionMenu_styled_1 = require("./OptionMenu.styled");
|
|
20
20
|
var refactorColumn_1 = __importDefault(require("../../utils/refactorColumn"));
|
|
21
|
+
var Badges_1 = __importDefault(require("../Badges"));
|
|
21
22
|
var OptionMenu = function (_a) {
|
|
22
23
|
var _b = _a.rowLength, rowLength = _b === void 0 ? props_1.OptionMenuDefault.rowLength : _b, _c = _a.data, data = _c === void 0 ? props_1.OptionMenuDefault.data : _c, _d = _a.hasActiveItem, hasActiveItem = _d === void 0 ? props_1.OptionMenuDefault.hasActiveItem : _d, _e = _a.gridItemWidth, gridItemWidth = _e === void 0 ? props_1.OptionMenuDefault.gridItemWidth : _e;
|
|
23
24
|
var grid = rowLength && Math.ceil(data.length / rowLength);
|
|
24
25
|
var dataWithColumn = (0, refactorColumn_1.default)(data, rowLength || 0);
|
|
25
26
|
var ButtonLinkComponent = function (_a) {
|
|
26
|
-
var item = _a.item, children = _a.children;
|
|
27
|
-
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.
|
|
27
|
+
var item = _a.item, children = _a.children, hasBadge = _a.hasBadge, badgeText = _a.badgeText;
|
|
28
|
+
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "primary", title: badgeText }) })) : ""] })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "primary", title: badgeText }) })) : ""] })) })));
|
|
28
29
|
};
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.OptionMenuStyled, __assign({ "$gridTemplateColumns": grid, "$gridItemWidth": gridItemWidth }, { children: dataWithColumn.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInnerItem, __assign({ "$isSeeAll": subItem.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: subItem }, { children: (0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInnerItemButtonInner, __assign({ "$isActive": hasActiveItem && subItem.isActive }, { children: subItem.name })) })) }), subItem.id)); }) }) }, key)); }) })));
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.OptionMenuStyled, __assign({ "$gridTemplateColumns": grid, "$gridItemWidth": gridItemWidth }, { children: dataWithColumn.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInnerItem, __assign({ "$isSeeAll": subItem.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: subItem, hasBadge: subItem.hasBadge, badgeText: subItem.badgeText }, { children: (0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInnerItemButtonInner, __assign({ "$hasBadge": subItem.hasBadge, "$isActive": hasActiveItem && subItem.isActive }, { children: subItem.name })) })) }), subItem.id)); }) }) }, key)); }) })));
|
|
30
31
|
};
|
|
31
32
|
exports.default = OptionMenu;
|
|
@@ -12,6 +12,6 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
exports.OptionMenuStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0;\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n border-radius: 0.5rem;\n transition: all 0.2s ease-in-out;\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", ", ");\n transition-delay: 0s;\n"], ["\n margin: 0;\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n border-radius: 0.5rem;\n transition: all 0.2s ease-in-out;\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", ", ");\n transition-delay: 0s;\n"])), function (props) { return props.$gridTemplateColumns || '3'; }, function (props) { return props.$gridItemWidth && props.$gridItemWidth; });
|
|
13
13
|
exports.SubCategoryItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n padding: 0;\n margin: 0;\n"], ["\n display: block;\n padding: 0;\n margin: 0;\n"])));
|
|
14
14
|
exports.SubCategoryInner = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0;\n display: grid;\n gap:4px 0;\n margin: 0;\n"], ["\n padding: 0;\n display: grid;\n gap:4px 0;\n margin: 0;\n"])));
|
|
15
|
-
exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n span {\n font-weight: ", ";\n }\n }\n"], ["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n span {\n font-weight: ", ";\n }\n }\n"])), function (props) { return props.$isSeeAll ? '700' : '500'; });
|
|
16
|
-
exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding:
|
|
15
|
+
exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n"], ["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n"])), function (props) { return props.$isSeeAll ? '700' : '500'; });
|
|
16
|
+
exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: ", ";\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n cursor:pointer;\n box-sizing: border-box;\n font:var(--caption-medium-12-15);\n ", "\n background-color: var(--primary-opacity-10);\n color: var(--primary) !important;\n font-weight: 700 !important;\n ", "\n"], ["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: ", ";\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n cursor:pointer;\n box-sizing: border-box;\n font:var(--caption-medium-12-15);\n ", "\n background-color: var(--primary-opacity-10);\n color: var(--primary) !important;\n font-weight: 700 !important;\n ", "\n"])), function (props) { return props.$hasBadge ? '0.5rem 50px 0.5rem 0.5rem' : '0.5rem'; }, function (props) { return (props.$isActive ? "" : "&:hover{"); }, function (props) { return (props.$isActive ? "" : "}"); });
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -7,7 +7,35 @@ declare const _default: {
|
|
|
7
7
|
export default _default;
|
|
8
8
|
export declare const Default: {
|
|
9
9
|
args: {
|
|
10
|
-
data: any[] | {
|
|
10
|
+
data: any[] | ({
|
|
11
|
+
id: number;
|
|
12
|
+
parentId: number;
|
|
13
|
+
name: string;
|
|
14
|
+
filterName: any;
|
|
15
|
+
isShowHeader: boolean;
|
|
16
|
+
slug: string;
|
|
17
|
+
productCount: number;
|
|
18
|
+
headerMediaUrl: any;
|
|
19
|
+
medias: any[];
|
|
20
|
+
children: any[];
|
|
21
|
+
parent: any[];
|
|
22
|
+
hasBadge: boolean;
|
|
23
|
+
badgeText: string;
|
|
24
|
+
} | {
|
|
25
|
+
id: number;
|
|
26
|
+
parentId: number;
|
|
27
|
+
name: string;
|
|
28
|
+
filterName: any;
|
|
29
|
+
isShowHeader: boolean;
|
|
30
|
+
slug: string;
|
|
31
|
+
productCount: number;
|
|
32
|
+
headerMediaUrl: any;
|
|
33
|
+
medias: any[];
|
|
34
|
+
children: any[];
|
|
35
|
+
parent: any[];
|
|
36
|
+
hasBadge?: undefined;
|
|
37
|
+
badgeText?: undefined;
|
|
38
|
+
})[] | {
|
|
11
39
|
id: number;
|
|
12
40
|
parentId: number;
|
|
13
41
|
name: string;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ProductCardHorizontalSmProps } from "./props";
|
|
2
|
-
declare const ProductCardHorizontalSm: ({ title, price, priceSm, slug, period, image, component, hasImageBorder, imageWidth, imageHeight, }: ProductCardHorizontalSmProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const ProductCardHorizontalSm: ({ title, price, priceSm, slug, period, image, component, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, }: ProductCardHorizontalSmProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ProductCardHorizontalSm;
|
|
@@ -11,16 +11,20 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
return __assign.apply(this, arguments);
|
|
13
13
|
};
|
|
14
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
15
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
16
|
+
};
|
|
14
17
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
19
|
var props_1 = require("./props");
|
|
17
20
|
var ProductCardHorizontalSm_styled_1 = require("./ProductCardHorizontalSm.styled");
|
|
21
|
+
var Button_1 = __importDefault(require("../Button"));
|
|
18
22
|
var ProductCardHorizontalSm = function (_a) {
|
|
19
|
-
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.price, price = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _c, _d = _a.priceSm, priceSm = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _h, _j = _a.hasImageBorder, hasImageBorder = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _j, _k = _a.imageWidth, imageWidth = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _k, _l = _a.imageHeight, imageHeight = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _l;
|
|
23
|
+
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.price, price = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _c, _d = _a.priceSm, priceSm = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _h, _j = _a.hasImageBorder, hasImageBorder = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _j, _k = _a.imageWidth, imageWidth = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _k, _l = _a.imageHeight, imageHeight = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _l, _m = _a.infoPosition, infoPosition = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _m, _o = _a.hasButton, hasButton = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _o, _p = _a.buttonVariant, buttonVariant = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _p, _q = _a.buttonText, buttonText = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _r, _s = _a.isSelected, isSelected = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _s, _t = _a.hasTitleWrap, hasTitleWrap = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _t, _u = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _u;
|
|
20
24
|
var LinkComponent = function (_a) {
|
|
21
25
|
var item = _a.item, children = _a.children;
|
|
22
26
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
23
27
|
};
|
|
24
|
-
return ((0, jsx_runtime_1.
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected }, { children: [hasBorder && (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.ImgWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$period": period }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ variant: buttonVariant, size: "xsmall" }, { children: buttonText })))] }))] }) }))] })));
|
|
25
29
|
};
|
|
26
30
|
exports.default = ProductCardHorizontalSm;
|
|
@@ -1,3 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ProductCardHorizontalSmStyledProps } from "./props";
|
|
3
|
+
export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
3
4
|
export declare const ProductCardHorizontalSmStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
5
|
+
export declare const Border: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
6
|
+
export declare const HorizontalSmWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
|
+
export declare const ImgWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
8
|
+
export declare const TextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
9
|
+
export declare const PriceContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
10
|
+
export declare const Price: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
11
|
+
export declare const Period: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
12
|
+
export declare const RightContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ProductCardHorizontalSmStyledProps>> & string;
|
|
@@ -7,8 +7,17 @@ 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.ProductCardHorizontalSmStyled = void 0;
|
|
10
|
+
exports.RightContentWrapper = exports.Period = exports.Price = exports.PriceContent = exports.TextWrapper = exports.ImgWrapper = exports.HorizontalSmWrapper = exports.Border = exports.ProductCardHorizontalSmStyled = exports.Title = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.
|
|
14
|
-
var
|
|
13
|
+
exports.Title = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n transition: all .2s ease;\n"], ["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n transition: all .2s ease;\n"])), function (props) { return props.$hasTitleWrap ? '2' : '1'; });
|
|
14
|
+
exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"])), devices_1.devices.mdUp, exports.Title, exports.Title);
|
|
15
|
+
exports.Border = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: ", ";\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n"], ["\n border: ", ";\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n"])), function (props) { return props.$isSelected ? '2px solid var(--primary)' : '1px solid var(--grey-10)'; });
|
|
16
|
+
exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n"], ["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n"])));
|
|
17
|
+
exports.ImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n > * {\n vertical-align: middle !important;\n }\n"], ["\n border: ", ";\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n > * {\n vertical-align: middle !important;\n }\n"])), function (props) { return props.$hasImageBorder ? '1px solid var(--dark-opacity-5)' : 'none'; }, function (props) { return props.$imageWidth ? props.$imageWidth : '71px'; }, function (props) { return props.$imageHeight ? props.$imageHeight : '50px'; });
|
|
18
|
+
exports.TextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (props) { return props.$period ? "2rem" : "0"; });
|
|
19
|
+
exports.PriceContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return (props === null || props === void 0 ? void 0 : props.$infoPosition) === 'left' ? "\n text-align: start;\n display: flex;\n align-items: flex-end;\n margin-top: 8px;\n " : "\n text-align: end;\n "; });
|
|
20
|
+
exports.Price = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n font:var(--title-extra-bold-16-19);\n small {\n font: var(--body-bold-14-17);\n }\n"], ["\n display: block;\n font:var(--title-extra-bold-16-19);\n small {\n font: var(--body-bold-14-17);\n }\n"])));
|
|
21
|
+
exports.Period = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n ", "\n font:var(--body-regular-14-17);\n"], ["\n display: block;\n ", "\n font:var(--body-regular-14-17);\n"])), function (props) { return (props === null || props === void 0 ? void 0 : props.$infoPosition) === 'left' ? "\n margin-bottom: 0;\n margin-left: 4px;\n " : "\n margin-bottom: 4px;\n "; });
|
|
22
|
+
exports.RightContentWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) { return props.$hasButtonRemoveMdDown ? "\n @media only screen and ".concat(devices_1.devices.lg, " {\n display: none;\n }\n ") : "\n display: block;\n "; });
|
|
23
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { variants } from "../Button/props";
|
|
3
|
+
type VARIANT = typeof variants[number];
|
|
2
4
|
export interface ProductCardHorizontalSm {
|
|
3
5
|
title?: string;
|
|
4
6
|
price?: string;
|
|
@@ -10,12 +12,26 @@ export interface ProductCardHorizontalSm {
|
|
|
10
12
|
hasImageBorder?: boolean;
|
|
11
13
|
imageWidth?: string;
|
|
12
14
|
imageHeight?: string;
|
|
15
|
+
infoPosition?: 'left' | 'right';
|
|
16
|
+
hasButton?: boolean;
|
|
17
|
+
buttonVariant?: VARIANT;
|
|
18
|
+
buttonText?: string;
|
|
19
|
+
hasBorder?: boolean;
|
|
20
|
+
isSelected?: boolean;
|
|
21
|
+
hasTitleWrap?: boolean;
|
|
22
|
+
hasButtonRemoveMdDown?: boolean;
|
|
13
23
|
}
|
|
14
24
|
export interface ProductCardHorizontalSmStyledProps {
|
|
15
25
|
$period?: string;
|
|
16
26
|
$hasImageBorder?: boolean;
|
|
17
27
|
$imageWidth?: string;
|
|
18
28
|
$imageHeight?: string;
|
|
29
|
+
$infoPosition?: 'left' | 'right';
|
|
30
|
+
$hasBorder?: boolean;
|
|
31
|
+
$isSelected?: boolean;
|
|
32
|
+
$hasTitleWrap?: boolean;
|
|
33
|
+
$hasButtonRemoveMdDown?: boolean;
|
|
19
34
|
}
|
|
20
35
|
export declare const ProductCardHorizontalSmDefault: ProductCardHorizontalSm;
|
|
21
36
|
export type ProductCardHorizontalSmProps = typeof ProductCardHorizontalSmDefault;
|
|
37
|
+
export {};
|
|
@@ -12,4 +12,12 @@ exports.ProductCardHorizontalSmDefault = {
|
|
|
12
12
|
hasImageBorder: false,
|
|
13
13
|
imageWidth: null,
|
|
14
14
|
imageHeight: null,
|
|
15
|
+
infoPosition: 'right',
|
|
16
|
+
hasButton: false,
|
|
17
|
+
buttonVariant: "primary",
|
|
18
|
+
buttonText: "Kullan",
|
|
19
|
+
hasBorder: true,
|
|
20
|
+
isSelected: false,
|
|
21
|
+
hasTitleWrap: true,
|
|
22
|
+
hasButtonRemoveMdDown: false,
|
|
15
23
|
};
|
package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts
CHANGED
|
@@ -2,7 +2,28 @@ declare const _default: {
|
|
|
2
2
|
title: string;
|
|
3
3
|
component: (props: any) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
tags: string[];
|
|
5
|
-
argTypes: {
|
|
5
|
+
argTypes: {
|
|
6
|
+
infoPosition: {
|
|
7
|
+
control: string;
|
|
8
|
+
options: string[];
|
|
9
|
+
};
|
|
10
|
+
hasButton: {
|
|
11
|
+
control: string;
|
|
12
|
+
};
|
|
13
|
+
buttonVariant: {
|
|
14
|
+
control: string;
|
|
15
|
+
options: string[];
|
|
16
|
+
};
|
|
17
|
+
buttonText: {
|
|
18
|
+
control: string;
|
|
19
|
+
};
|
|
20
|
+
hasBorder: {
|
|
21
|
+
control: string;
|
|
22
|
+
};
|
|
23
|
+
isSelected: {
|
|
24
|
+
control: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
6
27
|
};
|
|
7
28
|
export default _default;
|
|
8
29
|
export declare const Default: {
|
|
@@ -16,5 +37,10 @@ export declare const Default: {
|
|
|
16
37
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
17
38
|
period: string;
|
|
18
39
|
image: import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
infoPosition: string;
|
|
41
|
+
hasButton: boolean;
|
|
42
|
+
buttonVariant: string;
|
|
43
|
+
buttonText: string;
|
|
44
|
+
hasBorder: boolean;
|
|
19
45
|
};
|
|
20
46
|
};
|
|
@@ -17,11 +17,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var ProductCardHorizontalSm_1 = __importDefault(require("../ProductCardHorizontalSm"));
|
|
20
|
+
var props_1 = require("../../Button/props");
|
|
20
21
|
exports.default = {
|
|
21
22
|
title: 'Components/ProductCard/ProductCard Horizontal Small',
|
|
22
23
|
component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "700px" } }, { children: (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_1.default, __assign({}, props)) })); },
|
|
23
24
|
tags: ['autodocs'],
|
|
24
|
-
argTypes: {
|
|
25
|
+
argTypes: {
|
|
26
|
+
infoPosition: {
|
|
27
|
+
control: 'select',
|
|
28
|
+
options: ['left', 'right'],
|
|
29
|
+
},
|
|
30
|
+
hasButton: {
|
|
31
|
+
control: 'boolean',
|
|
32
|
+
},
|
|
33
|
+
buttonVariant: {
|
|
34
|
+
control: 'select',
|
|
35
|
+
options: props_1.variants,
|
|
36
|
+
},
|
|
37
|
+
buttonText: {
|
|
38
|
+
control: 'text',
|
|
39
|
+
},
|
|
40
|
+
hasBorder: {
|
|
41
|
+
control: 'boolean',
|
|
42
|
+
},
|
|
43
|
+
isSelected: {
|
|
44
|
+
control: 'boolean',
|
|
45
|
+
},
|
|
46
|
+
}
|
|
25
47
|
};
|
|
26
48
|
exports.Default = {
|
|
27
49
|
args: {
|
|
@@ -34,6 +56,11 @@ exports.Default = {
|
|
|
34
56
|
return (0, jsx_runtime_1.jsx)("a", __assign({ href: "test" }, { children: children }));
|
|
35
57
|
},
|
|
36
58
|
period: "hafta",
|
|
37
|
-
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
|
|
59
|
+
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }),
|
|
60
|
+
infoPosition: "left",
|
|
61
|
+
hasButton: true,
|
|
62
|
+
buttonVariant: "primary",
|
|
63
|
+
buttonText: "Kullan",
|
|
64
|
+
hasBorder: false,
|
|
38
65
|
},
|
|
39
66
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, ...other }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
|
|
2
|
+
declare const _default: React.MemoExoticComponent<({ title, description, hasDiscount, price, oldPrice, oldPricePeriod, slug, period, discountRate, isResponsive, image, hasCustomBadge, customBadge, hasNewImageType, hasOutOfStock, hasBeltBadge, beltBadgeVariant, beltBadgeTitle, imageInfoText, imageInfoTextVariant, isShowOldPrice, isOldPricePeriodUnderline, hasImageOffset, ...other }: import("./props").ProductCardVertical) => import("react/jsx-runtime").JSX.Element>;
|
|
3
3
|
export default _default;
|
|
@@ -32,8 +32,8 @@ var ProductCardVertical_styled_1 = require("./ProductCardVertical.styled");
|
|
|
32
32
|
var react_i18next_1 = require("react-i18next");
|
|
33
33
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
34
34
|
var ProductCardVertical = function (_a) {
|
|
35
|
-
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, _w = _a.imageInfoTextVariant, imageInfoTextVariant = _w === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _w, _x = _a.isShowOldPrice, isShowOldPrice = _x === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _x, _y = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _y === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _y, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock", "hasBeltBadge", "beltBadgeVariant", "beltBadgeTitle", "imageInfoText", "imageInfoTextVariant", "isShowOldPrice", "isOldPricePeriodUnderline"]);
|
|
35
|
+
var _b = _a.title, title = _b === void 0 ? props_1.ProductCardVerticalDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.ProductCardVerticalDefault.description : _c, _d = _a.hasDiscount, hasDiscount = _d === void 0 ? props_1.ProductCardVerticalDefault.hasDiscount : _d, _e = _a.price, price = _e === void 0 ? props_1.ProductCardVerticalDefault.price : _e, _f = _a.oldPrice, oldPrice = _f === void 0 ? props_1.ProductCardVerticalDefault.oldPrice : _f, _g = _a.oldPricePeriod, oldPricePeriod = _g === void 0 ? props_1.ProductCardVerticalDefault.oldPricePeriod : _g, _h = _a.slug, slug = _h === void 0 ? props_1.ProductCardVerticalDefault.slug : _h, _j = _a.period, period = _j === void 0 ? props_1.ProductCardVerticalDefault.period : _j, _k = _a.discountRate, discountRate = _k === void 0 ? props_1.ProductCardVerticalDefault.discountRate : _k, _l = _a.isResponsive, isResponsive = _l === void 0 ? props_1.ProductCardVerticalDefault.isResponsive : _l, _m = _a.image, image = _m === void 0 ? props_1.ProductCardVerticalDefault.image : _m, _o = _a.hasCustomBadge, hasCustomBadge = _o === void 0 ? props_1.ProductCardVerticalDefault.hasCustomBadge : _o, _p = _a.customBadge, customBadge = _p === void 0 ? props_1.ProductCardVerticalDefault.customBadge : _p, _q = _a.hasNewImageType, hasNewImageType = _q === void 0 ? props_1.ProductCardVerticalDefault.hasNewImageType : _q, _r = _a.hasOutOfStock, hasOutOfStock = _r === void 0 ? props_1.ProductCardVerticalDefault.hasOutOfStock : _r, _s = _a.hasBeltBadge, hasBeltBadge = _s === void 0 ? props_1.ProductCardVerticalDefault.hasBeltBadge : _s, _t = _a.beltBadgeVariant, beltBadgeVariant = _t === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeVariant : _t, _u = _a.beltBadgeTitle, beltBadgeTitle = _u === void 0 ? props_1.ProductCardVerticalDefault.beltBadgeTitle : _u, _v = _a.imageInfoText, imageInfoText = _v === void 0 ? props_1.ProductCardVerticalDefault.imageInfoText : _v, _w = _a.imageInfoTextVariant, imageInfoTextVariant = _w === void 0 ? props_1.ProductCardVerticalDefault.imageInfoTextVariant : _w, _x = _a.isShowOldPrice, isShowOldPrice = _x === void 0 ? props_1.ProductCardVerticalDefault.isShowOldPrice : _x, _y = _a.isOldPricePeriodUnderline, isOldPricePeriodUnderline = _y === void 0 ? props_1.ProductCardVerticalDefault.isOldPricePeriodUnderline : _y, _z = _a.hasImageOffset, hasImageOffset = _z === void 0 ? props_1.ProductCardVerticalDefault.hasImageOffset : _z, other = __rest(_a, ["title", "description", "hasDiscount", "price", "oldPrice", "oldPricePeriod", "slug", "period", "discountRate", "isResponsive", "image", "hasCustomBadge", "customBadge", "hasNewImageType", "hasOutOfStock", "hasBeltBadge", "beltBadgeVariant", "beltBadgeTitle", "imageInfoText", "imageInfoTextVariant", "isShowOldPrice", "isOldPricePeriodUnderline", "hasImageOffset"]);
|
|
36
36
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
37
|
-
return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardVertical_styled_1.ProductCardVerticalStyled, __assign({ "$isResponsive": isResponsive, "$discountRate": discountRate, "$hasNewImageType": hasNewImageType, "$hasOutOfStock": hasOutOfStock, "$imageInfoTextVariant": imageInfoTextVariant, "$isOldPricePeriodUnderline": isOldPricePeriodUnderline, "$hasImageOffset": hasImageOffset }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [hasBeltBadge && !hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { variant: beltBadgeVariant, size: "medium", left: (isResponsive ? '16px' : '8px'), top: (isResponsive ? '16px' : '8px'), title: beltBadgeTitle }) })), hasCustomBadge && (0, jsx_runtime_1.jsx)("div", __assign({ className: "cartBadge hasInset" }, { children: customBadge })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: [image, hasOutOfStock && (0, jsx_runtime_1.jsx)("div", __assign({ className: "outOfStock" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "light", title: t("ALL_RENTED") }) })), imageInfoText && (0, jsx_runtime_1.jsx)("div", { className: "imageInfoText", dangerouslySetInnerHTML: { __html: imageInfoText } })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardPriceContent" }, { children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discountRate" }, { children: ["%", discountRate] })), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && isShowOldPrice && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "oldPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: oldPrice })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(oldPricePeriod) }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "newPrice" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] }))] })] }))] }))] }) })));
|
|
38
38
|
};
|
|
39
39
|
exports.default = (0, react_1.memo)(ProductCardVertical);
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ProductCardVerticalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n padding: 0.5rem;\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n \n .price {\n font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n padding: 0.5rem;\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n \n .price {\n font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$hasNewImageType ? "\n *{\n height: 100% !important;\n object-fit: contain;\n max-width: 100%;\n }\n " : "\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n "; }, function (props) { return props.$imageInfoTextVariant === "secondary" ? "\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n " : "\n background: linear-gradient(360deg, #411590 0%, #9760FC 100%);\n color: white;\n "; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$isOldPricePeriodUnderline ? "text-decoration: line-through;" : ""; }, function (props) { return props.$isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n &:is(.hasInset){\n left: 15px;\n top: 8px;\n }\n }\n .img {\n height: 215px;\n .imageInfoText{\n font:var(--body-semi-bold-13-16);\n height: 32px !important;\n strong{\n font:var(--body-bold-13-16);\n }\n }\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
|
|
13
|
+
exports.ProductCardVerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n ", "\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n \n .price {\n font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n background-color: white;\n .cartBadge {\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n\n &:is(.hasInset) {\n left: 7px;\n top: 0;\n }\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 4px 15px 0 var(--dark-shadow-color);\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n ", "\n ", "\n .outOfStock{\n width: 100% !important;\n height: 100% !important;\n background-color: #BABBC280;\n position: absolute;\n inset: 0;\n align-items: center;\n justify-content: center;\n display: flex;\n > div{\n height: 17px !important;\n aspect-ratio: initial !important;\n }\n }\n .imageInfoText{\n position: absolute;\n bottom: 0;\n left: 0;\n top:auto !important;\n width: 100%;\n height: 24px !important;\n align-items: center;\n justify-content: center;\n display: flex;\n ", "\n border-radius: 0;\n top: auto;\n transform: none;\n aspect-ratio: initial !important;\n font:var(--caption-semi-bold-10-12); \n strong{\n font:var(--caption-bold-10-12);\n height: auto !important;\n aspect-ratio: initial !important;\n margin-right: 2px;\n }\n }\n }\n\n .productCardContent {\n padding: 1rem 0 0.5rem 0;\n\n .productCardTitle {\n display: block;\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n\n .productCardDescription {\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n color: ", ";\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font: var(--body-extra-bold-13-16);\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 4px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n \n .price {\n font: var(--caption-semi-bold-12-15);\n text-decoration: line-through;\n }\n\n .period {\n font: var(--caption-regular-12-15);\n ", "\n }\n }\n\n .newPrice {\n .price {\n font: var(--body-extra-bold-14-17);\n }\n\n .period {\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$hasImageOffset ? "\n padding: 0.5rem;\n " : "\n padding: 0;\n "; }, function (props) { return props.$hasNewImageType ? "\n *{\n height: 100% !important;\n object-fit: contain;\n max-width: 100%;\n }\n " : "\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n "; }, function (props) { return props.$imageInfoTextVariant === "secondary" ? "\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n " : "\n background: linear-gradient(360deg, #411590 0%, #9760FC 100%);\n color: white;\n "; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasOutOfStock ? "var(--dark-opacity-50)" : "var(--dark)"; }, function (props) { return props.$isOldPricePeriodUnderline ? "text-decoration: line-through;" : ""; }, function (props) { return props.$isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n &:is(.hasInset){\n left: 15px;\n top: 8px;\n }\n }\n .img {\n height: 215px;\n .imageInfoText{\n font:var(--body-semi-bold-13-16);\n height: 32px !important;\n strong{\n font:var(--body-bold-13-16);\n }\n }\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
|
|
14
14
|
var templateObject_1;
|
|
@@ -24,6 +24,7 @@ export interface ProductCardVertical {
|
|
|
24
24
|
imageInfoText?: string;
|
|
25
25
|
imageInfoTextVariant?: IMAGE_INFO_TEXT_VARIANT;
|
|
26
26
|
isOldPricePeriodUnderline?: boolean;
|
|
27
|
+
hasImageOffset?: boolean;
|
|
27
28
|
}
|
|
28
29
|
export interface ProductCardVerticalStyledProps {
|
|
29
30
|
$discountRate?: number;
|
|
@@ -32,6 +33,7 @@ export interface ProductCardVerticalStyledProps {
|
|
|
32
33
|
$hasOutOfStock?: boolean;
|
|
33
34
|
$imageInfoTextVariant?: IMAGE_INFO_TEXT_VARIANT;
|
|
34
35
|
$isOldPricePeriodUnderline?: boolean;
|
|
36
|
+
$hasImageOffset?: boolean;
|
|
35
37
|
}
|
|
36
38
|
export declare const ProductCardVerticalDefault: ProductCardVertical;
|
|
37
39
|
export type ProductCardVerticalProps = typeof ProductCardVerticalDefault;
|
|
@@ -1,4 +1,47 @@
|
|
|
1
1
|
declare const _default: ({
|
|
2
|
+
id: number;
|
|
3
|
+
parentId: number;
|
|
4
|
+
name: string;
|
|
5
|
+
filterName: any;
|
|
6
|
+
isShowHeader: boolean;
|
|
7
|
+
slug: string;
|
|
8
|
+
productCount: number;
|
|
9
|
+
headerMediaUrl: string;
|
|
10
|
+
medias: any[];
|
|
11
|
+
icon: string;
|
|
12
|
+
children: ({
|
|
13
|
+
id: number;
|
|
14
|
+
parentId: number;
|
|
15
|
+
name: string;
|
|
16
|
+
filterName: any;
|
|
17
|
+
isShowHeader: boolean;
|
|
18
|
+
slug: string;
|
|
19
|
+
productCount: number;
|
|
20
|
+
headerMediaUrl: any;
|
|
21
|
+
medias: any[];
|
|
22
|
+
children: any[];
|
|
23
|
+
parent: any[];
|
|
24
|
+
hasBadge: boolean;
|
|
25
|
+
badgeText: string;
|
|
26
|
+
} | {
|
|
27
|
+
id: number;
|
|
28
|
+
parentId: number;
|
|
29
|
+
name: string;
|
|
30
|
+
filterName: any;
|
|
31
|
+
isShowHeader: boolean;
|
|
32
|
+
slug: string;
|
|
33
|
+
productCount: number;
|
|
34
|
+
headerMediaUrl: any;
|
|
35
|
+
medias: any[];
|
|
36
|
+
children: any[];
|
|
37
|
+
parent: any[];
|
|
38
|
+
hasBadge?: undefined;
|
|
39
|
+
badgeText?: undefined;
|
|
40
|
+
})[];
|
|
41
|
+
parent: any[];
|
|
42
|
+
component?: undefined;
|
|
43
|
+
hasCustomItem?: undefined;
|
|
44
|
+
} | {
|
|
2
45
|
id: number;
|
|
3
46
|
parentId: number;
|
|
4
47
|
name: string;
|
package/dist/jsons/categories.js
CHANGED