krl-alfred 1.67.2 → 1.68.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Banner/layouts/layout1/index.js +1 -8
- 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/Breadcrumbs/Breadcrumbs.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.styled.js +1 -1
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/Button.styled.js +4 -5
- package/dist/components/Carousel/Carousel.styled.js +1 -1
- package/dist/components/Icon/ArrowRightBig.js +1 -1
- package/dist/components/ProductCard/layouts/Horizontal.js +1 -1
- package/dist/components/ProductCard/layouts/Standart.js +1 -1
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SuggestBox/SuggestBox.js +1 -1
- package/dist/components/Tooltip/Tooltip.styled.js +4 -4
- package/dist/components/ValueProposition/layouts/squareSm/SquareSm.styled.js +2 -2
- package/dist/components/ValueProposition/layouts/squareSm/index.js +1 -1
- package/dist/components/ValueProposition/stories/ValueProposition.stories.js +1 -1
- package/package.json +1 -1
|
@@ -25,14 +25,7 @@ var Index = function (props) {
|
|
|
25
25
|
var data = props.data;
|
|
26
26
|
var _a = (0, react_1.useState)(0), activeSlide = _a[0], setActiveSlide = _a[1];
|
|
27
27
|
var sliderRef = (0, react_1.useRef)(null);
|
|
28
|
-
var settings = {
|
|
29
|
-
dots: false,
|
|
30
|
-
infinite: false,
|
|
31
|
-
speed: 500,
|
|
32
|
-
slidesToShow: 1,
|
|
33
|
-
slidesToScroll: 1,
|
|
34
|
-
afterChange: function (index) { return setActiveSlide(index); }
|
|
35
|
-
};
|
|
28
|
+
var settings = __assign({ dots: false, infinite: false, speed: 500, slidesToShow: 1, slidesToScroll: 1, afterChange: function (index) { return setActiveSlide(index); } }, props.carouselSettings);
|
|
36
29
|
var next = function () { return sliderRef.slickNext(); };
|
|
37
30
|
var previous = function () { return sliderRef.slickPrev(); };
|
|
38
31
|
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) {
|
|
@@ -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 .
|
|
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 .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n .slick-arrow{\n display: none !important;\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;\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 display: inline-block !important;\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 .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n .slick-arrow{\n display: none !important;\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;\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 display: inline-block !important;\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
|
|
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 border-radius: 0.5rem;\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 border-radius: 0.5rem;\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;
|
|
@@ -30,7 +30,7 @@ var Breadcrumbs = function (props) {
|
|
|
30
30
|
var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".breadcrumbSm");
|
|
31
31
|
var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".breadcrumbSm li.active");
|
|
32
32
|
if (activeItem && elem) {
|
|
33
|
-
elem.scrollLeft = activeItem.offsetLeft;
|
|
33
|
+
elem.scrollLeft = activeItem.offsetLeft - 15;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
}, 100);
|
|
@@ -23,6 +23,6 @@ exports.SubCategoryItem = styled_components_1.default.li(templateObject_10 || (t
|
|
|
23
23
|
exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"], ["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"])));
|
|
24
24
|
exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n padding: 0;\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"], ["\n display: block;\n padding: 0;\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"])), function (props) { return (props.isActive ? "" : "&:hover{"); }, function (props) { return (props.isActive ? "" : "}"); }, function (props) { return (props.isSeeAll ? "font-weight: 700;" : ""); });
|
|
25
25
|
exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
|
|
26
|
-
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n
|
|
26
|
+
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem 15px 2rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 2rem 15px 1rem 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"], ["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem 15px 2rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 2rem 15px 1rem 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"])), devices_1.devices.md);
|
|
27
27
|
exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px #eae9f0;\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"], ["\n display: block;\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px #eae9f0;\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"])), function (props) { return (props.isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
|
|
28
28
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
@@ -26,7 +26,7 @@ var Children = function (props) {
|
|
|
26
26
|
var Button = function (props) {
|
|
27
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), (_b = {}, _b["
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)((_a = {}, _a["loading"] = isLoading, _a), (_b = {}, _b["caption-bold-12-15"] = size === 'xsmall' && variant !== 'ghost', _b), (_c = {}, _c["body-bold-13-16"] = 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,11 +29,10 @@ 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
|
|
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);
|
|
32
|
+
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 &:hover {\n background-color: var(--primary-hover);\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 &:hover {\n background-color: var(--primary-hover);\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"])));
|
|
33
|
+
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 &: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 &: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 &: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 &: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"])));
|
|
34
|
+
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 &: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 &: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 &: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 &: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"])));
|
|
35
|
+
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 &: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 &: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 &: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 &: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"])));
|
|
37
36
|
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) {
|
|
38
37
|
switch (props.variant) {
|
|
39
38
|
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 @media only screen and ", " {\n max-width:
|
|
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: 74px;\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: 74px;\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 SvgArrowRightBig = 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)("path", { d: "M8.5 5L15.5 12L8.5 19", stroke: "#0A103D", strokeWidth:
|
|
39
|
+
var SvgArrowRightBig = 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)("path", { d: "M8.5 5L15.5 12L8.5 19", stroke: "#0A103D", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
|
|
40
40
|
exports.default = SvgArrowRightBig;
|
|
@@ -24,6 +24,6 @@ var Horizontal = function (props) {
|
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
26
26
|
};
|
|
27
|
-
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.HorizontalStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsxs)("div", { className: "horizontalWrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', (react_device_detect_1.isMobile ? 'caption-semi-bold-
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.HorizontalStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(LinkComponent, { item: props, children: (0, jsx_runtime_1.jsxs)("div", { className: "horizontalWrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('title', (react_device_detect_1.isMobile ? 'caption-semi-bold-12-15' : 'title-semi-bold-16-19')), children: title }), !react_device_detect_1.isMobile && (0, jsx_runtime_1.jsx)("p", { className: (0, classnames_1.default)('description', 'body-medium-14-17'), children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "priceContent", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("price", (react_device_detect_1.isMobile ? 'caption-extra-bold-12-15' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("period", (react_device_detect_1.isMobile ? 'caption-regular-12-15' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] }) }) })));
|
|
28
28
|
};
|
|
29
29
|
exports.default = Horizontal;
|
|
@@ -24,6 +24,6 @@ var Standart = function (props) {
|
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
26
26
|
};
|
|
27
|
-
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", title: "\u0130ndirimli" }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('productCardTitle', (isMobile ? 'headline-bold-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.jsxs)("div", { className: "productCardPriceContent", children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('discountRate', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-13-16')), children: ["%", discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('oldPrice'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'body-semi-bold-13-16' : 'caption-semi-bold-12-15')), children: oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', 'caption-regular-12-15'), children: ["/ ", oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'body-regular-14-17' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] })] })] }) })));
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(ProductCard_styled_1.StandartStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsxs)(LinkComponent, { item: props, children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { size: "medium", left: (isMobile ? '17px' : '9px'), top: (isMobile ? '17px' : '9px'), title: "\u0130ndirimli" }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: image }), (0, jsx_runtime_1.jsxs)("div", { className: "productCardContent", children: [(0, jsx_runtime_1.jsx)("strong", { className: (0, classnames_1.default)('productCardTitle', (isMobile ? 'headline-bold-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.jsxs)("div", { className: "productCardPriceContent", children: [discountRate > 0 && (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('discountRate', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-13-16')), children: ["%", discountRate] }), (0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && discountRate > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('oldPrice'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'body-semi-bold-13-16' : 'caption-semi-bold-12-15')), children: oldPrice }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', 'caption-regular-12-15'), children: ["/ ", oldPricePeriod] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "newPrice", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('price', (isMobile ? 'title-extra-bold-16-19' : 'body-extra-bold-14-17')), children: price }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('period', (isMobile ? 'body-regular-14-17' : 'body-regular-13-16')), children: ["/ ", period] })] })] })] })] })] }) })));
|
|
28
28
|
};
|
|
29
29
|
exports.default = Standart;
|
|
@@ -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
|
|
13
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .inputWrapper {\n position: relative;\n z-index: 5;\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: 4;\n display: grid;\n row-gap: 1.5rem;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n row-gap: 0.5rem;\n }\n }\n"], ["\n position: relative;\n .inputWrapper {\n position: relative;\n z-index: 5;\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: 4;\n display: grid;\n row-gap: 1.5rem;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n row-gap: 0.5rem;\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;
|
|
@@ -11,7 +11,7 @@ var prop_types_1 = __importDefault(require("prop-types"));
|
|
|
11
11
|
var classnames_1 = __importDefault(require("classnames"));
|
|
12
12
|
var SuggestBox = function (props) {
|
|
13
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
|
+
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: isMobile ? "20px" : "16px", height: isMobile ? "20px" : "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 }) })] }));
|
|
15
15
|
};
|
|
16
16
|
SuggestBox.propTypes = {
|
|
17
17
|
description: prop_types_1.default.string,
|
|
@@ -13,22 +13,22 @@ 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
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
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:
|
|
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: rotate(45deg) !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: rotate(45deg) !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
17
|
switch (props.position) {
|
|
18
18
|
case 'bottomRight':
|
|
19
19
|
return "\n right: -0.5rem;\n top: calc(100% + 10px);\n ";
|
|
20
20
|
case 'bottomCenter':
|
|
21
|
-
return "\n left: 50%;\n top: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
21
|
+
return "\n left: 50%;\n top: calc(100% + 10px);\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
22
22
|
case 'bottomLeft':
|
|
23
23
|
return "\n left: 0;\n top: calc(100% + 10px);\n ";
|
|
24
24
|
case 'topRight':
|
|
25
25
|
return "\n right: -0.5rem;\n bottom: calc(100% + 10px);\n ";
|
|
26
26
|
case 'topCenter':
|
|
27
|
-
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
27
|
+
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
28
28
|
case 'topLeft':
|
|
29
29
|
return "\n left: 0;\n bottom: calc(100% + 10px);\n ";
|
|
30
30
|
default:
|
|
31
|
-
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
31
|
+
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
32
32
|
}
|
|
33
33
|
}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) {
|
|
34
34
|
switch (props.position) {
|
|
@@ -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:
|
|
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: flex;\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 \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: flex;\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 \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
|
|
16
|
+
exports.ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: middle;\n"], ["\n display: inline-block;\n vertical-align: middle;\n"])));
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -20,6 +20,6 @@ var SquareSm = function (props) {
|
|
|
20
20
|
(0, react_1.useEffect)(function () {
|
|
21
21
|
setIsShow(show);
|
|
22
22
|
}, [show]);
|
|
23
|
-
return ((0, jsx_runtime_1.
|
|
23
|
+
return ((0, jsx_runtime_1.jsx)(SquareSm_styled_1.SquareSmStyled, __assign({}, props, { show: isShow, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SquareSm_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsx)(SquareSm_styled_1.TextWrapper, { children: (0, jsx_runtime_1.jsx)(SquareSm_styled_1.Title, { className: 'title-bold-16-19', dangerouslySetInnerHTML: { __html: title } }) })] }) })));
|
|
24
24
|
};
|
|
25
25
|
exports.default = SquareSm;
|
|
@@ -21,7 +21,7 @@ var props_1 = require("../props");
|
|
|
21
21
|
var props_2 = require("../../Divider/props");
|
|
22
22
|
exports.default = {
|
|
23
23
|
title: 'Components/ValueProposition',
|
|
24
|
-
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "3rem" }, children: (0, jsx_runtime_1.jsx)(ValueProposition_1.default, __assign({}, props)) }); },
|
|
24
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "3rem", maxWidth: props.layout === "squareSm" ? '220px' : 'initial' }, children: (0, jsx_runtime_1.jsx)(ValueProposition_1.default, __assign({}, props)) }); },
|
|
25
25
|
tags: ['autodocs'],
|
|
26
26
|
argTypes: {
|
|
27
27
|
layout: { control: 'select', options: props_1.layouts },
|