krl-alfred 1.77.16 → 1.77.18
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/InstallmentBox/InstallmentBox.styled.js +1 -1
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.js +27 -0
- package/dist/components/ProductCardCheckbox/ProductCardCheckbox.styled.js +50 -0
- package/dist/components/ProductCardCheckbox/index.js +8 -0
- package/dist/components/ProductCardCheckbox/props.js +10 -0
- package/dist/components/ProductCardCheckbox/stories/ProductCardCheckbox.stories.js +53 -0
- package/dist/components/RadioButton/layouts/basic/Basic.js +2 -2
- package/dist/components/RadioButton/layouts/boxed/Boxed.js +2 -2
- package/dist/components/RadioButton/layouts/boxed/Boxed.styled.js +4 -4
- package/dist/components/RadioButton/props.js +2 -2
- package/dist/components/RadioButton/stories/RadioButton.stories.js +2 -0
- package/dist/components/ShoppingCartProduct/ShoppingCartProduct.styled.js +1 -1
- package/dist/index.js +14 -12
- package/package.json +1 -1
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.InstallmentBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.InstallmentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background:
|
|
13
|
+
exports.InstallmentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n ", "\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: var(--primary-opacity-10);\n color: var(--primary);\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n font: var(--caption-semi-bold-10-12);\n padding: 2px 0;\n @media only screen and ", " {\n margin-left: 0;\n margin-top: 0.5rem;\n }\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font: var(--title-bold-16-19);\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"], ["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n ", "\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: var(--primary-opacity-10);\n color: var(--primary);\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n font: var(--caption-semi-bold-10-12);\n padding: 2px 0;\n @media only screen and ", " {\n margin-left: 0;\n margin-top: 0.5rem;\n }\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font: var(--title-bold-16-19);\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"])), function (props) { return props.checked ? '2px solid var(--primary)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return !props.checked && "\n &:hover{\n border: 1px solid var(--primary-hover);\n }\n "; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
14
|
var templateObject_1;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var ProductCardCheckbox_styled_1 = require("./ProductCardCheckbox.styled");
|
|
19
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
20
|
+
var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
21
|
+
var react_device_detect_1 = require("react-device-detect");
|
|
22
|
+
var ProductCardCheckbox = function (props) {
|
|
23
|
+
var hasCheckbox = props.hasCheckbox, checked = props.checked, name = props.name, productCardOnChange = props.productCardOnChange, title = props.title, content = props.content, value = props.value, size = props.size, disabled = props.disabled, image = props.image, checkboxId = props.checkboxId, isContentOffset = props.isContentOffset;
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)(ProductCardCheckbox_styled_1.ProductCardCheckboxStyled, __assign({ disabled: disabled, "$size": size, "$isContentOffset": isContentOffset }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardInner" }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: (0, classnames_1.default)({ "hidden": !hasCheckbox }, "productCardCheckboxContent") }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: checkboxId, size: size === "small" ? "small" : react_device_detect_1.isMobile ? "small" : "medium", label: "", onChange: productCardOnChange, value: value, checked: checked, name: name, disabled: disabled }) })), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: "productCardImg" }, { children: image }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardText" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: checkboxId, className: "productCardTitle" }, { children: title })) })), content && (0, jsx_runtime_1.jsx)("div", __assign({ className: "productCardContent" }, { children: content }))] })) })));
|
|
25
|
+
};
|
|
26
|
+
ProductCardCheckbox.defaultProps = {};
|
|
27
|
+
exports.default = ProductCardCheckbox;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.ProductCardCheckboxStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var devices_1 = require("../../constants/devices");
|
|
13
|
+
exports.ProductCardCheckboxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: ", ";\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n ", ";\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n width: 100%;\n }\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: ", ";\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n\n .productCardCheckboxContent {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n &:is(.hidden) {\n display: none;\n }\n\n .indicator {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n box-sizing: border-box;\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n\n .productCardTitle {\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font: ", ";\n }\n\n .productCardContent {\n margin: 1.5rem auto 0 ", ";\n grid-column-start: 1;\n grid-column-end: 4;\n width: ", ";\n ", ";\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n width: 100%;\n }\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : "\n cursor: pointer;\n *{\n cursor: pointer;\n }\n "; }, function (props) {
|
|
14
|
+
switch (props.$size) {
|
|
15
|
+
case 'small':
|
|
16
|
+
return "24px 16px";
|
|
17
|
+
case 'large':
|
|
18
|
+
return "24px";
|
|
19
|
+
default:
|
|
20
|
+
return "24px";
|
|
21
|
+
}
|
|
22
|
+
}, devices_1.devices.sm, function (props) {
|
|
23
|
+
switch (props.$size) {
|
|
24
|
+
case 'small':
|
|
25
|
+
return "8px";
|
|
26
|
+
case 'large':
|
|
27
|
+
return "24px";
|
|
28
|
+
default:
|
|
29
|
+
return "24px";
|
|
30
|
+
}
|
|
31
|
+
}, devices_1.devices.sm, function (props) {
|
|
32
|
+
switch (props.$size) {
|
|
33
|
+
case 'small':
|
|
34
|
+
return "var(--body-semi-bold-14-17)";
|
|
35
|
+
case 'large':
|
|
36
|
+
return "var(--title-semi-bold-16-19)";
|
|
37
|
+
default:
|
|
38
|
+
return "var(--title-semi-bold-16-19)";
|
|
39
|
+
}
|
|
40
|
+
}, function (props) { return props.$isContentOffset ? '128px' : '0'; }, function (props) { return props.$isContentOffset ? 'calc(100% - 128px)' : '100%'; }, function (props) {
|
|
41
|
+
switch (props.$size) {
|
|
42
|
+
case 'small':
|
|
43
|
+
return "\n margin: 1rem auto 0 0 !important;\n width: 100% !important;\n ";
|
|
44
|
+
case 'large':
|
|
45
|
+
return null;
|
|
46
|
+
default:
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
}, devices_1.devices.md);
|
|
50
|
+
var templateObject_1;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var ProductCardCheckbox_1 = require("./ProductCardCheckbox");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ProductCardCheckbox_1).default; } });
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.sizes = void 0;
|
|
4
|
+
exports.sizes = ['small', 'large'];
|
|
5
|
+
var ProductCardDefault = {
|
|
6
|
+
hasCheckbox: true,
|
|
7
|
+
isContentOffset: false,
|
|
8
|
+
disabled: false,
|
|
9
|
+
size: exports.sizes[1]
|
|
10
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.Default = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
var ProductCardCheckbox_1 = __importDefault(require("../ProductCardCheckbox"));
|
|
20
|
+
var props_1 = require("../../ProductCard/props");
|
|
21
|
+
exports.default = {
|
|
22
|
+
title: 'Components/ProductCard/ProductCard Checkbox',
|
|
23
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "634px" } }, { children: (0, jsx_runtime_1.jsx)(ProductCardCheckbox_1.default, __assign({}, props)) })); },
|
|
24
|
+
tags: ['autodocs'],
|
|
25
|
+
argTypes: {
|
|
26
|
+
layout: { control: 'select', options: props_1.layouts },
|
|
27
|
+
disabled: { control: 'boolean' },
|
|
28
|
+
hasDiscount: { control: 'boolean' },
|
|
29
|
+
size: { control: 'select', options: props_1.sizes },
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
exports.Default = {
|
|
33
|
+
args: {
|
|
34
|
+
title: "Apple İpad Air WİFİ 64GB (2020)",
|
|
35
|
+
description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
|
|
36
|
+
price: "12.545,24 TL",
|
|
37
|
+
oldPrice: "12.545,24 TL",
|
|
38
|
+
component: function (_a) {
|
|
39
|
+
var children = _a.children;
|
|
40
|
+
return (0, jsx_runtime_1.jsx)("a", __assign({ href: "test" }, { children: children }));
|
|
41
|
+
},
|
|
42
|
+
discountRate: 32,
|
|
43
|
+
oldPricePeriod: "hafta",
|
|
44
|
+
period: "hafta",
|
|
45
|
+
content: "Content",
|
|
46
|
+
isMobile: false,
|
|
47
|
+
productCardOnChange: function () { return console.log("test"); },
|
|
48
|
+
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }),
|
|
49
|
+
hasCheckbox: true,
|
|
50
|
+
layout: "checklist",
|
|
51
|
+
size: "large",
|
|
52
|
+
},
|
|
53
|
+
};
|
|
@@ -18,8 +18,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var prop_types_1 = __importDefault(require("prop-types"));
|
|
19
19
|
var Basic_styled_1 = require("./Basic.styled");
|
|
20
20
|
var Basic = function (props) {
|
|
21
|
-
var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset, hasNoneClick = props.hasNoneClick, isWrapText = props.isWrapText;
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$hasNoneClick": hasNoneClick, "$isWrapText": isWrapText }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description })))] })))] })));
|
|
21
|
+
var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, labelOffset = props.labelOffset, hasNoneClick = props.hasNoneClick, isWrapText = props.isWrapText, readOnly = props.readOnly;
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(Basic_styled_1.BasicStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$hasNoneClick": hasNoneClick, "$isWrapText": isWrapText, "$readOnly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "label", htmlFor: id }, { children: label }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description })))] })))] })));
|
|
23
23
|
};
|
|
24
24
|
exports.default = Basic;
|
|
25
25
|
Basic.propTypes = {
|
|
@@ -19,8 +19,8 @@ var prop_types_1 = __importDefault(require("prop-types"));
|
|
|
19
19
|
var Boxed_styled_1 = require("./Boxed.styled");
|
|
20
20
|
var Badges_1 = __importDefault(require("../../../Badges"));
|
|
21
21
|
var Boxed = function (props) {
|
|
22
|
-
var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, image = props.image, labelOffset = props.labelOffset, hasBadge = props.hasBadge, badgeText = props.badgeText, badgeVariant = props.badgeVariant, labelSm = props.labelSm;
|
|
23
|
-
return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({ htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid,
|
|
22
|
+
var value = props.value, checked = props.checked, onChange = props.onChange, onClick = props.onClick, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid, layout = props.layout, image = props.image, labelOffset = props.labelOffset, hasBadge = props.hasBadge, badgeText = props.badgeText, badgeVariant = props.badgeVariant, labelSm = props.labelSm, readOnly = props.readOnly;
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)(Boxed_styled_1.BoxedStyled, __assign({ htmlFor: id, "$disabled": disabled, "$checked": checked, "$size": size, "$valid": valid, "$labelOffset": labelOffset, "$readOnly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange, onClick: onClick, readOnly: readOnly }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description || image) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "labelsWrapper" }, { children: [label && ((0, jsx_runtime_1.jsxs)("label", __assign({ className: "label", htmlFor: id }, { children: [label, labelSm && (0, jsx_runtime_1.jsx)("span", __assign({ className: "labelSm" }, { children: labelSm }))] }))), description && ((0, jsx_runtime_1.jsx)("label", __assign({ className: "description", htmlFor: id }, { children: description }))), image && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: image })))] }))), hasBadge && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "boxedBadgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: badgeText, layout: "belt", variant: badgeVariant, hasResponsive: true }) })))] })));
|
|
24
24
|
};
|
|
25
25
|
exports.default = Boxed;
|
|
26
26
|
Boxed.propTypes = {
|
|
@@ -13,8 +13,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
13
13
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
14
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
15
|
var devices_1 = require("../../../../constants/devices");
|
|
16
|
-
exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor:
|
|
17
|
-
switch (props
|
|
16
|
+
exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: ", ";\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n }\n\n &:checked ", " {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 8px;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n ", "\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0;\n display: grid;\n text-align: center;\n\n @media only screen and ", " {\n //display: flex;\n //align-items: center;\n //justify-content: center;\n row-gap: 4px;\n }\n label.label {\n display: block;\n margin: 0 0 4px 0;\n vertical-align: middle;\n cursor: pointer;\n font:var(--title-bold-16-19);\n .labelSm{\n font:var(--body-regular-14-17);\n margin-left: 0.25rem;\n }\n @media only screen and ", " {\n margin: 0;\n }\n }\n\n label.description {\n display: block;\n vertical-align: middle;\n margin: 0;\n cursor: pointer;\n font:var(--body-regular-14-17);\n @media only screen and ", " {\n margin: 0 0 0 4px;\n }\n }\n }\n .boxedBadgesWrapper{\n position: absolute;\n right: -9px;\n top: -8px;\n transform: rotate(90deg);\n @media only screen and ", " {\n right: -6px;\n top: -6px;\n }\n }\n"], ["\n border: 1px solid var(--dark-opacity-10);\n position: relative;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 128px;\n cursor: ", ";\n @media only screen and ", " {\n height: 69px;\n }\n\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0D%0A%3Csvg%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%239763F6%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');\n }\n\n &:checked ", " {\n ~ div.labelsWrapper {\n &:before {\n content: \"\";\n position: absolute;\n inset: -1px;\n border-radius: 8px;\n user-select: none;\n pointer-events: none;\n }\n }\n }\n \n &:checked {\n ~ div.labelsWrapper {\n &:before {\n border: 2px solid var(--primary) !important;\n }\n }\n }\n ", "\n }\n\n div.indicator {\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: absolute;\n left: 12px;\n top: 12px;\n margin: ", ";\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n row-gap: 4px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n padding: 0;\n display: grid;\n text-align: center;\n\n @media only screen and ", " {\n //display: flex;\n //align-items: center;\n //justify-content: center;\n row-gap: 4px;\n }\n label.label {\n display: block;\n margin: 0 0 4px 0;\n vertical-align: middle;\n cursor: pointer;\n font:var(--title-bold-16-19);\n .labelSm{\n font:var(--body-regular-14-17);\n margin-left: 0.25rem;\n }\n @media only screen and ", " {\n margin: 0;\n }\n }\n\n label.description {\n display: block;\n vertical-align: middle;\n margin: 0;\n cursor: pointer;\n font:var(--body-regular-14-17);\n @media only screen and ", " {\n margin: 0 0 0 4px;\n }\n }\n }\n .boxedBadgesWrapper{\n position: absolute;\n right: -9px;\n top: -8px;\n transform: rotate(90deg);\n @media only screen and ", " {\n right: -6px;\n top: -6px;\n }\n }\n"])), function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, devices_1.devices.lg, function (props) { return !props.$readOnly && " , &:hover"; }, function (props) { return !props.$readOnly && " \n &:hover {\n ~ div.labelsWrapper {\n &:before {\n border: 1px solid var(--primary-hover);\n }\n }\n }\n "; }, function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, name: "RadioButtonElementInvalid" }))); }, function (props) { return (props.$size === "small" ? "0 8px 0 0" : "0 16px 0 0"); }, function (props) {
|
|
17
|
+
switch (props.$size) {
|
|
18
18
|
case 'small':
|
|
19
19
|
return "16px";
|
|
20
20
|
case 'medium':
|
|
@@ -23,7 +23,7 @@ exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
23
23
|
return "16px";
|
|
24
24
|
}
|
|
25
25
|
}, function (props) {
|
|
26
|
-
switch (props
|
|
26
|
+
switch (props.$size) {
|
|
27
27
|
case 'small':
|
|
28
28
|
return "16px";
|
|
29
29
|
case 'medium':
|
|
@@ -31,5 +31,5 @@ exports.BoxedStyled = styled_components_1.default.label(templateObject_1 || (tem
|
|
|
31
31
|
default:
|
|
32
32
|
return "16px";
|
|
33
33
|
}
|
|
34
|
-
}, function (props) { return (props
|
|
34
|
+
}, function (props) { return (props.$disabled ? "not-allowed" : "pointer"); }, function (props) { return props.$valid ? '#000000' : 'var(--red)'; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
35
35
|
var templateObject_1;
|
|
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ActionButton = exports.ShoppingCartProductStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n &:hover{\n ~ .text{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n }\n .text{\n padding-right: 0.5rem;\n a{\n &:hover{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font:var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font:var(--body-medium-13-16);\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\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 text-decoration: line-through;\n font:var(--caption-semi-bold-11-13);\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n small {\n font: var(--caption-bold-12-15);\n }\n }\n .period {\n font:var(--caption-regular-12-15);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n font:var(--caption-semi-bold-12-15);\n .price{\n display: block;\n margin: 0;\n font:var(--caption-extra-bold-12-15);\n b{\n span{\n font-weight: 400;\n }\n }\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n &:hover{\n ~ .text{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n }\n .text{\n padding-right: 0.5rem;\n a{\n &:hover{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font:var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font:var(--body-medium-13-16);\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\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 text-decoration: line-through;\n font:var(--caption-semi-bold-11-13);\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n small {\n font: var(--caption-bold-12-15);\n }\n }\n .period {\n font:var(--caption-regular-12-15);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n font:var(--caption-semi-bold-12-15);\n .price{\n display: block;\n margin: 0;\n font:var(--caption-extra-bold-12-15);\n b{\n span{\n font-weight: 400;\n }\n }\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
|
|
12
|
+
exports.ShoppingCartProductStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n &:hover{\n ~ .text{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n }\n .text{\n padding-right: 0.5rem;\n a{\n &:hover{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font:var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font:var(--body-medium-13-16);\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\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 white-space: nowrap;\n }\n .period{\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font:var(--caption-semi-bold-11-13);\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n small {\n font: var(--caption-bold-12-15);\n }\n }\n .period {\n font:var(--caption-regular-12-15);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n font:var(--caption-semi-bold-12-15);\n .price{\n display: block;\n margin: 0;\n font:var(--caption-extra-bold-12-15);\n b{\n span{\n font-weight: 400;\n }\n }\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"], ["\n\n a {\n text-decoration: none;\n color: inherit;\n } \n\n .inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n position: relative;\n z-index: 5;\n .img {\n width: 96px;\n height: 96px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 1rem;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n &:hover{\n ~ .text{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n }\n .text{\n padding-right: 0.5rem;\n a{\n &:hover{\n .productCardTitle{\n color: var(--primary-hover);\n }\n }\n }\n .productCardTitle {\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 19px;\n word-break: break-word;\n margin-bottom: 0.5rem;\n font:var(--title-semi-bold-16-19);\n transition: all .2s ease;\n }\n\n .productCardDeliveryText {\n margin-top: 0.5rem;\n margin-bottom: 0;\n color: var(--grey-40);\n display: block;\n overflow: hidden;\n font:var(--body-medium-13-16);\n .productCardDeliveryDanger{\n display: block;\n color: var(--red);\n }\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: 48px;\n height: 36px;\n border-radius: 8px;\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 white-space: nowrap;\n }\n .period{\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price {\n text-decoration: line-through;\n font:var(--caption-semi-bold-11-13);\n small {\n font: var(--caption-semi-bold-10-12);\n }\n }\n\n .period {\n text-decoration: line-through;\n font:var(--caption-regular-11-13);\n }\n }\n\n .newPrice {\n .price {\n font:var(--body-extra-bold-14-17);\n small {\n font: var(--caption-bold-12-15);\n }\n }\n .period {\n font:var(--caption-regular-12-15);\n }\n }\n }\n }\n .actions{\n width: 32px;\n height: 92px;\n background-color: var(--dark-opacity-3);\n border-radius: 0.5rem;\n text-align: center;\n display: grid;\n align-content: ", ";\n justify-content: center;\n padding: 4px 0;\n .quantity{\n color: ", ";\n font:var(--body-extra-bold-13-16);\n > div{\n margin: 0 auto;\n }\n }\n }\n }\n .insurance{\n position: relative;\n margin-top: 1.5rem;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n padding-right: 4px;\n cursor: ", ";\n &:before{\n content: \"\";\n position: absolute;\n left: 47px;\n bottom: 100%;\n width: 1px;\n background-color: var(--dark-opacity-5);\n height: 40px;\n }\n .insuranceImg{\n width: 96px;\n height: 40px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .text{\n display: block;\n font:var(--caption-semi-bold-12-15);\n .price{\n display: block;\n margin: 0;\n font:var(--caption-extra-bold-12-15);\n b{\n span{\n font-weight: 400;\n }\n }\n .quantity{\n display: inline-block;\n margin-left: 0.5rem;\n }\n }\n }\n .actions{\n width: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n"])), function (props) { return props.$discountRate ? 'center' : 'end'; }, function (props) { return props.$discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.$hasDisableActions ? 'center' : 'space-between'; }, function (props) { return props.$hasDisableActions ? 'var(--grey-50)' : 'var(--dark)'; }, function (props) { return props.$hasInsurance ? 'pointer' : 'initial'; });
|
|
13
13
|
exports.ActionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color : var(--primary);\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font:var(--caption-semi-bold-12-15);\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n &:hover{\n background-color : var(--primary);\n color : white;\n }\n"], ["\n border:0;\n padding: 0;\n outline: none;\n box-shadow: none;\n width: 24px;\n height: 24px;\n background: white;\n border-radius: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all .1s ease;\n cursor: pointer;\n position: relative;\n color : var(--primary);\n /*&:hover{\n .popup{\n opacity: 1;\n }\n }*/\n &:disabled{\n cursor: no-drop;\n }\n .popup{\n position: absolute;\n width: 139px;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--red);\n z-index: 99999;\n box-sizing: border-box;\n right: calc(100% + 11px);\n top: -8px;\n color: white;\n //opacity: 0;\n opacity: 1;\n user-select: none;\n pointer-events: none;\n transition: all .1s ease;\n text-align: center;\n font:var(--caption-semi-bold-12-15);\n &:before {\n content: '';\n position: absolute;\n top: 14px;\n left: calc(100% - 7px);\n transform: rotate(45deg);\n background-color: var(--red);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n }\n &:hover{\n background-color : var(--primary);\n color : white;\n }\n"])));
|
|
14
14
|
var templateObject_1, templateObject_2;
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ProductCardVertical = exports.BannerCard = exports.AutocompleteInput = exports.Slider = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.useTranslation = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
|
|
7
|
-
exports.PaymentCart = exports.Tabs = exports.ProductCardHorizontalSm = exports.ProductCardHorizontal = void 0;
|
|
7
|
+
exports.ProductCardCheckbox = exports.PaymentCart = exports.Tabs = exports.ProductCardHorizontalSm = exports.ProductCardHorizontal = void 0;
|
|
8
|
+
var react_slick_1 = __importDefault(require("react-slick"));
|
|
9
|
+
exports.Slider = react_slick_1.default;
|
|
10
|
+
var react_i18next_1 = require("react-i18next");
|
|
11
|
+
Object.defineProperty(exports, "initReactI18next", { enumerable: true, get: function () { return react_i18next_1.initReactI18next; } });
|
|
12
|
+
Object.defineProperty(exports, "useTranslation", { enumerable: true, get: function () { return react_i18next_1.useTranslation; } });
|
|
13
|
+
var i18n_1 = require("./i18n/i18n");
|
|
14
|
+
Object.defineProperty(exports, "initi18n", { enumerable: true, get: function () { return i18n_1.init; } });
|
|
15
|
+
var english_json_1 = __importDefault(require("./i18n/locales/english.json"));
|
|
16
|
+
exports.enLocale = english_json_1.default;
|
|
17
|
+
var turkish_json_1 = __importDefault(require("./i18n/locales/turkish.json"));
|
|
18
|
+
exports.trLocale = turkish_json_1.default;
|
|
8
19
|
var Button_1 = __importDefault(require("./components/Button"));
|
|
9
20
|
exports.Button = Button_1.default;
|
|
10
21
|
var Breadcrumbs_1 = __importDefault(require("./components/Breadcrumbs"));
|
|
@@ -81,15 +92,6 @@ var Dropdown_1 = __importDefault(require("./components/Dropdown"));
|
|
|
81
92
|
exports.Dropdown = Dropdown_1.default;
|
|
82
93
|
var CampaignCard_1 = __importDefault(require("./components/CampaignCard"));
|
|
83
94
|
exports.CampaignCard = CampaignCard_1.default;
|
|
84
|
-
var react_i18next_1 = require("react-i18next");
|
|
85
|
-
Object.defineProperty(exports, "initReactI18next", { enumerable: true, get: function () { return react_i18next_1.initReactI18next; } });
|
|
86
|
-
Object.defineProperty(exports, "useTranslation", { enumerable: true, get: function () { return react_i18next_1.useTranslation; } });
|
|
87
|
-
var i18n_1 = require("./i18n/i18n");
|
|
88
|
-
Object.defineProperty(exports, "initi18n", { enumerable: true, get: function () { return i18n_1.init; } });
|
|
89
|
-
var english_json_1 = __importDefault(require("./i18n/locales/english.json"));
|
|
90
|
-
exports.enLocale = english_json_1.default;
|
|
91
|
-
var turkish_json_1 = __importDefault(require("./i18n/locales/turkish.json"));
|
|
92
|
-
exports.trLocale = turkish_json_1.default;
|
|
93
95
|
var ReviewCard_1 = __importDefault(require("./components/ReviewCard"));
|
|
94
96
|
exports.ReviewCard = ReviewCard_1.default;
|
|
95
97
|
var AddressCard_1 = __importDefault(require("./components/AddressCard"));
|
|
@@ -110,5 +112,5 @@ var Tabs_1 = __importDefault(require("./components/Tabs"));
|
|
|
110
112
|
exports.Tabs = Tabs_1.default;
|
|
111
113
|
var PaymentCart_1 = __importDefault(require("./components/PaymentCart"));
|
|
112
114
|
exports.PaymentCart = PaymentCart_1.default;
|
|
113
|
-
var
|
|
114
|
-
exports.
|
|
115
|
+
var ProductCardCheckbox_1 = __importDefault(require("./components/ProductCardCheckbox"));
|
|
116
|
+
exports.ProductCardCheckbox = ProductCardCheckbox_1.default;
|