krl-alfred 1.67.0 → 1.67.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.
- package/dist/components/Banner/layouts/layout1/index.js +3 -3
- package/dist/components/Banner/layouts/layout1/layout1.styled.js +1 -1
- package/dist/components/Icon/Cargo2.js +1 -1
- package/dist/components/Icon/Securitywithtik.js +1 -1
- package/dist/components/Icon/TimeCircle.js +1 -1
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCard/stories/ProductCard.stories.js +2 -2
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SuggestBox/SuggestBox.js +3 -2
- package/dist/components/SuggestBox/SuggestBox.styled.js +2 -1
- package/dist/components/SuggestBox/stories/SuggestBox.stories.js +2 -1
- package/dist/components/ValueProposition/layouts/squareSm/SquareSm.styled.js +1 -1
- package/dist/constants/devices.js +1 -1
- package/dist/jsons/Banners.js +7 -0
- package/package.json +1 -1
- package/dist/components/Banner/Banner.styled.js +0 -14
|
@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
18
|
var react_1 = require("react");
|
|
19
|
-
var
|
|
19
|
+
var layout1_styled_1 = require("./layout1.styled");
|
|
20
20
|
var Button_1 = __importDefault(require("../../../Button"));
|
|
21
21
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
22
22
|
var classnames_1 = __importDefault(require("classnames"));
|
|
@@ -35,10 +35,10 @@ var Index = function (props) {
|
|
|
35
35
|
};
|
|
36
36
|
var next = function () { return sliderRef.slickNext(); };
|
|
37
37
|
var previous = function () { return sliderRef.slickPrev(); };
|
|
38
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(layout1_styled_1.BannerStyled, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inner", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_slick_1.default, __assign({}, settings, { ref: function (slider) {
|
|
39
39
|
sliderRef = slider;
|
|
40
40
|
}, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
|
|
41
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title headline-extra-bold-32-39", children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", { className: "description title-regular-16-19", children: item === null || item === void 0 ? void 0 : item.description }), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: item === null || item === void 0 ? void 0 : item.buttonText })] }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: item === null || item === void 0 ? void 0 : item.img }), (0, jsx_runtime_1.jsxs)("div", { className: "textMobile title-medium-16-19", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] })] }) }, key));
|
|
41
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title headline-extra-bold-32-39", children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", { className: "description title-regular-16-19", children: item === null || item === void 0 ? void 0 : item.description }), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: item === null || item === void 0 ? void 0 : item.buttonText })] }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: item === null || item === void 0 ? void 0 : item.img }), (0, jsx_runtime_1.jsxs)("div", { className: "textMobile title-medium-16-19", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), item.hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] })] }) }, key));
|
|
42
42
|
}) })) }) }), props.showThumbnails && ((0, jsx_runtime_1.jsxs)("div", { className: "thumbnailSlider", children: [(0, jsx_runtime_1.jsx)("button", { className: "navigation prev", onClick: previous, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowLeft" }) }), (0, jsx_runtime_1.jsx)("div", { className: "thumbnailInner", children: data.map(function (item, key) {
|
|
43
43
|
var _a;
|
|
44
44
|
return ((0, jsx_runtime_1.jsx)("div", { onClick: function () { return sliderRef.slickGoTo(key); }, className: (0, classnames_1.default)("thumbnailItem", (_a = {}, _a["active"] = key === activeSlide, _a)), children: item === null || item === void 0 ? void 0 : item.thumbnail }, key));
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
|
-
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n
|
|
13
|
+
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgCargo2 = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgCargo2 = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "Frame 188", children: (0, jsx_runtime_1.jsxs)("g", { id: "Group 1", children: [(0, jsx_runtime_1.jsx)("path", { id: "Vector 22", d: "M13.3276 4.97657H1.6662C1.3356 4.97657 1.02344 5.1969 1.02344 5.5275V16.2707C1.02344 16.6013 1.3356 16.8216 1.6662 16.8216H13.2358C13.5443 16.8216 13.8786 16.671 13.8786 16.3625V5.61932C13.8786 5.28872 13.6582 4.97657 13.3276 4.97657Z", fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 26", d: "M20.6386 9.10938L16.0814 9.10938C15.9391 9.10938 15.8047 9.18605 15.8047 9.3011V12.5902C15.8047 12.7053 15.9391 12.782 16.0814 12.782L22.3945 12.782C22.4406 12.782 22.776 12.7983 22.6712 12.5902C22.2887 11.8303 21.2417 9.88799 20.9184 9.3011C20.8577 9.191 20.7809 9.10938 20.6386 9.10938Z", fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 24", d: "M20.3502 8.09766H15.1117C14.9016 8.09766 14.7031 8.25992 14.7031 8.50339V16.415C14.7031 16.6585 14.9016 16.8208 15.1117 16.8208H22.4667C22.6628 16.8208 22.8753 16.7098 22.8753 16.4827V13.2989C22.8753 12.9884 22.8029 12.682 22.6646 12.404C21.9868 11.0408 21.2622 9.54933 20.7634 8.50339C20.6586 8.28363 20.5604 8.09766 20.3502 8.09766Z", fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { id: "Ellipse 6", d: "M6.2434 16.8209C6.2434 17.6238 5.59254 18.2747 4.78967 18.2747C3.9868 18.2747 3.33594 17.6238 3.33594 16.8209C3.33594 16.018 3.9868 15.3672 4.78967 15.3672C5.59254 15.3672 6.2434 16.018 6.2434 16.8209Z", fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("circle", { id: "Ellipse 7", cx: 18.6569, cy: 16.8209, r: 1.45373, fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("ellipse", { id: "Ellipse 8", cx: 4.78927, cy: 16.8225, rx: 0.734578, ry: 0.734577, fill: "white" }), (0, jsx_runtime_1.jsx)("ellipse", { id: "Ellipse 9", cx: 18.6565, cy: 16.8225, rx: 0.734575, ry: 0.734577, fill: "white" })] }) }) }))); };
|
|
40
40
|
exports.default = SvgCargo2;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgSecuritywithtik = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgSecuritywithtik = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "Frame 187", children: (0, jsx_runtime_1.jsxs)("g", { id: "Group 2", children: [(0, jsx_runtime_1.jsx)("path", { id: "Vector 6", d: "M17.6103 18.626C19.3557 17.5351 19.9284 15.6715 19.9966 14.8761V2.94474C19.9966 2.39931 19.8057 1.99023 19.0421 1.99023H4.86076C4.09715 1.99023 3.90625 2.39931 3.90625 2.94474V14.8761C3.97443 15.6715 4.54714 17.5351 6.29253 18.626L11.2014 21.8986C11.7469 22.2395 12.1559 22.2395 12.7014 21.8986L17.6103 18.626Z", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { id: "Ellipse 5", d: "M15.9748 10.4444C15.9748 12.666 14.1738 14.467 11.9522 14.467C9.73064 14.467 7.92969 12.666 7.92969 10.4444C7.92969 8.22283 9.73064 6.42188 11.9522 6.42188C14.1738 6.42188 15.9748 8.22283 15.9748 10.4444Z", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 8", d: "M9.77344 10.5804L11.5461 12.0803L14.0006 9.2168", stroke: "#0A103D", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) }) }))); };
|
|
40
40
|
exports.default = SvgSecuritywithtik;
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgTimeCircle = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgTimeCircle = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsxs)("g", { id: "Time Circle", children: [(0, jsx_runtime_1.jsx)("path", { id: "Stroke 1", fillRule: "evenodd", clipRule: "evenodd", d: "M19.25 10C19.25 15.109 15.109 19.25 10 19.25C4.891 19.25 0.75 15.109 0.75 10C0.75 4.891 4.891 0.75 10 0.75C15.109 0.75 19.25 4.891 19.25 10Z", stroke: "#0A103D", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Stroke 3", d: "M13.4341 12.9417L9.66406 10.6927V5.8457", stroke: "#0A103D", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))); };
|
|
40
40
|
exports.default = SvgTimeCircle;
|
|
@@ -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:
|
|
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: ", ";\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 .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: ", ";\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: ", ";\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: 0.5rem;\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: ", ";\n justify-content: flex-start;\n height: ", ";\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: ", ";\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 .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: ", ";\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: ", ";\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: 0.5rem;\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: ", ";\n justify-content: flex-start;\n height: ", ";\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 ? '1.5rem' : '1rem'; }, function (props) { return props.isMobile ? '215px' : '150px'; }, function (props) { return props.isMobile ? '1.5rem 0 0.5rem 0' : '1rem 0 0.5rem 0'; }, function (props) { return props.isMobile ? '44px' : '38px'; }, function (props) { return props.isMobile ? '1.5rem' : '1.5rem'; }, function (props) { return props.isMobile ? '37px' : '34px'; }, function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.isMobile ? '48px' : '36px'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.isMobile ? '65px' : '48px'; }, function (props) { return props.isMobile ? '48px' : '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;
|
|
@@ -33,8 +33,8 @@ exports.Default = {
|
|
|
33
33
|
args: {
|
|
34
34
|
title: "Apple İpad Air WİFİ 64GB (2020)",
|
|
35
35
|
description: "50Q9900 50'' 126 Ekran QLED Smart 4K Ultra HD TV",
|
|
36
|
-
price: "
|
|
37
|
-
oldPrice: "
|
|
36
|
+
price: "12.545,24 TL",
|
|
37
|
+
oldPrice: "12.545,24 TL",
|
|
38
38
|
component: function (_a) {
|
|
39
39
|
var children = _a.children;
|
|
40
40
|
return (0, jsx_runtime_1.jsx)("a", { href: "test", children: children });
|
|
@@ -10,6 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.LoadingStyled = exports.SearchBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n }\n }\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n border-radius: 8px;\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 536px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: calc(100% - 2px);\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"], ["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n }\n }\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n border-radius: 8px;\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 536px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: calc(100% - 2px);\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"])), devices_1.devices.
|
|
13
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n }\n }\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n border-radius: 8px;\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 536px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: calc(100% - 2px);\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"], ["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n }\n }\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n border-radius: 8px;\n }\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 536px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: calc(100% - 2px);\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"])), devices_1.devices.xl, devices_1.devices.xl, devices_1.devices.xl);
|
|
14
14
|
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2;
|
|
@@ -8,9 +8,10 @@ var SuggestBox_styled_1 = require("./SuggestBox.styled");
|
|
|
8
8
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
9
9
|
var Button_1 = __importDefault(require("../Button"));
|
|
10
10
|
var prop_types_1 = __importDefault(require("prop-types"));
|
|
11
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
11
12
|
var SuggestBox = function (props) {
|
|
12
|
-
var buttonOnClick = props.buttonOnClick, title = props.title, description = props.description, buttonText = props.buttonText;
|
|
13
|
-
return ((0, jsx_runtime_1.jsxs)(SuggestBox_styled_1.SuggestBoxStyled, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: "productCardTitle title-bold-16-19
|
|
13
|
+
var buttonOnClick = props.buttonOnClick, title = props.title, description = props.description, buttonText = props.buttonText, isMobile = props.isMobile;
|
|
14
|
+
return ((0, jsx_runtime_1.jsxs)(SuggestBox_styled_1.SuggestBoxStyled, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)("productCardTitle", (isMobile ? 'headline-extra-bold-18-22' : 'title-bold-16-19')), children: title }), (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)("productCardDescription", (isMobile ? 'title-medium-16-19' : 'body-medium-14-17')), children: description })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: buttonOnClick, size: "big", width: "100%", variant: "primary", children: buttonText }) })] }));
|
|
14
15
|
};
|
|
15
16
|
SuggestBox.propTypes = {
|
|
16
17
|
description: prop_types_1.default.string,
|
|
@@ -9,5 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
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 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 svg{\n path , circle{\n stroke:var(--primary)\n }\n }\n }\n .productCardContent{\n .productCardTitle{\n display: block;\n color: var(--dark);\n }\n .productCardDescription{\n display: block;\n margin-top: 1rem;\n color: var(--grey-40);\n margin-bottom: 0;\n @media only screen and ", " {\n margin-top: 1.5rem;\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 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 svg{\n path , circle{\n stroke:var(--primary)\n }\n }\n }\n .productCardContent{\n .productCardTitle{\n display: block;\n color: var(--dark);\n }\n .productCardDescription{\n display: block;\n margin-top: 1rem;\n color: var(--grey-40);\n margin-bottom: 0;\n @media only screen and ", " {\n margin-top: 1.5rem;\n }\n }\n }\n"])), devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
13
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", { style: { maxWidth: '240px' }, children: (0, jsx_runtime_1.jsx)(SuggestBox_1.default, __assign({}, props)) }); },
|
|
22
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: props.isMobile ? '340px' : '240px' }, children: (0, jsx_runtime_1.jsx)(SuggestBox_1.default, __assign({}, props)) }); },
|
|
23
23
|
tags: ['autodocs'],
|
|
24
24
|
argTypes: {}
|
|
25
25
|
};
|
|
@@ -27,5 +27,6 @@ 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
|
|
30
31
|
},
|
|
31
32
|
};
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ImageWrapper = exports.Title = exports.TextWrapper = exports.SquareSmStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
|
-
exports.SquareSmStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 216px;\n aspect-ratio: 1/1;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n cursor: pointer;\n @media only screen and ", " {\n padding: 1rem;\n }\n ", "\n"], ["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 216px;\n aspect-ratio: 1/1;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n cursor: pointer;\n @media only screen and ", " {\n padding: 1rem;\n }\n ", "\n"])), devices_1.devices.md, function (props) { return props.show && "\n opacity: 1;\n user-select: initial;\n pointer-events: initial;\n transform: scale(1);\n "; });
|
|
13
|
+
exports.SquareSmStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n //max-width: 216px;\n aspect-ratio: 1/1;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n cursor: pointer;\n @media only screen and ", " {\n padding: 1rem;\n }\n ", "\n"], ["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n //max-width: 216px;\n aspect-ratio: 1/1;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n cursor: pointer;\n @media only screen and ", " {\n padding: 1rem;\n }\n ", "\n"])), devices_1.devices.md, function (props) { return props.show && "\n opacity: 1;\n user-select: initial;\n pointer-events: initial;\n transform: scale(1);\n "; });
|
|
14
14
|
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1rem;\n"], ["\n margin-top: 1rem;\n"])));
|
|
15
15
|
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
16
16
|
exports.ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n > *{\n display: inline-block !important;\n vertical-align: middle;\n }\n"], ["\n display: block;\n > *{\n display: inline-block !important;\n vertical-align: middle;\n }\n"])));
|
package/dist/jsons/Banners.js
CHANGED
|
@@ -10,6 +10,7 @@ exports.default = [
|
|
|
10
10
|
shortDesc: 'Kiralarsın nasıl çalışır?<b>Görmek için tıkla!</b>',
|
|
11
11
|
buttonText: 'Nasıl Çalışır?',
|
|
12
12
|
onClick: function () { return window.open('/nasil-calisir', '_blank'); },
|
|
13
|
+
hasRightArrow: true,
|
|
13
14
|
},
|
|
14
15
|
{
|
|
15
16
|
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/sehir.svg" }),
|
|
@@ -19,6 +20,7 @@ exports.default = [
|
|
|
19
20
|
shortDesc: 'Kiralarsın şimdi 81 ilde! <b>Detaylı bilgi için tıkla.</b>',
|
|
20
21
|
buttonText: 'Detaylı Bilgi',
|
|
21
22
|
onClick: function () { return window.open('/tum-urunler', '_blank'); },
|
|
23
|
+
hasRightArrow: true,
|
|
22
24
|
},
|
|
23
25
|
{
|
|
24
26
|
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/kiralama-uzatma.png" }),
|
|
@@ -28,6 +30,7 @@ exports.default = [
|
|
|
28
30
|
shortDesc: 'Kiraladıktan sonra ister süre uzat, ister satın al!',
|
|
29
31
|
buttonText: 'Hemen Kirala',
|
|
30
32
|
onClick: function () { return window.open('/tum-urunler', '_blank'); },
|
|
33
|
+
hasRightArrow: false,
|
|
31
34
|
},
|
|
32
35
|
{
|
|
33
36
|
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/phones.png" }),
|
|
@@ -37,6 +40,7 @@ exports.default = [
|
|
|
37
40
|
shortDesc: 'Elektronik cihazını kiralayarak kullanmaya ne dersin?',
|
|
38
41
|
buttonText: 'Hemen Kirala',
|
|
39
42
|
onClick: function () { return window.open('/tum-urunler', '_blank'); },
|
|
43
|
+
hasRightArrow: false,
|
|
40
44
|
},
|
|
41
45
|
{
|
|
42
46
|
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/drone.png" }),
|
|
@@ -46,6 +50,7 @@ exports.default = [
|
|
|
46
50
|
shortDesc: 'İstediğin cihazı kirala, belirlediğin süre içinde kullan!',
|
|
47
51
|
buttonText: 'Hemen Kirala',
|
|
48
52
|
onClick: function () { return window.open('/tum-urunler', '_blank'); },
|
|
53
|
+
hasRightArrow: false,
|
|
49
54
|
},
|
|
50
55
|
{
|
|
51
56
|
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/variousItems.png" }),
|
|
@@ -55,6 +60,7 @@ exports.default = [
|
|
|
55
60
|
shortDesc: 'Cihazlarını kiralayarak döngüsel ekonomiye katkı sağla!',
|
|
56
61
|
buttonText: 'Hemen Kirala',
|
|
57
62
|
onClick: function () { return window.open('/tum-urunler', '_blank'); },
|
|
63
|
+
hasRightArrow: false,
|
|
58
64
|
},
|
|
59
65
|
{
|
|
60
66
|
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/motorcycle-courier.png" }),
|
|
@@ -64,5 +70,6 @@ exports.default = [
|
|
|
64
70
|
shortDesc: 'Türkiye’nin ilk Karbon Nötr teslimat yapan E-ticaret sitesi Kiralarsın!',
|
|
65
71
|
buttonText: 'Hemen Kirala',
|
|
66
72
|
onClick: function () { return window.open('/tum-urunler', '_blank'); },
|
|
73
|
+
hasRightArrow: false,
|
|
67
74
|
},
|
|
68
75
|
];
|
package/package.json
CHANGED
|
@@ -1,14 +0,0 @@
|
|
|
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.BannerStyled = void 0;
|
|
11
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
|
-
var templateObject_1;
|