krl-alfred 1.76.10 → 1.76.12
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/Modal/Modal.styled.js +32 -20
- package/dist/components/ProductCard/ProductCard.js +2 -0
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCard/props.js +1 -0
- package/dist/components/ProductCard/stories/ProductCard.stories.js +1 -1
- package/dist/components/SearchBox/SearchBox.js +1 -1
- package/dist/components/SuggestBox/SuggestBox.js +2 -2
- package/dist/components/SuggestBox/SuggestBox.styled.js +1 -1
- package/dist/components/SuggestBox/stories/SuggestBox.stories.js +1 -2
- package/package.json +1 -1
|
@@ -3,14 +3,35 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
-
var
|
|
7
|
-
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
+
}
|
|
12
|
+
Object.defineProperty(o, k2, desc);
|
|
13
|
+
}) : (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
o[k2] = m[k];
|
|
16
|
+
}));
|
|
17
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
+
}) : function(o, v) {
|
|
20
|
+
o["default"] = v;
|
|
21
|
+
});
|
|
22
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
+
if (mod && mod.__esModule) return mod;
|
|
24
|
+
var result = {};
|
|
25
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
+
__setModuleDefault(result, mod);
|
|
27
|
+
return result;
|
|
8
28
|
};
|
|
9
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
30
|
exports.OverlayStyled = exports.ModalStyled = void 0;
|
|
11
|
-
var styled_components_1 =
|
|
31
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
12
32
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
|
|
33
|
+
var mobileHorizontalButton = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n button {\n padding: 0;\n &:is(:nth-child(1)) {\n width: 50%;\n }\n &:is(:nth-child(2)) {\n width: 50%;\n }\n }\n"], ["\n button {\n padding: 0;\n &:is(:nth-child(1)) {\n width: 50%;\n }\n &:is(:nth-child(2)) {\n width: 50%;\n }\n }\n"])));
|
|
34
|
+
exports.ModalStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .contentInner{\n //height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n color: var(--dark);\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n font : ", ";\n }\n p {\n margin: 8px 0 0;\n font:var(--body-regular-14-17);\n }\n }\n \n }\n\n div.content {\n padding : ", ";\n overflow: auto;\n position: relative;\n scrollbar-color: var(--dark-opacity-10) white;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .contentInner{\n //height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n box-sizing: border-box;\n border-top: ", ";\n ", "\n\n @media only screen and ", " {\n ", "\n }\n \n }\n"])), function (props) {
|
|
14
35
|
switch (props.size) {
|
|
15
36
|
case 'xxsmall':
|
|
16
37
|
return "311px";
|
|
@@ -25,24 +46,15 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
25
46
|
default:
|
|
26
47
|
return "462px";
|
|
27
48
|
}
|
|
28
|
-
}, function (props) { return !props.autoHeight && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.titleAlignment === "left" ?
|
|
49
|
+
}, function (props) { return !props.autoHeight && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n width: 100%;\n max-width: 100%;\n max-height: initial;\n }\n "); }, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.titleAlignment === "left" ? "var(--title-semi-bold-16-19)" : "var(--headline-semi-bold-20-24)"; }, function (props) { return props.customContent ? '0' : '0 24px'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) {
|
|
29
50
|
switch (props.buttonsAlignment) {
|
|
30
|
-
case 'vertical':
|
|
31
|
-
return 'column';
|
|
32
51
|
case 'horizontal':
|
|
33
|
-
return
|
|
34
|
-
default:
|
|
35
|
-
return 'column';
|
|
36
|
-
}
|
|
37
|
-
}, function (props) {
|
|
38
|
-
switch (props.buttonsAlignment) {
|
|
52
|
+
return "\n justify-content: flex-start;\n flex-direction: row-reverse;\n gap: 0;\n button {\n + button{\n margin-right: ".concat((props.size === 'small' ? '16px' : '24px'), ";\n @media only screen and ").concat(devices_1.devices.sm, " {\n margin-right: 16px;\n }\n }\n }\n @media only screen and ").concat(devices_1.devices.sm, " {\n button {\n &:is(:nth-child(1)) {\n width: ").concat((props.showSecondaryButton ? '50%' : '100%'), ";\n white-space: nowrap;\n box-sizing: content-box;\n }\n + button {\n width: 50%;\n margin-right: 1rem;\n }\n }\n }\n ");
|
|
39
53
|
case 'vertical':
|
|
40
|
-
return props.showDivider ? '0.5rem' : '1rem';
|
|
41
|
-
case 'horizontal':
|
|
42
|
-
return '0';
|
|
54
|
+
return "\n justify-content: space-between;\n flex-direction: column;\n gap: ".concat(props.showDivider ? '0.5rem' : '1rem', ";\n ");
|
|
43
55
|
default:
|
|
44
|
-
return
|
|
56
|
+
return "";
|
|
45
57
|
}
|
|
46
|
-
},
|
|
47
|
-
exports.OverlayStyled = styled_components_1.default.div(
|
|
48
|
-
var templateObject_1, templateObject_2;
|
|
58
|
+
}, devices_1.devices.md, function (props) { return props.buttonsAlignmentOnMobile === 'vertical' ? "\n flex-direction : column;\n button {\n margin : 0 !important;\n + button {\n margin-top:1rem !important;\n }\n }\n " : " "; });
|
|
59
|
+
exports.OverlayStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"])));
|
|
60
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -40,6 +40,7 @@ ProductCard.propTypes = {
|
|
|
40
40
|
productChecked: prop_types_1.default.bool,
|
|
41
41
|
disabled: prop_types_1.default.bool,
|
|
42
42
|
hasCheckbox: prop_types_1.default.bool,
|
|
43
|
+
isResponsive: prop_types_1.default.bool,
|
|
43
44
|
checkboxId: prop_types_1.default.string,
|
|
44
45
|
description: prop_types_1.default.string,
|
|
45
46
|
value: prop_types_1.default.string,
|
|
@@ -51,5 +52,6 @@ ProductCard.defaultProps = {
|
|
|
51
52
|
disabled: false,
|
|
52
53
|
layout: props_1.layouts[0],
|
|
53
54
|
hasCheckbox: true,
|
|
55
|
+
isResponsive: false,
|
|
54
56
|
//checkboxId : `productCheckBox_${(Math.random() + 1).toString(36).substring(2)}`
|
|
55
57
|
};
|
|
@@ -11,7 +11,7 @@ exports.HorizontalSmStyled = exports.HorizontalStyled = exports.StandartStyled =
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.ChecklistStyled = 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: 24px;\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 .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\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 @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0;\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: 24px;\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 .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n &:is(.hidden){\n display: none;\n }\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\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 @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n font:var(--title-semi-bold-16-19);\n }\n .productCardContent{ \n margin: 1.5rem auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n\n @media only screen and ", " {\n margin: 1rem auto 0 0;\n }\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.lg);
|
|
14
|
-
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding:
|
|
14
|
+
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\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: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price, .period {\n text-decoration: line-through;\n }\n .price{\n font: var(--caption-semi-bold-12-15);\n }\n .period{\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price{\n font: var(--body-extra-bold-14-17);\n }\n .period{\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n .cartBadge{\n position: absolute;\n left: 8px;\n top: 8px;\n z-index: 2;\n }\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: 150px;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n *{ \n height: calc(100% - 0.5rem) !important;\n aspect-ratio: 1 / 1 !important;\n }\n }\n .productCardContent{ \n padding: 1rem 0 0.5rem 0;\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 38px;\n word-break: break-word;\n font: var(--title-bold-16-19);\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: 1.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: 34px;\n word-break: break-word;\n font: var(--body-medium-14-17);\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n\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: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price, .period {\n text-decoration: line-through;\n }\n .price{\n font: var(--caption-semi-bold-12-15);\n }\n .period{\n font:var(--caption-regular-12-15);\n }\n }\n\n .newPrice {\n .price{\n font: var(--body-extra-bold-14-17);\n }\n .period{\n font: var(--body-regular-13-16);\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.isResponsive && "\n @media only screen and ".concat(devices_1.devices.sm, " {\n padding: 1.5rem;\n .cartBadge{\n left: 16px;\n top: 16px;\n }\n .img {\n height: 215px;\n }\n .productCardContent{\n padding: 1.5rem 0 0.5rem 0;\n .productCardTitle{\n height: 44px;\n font: var(--headline-bold-18-22);\n }\n .productCardDescription{\n margin-bottom: 1.5rem;\n height: 37px;\n font: var(--title-medium-16-19);\n }\n .productCardPriceContent{\n height: 48px;\n .discountRate{\n width: 65px;\n height: 48px;\n font: var(--title-extra-bold-16-19);\n }\n \n .oldPrice {\n .price{\n font: var(--body-semi-bold-13-16);\n }\n }\n .newPrice {\n .price{\n font: var(--title-extra-bold-16-19);\n }\n .period{\n font: var(--body-regular-14-17);\n }\n }\n }\n }\n }\n "); });
|
|
15
15
|
exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:", ";\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n font:", ";\n }\n\n .period {\n font:", ";\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:", ";\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-medium-14-17);\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n font:", ";\n }\n\n .period {\n font:", ";\n }\n }\n }\n"])), devices_1.devices.sm, function (props) { return (props.isMobile ? 'var(--caption-semi-bold-12-15)' : 'var(--title-semi-bold-16-19)'); }, function (props) { return (props.isMobile ? 'var(--caption-extra-bold-12-15)' : 'var(--body-extra-bold-14-17)'); }, function (props) { return (props.isMobile ? 'var(--caption-regular-12-15)' : 'var(--body-regular-13-16)'); });
|
|
16
16
|
exports.HorizontalSmStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n border: 1px solid var(--grey-10);\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalSmWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n\n .img {\n border: ", ";\n border-radius: 8px;\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 > * {\n vertical-align: middle !important;\n }\n }\n\n .text {\n padding-right: ", ";\n .title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n }\n }\n\n .priceContent {\n text-align: end;\n\n .period {\n display: block;\n margin-bottom: 4px;\n font:var(--body-regular-14-17);\n }\n\n .price {\n display: block;\n font:var(--title-extra-bold-16-19);\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n border: 1px solid var(--grey-10);\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalSmWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n\n .img {\n border: ", ";\n border-radius: 8px;\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 > * {\n vertical-align: middle !important;\n }\n }\n\n .text {\n padding-right: ", ";\n .title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n }\n }\n\n .priceContent {\n text-align: end;\n\n .period {\n display: block;\n margin-bottom: 4px;\n font:var(--body-regular-14-17);\n }\n\n .price {\n display: block;\n font:var(--title-extra-bold-16-19);\n }\n }\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.period ? "2rem" : "0"; });
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -70,5 +70,5 @@ exports.Checklist = {
|
|
|
70
70
|
args: __assign(__assign({}, exports.Default.args), { hasCheckbox: true, layout: "checklist" }),
|
|
71
71
|
};
|
|
72
72
|
exports.Standart = {
|
|
73
|
-
args: __assign(__assign({}, exports.Default.args), { layout: "standart" }),
|
|
73
|
+
args: __assign(__assign({}, exports.Default.args), { layout: "standart", isResponsive: true }),
|
|
74
74
|
};
|
|
@@ -24,7 +24,7 @@ var SearchBox = function (props) {
|
|
|
24
24
|
var onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder, value = props.value, onChange = props.onChange, onButtonClick = props.onButtonClick;
|
|
25
25
|
var _b = (0, react_1.useState)("48px"), shadowHeight = _b[0], setShadowHeight = _b[1];
|
|
26
26
|
var LoadingContent = function () {
|
|
27
|
-
return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "
|
|
27
|
+
return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "24px", height: "24px" }) });
|
|
28
28
|
};
|
|
29
29
|
var resultRef = (0, react_1.useRef)();
|
|
30
30
|
(0, react_1.useEffect)(function () {
|
|
@@ -20,8 +20,8 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
20
20
|
var Button_1 = __importDefault(require("../Button"));
|
|
21
21
|
var prop_types_1 = __importDefault(require("prop-types"));
|
|
22
22
|
var SuggestBox = function (props) {
|
|
23
|
-
var buttonOnClick = props.buttonOnClick, title = props.title, description = props.description, buttonText = props.buttonText
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(SuggestBox_styled_1.SuggestBoxStyled,
|
|
23
|
+
var buttonOnClick = props.buttonOnClick, title = props.title, description = props.description, buttonText = props.buttonText;
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(SuggestBox_styled_1.SuggestBoxStyled, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "productCardContent" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "productCardTitle" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "productCardDescription" }, { children: description }))] }))] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: buttonOnClick, size: "big", width: "100%", variant: "primary" }, { children: buttonText })) })] }));
|
|
25
25
|
};
|
|
26
26
|
SuggestBox.propTypes = {
|
|
27
27
|
description: prop_types_1.default.string,
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.SuggestBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.SuggestBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n text-align: center;\n min-height: 346px;\n display: grid;\n grid-template-rows: 1fr auto;\n align-items: center;\n @media only screen and ", " {\n padding: 1.5rem;\n min-height: 455px;\n }\n .icon{\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: var(--primary-opacity-5);\n color:var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1.5rem auto;\n @media only screen and ", " {\n width: 64px;\n height: 64px;\n margin: 0 auto 2rem auto;\n }\n }\n .productCardContent{\n .productCardTitle{\n display: block;\n color: var(--dark);\n font: ", ";\n }\n .productCardDescription{\n display: block;\n margin-top: 1rem;\n color: var(--grey-40);\n margin-bottom: 0;\n font:
|
|
13
|
+
exports.SuggestBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n text-align: center;\n min-height: 346px;\n display: grid;\n grid-template-rows: 1fr auto;\n align-items: center;\n @media only screen and ", " {\n padding: 1.5rem;\n min-height: 455px;\n }\n .icon{\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: var(--primary-opacity-5);\n color:var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1.5rem auto;\n @media only screen and ", " {\n width: 64px;\n height: 64px;\n margin: 0 auto 2rem auto;\n svg{\n width: 20px;\n height: 20px;\n }\n }\n }\n .productCardContent{\n .productCardTitle{\n display: block;\n color: var(--dark);\n font: var(--title-bold-16-19);\n @media only screen and ", " {\n font: var(--headline-extra-bold-18-22);\n }\n }\n .productCardDescription{\n display: block;\n margin-top: 1rem;\n color: var(--grey-40);\n margin-bottom: 0;\n font: var(--body-medium-14-17);\n @media only screen and ", " {\n margin-top: 1.5rem;\n font: var(--title-medium-16-19) ;\n }\n }\n }\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: 1rem;\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n text-align: center;\n min-height: 346px;\n display: grid;\n grid-template-rows: 1fr auto;\n align-items: center;\n @media only screen and ", " {\n padding: 1.5rem;\n min-height: 455px;\n }\n .icon{\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: var(--primary-opacity-5);\n color:var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 1.5rem auto;\n @media only screen and ", " {\n width: 64px;\n height: 64px;\n margin: 0 auto 2rem auto;\n svg{\n width: 20px;\n height: 20px;\n }\n }\n }\n .productCardContent{\n .productCardTitle{\n display: block;\n color: var(--dark);\n font: var(--title-bold-16-19);\n @media only screen and ", " {\n font: var(--headline-extra-bold-18-22);\n }\n }\n .productCardDescription{\n display: block;\n margin-top: 1rem;\n color: var(--grey-40);\n margin-bottom: 0;\n font: var(--body-medium-14-17);\n @media only screen and ", " {\n margin-top: 1.5rem;\n font: var(--title-medium-16-19) ;\n }\n }\n }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
14
|
var templateObject_1;
|
|
@@ -19,7 +19,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
19
19
|
var SuggestBox_1 = __importDefault(require("../SuggestBox"));
|
|
20
20
|
exports.default = {
|
|
21
21
|
title: 'Components/SuggestBox',
|
|
22
|
-
component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth:
|
|
22
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "340px" } }, { children: (0, jsx_runtime_1.jsx)(SuggestBox_1.default, __assign({}, props)) })); },
|
|
23
23
|
tags: ['autodocs'],
|
|
24
24
|
argTypes: {}
|
|
25
25
|
};
|
|
@@ -27,6 +27,5 @@ exports.Default = {
|
|
|
27
27
|
args: {
|
|
28
28
|
title: "Aradığını bulamadın mı?",
|
|
29
29
|
description: "Aradığını bulamadıysan, dilediğin cihazı Kiralarsın.com’a önerebilirsin.",
|
|
30
|
-
isMobile: false
|
|
31
30
|
},
|
|
32
31
|
};
|