krl-alfred 2.17.51 → 2.17.53
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/Alert/stories/Alert.stories.d.ts +121 -6
- package/dist/components/Alert/stories/Alert.stories.js +145 -4
- package/dist/components/BannerCard/BannerCard.styled.js +1 -1
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts +3 -3
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js +23 -9
- package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +28 -10
- package/dist/components/ProductCardHorizontalSm/props.d.ts +6 -2
- package/dist/components/ProductCardHorizontalSm/props.js +3 -0
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts +191 -2
- package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js +60 -28
- package/dist/components/ProductCardVertical/ProductCardVertical.styled.js +1 -1
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.d.ts +206 -7
- package/dist/components/ProductCardVertical/stories/ProductCardVertical.stories.js +62 -17
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.js +1 -1
- package/package.json +8 -7
|
@@ -5,25 +5,140 @@ declare const _default: {
|
|
|
5
5
|
argTypes: {
|
|
6
6
|
variant: {
|
|
7
7
|
control: string;
|
|
8
|
-
options:
|
|
9
|
-
warning: string;
|
|
10
|
-
danger: string;
|
|
11
|
-
success: string;
|
|
12
|
-
};
|
|
8
|
+
options: string[];
|
|
13
9
|
};
|
|
14
10
|
icon: {
|
|
15
11
|
control: string;
|
|
16
12
|
options: string[];
|
|
17
13
|
};
|
|
14
|
+
show: {
|
|
15
|
+
control: string;
|
|
16
|
+
};
|
|
17
|
+
title: {
|
|
18
|
+
control: string;
|
|
19
|
+
};
|
|
20
|
+
messages: {
|
|
21
|
+
control: string;
|
|
22
|
+
};
|
|
23
|
+
width: {
|
|
24
|
+
control: string;
|
|
25
|
+
};
|
|
26
|
+
top: {
|
|
27
|
+
control: string;
|
|
28
|
+
};
|
|
29
|
+
bottom: {
|
|
30
|
+
control: string;
|
|
31
|
+
};
|
|
32
|
+
children: {
|
|
33
|
+
control: boolean;
|
|
34
|
+
};
|
|
18
35
|
};
|
|
19
36
|
};
|
|
20
37
|
export default _default;
|
|
21
38
|
export declare const Default: {
|
|
22
39
|
args: {
|
|
23
|
-
variant:
|
|
40
|
+
variant: string;
|
|
41
|
+
width: string;
|
|
42
|
+
show: boolean;
|
|
43
|
+
title: string;
|
|
44
|
+
messages: string[];
|
|
45
|
+
icon: string;
|
|
46
|
+
top: string;
|
|
47
|
+
bottom: string;
|
|
48
|
+
children: any;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
export declare const Warning: {
|
|
52
|
+
args: {
|
|
53
|
+
variant: string;
|
|
54
|
+
width: string;
|
|
55
|
+
show: boolean;
|
|
56
|
+
title: string;
|
|
57
|
+
messages: string[];
|
|
58
|
+
icon: string;
|
|
59
|
+
top: string;
|
|
60
|
+
bottom: string;
|
|
61
|
+
children: any;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
export declare const Danger: {
|
|
65
|
+
args: {
|
|
66
|
+
variant: string;
|
|
67
|
+
width: string;
|
|
68
|
+
show: boolean;
|
|
69
|
+
title: string;
|
|
70
|
+
messages: string[];
|
|
71
|
+
icon: string;
|
|
72
|
+
top: string;
|
|
73
|
+
bottom: string;
|
|
74
|
+
children: any;
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
export declare const Success: {
|
|
78
|
+
args: {
|
|
79
|
+
variant: string;
|
|
80
|
+
width: string;
|
|
81
|
+
show: boolean;
|
|
82
|
+
title: string;
|
|
83
|
+
messages: string[];
|
|
84
|
+
icon: string;
|
|
85
|
+
top: string;
|
|
86
|
+
bottom: string;
|
|
87
|
+
children: any;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
export declare const WithChildren: {
|
|
91
|
+
args: {
|
|
92
|
+
variant: string;
|
|
93
|
+
width: string;
|
|
94
|
+
show: boolean;
|
|
95
|
+
title: string;
|
|
96
|
+
messages: string[];
|
|
97
|
+
icon: string;
|
|
98
|
+
top: string;
|
|
99
|
+
bottom: string;
|
|
100
|
+
children: import("react/jsx-runtime").JSX.Element;
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
export declare const MultipleMessages: {
|
|
104
|
+
args: {
|
|
105
|
+
variant: string;
|
|
106
|
+
width: string;
|
|
107
|
+
show: boolean;
|
|
108
|
+
title: string;
|
|
109
|
+
messages: string[];
|
|
110
|
+
icon: string;
|
|
111
|
+
top: string;
|
|
112
|
+
bottom: string;
|
|
113
|
+
children: any;
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
export declare const CustomWidth: {
|
|
117
|
+
args: {
|
|
118
|
+
variant: string;
|
|
24
119
|
width: string;
|
|
25
120
|
show: boolean;
|
|
121
|
+
title: string;
|
|
26
122
|
messages: string[];
|
|
27
123
|
icon: string;
|
|
124
|
+
top: string;
|
|
125
|
+
bottom: string;
|
|
126
|
+
children: any;
|
|
28
127
|
};
|
|
29
128
|
};
|
|
129
|
+
export declare const WithSpacing: {
|
|
130
|
+
args: {
|
|
131
|
+
variant: string;
|
|
132
|
+
width: string;
|
|
133
|
+
show: boolean;
|
|
134
|
+
title: string;
|
|
135
|
+
messages: string[];
|
|
136
|
+
icon: string;
|
|
137
|
+
top: string;
|
|
138
|
+
bottom: string;
|
|
139
|
+
children: any;
|
|
140
|
+
};
|
|
141
|
+
};
|
|
142
|
+
export declare const AllVariants: {
|
|
143
|
+
render: () => import("react/jsx-runtime").JSX.Element;
|
|
144
|
+
};
|
|
@@ -1,9 +1,21 @@
|
|
|
1
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
|
+
};
|
|
2
13
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
15
|
};
|
|
5
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Default = void 0;
|
|
17
|
+
exports.AllVariants = exports.WithSpacing = exports.CustomWidth = exports.MultipleMessages = exports.WithChildren = exports.Success = exports.Danger = exports.Warning = exports.Default = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
19
|
var Alert_1 = __importDefault(require("../Alert"));
|
|
8
20
|
var props_1 = require("../props");
|
|
9
21
|
var iconList_1 = require("../../Icon/iconList");
|
|
@@ -12,16 +24,145 @@ exports.default = {
|
|
|
12
24
|
component: Alert_1.default,
|
|
13
25
|
tags: ['autodocs'],
|
|
14
26
|
argTypes: {
|
|
15
|
-
variant: {
|
|
16
|
-
|
|
27
|
+
variant: {
|
|
28
|
+
control: 'select',
|
|
29
|
+
options: Object.keys(props_1.variants),
|
|
30
|
+
},
|
|
31
|
+
icon: {
|
|
32
|
+
control: 'select',
|
|
33
|
+
options: Object.keys(iconList_1.iconList),
|
|
34
|
+
},
|
|
35
|
+
show: {
|
|
36
|
+
control: 'boolean',
|
|
37
|
+
},
|
|
38
|
+
title: {
|
|
39
|
+
control: 'text',
|
|
40
|
+
},
|
|
41
|
+
messages: {
|
|
42
|
+
control: 'object',
|
|
43
|
+
},
|
|
44
|
+
width: {
|
|
45
|
+
control: 'text',
|
|
46
|
+
},
|
|
47
|
+
top: {
|
|
48
|
+
control: 'text',
|
|
49
|
+
},
|
|
50
|
+
bottom: {
|
|
51
|
+
control: 'text',
|
|
52
|
+
},
|
|
53
|
+
children: {
|
|
54
|
+
control: false,
|
|
55
|
+
},
|
|
17
56
|
}
|
|
18
57
|
};
|
|
19
58
|
exports.Default = {
|
|
20
59
|
args: {
|
|
21
|
-
variant:
|
|
60
|
+
variant: "warning",
|
|
22
61
|
width: "327px",
|
|
23
62
|
show: true,
|
|
63
|
+
title: "Bir hata oluştu",
|
|
24
64
|
messages: ["Alert message"],
|
|
25
65
|
icon: "Danger",
|
|
66
|
+
top: "",
|
|
67
|
+
bottom: "",
|
|
68
|
+
children: null,
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
exports.Warning = {
|
|
72
|
+
args: {
|
|
73
|
+
variant: "warning",
|
|
74
|
+
width: "327px",
|
|
75
|
+
show: true,
|
|
76
|
+
title: "Uyarı",
|
|
77
|
+
messages: ["Bu bir uyarı mesajıdır."],
|
|
78
|
+
icon: "Warning",
|
|
79
|
+
top: "",
|
|
80
|
+
bottom: "",
|
|
81
|
+
children: null,
|
|
82
|
+
},
|
|
83
|
+
};
|
|
84
|
+
exports.Danger = {
|
|
85
|
+
args: {
|
|
86
|
+
variant: "danger",
|
|
87
|
+
width: "327px",
|
|
88
|
+
show: true,
|
|
89
|
+
title: "Hata",
|
|
90
|
+
messages: ["Bir hata oluştu. Lütfen tekrar deneyin."],
|
|
91
|
+
icon: "Danger",
|
|
92
|
+
top: "",
|
|
93
|
+
bottom: "",
|
|
94
|
+
children: null,
|
|
95
|
+
},
|
|
96
|
+
};
|
|
97
|
+
exports.Success = {
|
|
98
|
+
args: {
|
|
99
|
+
variant: "success",
|
|
100
|
+
width: "327px",
|
|
101
|
+
show: true,
|
|
102
|
+
title: "Başarılı",
|
|
103
|
+
messages: ["İşlem başarıyla tamamlandı."],
|
|
104
|
+
icon: "Success",
|
|
105
|
+
top: "",
|
|
106
|
+
bottom: "",
|
|
107
|
+
children: null,
|
|
108
|
+
},
|
|
109
|
+
};
|
|
110
|
+
exports.WithChildren = {
|
|
111
|
+
args: {
|
|
112
|
+
variant: "warning",
|
|
113
|
+
width: "327px",
|
|
114
|
+
show: true,
|
|
115
|
+
title: "Detaylı Uyarı",
|
|
116
|
+
messages: ["Ana mesaj"],
|
|
117
|
+
icon: "Warning",
|
|
118
|
+
top: "",
|
|
119
|
+
bottom: "",
|
|
120
|
+
children: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { children: "Ek a\u00E7\u0131klama metni buraya gelebilir." }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Liste \u00F6\u011Fesi 1" }), (0, jsx_runtime_1.jsx)("li", { children: "Liste \u00F6\u011Fesi 2" })] })] })),
|
|
121
|
+
},
|
|
122
|
+
};
|
|
123
|
+
exports.MultipleMessages = {
|
|
124
|
+
args: {
|
|
125
|
+
variant: "danger",
|
|
126
|
+
width: "327px",
|
|
127
|
+
show: true,
|
|
128
|
+
title: "Çoklu Hata",
|
|
129
|
+
messages: [
|
|
130
|
+
"İlk hata mesajı",
|
|
131
|
+
"İkinci hata mesajı",
|
|
132
|
+
"Üçüncü hata mesajı"
|
|
133
|
+
],
|
|
134
|
+
icon: "Danger",
|
|
135
|
+
top: "",
|
|
136
|
+
bottom: "",
|
|
137
|
+
children: null,
|
|
26
138
|
},
|
|
27
139
|
};
|
|
140
|
+
exports.CustomWidth = {
|
|
141
|
+
args: {
|
|
142
|
+
variant: "success",
|
|
143
|
+
width: "500px",
|
|
144
|
+
show: true,
|
|
145
|
+
title: "Geniş Alert",
|
|
146
|
+
messages: ["Bu alert özel genişlik kullanıyor."],
|
|
147
|
+
icon: "Success",
|
|
148
|
+
top: "",
|
|
149
|
+
bottom: "",
|
|
150
|
+
children: null,
|
|
151
|
+
},
|
|
152
|
+
};
|
|
153
|
+
exports.WithSpacing = {
|
|
154
|
+
args: {
|
|
155
|
+
variant: "warning",
|
|
156
|
+
width: "327px",
|
|
157
|
+
show: true,
|
|
158
|
+
title: "Spacing Örneği",
|
|
159
|
+
messages: ["Üst ve alt boşluklu alert"],
|
|
160
|
+
icon: "Warning",
|
|
161
|
+
top: "20px",
|
|
162
|
+
bottom: "20px",
|
|
163
|
+
children: null,
|
|
164
|
+
},
|
|
165
|
+
};
|
|
166
|
+
exports.AllVariants = {
|
|
167
|
+
render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, { children: [(0, jsx_runtime_1.jsx)(Alert_1.default, { variant: "warning", width: "327px", show: true, title: "Uyar\u0131", messages: ["Bu bir uyarı mesajıdır."], icon: "Warning" }), (0, jsx_runtime_1.jsx)(Alert_1.default, { variant: "danger", width: "327px", show: true, title: "Hata", messages: ["Bir hata oluştu."], icon: "Danger" }), (0, jsx_runtime_1.jsx)(Alert_1.default, { variant: "success", width: "327px", show: true, title: "Ba\u015Far\u0131l\u0131", messages: ["İşlem başarıyla tamamlandı."], icon: "Success" })] }))); },
|
|
168
|
+
};
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n ", "\n border-radius: 0.5rem;\n position: relative;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n .mobileLink{\n position: absolute;\n inset: 0;\n z-index: 5;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 0.5rem 0.5rem;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n &:is(.imgMobile){\n position: absolute;\n inset: 0;\n z-index: 1;\n @media only screen and ", " {\n display: none;\n }\n }\n *{\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n width: 100% !important;\n object-fit: contain !important;\n object-position: center center !important;\n }\n }\n }\n"], ["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n ", "\n border-radius: 0.5rem;\n position: relative;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n .mobileLink{\n position: absolute;\n inset: 0;\n z-index: 5;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 0.5rem 0.5rem;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n &:is(.imgMobile){\n position: absolute;\n inset: 0;\n z-index: 1;\n @media only screen and ", " {\n display: none;\n }\n }\n *{\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n width: 100% !important;\n object-fit: contain !important;\n object-position: center center !important;\n }\n }\n }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return props.$customStyle; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg);
|
|
13
|
+
exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n ", "\n border-radius: 0.5rem;\n position: relative;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n .mobileLink{\n position: absolute;\n inset: 0;\n z-index: 5;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 0.5rem 0.5rem;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n &:is(.imgMobile){\n position: absolute;\n inset: 0;\n z-index: 1;\n @media only screen and ", " {\n display: none;\n }\n }\n *{\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n overflow: hidden;\n * {\n height: 174px !important;\n max-height: 174px !important;\n width: 100% !important;\n object-fit: contain !important;\n object-position: center center !important;\n }\n }\n }\n"], ["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n ", "\n border-radius: 0.5rem;\n position: relative;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n .mobileLink{\n position: absolute;\n inset: 0;\n z-index: 5;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 0.5rem 0.5rem;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n &:is(.imgMobile){\n position: absolute;\n inset: 0;\n z-index: 1;\n @media only screen and ", " {\n display: none;\n }\n }\n *{\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n overflow: hidden;\n * {\n height: 174px !important;\n max-height: 174px !important;\n width: 100% !important;\n object-fit: contain !important;\n object-position: center center !important;\n }\n }\n }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return props.$customStyle; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
declare const
|
|
3
|
-
export default
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const _default: React.MemoExoticComponent<({ title, price, priceSm, slug, period, image, component, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, hasBordeHover, hasTooltip, tooltipSelectorTitle, tooltipDescription, isDisabled, imageInnerWidth, imageInnerHeight, hasImageRounded, }: import("./props").ProductCardHorizontalSm) => import("react/jsx-runtime").JSX.Element>;
|
|
3
|
+
export default _default;
|
|
@@ -16,16 +16,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
};
|
|
17
17
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
-
var
|
|
20
|
-
var
|
|
19
|
+
var react_1 = require("react");
|
|
20
|
+
var image_1 = __importDefault(require("next/image"));
|
|
21
21
|
var Button_1 = __importDefault(require("../Button"));
|
|
22
22
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
23
|
+
var ProductCardHorizontalSm_styled_1 = require("./ProductCardHorizontalSm.styled");
|
|
24
|
+
var props_1 = require("./props");
|
|
25
|
+
var LinkComponent = (0, react_1.memo)(function (_a) {
|
|
26
|
+
var Component = _a.component, slug = _a.slug, children = _a.children;
|
|
27
|
+
return Component ? (0, jsx_runtime_1.jsx)(Component, __assign({ href: slug }, { children: children })) : (0, jsx_runtime_1.jsx)("a", __assign({ href: slug }, { children: children }));
|
|
28
|
+
});
|
|
29
|
+
var ImageContent = (0, react_1.memo)(function (_a) {
|
|
30
|
+
var image = _a.image, title = _a.title, imageInnerWidth = _a.imageInnerWidth, imageInnerHeight = _a.imageInnerHeight, imageHeight = _a.imageHeight, imageWidth = _a.imageWidth, hasImageBorder = _a.hasImageBorder, hasImageRounded = _a.hasImageRounded;
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.ImgWrapper, __assign({ "$imageHeight": imageHeight, "$imageWidth": imageWidth, "$hasImageBorder": hasImageBorder, "$hasImageRounded": hasImageRounded }, { children: (0, jsx_runtime_1.jsx)(image_1.default, { src: image, alt: title || "", width: imageInnerWidth, height: imageInnerHeight }) })));
|
|
32
|
+
}, function (prev, next) {
|
|
33
|
+
return prev.image === next.image &&
|
|
34
|
+
prev.title === next.title &&
|
|
35
|
+
prev.imageInnerWidth === next.imageInnerWidth &&
|
|
36
|
+
prev.imageInnerHeight === next.imageInnerHeight &&
|
|
37
|
+
prev.imageHeight === next.imageHeight &&
|
|
38
|
+
prev.imageWidth === next.imageWidth &&
|
|
39
|
+
prev.hasImageBorder === next.hasImageBorder;
|
|
40
|
+
});
|
|
23
41
|
var ProductCardHorizontalSm = function (_a) {
|
|
24
|
-
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, _v = _a.hasBordeHover, hasBordeHover = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _v, _w = _a.hasTooltip, hasTooltip = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _w, _x = _a.tooltipSelectorTitle, tooltipSelectorTitle = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _x, _y = _a.tooltipDescription, tooltipDescription = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _y, _z = _a.isDisabled, isDisabled = _z === void 0 ? props_1.ProductCardHorizontalSmDefault.isDisabled : _z;
|
|
25
|
-
|
|
26
|
-
var item = _a.item, children = _a.children;
|
|
27
|
-
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
28
|
-
};
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$isDisabled": isDisabled }, { children: [hasBorder && (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover }), (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, __assign({ "$imageHeight": imageHeight, "$imageWidth": imageWidth }, { 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({ disabled: isDisabled, variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
|
|
42
|
+
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, _v = _a.hasBordeHover, hasBordeHover = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _v, _w = _a.hasTooltip, hasTooltip = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _w, _x = _a.tooltipSelectorTitle, tooltipSelectorTitle = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _x, _y = _a.tooltipDescription, tooltipDescription = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _y, _z = _a.isDisabled, isDisabled = _z === void 0 ? props_1.ProductCardHorizontalSmDefault.isDisabled : _z, _0 = _a.imageInnerWidth, imageInnerWidth = _0 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerWidth : _0, _1 = _a.imageInnerHeight, imageInnerHeight = _1 === void 0 ? props_1.ProductCardHorizontalSmDefault.imageInnerHeight : _1, _2 = _a.hasImageRounded, hasImageRounded = _2 === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageRounded : _2;
|
|
43
|
+
return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$isDisabled": isDisabled }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$hasBorder": hasBorder }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ component: component, slug: slug }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ImageContent, { image: image, title: title, imageInnerWidth: imageInnerWidth, imageInnerHeight: imageInnerHeight, imageHeight: imageHeight, imageWidth: imageWidth, hasImageBorder: hasImageBorder, hasImageRounded: hasImageRounded }), (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({ disabled: isDisabled, variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
|
|
30
44
|
};
|
|
31
|
-
exports.default = ProductCardHorizontalSm;
|
|
45
|
+
exports.default = (0, react_1.memo)(ProductCardHorizontalSm);
|
|
@@ -10,14 +10,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.RightContentWrapper = exports.Period = exports.Price = exports.PriceContent = exports.TextWrapper = exports.ImgWrapper = exports.HorizontalSmWrapper = exports.ProductCardHorizontalSmStyled = exports.Border = exports.Title = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.Title = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
14
|
-
exports.Border = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
15
|
-
exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
exports.
|
|
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: color 0.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: color 0.2s ease;\n"])), function (props) { return (props.$hasTitleWrap ? "2" : "1"); });
|
|
14
|
+
exports.Border = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n /* \u2705 border-width SAB\u0130T \u2192 flicker kesilir */\n border: 1px solid transparent;\n\n /* hasBorder false ise g\u00F6r\u00FCnmesin ama DOM\u2019dan d\u00FC\u015Fmesin */\n opacity: ", ";\n transition: border-color 0.2s ease, opacity 0.2s ease;\n\n /* default */\n border-color: ", ";\n\n /* selected */\n ", "\n"], ["\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n /* \u2705 border-width SAB\u0130T \u2192 flicker kesilir */\n border: 1px solid transparent;\n\n /* hasBorder false ise g\u00F6r\u00FCnmesin ama DOM\u2019dan d\u00FC\u015Fmesin */\n opacity: ", ";\n transition: border-color 0.2s ease, opacity 0.2s ease;\n\n /* default */\n border-color: ", ";\n\n /* selected */\n ", "\n"])), function (p) { return (p.$hasBorder ? 1 : 0); }, function (p) { return (p.$hasBorder ? "var(--grey-10)" : "transparent"); }, function (p) { return p.$isSelected && "border-color: var(--primary);border-width: 2px;"; });
|
|
15
|
+
exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n border-radius: 0.5rem;\n position: relative;\n\n /* \u274C transition: all \u2192 paint/layout tetikler; sadece laz\u0131m olanlar\u0131 b\u0131rak */\n transition: color 0.2s ease;\n\n ", "\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n\n @media only screen and ", " {\n &:hover {\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n\n &:active {\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n border-radius: 0.5rem;\n position: relative;\n\n /* \u274C transition: all \u2192 paint/layout tetikler; sadece laz\u0131m olanlar\u0131 b\u0131rak */\n transition: color 0.2s ease;\n\n ", "\n\n ", "\n\n a {\n text-decoration: none;\n color: inherit;\n\n @media only screen and ", " {\n &:hover {\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n\n &:active {\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n"])), function (props) {
|
|
16
|
+
return props.$isDisabled &&
|
|
17
|
+
"\n user-select: none;\n pointer-events: none;\n cursor: not-allowed;\n ";
|
|
18
|
+
}, function (props) {
|
|
19
|
+
return props.$hasBordeHover &&
|
|
20
|
+
"\n cursor: pointer;\n &:hover {\n ".concat(exports.Border, " {\n border-color: var(--primary);\n border-width: 2px;\n }\n }\n ");
|
|
21
|
+
}, devices_1.devices.mdUp, exports.Title, exports.Title);
|
|
22
|
+
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: 0.5rem;\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: 0.5rem;\n"])));
|
|
23
|
+
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 /* \u2705 layer stabilize */\n transform: translateZ(0);\n\n img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: ", " !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 /* \u2705 layer stabilize */\n transform: translateZ(0);\n\n img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: ", " !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"); }, function (props) { return (props.$hasImageRounded ? "4px" : "0"); });
|
|
24
|
+
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 ? "1rem" : "0.5rem"); });
|
|
25
|
+
exports.PriceContent = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
26
|
+
return (props === null || props === void 0 ? void 0 : props.$infoPosition) === "left"
|
|
27
|
+
? "\n text-align: start;\n display: flex;\n align-items: flex-end;\n margin-top: 8px;\n "
|
|
28
|
+
: "\n text-align: end;\n ";
|
|
29
|
+
});
|
|
30
|
+
exports.Price = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n font: var(--title-extra-bold-16-19);\n\n small {\n font: var(--body-bold-14-17);\n }\n"], ["\n display: block;\n font: var(--title-extra-bold-16-19);\n\n small {\n font: var(--body-bold-14-17);\n }\n"])));
|
|
31
|
+
exports.Period = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n\n ", "\n\n font: var(--body-regular-14-17);\n"], ["\n display: block;\n\n ", "\n\n font: var(--body-regular-14-17);\n"])), function (props) {
|
|
32
|
+
return (props === null || props === void 0 ? void 0 : props.$infoPosition) === "left"
|
|
33
|
+
? "\n margin-bottom: 0;\n margin-left: 4px;\n "
|
|
34
|
+
: "\n margin-bottom: 4px;\n ";
|
|
35
|
+
});
|
|
36
|
+
exports.RightContentWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
37
|
+
return props.$hasButtonRemoveMdDown
|
|
38
|
+
? "\n @media only screen and ".concat(devices_1.devices.lg, " {\n display: none;\n }\n ")
|
|
39
|
+
: "\n display: block;\n @media only screen and ".concat(devices_1.devices.lg, " {\n button {\n padding: 0 !important;\n width: 65px !important;\n }\n }\n ");
|
|
40
|
+
});
|
|
23
41
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -7,8 +7,8 @@ export interface ProductCardHorizontalSm {
|
|
|
7
7
|
priceSm?: string;
|
|
8
8
|
slug?: string;
|
|
9
9
|
period?: string;
|
|
10
|
-
image?:
|
|
11
|
-
component?: React.
|
|
10
|
+
image?: string;
|
|
11
|
+
component?: React.ElementType | null;
|
|
12
12
|
hasImageBorder?: boolean;
|
|
13
13
|
imageWidth?: string;
|
|
14
14
|
imageHeight?: string;
|
|
@@ -25,6 +25,9 @@ export interface ProductCardHorizontalSm {
|
|
|
25
25
|
tooltipSelectorTitle?: string;
|
|
26
26
|
tooltipDescription?: React.ReactNode;
|
|
27
27
|
isDisabled?: boolean;
|
|
28
|
+
imageInnerWidth?: number;
|
|
29
|
+
imageInnerHeight?: number;
|
|
30
|
+
hasImageRounded?: boolean;
|
|
28
31
|
}
|
|
29
32
|
export interface ProductCardHorizontalSmStyledProps {
|
|
30
33
|
$period?: string;
|
|
@@ -38,6 +41,7 @@ export interface ProductCardHorizontalSmStyledProps {
|
|
|
38
41
|
$hasButtonRemoveMdDown?: boolean;
|
|
39
42
|
$hasBordeHover?: boolean;
|
|
40
43
|
$isDisabled?: boolean;
|
|
44
|
+
$hasImageRounded?: boolean;
|
|
41
45
|
}
|
|
42
46
|
export declare const ProductCardHorizontalSmDefault: ProductCardHorizontalSm;
|
|
43
47
|
export type ProductCardHorizontalSmProps = typeof ProductCardHorizontalSmDefault;
|