krl-alfred 1.67.0 → 1.67.2
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/Accordion/Accordion.styled.js +1 -1
- package/dist/components/Banner/layouts/layout1/index.js +3 -3
- package/dist/components/Banner/layouts/layout1/layout1.styled.js +1 -1
- package/dist/components/Banner/layouts/layout2/layout2.styled.js +1 -1
- package/dist/components/Banner/layouts/layout4/index.js +2 -2
- package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -1
- package/dist/components/Button/Button.js +2 -2
- package/dist/components/Button/Button.styled.js +5 -4
- package/dist/components/Carousel/Carousel.styled.js +1 -1
- package/dist/components/Icon/Cargo2.js +1 -1
- package/dist/components/Icon/Search.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 +3 -3
- 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/Tooltip/Tooltip.js +3 -2
- package/dist/components/Tooltip/Tooltip.styled.js +37 -3
- package/dist/components/Tooltip/props.js +2 -0
- package/dist/components/Tooltip/stories/Tooltip.stories.js +4 -1
- package/dist/components/ValueProposition/layouts/square/Square.styled.js +2 -1
- package/dist/components/ValueProposition/layouts/squareSm/SquareSm.styled.js +2 -2
- package/dist/constants/devices.js +7 -1
- package/dist/jsons/Banners.js +7 -0
- package/package.json +1 -1
- package/dist/components/Banner/Banner.styled.js +0 -14
|
@@ -14,6 +14,6 @@ exports.AccordionTitle = styled_components_1.default.h1(templateObject_2 || (tem
|
|
|
14
14
|
exports.Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\n"], ["\n\n"])));
|
|
15
15
|
exports.Item = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:not(:nth-child(1)) {\n margin-top: 1.5rem;\n }\n"], ["\n &:not(:nth-child(1)) {\n margin-top: 1.5rem;\n }\n"])));
|
|
16
16
|
exports.ItemTitle = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"])));
|
|
17
|
-
exports.ItemContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n transition: all .3s ease;\n overflow: hidden;\n position: relative;\n > div{\n padding: 1rem 0 0;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n }\n"], ["\n transition: all .3s ease;\n overflow: hidden;\n position: relative;\n > div{\n padding: 1rem 0 0;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n }\n"])));
|
|
17
|
+
exports.ItemContent = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n transition: all .3s ease;\n overflow: hidden;\n position: relative;\n > div{\n padding: 1rem 2rem 0 0;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n }\n"], ["\n transition: all .3s ease;\n overflow: hidden;\n position: relative;\n > div{\n padding: 1rem 2rem 0 0;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n }\n"])));
|
|
18
18
|
exports.Footer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n box-sizing: border-box;\n display: block;\n margin-top: 1.5rem!important;\n"], ["\n box-sizing: border-box;\n display: block;\n margin-top: 1.5rem!important;\n"])));
|
|
19
19
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -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;
|
|
@@ -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 .item {\n background-color: var(--primary-opacity-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n padding: 0 5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n\n @media only screen and ", " {\n padding: 1.5rem 1rem;\n margin-top: 3rem;\n display: flex;\n justify-content: center;\n }\n\n .text {\n flex: 1 0;\n max-width: 349px;\n @media only screen and ", " {\n max-width: initial;\n }\n\n .title {\n margin-bottom: 1rem;\n display: block;\n }\n\n .description {\n margin: 0;\n display: block;\n }\n }\n\n\n .img {\n margin-top: -
|
|
13
|
+
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .item {\n background-color: var(--primary-opacity-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n padding: 0 5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n\n @media only screen and ", " {\n padding: 1.5rem 1rem;\n margin-top: 3rem;\n display: flex;\n justify-content: center;\n }\n\n .text {\n flex: 1 0;\n max-width: 349px;\n @media only screen and ", " {\n max-width: initial;\n }\n\n .title {\n margin-bottom: 1rem;\n display: block;\n }\n\n .description {\n margin: 0;\n display: block;\n }\n }\n\n\n .img {\n margin-top: -21px;\n\n > * {\n display: block !important;\n }\n\n @media only screen and ", " {\n width: 100%;\n margin-bottom: 24px;\n }\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n }\n\n\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .item {\n background-color: var(--primary-opacity-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n padding: 0 5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n\n @media only screen and ", " {\n padding: 1.5rem 1rem;\n margin-top: 3rem;\n display: flex;\n justify-content: center;\n }\n\n .text {\n flex: 1 0;\n max-width: 349px;\n @media only screen and ", " {\n max-width: initial;\n }\n\n .title {\n margin-bottom: 1rem;\n display: block;\n }\n\n .description {\n margin: 0;\n display: block;\n }\n }\n\n\n .img {\n margin-top: -21px;\n\n > * {\n display: block !important;\n }\n\n @media only screen and ", " {\n width: 100%;\n margin-bottom: 24px;\n }\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n }\n\n\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -8,7 +8,7 @@ var layout4_styled_1 = require("./layout4.styled");
|
|
|
8
8
|
var classnames_1 = __importDefault(require("classnames"));
|
|
9
9
|
var Button_1 = __importDefault(require("../../../Button"));
|
|
10
10
|
var Index = function (props) {
|
|
11
|
-
var data = props.data;
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)(layout4_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(data === null || data === void 0 ? void 0 : data.img) && (0, jsx_runtime_1.jsx)("div", { className: "img", children: data === null || data === void 0 ? void 0 : data.img }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', 'headline-extra-bold-32-39'), children: data === null || data === void 0 ? void 0 : data.title }), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', 'title-regular-16-19'), children: data === null || data === void 0 ? void 0 : data.description }), (data === null || data === void 0 ? void 0 : data.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: data === null || data === void 0 ? void 0 : data.onClick, children: data === null || data === void 0 ? void 0 : data.buttonText })] })] }) }));
|
|
11
|
+
var data = props.data, isMobile = props.isMobile;
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)(layout4_styled_1.BannerStyled, { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(data === null || data === void 0 ? void 0 : data.img) && (0, jsx_runtime_1.jsx)("div", { className: "img", children: data === null || data === void 0 ? void 0 : data.img }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(data === null || data === void 0 ? void 0 : data.title) && (0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', 'headline-extra-bold-32-39'), children: data === null || data === void 0 ? void 0 : data.title }), (data === null || data === void 0 ? void 0 : data.description) && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', isMobile ? 'body-regular-14-17' : 'title-regular-16-19'), children: data === null || data === void 0 ? void 0 : data.description }), (data === null || data === void 0 ? void 0 : data.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: data === null || data === void 0 ? void 0 : data.onClick, children: data === null || data === void 0 ? void 0 : data.buttonText })] })] }) }));
|
|
13
13
|
};
|
|
14
14
|
exports.default = Index;
|
|
@@ -58,7 +58,7 @@ var Breadcrumbs = function (props) {
|
|
|
58
58
|
};
|
|
59
59
|
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
|
|
60
60
|
var _a;
|
|
61
|
-
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, { onClick: onClickBackIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft", width: "16px", height: "16px" }) }), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { className: "caption-bold-12-15", children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { stroke: "#9763F6", name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, { item: breadCrumbItem, children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { className: "caption-bold-12-15", children: breadCrumbItem.name })] }))] }, key));
|
|
62
62
|
}) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
|
|
63
63
|
};
|
|
64
64
|
exports.default = Breadcrumbs;
|
|
@@ -24,9 +24,9 @@ var Children = function (props) {
|
|
|
24
24
|
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "children", children: children }), icon && (0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: "16px", height: "16px" }) }))] });
|
|
25
25
|
};
|
|
26
26
|
var Button = function (props) {
|
|
27
|
-
var _a;
|
|
27
|
+
var _a, _b, _c, _d, _e, _f;
|
|
28
28
|
var isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children;
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)((_a = {}, _a["loading"] = isLoading, _a), (size === 'xsmall'
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)((_a = {}, _a["loading"] = isLoading, _a), (_b = {}, _b["body-bold-13-16"] = size === 'xsmall' && variant !== 'ghost', _b), (_c = {}, _c["caption-bold-12-15"] = size === 'xsmall' && variant === 'ghost', _c), (_d = {}, _d["body-bold-13-16"] = size === 'small', _d), (_e = {}, _e["body-bold-14-17"] = size === 'big', _e), (_f = {}, _f["body-bold-14-17"] = size === 'medium', _f)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, children: isLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
|
|
30
30
|
(0, jsx_runtime_1.jsx)(Children, { icon: icon, children: children }) }));
|
|
31
31
|
};
|
|
32
32
|
exports.default = Button;
|
|
@@ -29,10 +29,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
30
|
exports.IconStyled = exports.ButtonStyled = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
32
|
+
var devices_1 = require("../../constants/devices");
|
|
33
|
+
var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path, rect{\n stroke : white;\n }\n circle{\n fill : white; \n ~ path{\n stroke : var(--primary);\n }\n } \n }\n\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n } \n }\n }\n"], ["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path, rect{\n stroke : white;\n }\n circle{\n fill : white; \n ~ path{\n stroke : var(--primary);\n }\n } \n }\n\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n } \n }\n }\n"])), devices_1.devices.mdUp);
|
|
34
|
+
var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
35
|
+
var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n \n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n \n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
|
+
var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n \n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n \n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
37
|
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
|
|
37
38
|
switch (props.variant) {
|
|
38
39
|
case 'primary':
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.CarouselStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\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: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\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\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"], ["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\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: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\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\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
13
|
+
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\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: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n @media only screen and ", " {\n max-width: 72px;\n }\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\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"], ["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\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: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n @media only screen and ", " {\n max-width: 72px;\n }\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\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\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 SvgSearch = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgSearch = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsxs)("g", { id: "Search", children: [(0, jsx_runtime_1.jsx)("circle", { id: "Ellipse_739", cx: 7.33203, cy: 7.33398, r: 6, stroke: "#9763F6", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { id: "Line_181", d: "M12 12L14.6667 14.6667", stroke: "#9763F6", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))); };
|
|
40
40
|
exports.default = SvgSearch;
|
|
@@ -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;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.HorizontalStyled = exports.StandartStyled = exports.ChecklistStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
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
|
|
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:
|
|
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
|
|
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: ", ";\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
|
+
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 display: block;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\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 display: block;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\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:
|
|
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: 360px;\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: 360px;\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
|
};
|
|
@@ -8,15 +8,16 @@ var react_1 = require("react");
|
|
|
8
8
|
var Tooltip_styled_1 = require("./Tooltip.styled");
|
|
9
9
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
10
10
|
var Tooltip = function (props) {
|
|
11
|
-
var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth;
|
|
11
|
+
var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth, position = props.position;
|
|
12
12
|
var _a = (0, react_1.useState)(isOpen), isOpenTooltip = _a[0], setIsOpenTooltip = _a[1];
|
|
13
13
|
(0, react_1.useEffect)(function () {
|
|
14
14
|
setIsOpenTooltip(isOpen);
|
|
15
15
|
}, [isOpen]);
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
|
|
17
17
|
};
|
|
18
18
|
Tooltip.defaultProps = {
|
|
19
19
|
iconWidth: "16px",
|
|
20
20
|
iconHeight: "16px",
|
|
21
|
+
position: "bottomCenter",
|
|
21
22
|
};
|
|
22
23
|
exports.default = Tooltip;
|
|
@@ -11,7 +11,41 @@ exports.Popup = exports.Title = exports.Selector = exports.TooltipStyled = void
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.hasClickAction && "\n &:hover {\n > div {\n opacity: 1;\n }\n }\n "; });
|
|
14
|
-
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n svg {\n display: block;\n path {\n stroke: var(--primary);\n }\n }\n"], ["\n display: block;\n cursor: ", ";\n svg {\n display: block;\n path {\n stroke: var(--primary);\n }\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
|
|
15
|
-
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
16
|
-
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n
|
|
14
|
+
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"], ["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
|
|
15
|
+
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin-bottom: 0.5rem;\n"], ["\n display: block;\n margin-bottom: 0.5rem;\n"])));
|
|
16
|
+
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -0.5rem;\n &:before {\n left: auto !important;\n transform: none !important;\n right: 0.5rem !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n transform: rotate(45deg);\n }\n"], ["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -0.5rem;\n &:before {\n left: auto !important;\n transform: none !important;\n right: 0.5rem !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n transform: rotate(45deg);\n }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
|
|
17
|
+
switch (props.position) {
|
|
18
|
+
case 'bottomRight':
|
|
19
|
+
return "\n right: -0.5rem;\n top: calc(100% + 10px);\n ";
|
|
20
|
+
case 'bottomCenter':
|
|
21
|
+
return "\n left: 50%;\n top: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
22
|
+
case 'bottomLeft':
|
|
23
|
+
return "\n left: 0;\n top: calc(100% + 10px);\n ";
|
|
24
|
+
case 'topRight':
|
|
25
|
+
return "\n right: -0.5rem;\n bottom: calc(100% + 10px);\n ";
|
|
26
|
+
case 'topCenter':
|
|
27
|
+
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
28
|
+
case 'topLeft':
|
|
29
|
+
return "\n left: 0;\n bottom: calc(100% + 10px);\n ";
|
|
30
|
+
default:
|
|
31
|
+
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
32
|
+
}
|
|
33
|
+
}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) {
|
|
34
|
+
switch (props.position) {
|
|
35
|
+
case 'bottomRight':
|
|
36
|
+
return "\n bottom: calc(100% - 7px);\n right: 10px;\n ";
|
|
37
|
+
case 'bottomCenter':
|
|
38
|
+
return "\n bottom: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
39
|
+
case 'bottomLeft':
|
|
40
|
+
return "\n bottom: calc(100% - 7px);\n left: 10px;\n ";
|
|
41
|
+
case 'topRight':
|
|
42
|
+
return "\n top: calc(100% - 7px);\n right: 10px;\n ";
|
|
43
|
+
case 'topCenter':
|
|
44
|
+
return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
45
|
+
case 'topLeft':
|
|
46
|
+
return "\n top: calc(100% - 7px);\n left: 10px;\n ";
|
|
47
|
+
default:
|
|
48
|
+
return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
49
|
+
}
|
|
50
|
+
});
|
|
17
51
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -17,11 +17,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
20
|
+
var props_1 = require("../props");
|
|
20
21
|
exports.default = {
|
|
21
22
|
title: 'Components/Tooltip',
|
|
22
23
|
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "5rem 0 0 11rem", display: "inline-block" }, children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({}, props)) }); },
|
|
23
24
|
tags: ['autodocs'],
|
|
24
|
-
argTypes: {
|
|
25
|
+
argTypes: {
|
|
26
|
+
position: { control: 'select', options: props_1.positions },
|
|
27
|
+
}
|
|
25
28
|
};
|
|
26
29
|
exports.Default = {
|
|
27
30
|
args: {
|
|
@@ -9,10 +9,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.SquareDivider = exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.SquareStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var devices_1 = require("../../../../constants/devices");
|
|
12
13
|
exports.SquareStyled = 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: 250px;\n color: var(--dark);\n text-align: center;\n align-content: center;\n position: relative;\n box-sizing: border-box;\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: 250px;\n color: var(--dark);\n text-align: center;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n"])));
|
|
13
14
|
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1.5rem;\n"], ["\n margin-top: 1.5rem;\n"])));
|
|
14
15
|
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n min-height: 38px;\n"], ["\n display: block;\n min-height: 38px;\n"])));
|
|
15
16
|
exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n min-height: 76px;\n"], ["\n margin: 1rem 0 0 0;\n min-height: 76px;\n"])));
|
|
16
17
|
exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n text-align: center;\n > *{\n display: block !important;\n }\n"], ["\n display: block;\n text-align: center;\n > *{\n display: block !important;\n }\n"])));
|
|
17
|
-
exports.SquareDivider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n"])));
|
|
18
|
+
exports.SquareDivider = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n @media only screen and ", " {\n left: calc(100% - 30px);\n }\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(100% - 17px);\n z-index: 5;\n @media only screen and ", " {\n left: calc(100% - 30px);\n }\n"])), devices_1.devices.xl);
|
|
18
19
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -10,8 +10,8 @@ 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
|
-
exports.ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n > *{\n display:
|
|
16
|
+
exports.ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n > *{\n display: block !important;\n }\n"], ["\n display: block;\n > *{\n display: block !important;\n }\n"])));
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -6,7 +6,7 @@ var breakpoints = {
|
|
|
6
6
|
sm: "576px",
|
|
7
7
|
md: "768px",
|
|
8
8
|
lg: "992px",
|
|
9
|
-
xl: "
|
|
9
|
+
xl: "1050px",
|
|
10
10
|
"2xl": "1400px",
|
|
11
11
|
};
|
|
12
12
|
exports.devices = {
|
|
@@ -16,4 +16,10 @@ exports.devices = {
|
|
|
16
16
|
lg: "(max-width: ".concat(breakpoints["lg"], ")"),
|
|
17
17
|
xl: "(max-width: ".concat(breakpoints["xl"], ")"),
|
|
18
18
|
"2xl": "(max-width: ".concat(breakpoints["2xl"], ")"),
|
|
19
|
+
xsUp: "(min-width: ".concat(breakpoints["xs"], ")"),
|
|
20
|
+
smUp: "(min-width: ".concat(breakpoints["sm"], ")"),
|
|
21
|
+
mdUp: "(min-width: ".concat(breakpoints["md"], ")"),
|
|
22
|
+
lgUp: "(min-width: ".concat(breakpoints["lg"], ")"),
|
|
23
|
+
xlUp: "(min-width: ".concat(breakpoints["xl"], ")"),
|
|
24
|
+
"2xlUp": "(min-width: ".concat(breakpoints["2xl"], ")"),
|
|
19
25
|
};
|
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;
|