krl-alfred 1.63.0 → 1.63.1
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.
|
@@ -11,6 +11,6 @@ exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = vo
|
|
|
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 .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: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\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 .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: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .ProductCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\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);
|
|
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 a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .discount{\n position: absolute;\n left: 9px;\n top: 12px;\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: 90px;\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: 27px;\n left: -7px;\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 padding-bottom: 71.2%;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\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:
|
|
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 a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .discount{\n position: absolute;\n left: 9px;\n top: 12px;\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: 90px;\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: 27px;\n left: -7px;\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 padding-bottom: 71.2%;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\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: ", ";\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: ", ";\n color: var(--grey-40);\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: end;\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n .discountRate{\n margin-right: 0.5rem;\n width: ", ";\n height: ", ";\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 }\n .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\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 a{\n text-decoration: none;\n color: inherit;\n }\n &:hover{\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n .discount{\n position: absolute;\n left: 9px;\n top: 12px;\n z-index: 2;\n filter: drop-shadow(4px 4px 15px rgba(151,99,246,.5));\n svg{\n display: block;\n }\n .text{\n position: absolute;\n width: 90px;\n text-align: center;\n height: 16px;\n color: white;\n transform: rotate(-45deg);\n top: 27px;\n left: -7px;\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 padding-bottom: 71.2%;\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n > * {\n width: 100%;\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n }\n .productCardContent{\n padding: 1rem ;\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: ", ";\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: ", ";\n color: var(--grey-40);\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardPriceContent{\n display: grid;\n align-items: end;\n justify-content: flex-start;\n height: 36px;\n grid-template-columns: ", ";\n .discountRate{\n margin-right: 0.5rem;\n width: ", ";\n height: ", ";\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 }\n .oldPrice, .newPrice{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n }\n .oldPrice{\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n .price , .period {\n text-decoration: line-through;\n }\n }\n .newPrice{\n \n }\n }\n }\n"])), function (props) { return props.isMobile ? '58px' : '38px'; }, function (props) { return props.isMobile ? '1rem' : '0.5rem'; }, function (props) { return props.isMobile ? '2rem' : '1rem'; }, function (props) { return props.isMobile ? '49px' : '32px'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.isMobile ? '65px' : '48px'; }, function (props) { return props.isMobile ? '47px' : '36px'; });
|
|
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 &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\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 width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\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 }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{\n \n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n &:hover{\n background: var(--dark-opacity-3);\n }\n a{\n text-decoration: none;\n color: inherit;\n }\n .horizontalWrapper{ \n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\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 width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\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 }\n .priceContent{\n display: flex;\n align-items: end;\n justify-content: flex-start;\n .price{\n margin-right: 2px;\n }\n .period{\n \n }\n }\n }\n"])), devices_1.devices.sm);
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -17,12 +17,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
18
|
var ProductCard_styled_1 = require("../ProductCard.styled");
|
|
19
19
|
var Icon_1 = __importDefault(require("../../Icon/Icon"));
|
|
20
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
20
21
|
var Standart = function (props) {
|
|
21
|
-
var discountRate = props.discountRate, image = props.image, hasDiscount = props.hasDiscount, title = props.title, description = props.description, oldPrice = props.oldPrice, oldPricePeriod = props.oldPricePeriod, price = props.price, period = props.period;
|
|
22
|
+
var isMobile = props.isMobile, discountRate = props.discountRate, image = props.image, hasDiscount = props.hasDiscount, title = props.title, description = props.description, oldPrice = props.oldPrice, oldPricePeriod = props.oldPricePeriod, price = props.price, period = props.period;
|
|
22
23
|
var LinkComponent = function (_a) {
|
|
23
24
|
var item = _a.item, children = _a.children;
|
|
24
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
25
26
|
};
|
|
26
|
-
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: "discount", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: "90px", height: "90px" }), (0, jsx_runtime_1.jsx)("div", { className: "text body-extra-bold-13-16", children: "\u0130ndirimli" })] })), (0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className:
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && ((0, jsx_runtime_1.jsxs)("div", { className: "discount", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Rectangle", width: "90px", height: "90px" }), (0, jsx_runtime_1.jsx)("div", { className: "text body-extra-bold-13-16", children: "\u0130ndirimli" })] })), (0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('productCardTitle', (isMobile ? 'headline-bold-24-29' : 'title-bold-16-19')), children: title }), (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('productCardDescription', (isMobile ? 'headline-medium-20-24' : 'body-medium-14-17')), children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardPriceContent", children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('discountRate', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-13-16')), children: ["%", discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('oldPrice'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'title-semi-bold-16-19' : 'caption-semi-bold-12-15')), children: oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'body-regular-14-17' : 'caption-regular-12-15')), children: ["/ ", oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'headline-extra-bold-20-24' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'headline-regular-18-22' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] })] })] }) })));
|
|
27
28
|
};
|
|
28
29
|
exports.default = Standart;
|
|
@@ -44,6 +44,7 @@ exports.Default = {
|
|
|
44
44
|
period: "hafta",
|
|
45
45
|
content: "Content",
|
|
46
46
|
contentAlignment: "left",
|
|
47
|
+
isMobile: false,
|
|
47
48
|
productCardOnChange: function () { return console.log("test"); },
|
|
48
49
|
image: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" })
|
|
49
50
|
},
|