krl-alfred 1.64.0 → 1.65.0
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.js +2 -1
- package/dist/components/Accordion/Accordion.styled.js +3 -3
- package/dist/components/Alert/Alert.styled.js +1 -1
- package/dist/components/Banner/layouts/layout2/layout2.styled.js +1 -1
- package/dist/components/Carousel/Carousel.js +2 -9
- package/dist/components/Carousel/Carousel.styled.js +1 -1
- package/dist/components/Carousel/props.js +0 -1
- package/dist/components/Carousel/stories/Carousel.stories.js +13 -1
- package/dist/components/CategoryMenu/CategoryMenu.styled.js +2 -2
- package/dist/components/Icon/Cargo2.js +40 -0
- package/dist/components/Icon/Securitywithtik.js +40 -0
- package/dist/components/Icon/index.js +15 -3
- package/dist/components/Input/Input.js +2 -1
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/Modal/Modal.styled.js +1 -1
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SelectBox/SelectBox.js +37 -0
- package/dist/components/SelectBox/SelectBox.styled.js +21 -0
- package/dist/components/SelectBox/index.js +8 -0
- package/dist/components/SelectBox/props.js +2 -0
- package/dist/components/SelectBox/stories/SelectBox.stories.js +26 -0
- package/dist/components/TextLink/TextLink.js +21 -0
- package/dist/components/TextLink/TextLink.styled.js +13 -0
- package/dist/components/TextLink/index.js +8 -0
- package/dist/components/TextLink/props.js +2 -0
- package/dist/components/TextLink/stories/TextLink.stories.js +18 -0
- package/dist/components/ValueProposition/ValueProposition.js +6 -0
- package/dist/components/ValueProposition/layouts/horizontal/Horizontal.styled.js +2 -2
- package/dist/components/ValueProposition/layouts/popover/Popover.styled.js +18 -0
- package/dist/components/ValueProposition/layouts/popover/index.js +33 -0
- package/dist/components/ValueProposition/layouts/square/Square.styled.js +1 -1
- package/dist/components/ValueProposition/layouts/squareSm/SquareSm.styled.js +17 -0
- package/dist/components/ValueProposition/layouts/squareSm/index.js +25 -0
- package/dist/components/ValueProposition/layouts/vertical/Vertical.styled.js +3 -3
- package/dist/components/ValueProposition/layouts/vertical/index.js +1 -1
- package/dist/components/ValueProposition/props.js +1 -1
- package/dist/components/ValueProposition/stories/ValueProposition.stories.js +8 -1
- package/dist/index.js +5 -1
- package/dist/jsons/SelectValues.json +17 -0
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
var react_1 = require("react");
|
|
9
9
|
var Accordion_styled_1 = require("./Accordion.styled");
|
|
10
10
|
var AccordionItem_1 = __importDefault(require("./AccordionItem"));
|
|
11
|
+
var TextLink_1 = __importDefault(require("./../TextLink"));
|
|
11
12
|
exports.AccordionContext = (0, react_1.createContext)({
|
|
12
13
|
active: 0,
|
|
13
14
|
setActive: function (index) { }
|
|
@@ -21,7 +22,7 @@ var Accordion = function (props) {
|
|
|
21
22
|
return ((0, jsx_runtime_1.jsxs)(Accordion_styled_1.AccordionStyled, { children: [title && (0, jsx_runtime_1.jsx)(Accordion_styled_1.AccordionTitle, { className: "title-bold-16-19", children: title }), (0, jsx_runtime_1.jsx)(Accordion_styled_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(exports.AccordionContext.Provider, { value: {
|
|
22
23
|
active: active,
|
|
23
24
|
setActive: setActive
|
|
24
|
-
}, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { index: key, title: item.question, content: item.answer }, key)); }) }) }), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.
|
|
25
|
+
}, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(AccordionItem_1.default, { index: key, title: item.question, content: item.answer }, key)); }) }) }), showLink && ((0, jsx_runtime_1.jsx)(Accordion_styled_1.Footer, { className: "body-bold-14-17", children: (0, jsx_runtime_1.jsx)(TextLink_1.default, { onClick: linkOnClick, children: linkText }) }))] }));
|
|
25
26
|
};
|
|
26
27
|
Accordion.defaultProps = {
|
|
27
28
|
activeIndex: 0,
|
|
@@ -7,13 +7,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.
|
|
10
|
+
exports.Footer = exports.ItemContent = exports.ItemTitle = exports.Item = exports.Wrapper = exports.AccordionTitle = exports.AccordionStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.AccordionStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
12
|
+
exports.AccordionStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
13
13
|
exports.AccordionTitle = styled_components_1.default.h1(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-bottom: 1.5rem;\n margin-top: 0;\n"], ["\n margin-bottom: 1.5rem;\n margin-top: 0;\n"])));
|
|
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
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"])));
|
|
18
|
-
exports.
|
|
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;
|
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.AlertStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border-left: 8px solid var(--yellow);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n width: ", ";\n display: flex;\n padding:
|
|
12
|
+
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 8px;\n border-left: 8px solid var(--yellow);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n width: ", ";\n display: flex;\n padding: 1rem;\n box-sizing: border-box;\n margin-top: ", ";\n margin-bottom: ", ";\n\n .left {\n padding-right: 1rem;\n }\n\n .right {\n display: flex;\n flex-direction: column;\n color: var(--dark);\n\n h1 {\n margin: 0 0 8px;\n padding-top: 2px;\n }\n\n p {\n margin: 0;\n }\n }\n"], ["\n border-radius: 8px;\n border-left: 8px solid var(--yellow);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n width: ", ";\n display: flex;\n padding: 1rem;\n box-sizing: border-box;\n margin-top: ", ";\n margin-bottom: ", ";\n\n .left {\n padding-right: 1rem;\n }\n\n .right {\n display: flex;\n flex-direction: column;\n color: var(--dark);\n\n h1 {\n margin: 0 0 8px;\n padding-top: 2px;\n }\n\n p {\n margin: 0;\n }\n }\n"])), function (props) { return props.width || "100%"; }, function (props) { return props.top || "unset"; }, function (props) { return props.bottom || "unset"; });
|
|
13
13
|
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: -44px;\n\n @media only screen and ", " {\n width: 100%;\n margin-bottom: 24px;\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: -44px;\n\n @media only screen and ", " {\n width: 100%;\n margin-bottom: 24px;\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);
|
|
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: -44px;\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: -44px;\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;
|
|
@@ -22,17 +22,10 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
22
22
|
var react_slick_1 = __importDefault(require("react-slick"));
|
|
23
23
|
var Badges_1 = __importDefault(require("../Badges"));
|
|
24
24
|
var Carousel = function (props) {
|
|
25
|
-
var data = props.data, hasDiscount = props.hasDiscount;
|
|
25
|
+
var data = props.data, hasDiscount = props.hasDiscount, carouselSettings = props.carouselSettings;
|
|
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, autoplay: true, autoplaySpeed: 2500, slidesToScroll: 1, afterChange: function (index) { return setActiveSlide(index); } }, 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)(Carousel_styled_1.CarouselStyled, { children: [hasDiscount && (0, jsx_runtime_1.jsx)(Badges_1.default, { left: "-7px", top: "-7px", size: "medium", title: "\u0130ndirimli" }), (0, jsx_runtime_1.jsx)("div", { className: "inner", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { className: "navigation prev", onClick: previous, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "16px", height: "16px", name: "ArrowSmallLeft" }) }), (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.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:
|
|
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 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 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);
|
|
14
14
|
var templateObject_1;
|
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
15
|
};
|
|
5
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
17
|
exports.Default = void 0;
|
|
18
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
19
|
var Carousel_1 = __importDefault(require("../Carousel"));
|
|
8
20
|
var carousel_1 = __importDefault(require("./../../../jsons/carousel"));
|
|
9
21
|
exports.default = {
|
|
10
22
|
title: 'Components/Carousel',
|
|
11
|
-
component: Carousel_1.default,
|
|
23
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "456px" }, children: (0, jsx_runtime_1.jsx)(Carousel_1.default, __assign({}, props)) }); },
|
|
12
24
|
tags: ['autodocs'],
|
|
13
25
|
argTypes: {
|
|
14
26
|
hasDiscount: { control: 'boolean' },
|
|
@@ -29,9 +29,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
30
|
exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports.SubCategoryInner = exports.SubCategoryItem = exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
|
-
exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content:
|
|
32
|
+
exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding:0;\n margin: 12.5px auto;\n max-width: 1050px;\n a {\n text-decoration:none\n }\n"])));
|
|
33
33
|
var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n"], ["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n"])));
|
|
34
|
-
exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n position: relative;\n margin: 0
|
|
34
|
+
exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n path, circle {\n stroke : var(--dark-opacity-75)\n }\n &:hover{\n path , circle {\n stroke : var(--dark);\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n ", "\n"], ["\n display: block;\n position: relative;\n margin: 0;\n padding-bottom: 8px;\n padding-top: 8px;\n path, circle {\n stroke : var(--dark-opacity-75)\n }\n &:hover{\n path , circle {\n stroke : var(--dark);\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n ", "\n"])), hoverAndActive, function (props) { return props.isActiveCategory ? "\n > a > span{\n ".concat(hoverAndActive, "\n }\n ") : ""; });
|
|
35
35
|
exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n color: var(--dark-opacity-75);\n background-color: white;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n color: var(--dark-opacity-75);\n background-color: white;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"])));
|
|
36
36
|
exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 24px;\n display:block;\n"], ["\n height: 24px;\n display:block;\n"])));
|
|
37
37
|
exports.CategoryItemButtonTitle = styled_components_1.default.strong(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-top: 8px;\n display:block;\n"], ["\n margin-top: 8px;\n display:block;\n"])));
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgCargo2 = function (props) { return ((0, jsx_runtime_1.jsxs)("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: "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: 2 }), (0, jsx_runtime_1.jsx)("path", { d: "M20.6405 9.10938L16.0833 9.10938C15.941 9.10938 15.8066 9.18605 15.8066 9.3011V12.5902C15.8066 12.7053 15.941 12.782 16.0833 12.782L22.3965 12.782C22.4426 12.782 22.7779 12.7983 22.6732 12.5902C22.2906 11.8303 21.2436 9.88799 20.9203 9.3011C20.8597 9.191 20.7828 9.10938 20.6405 9.10938Z", fill: "white", stroke: "#0A103D", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("path", { d: "M20.3521 8.09766H15.1137C14.9035 8.09766 14.7051 8.25992 14.7051 8.50339V16.415C14.7051 16.6585 14.9035 16.8208 15.1137 16.8208H22.4686C22.6647 16.8208 22.8773 16.7098 22.8773 16.4827V13.2989C22.8773 12.9884 22.8048 12.682 22.6666 12.404C21.9888 11.0408 21.2642 9.54933 20.7653 8.50339C20.6605 8.28363 20.5623 8.09766 20.3521 8.09766Z", fill: "white", stroke: "#0A103D", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("path", { d: "M5.99145 16.8209C5.99145 17.4857 5.45252 18.0247 4.78772 18.0247C4.12291 18.0247 3.58398 17.4857 3.58398 16.8209C3.58398 16.1561 4.12291 15.6172 4.78772 15.6172C5.45252 15.6172 5.99145 16.1561 5.99145 16.8209Z", fill: "white", stroke: "#0A103D", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("circle", { cx: 18.653, cy: 16.8209, r: 1.20373, fill: "white", stroke: "#0A103D", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("ellipse", { cx: 4.78731, cy: 16.8205, rx: 0.734578, ry: 0.734577, fill: "white" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: 18.6525, cy: 16.8205, rx: 0.734575, ry: 0.734577, fill: "white" })] }))); };
|
|
40
|
+
exports.default = SvgCargo2;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgSecuritywithtik = function (props) { return ((0, jsx_runtime_1.jsxs)("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: "M17.6142 18.6279C19.3596 17.5371 19.9323 15.6735 20.0005 14.8781V2.9467C20.0005 2.40126 19.8096 1.99219 19.046 1.99219H4.86467C4.10106 1.99219 3.91016 2.40126 3.91016 2.9467V14.8781C3.97834 15.6735 4.55104 17.5371 6.29643 18.6279L11.2053 21.9005C11.7508 22.2414 12.1599 22.2414 12.7053 21.9005L17.6142 18.6279Z", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { d: "M15.9787 10.4483C15.9787 12.6699 14.1777 14.4709 11.9561 14.4709C9.73455 14.4709 7.93359 12.6699 7.93359 10.4483C7.93359 8.22674 9.73455 6.42578 11.9561 6.42578C14.1777 6.42578 15.9787 8.22674 15.9787 10.4483Z", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { d: "M9.77344 10.5823L11.5461 12.0823L14.0006 9.21875", stroke: "#0A103D", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
|
+
exports.default = SvgSecuritywithtik;
|
|
@@ -26,9 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
exports.Call = exports.Calendar = exports.BuyBig = exports.Buy = exports.ButtonIcon = exports.Box = exports.Bookmark = exports.Bag3 = exports.Bag = exports.Bag2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeftHover = exports.ArrowSmallLeft = exports.ArrowSmallDown = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowPlusCircle = exports.ArrowMediumRight = exports.ArrowMedium = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGo = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.AgreementArrowUp = exports.AgreementArrowDown = exports.Again = exports.AddUser = exports.Activity = void 0;
|
|
29
|
-
exports.
|
|
30
|
-
exports.
|
|
31
|
-
exports.iconList = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.TwitterStroke = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TickSquare = exports.TicketStar = exports.Ticket = exports.ThreeUser = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = void 0;
|
|
29
|
+
exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.Heart = exports.Grid = exports.Graph = exports.Game = exports.Folder = exports.FilterUp = exports.FilterDown = exports.Filter2 = exports.Filter = exports.FacebookStroke = exports.Facebook = exports.ErrorIcon = exports.EditSquare = exports.Edit = exports.Download = exports.Document = exports.Discovery = exports.Discount = exports.Delete = exports.DarkBadge = exports.Danger = exports.CloseSquare = exports.CloseMiniHover = exports.Closemini = exports.CloseHover = exports.CloseBigHover = exports.CloseBig = exports.Close = exports.CheckMark = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.Cargo1 = exports.Campaign = exports.Camera = exports.CallSilent = exports.CallMissed = exports.Calling = void 0;
|
|
30
|
+
exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.ProfilNamePassive = exports.ProfilName = exports.Profile = exports.PriceTag = exports.PoweredByQnbLogo = exports.Pointinghand = exports.PointFinger = exports.PlusSmall = exports.PlusBig = exports.Plus = exports.Play = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.NotificationSimpleSmall = exports.NotificationSimple = exports.Notification = exports.Notification1 = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.More = exports.Money = exports.Minus = exports.Message = exports.Mastercard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loading = exports.Live = exports.List = exports.LinkedinStroke = exports.LinkedIn = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.InstagramNegative = void 0;
|
|
31
|
+
exports.iconList = exports.Youtube = exports.Work = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet = exports.VolumeUp = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Upload = exports.Unlock = exports.TwoUser = exports.TwitterStroke = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircle = exports.TickSquare = exports.TicketStar = exports.Ticket = exports.ThreeUser = exports.SwitchPassive = exports.Swap = exports.Steps = exports.Steps2 = exports.Steps1 = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.Show = exports.ShieldFail = exports.ShieldDone = exports.Setting = exports.Setting1 = exports.Send = exports.Securitywithtik = exports.Search = exports.Scan = exports.Sandwatch = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = void 0;
|
|
32
32
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
33
33
|
var Activity_1 = __importDefault(require("./Activity"));
|
|
34
34
|
Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
|
|
@@ -144,6 +144,8 @@ var Cargo1_1 = __importDefault(require("./Cargo1"));
|
|
|
144
144
|
Object.defineProperty(exports, "Cargo1", { enumerable: true, get: function () { return Cargo1_1.default; } });
|
|
145
145
|
var Cargo_1 = __importDefault(require("./Cargo"));
|
|
146
146
|
Object.defineProperty(exports, "Cargo", { enumerable: true, get: function () { return Cargo_1.default; } });
|
|
147
|
+
var Cargo2_1 = __importDefault(require("./Cargo2"));
|
|
148
|
+
Object.defineProperty(exports, "Cargo2", { enumerable: true, get: function () { return Cargo2_1.default; } });
|
|
147
149
|
var Category_1 = __importDefault(require("./Category"));
|
|
148
150
|
Object.defineProperty(exports, "Category", { enumerable: true, get: function () { return Category_1.default; } });
|
|
149
151
|
var Chart_1 = __importDefault(require("./Chart"));
|
|
@@ -340,6 +342,8 @@ var Scan_1 = __importDefault(require("./Scan"));
|
|
|
340
342
|
Object.defineProperty(exports, "Scan", { enumerable: true, get: function () { return Scan_1.default; } });
|
|
341
343
|
var Search_1 = __importDefault(require("./Search"));
|
|
342
344
|
Object.defineProperty(exports, "Search", { enumerable: true, get: function () { return Search_1.default; } });
|
|
345
|
+
var Securitywithtik_1 = __importDefault(require("./Securitywithtik"));
|
|
346
|
+
Object.defineProperty(exports, "Securitywithtik", { enumerable: true, get: function () { return Securitywithtik_1.default; } });
|
|
343
347
|
var Send_1 = __importDefault(require("./Send"));
|
|
344
348
|
Object.defineProperty(exports, "Send", { enumerable: true, get: function () { return Send_1.default; } });
|
|
345
349
|
var Setting1_1 = __importDefault(require("./Setting1"));
|
|
@@ -647,6 +651,10 @@ exports.iconList = {
|
|
|
647
651
|
var props = __rest(_a, []);
|
|
648
652
|
return (0, jsx_runtime_1.jsx)(Cargo_1.default, __assign({}, props));
|
|
649
653
|
},
|
|
654
|
+
Cargo2: function (_a) {
|
|
655
|
+
var props = __rest(_a, []);
|
|
656
|
+
return (0, jsx_runtime_1.jsx)(Cargo2_1.default, __assign({}, props));
|
|
657
|
+
},
|
|
650
658
|
Category: function (_a) {
|
|
651
659
|
var props = __rest(_a, []);
|
|
652
660
|
return (0, jsx_runtime_1.jsx)(Category_1.default, __assign({}, props));
|
|
@@ -1039,6 +1047,10 @@ exports.iconList = {
|
|
|
1039
1047
|
var props = __rest(_a, []);
|
|
1040
1048
|
return (0, jsx_runtime_1.jsx)(Search_1.default, __assign({}, props));
|
|
1041
1049
|
},
|
|
1050
|
+
Securitywithtik: function (_a) {
|
|
1051
|
+
var props = __rest(_a, []);
|
|
1052
|
+
return (0, jsx_runtime_1.jsx)(Securitywithtik_1.default, __assign({}, props));
|
|
1053
|
+
},
|
|
1042
1054
|
Send: function (_a) {
|
|
1043
1055
|
var props = __rest(_a, []);
|
|
1044
1056
|
return (0, jsx_runtime_1.jsx)(Send_1.default, __assign({}, props));
|
|
@@ -31,6 +31,7 @@ var Input_styled_1 = require("./Input.styled");
|
|
|
31
31
|
var react_input_mask_1 = __importDefault(require("react-input-mask"));
|
|
32
32
|
var classnames_1 = __importDefault(require("classnames"));
|
|
33
33
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
34
|
+
var TextLink_1 = __importDefault(require("../TextLink"));
|
|
34
35
|
var Input = function (props) {
|
|
35
36
|
var _a;
|
|
36
37
|
var type = props.type, other = __rest(props, ["type"]);
|
|
@@ -42,7 +43,7 @@ var Input = function (props) {
|
|
|
42
43
|
var newType = inputType === 'password' ? 'text' : 'password';
|
|
43
44
|
setInputType(newType);
|
|
44
45
|
};
|
|
45
|
-
return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("top caption-bold-12-15", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)), children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(
|
|
46
|
+
return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("top caption-bold-12-15", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)), children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick, children: props === null || props === void 0 ? void 0 : props.customLinkText }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "input", children: [props.mask ? (0, jsx_runtime_1.jsx)(react_input_mask_1.default, __assign({ alwaysShowMask: props.alwaysShowMask, maskChar: props.maskChar, mask: props.mask }, props, { children: function (inputProps) { return (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({}, inputProps, { type: inputType })); } })) : (0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ type: inputType }, other)), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", { onClick: toggleInputType, className: "showHide", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: inputType === 'password' ? 'Show' : 'Hide' }) })] }), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", { className: "error", children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: props === null || props === void 0 ? void 0 : props.errorMessage })] })] });
|
|
46
47
|
};
|
|
47
48
|
Input.defaultValues = {
|
|
48
49
|
hasError: false,
|
|
@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.InputStyled = exports.Container = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n
|
|
12
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .showHide {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .showHide {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n path{\n stroke:var(--dark-opacity-50);\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n margin-left: 4px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n }\n"])), function (props) { return props.width || '370px'; });
|
|
13
13
|
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 8px;\n border: ", ";\n padding: ", ";\n color: ", ";\n font-family: var(--font-family-sans-serif);\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 17px;\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n"])), function (props) { return props.hasError ? 'white' : 'var(--dark-opacity-3)'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
14
14
|
var templateObject_1, templateObject_2;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.OverlayStyled = exports.ModalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n gap: ", ";\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n gap: ", ";\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"])), function (props) {
|
|
13
|
+
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n gap: ", ";\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n max-width: calc(100vw - 2rem);\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n \n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n gap: ", ";\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"])), function (props) {
|
|
14
14
|
switch (props.size) {
|
|
15
15
|
case 'small':
|
|
16
16
|
return "375px";
|
|
@@ -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:
|
|
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 box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n }\n }\n\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 536px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: calc(100% - 2px);\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"], ["\n position: relative;\n .inputWrapper {\n position: relative;\n\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 24px;\n color: var(--dark);\n font-family: inherit;\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: normal;\n outline: none;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10) !important;\n }\n }\n\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n path, circle {\n stroke: var(--primary);\n }\n }\n }\n }\n\n .resultList {\n border: 1px solid var(--dark-opacity-10);\n padding: 1.5rem;\n border-radius: 8px;\n background: white;\n max-height: 536px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: calc(100% - 2px);\n left: 0;\n right: 0;\n z-index: 5;\n @media only screen and ", " {\n border:0;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n"])), devices_1.devices.md, devices_1.devices.md);
|
|
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;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var SelectBox_styled_1 = require("./SelectBox.styled");
|
|
19
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
20
|
+
var react_select_1 = __importDefault(require("react-select"));
|
|
21
|
+
var SelectBox = function (props) {
|
|
22
|
+
var _a;
|
|
23
|
+
var options = props.options, name = props.name, placeholder = props.placeholder, onChange = props.onChange, isSearchable = props.isSearchable, menuIsOpen = props.menuIsOpen, filterOption = props.filterOption, instanceId = props.instanceId;
|
|
24
|
+
var formatOptionLabel = function (_a) {
|
|
25
|
+
var _b;
|
|
26
|
+
var innerProps = _a.innerProps, isDisabled = _a.isDisabled, data = _a.data;
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({}, innerProps, { className: (0, classnames_1.default)("option", (_b = {}, _b["optionSm"] = !data.labelBottom, _b)), children: (0, jsx_runtime_1.jsxs)("div", { children: [data.label && (0, jsx_runtime_1.jsx)("strong", { className: "title-bold-16-19", children: data.label }), data.labelBottom && (0, jsx_runtime_1.jsx)("span", { className: "body-medium-13-16", children: data.labelBottom })] }) })));
|
|
28
|
+
};
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)(SelectBox_styled_1.Container, { width: props.width, children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("top caption-bold-12-15"), children: (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }) })), (0, jsx_runtime_1.jsx)("div", { className: "select", children: (0, jsx_runtime_1.jsx)(react_select_1.default, { components: { Option: formatOptionLabel }, options: options, instanceId: instanceId, filterOption: filterOption, isSearchable: isSearchable, name: name, menuIsOpen: menuIsOpen, onChange: onChange, classNamePrefix: "customSelect", className: (0, classnames_1.default)("customSelect", (_a = {}, _a['isSearchable'] = isSearchable, _a)), placeholder: placeholder, noOptionsMessage: function () { return 'Sonuç bulunamadı'; } }) })] }));
|
|
30
|
+
};
|
|
31
|
+
SelectBox.defaultValues = {
|
|
32
|
+
hasError: false,
|
|
33
|
+
label: "Label",
|
|
34
|
+
width: "370px",
|
|
35
|
+
placeholder: "İstediğiniz tarihi seçin...",
|
|
36
|
+
};
|
|
37
|
+
exports.default = SelectBox;
|
|
@@ -0,0 +1,21 @@
|
|
|
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.Container = void 0;
|
|
11
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
12
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
|
+
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
14
|
+
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
15
|
+
var dot = {
|
|
16
|
+
backgroundImage: "url('".concat((0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })), "')"),
|
|
17
|
+
backgroundPosition: "1.5rem center",
|
|
18
|
+
backgroundRepeat: "no-repeat",
|
|
19
|
+
};
|
|
20
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n\n &:hover, :focus, :active {\n color: var(--primary-hover) !important;\n }\n }\n }\n\n .select {\n position: relative;\n \n .customSelect__value-container{\n padding: 0;\n }\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--dark);\n }\n .customSelect__control {\n height : 56px;\n background-color: white;\n border-width: 1px;\n border-style: solid;\n border-color: var(--dark-opacity-10);\n border-radius: 8px;\n padding: 0 1.5rem;\n &:hover {\n border-color: var(--primary);\n }\n }\n .customSelect__input-container{\n margin:0;\n padding: 0;\n }\n .isSearchable {\n .customSelect__control {\n \n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu {\n margin: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n }\n .customSelect__control--menu-is-open {\n border-color: var(--primary);\n box-shadow: none;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n .customSelect__menu-list {\n padding: 0;\n max-height: 200px;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n }\n \n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n }\n .isSearchable {\n .customSelect__value-container {\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n .customSelect__placeholder {\n font-size: 0.875rem;\n line-height: 17px;\n color: #84879e;\n margin: 0;\n }\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__indicator {\n padding: 0 0;\n\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n }\n .option {\n height : 70px;\n padding : 0 1.5rem;\n display : flex;\n align-items: center;\n justify-content : space-between;\n background-color : #fff;\n position : relative;\n color : var(--dark);\n cursor : pointer;\n &:hover{\n background-color: var(--dark-opacity-3);\n }\n &:active{\n background-color: var(--dark-opacity-3);\n }\n &:is(.optionSm){\n height: 51px;\n }\n strong , span{\n display: block;\n }\n }\n \n \n \n \n \n }\n \n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n\n &:hover, :focus, :active {\n color: var(--primary-hover) !important;\n }\n }\n }\n\n .select {\n position: relative;\n \n .customSelect__value-container{\n padding: 0;\n }\n .customSelect__single-value {\n margin: 0;\n padding: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--dark);\n }\n .customSelect__control {\n height : 56px;\n background-color: white;\n border-width: 1px;\n border-style: solid;\n border-color: var(--dark-opacity-10);\n border-radius: 8px;\n padding: 0 1.5rem;\n &:hover {\n border-color: var(--primary);\n }\n }\n .customSelect__input-container{\n margin:0;\n padding: 0;\n }\n .isSearchable {\n .customSelect__control {\n \n }\n }\n .customSelect__control--is-focused {\n border-color: var(--primary);\n box-shadow: none;\n }\n .customSelect__menu {\n margin: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n }\n .customSelect__control--menu-is-open {\n border-color: var(--primary);\n box-shadow: none;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n .customSelect__menu-list {\n padding: 0;\n max-height: 200px;\n scroll-margin: 0 10px 30px 0;\n scrollbar-color: var(--dark-opacity-10) var(--dark-opacity-10);\n scrollbar-width: thin;\n\n &::-webkit-scrollbar {\n width: 4px;\n background-color: #ffffff;\n }\n &::-webkit-scrollbar-track {\n border-radius: 10px;\n background: white;\n }\n\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background: var(--dark-opacity-10);\n }\n }\n \n input {\n font-size: 14px !important;\n font-weight: 600 !important;\n }\n .isSearchable {\n .customSelect__value-container {\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: 0 center;\n padding: 11px 24px 11px 24px;\n }\n }\n .customSelect__placeholder {\n font-size: 0.875rem;\n line-height: 17px;\n color: #84879e;\n margin: 0;\n }\n .customSelect__indicator-separator {\n display: none;\n }\n .customSelect__indicator {\n padding: 0 0;\n\n width: 16px;\n height: 100%;\n background-image: url('", "');\n background-repeat: no-repeat;\n background-position: center center;\n svg {\n display: none;\n }\n }\n .option {\n height : 70px;\n padding : 0 1.5rem;\n display : flex;\n align-items: center;\n justify-content : space-between;\n background-color : #fff;\n position : relative;\n color : var(--dark);\n cursor : pointer;\n &:hover{\n background-color: var(--dark-opacity-3);\n }\n &:active{\n background-color: var(--dark-opacity-3);\n }\n &:is(.optionSm){\n height: 51px;\n }\n strong , span{\n display: block;\n }\n }\n \n \n \n \n \n }\n \n"])), function (props) { return props.width || '370px'; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" })), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowDown", width: "16px", height: "16px" })));
|
|
21
|
+
var templateObject_1;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var SelectBox_1 = require("./SelectBox");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SelectBox_1).default; } });
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Default = void 0;
|
|
7
|
+
var SelectBox_1 = __importDefault(require("../SelectBox"));
|
|
8
|
+
var SelectValues_json_1 = __importDefault(require("./../../../jsons/SelectValues.json"));
|
|
9
|
+
exports.default = {
|
|
10
|
+
title: 'Components/SelectBox',
|
|
11
|
+
component: SelectBox_1.default,
|
|
12
|
+
tags: ['autodocs'],
|
|
13
|
+
argTypes: {
|
|
14
|
+
hasError: { control: 'boolean' },
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
exports.Default = {
|
|
18
|
+
args: {
|
|
19
|
+
placeholder: "Placeholder",
|
|
20
|
+
isSearchable: false,
|
|
21
|
+
label: "Label",
|
|
22
|
+
name: "name",
|
|
23
|
+
menuIsOpen: true,
|
|
24
|
+
options: SelectValues_json_1.default
|
|
25
|
+
},
|
|
26
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
|
+
var TextLink_styled_1 = require("./TextLink.styled");
|
|
16
|
+
var TextLink = function (props) {
|
|
17
|
+
var onClick = props.onClick, children = props.children, href = props.href, target = props.target;
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)(TextLink_styled_1.TextLinkStyled, __assign({ href: href, target: target, onClick: onClick }, props, { children: children })));
|
|
19
|
+
};
|
|
20
|
+
TextLink.defaultProps = {};
|
|
21
|
+
exports.default = TextLink;
|
|
@@ -0,0 +1,13 @@
|
|
|
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.TextLinkStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.TextLinkStyled = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: var(--primary);\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n display: inline-block;\n text-decoration: none;\n cursor: pointer;\n &:hover , :focus , :active {\n color: var(--primary-hover);\n }\n"], ["\n color: var(--primary);\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n display: inline-block;\n text-decoration: none;\n cursor: pointer;\n &:hover , :focus , :active {\n color: var(--primary-hover);\n }\n"])));
|
|
13
|
+
var templateObject_1;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var TextLink_1 = require("./TextLink");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TextLink_1).default; } });
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Default = void 0;
|
|
7
|
+
var TextLink_1 = __importDefault(require("../TextLink"));
|
|
8
|
+
exports.default = {
|
|
9
|
+
title: 'Components/TextLink',
|
|
10
|
+
component: TextLink_1.default,
|
|
11
|
+
tags: ['autodocs'],
|
|
12
|
+
argTypes: {}
|
|
13
|
+
};
|
|
14
|
+
exports.Default = {
|
|
15
|
+
args: {
|
|
16
|
+
children: "Text Link"
|
|
17
|
+
},
|
|
18
|
+
};
|
|
@@ -18,6 +18,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var horizontal_1 = __importDefault(require("./layouts/horizontal"));
|
|
19
19
|
var vertical_1 = __importDefault(require("./layouts/vertical"));
|
|
20
20
|
var square_1 = __importDefault(require("./layouts/square"));
|
|
21
|
+
var squareSm_1 = __importDefault(require("./layouts/squareSm"));
|
|
22
|
+
var popover_1 = __importDefault(require("./layouts/popover"));
|
|
21
23
|
var ValueProposition = function (props) {
|
|
22
24
|
switch (props.layout) {
|
|
23
25
|
case 'vertical':
|
|
@@ -26,6 +28,10 @@ var ValueProposition = function (props) {
|
|
|
26
28
|
return (0, jsx_runtime_1.jsx)(horizontal_1.default, __assign({}, props));
|
|
27
29
|
case 'square':
|
|
28
30
|
return (0, jsx_runtime_1.jsx)(square_1.default, __assign({}, props));
|
|
31
|
+
case 'squareSm':
|
|
32
|
+
return (0, jsx_runtime_1.jsx)(squareSm_1.default, __assign({}, props));
|
|
33
|
+
case 'popover':
|
|
34
|
+
return (0, jsx_runtime_1.jsx)(popover_1.default, __assign({}, props));
|
|
29
35
|
default:
|
|
30
36
|
return (0, jsx_runtime_1.jsx)(horizontal_1.default, __assign({}, props));
|
|
31
37
|
}
|
|
@@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.HorizontalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
|
-
exports.HorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 2rem;\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: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n @media only screen and ", " {\n aspect-ratio: 1/1;\n padding: 1rem;\n
|
|
13
|
+
exports.HorizontalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 2rem;\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: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n @media only screen and ", " {\n aspect-ratio: 1/1;\n padding: 1rem;\n }\n"], ["\n padding: 2rem;\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: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n @media only screen and ", " {\n aspect-ratio: 1/1;\n padding: 1rem;\n }\n"])), devices_1.devices.md);
|
|
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
|
-
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n @media only screen and ", " {\n min-height: 38px;\n
|
|
15
|
+
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n @media only screen and ", " {\n min-height: 38px;\n }\n"], ["\n display: block;\n @media only screen and ", " {\n min-height: 38px;\n }\n"])), devices_1.devices.md);
|
|
16
16
|
exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n min-height: 76px;\n @media only screen and ", " {\n display: none;\n }\n"], ["\n margin: 1rem 0 0 0;\n min-height: 76px;\n @media only screen and ", " {\n display: none;\n }\n"])), devices_1.devices.md);
|
|
17
17
|
exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
18
18
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -0,0 +1,18 @@
|
|
|
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.ImageWrapper = exports.Description = exports.Title = exports.Close = exports.TextWrapper = exports.PopoverStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.PopoverStyled = 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: 456px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n aspect-ratio: 1/1;\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 ", "\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: 456px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n aspect-ratio: 1/1;\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 ", "\n"])), function (props) { return props.show && "\n opacity: 1;\n user-select: initial;\n pointer-events: initial;\n transform: scale(1);\n "; });
|
|
13
|
+
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1rem;\n"], ["\n margin-top: 1rem;\n"])));
|
|
14
|
+
exports.Close = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n right: 1.5rem;\n top: 1.5rem;\n cursor: pointer;\n"], ["\n position: absolute;\n right: 1.5rem;\n top: 1.5rem;\n cursor: pointer;\n"])));
|
|
15
|
+
exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
16
|
+
exports.Description = styled_components_1.default.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n"], ["\n margin: 1rem 0 0 0;\n"])));
|
|
17
|
+
exports.ImageWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
18
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var Popover_styled_1 = require("./Popover.styled");
|
|
19
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
20
|
+
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
21
|
+
var react_1 = require("react");
|
|
22
|
+
var Popover = function (props) {
|
|
23
|
+
var image = props.image, title = props.title, description = props.description, isMobile = props.isMobile, show = props.show, onClose = props.onClose;
|
|
24
|
+
var _a = (0, react_1.useState)(show), isShow = _a[0], setIsShow = _a[1];
|
|
25
|
+
(0, react_1.useEffect)(function () {
|
|
26
|
+
setIsShow(show);
|
|
27
|
+
}, [show]);
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)(Popover_styled_1.PopoverStyled, __assign({}, props, { show: isShow, children: [(0, jsx_runtime_1.jsx)(Popover_styled_1.Close, { onClick: function () {
|
|
29
|
+
setIsShow(false);
|
|
30
|
+
onClose();
|
|
31
|
+
}, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", width: "32px", height: "32px" }) }), (0, jsx_runtime_1.jsx)(Popover_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Popover_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Popover_styled_1.Title, { className: 'title-bold-16-19', dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(Popover_styled_1.Description, { className: (0, classnames_1.default)(isMobile ? 'body-regular-14-17' : 'title-regular-16-19'), children: description })] })] })));
|
|
32
|
+
};
|
|
33
|
+
exports.default = Popover;
|
|
@@ -13,6 +13,6 @@ exports.SquareStyled = styled_components_1.default.div(templateObject_1 || (temp
|
|
|
13
13
|
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
14
|
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
15
|
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
|
-
exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n text-align: center;\n"], ["\n display: block;\n text-align: center;\n"])));
|
|
16
|
+
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
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
18
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -0,0 +1,17 @@
|
|
|
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.ImageWrapper = exports.Title = exports.TextWrapper = exports.SquareSmStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
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 "; });
|
|
14
|
+
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1rem;\n"], ["\n margin-top: 1rem;\n"])));
|
|
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: block !important;\n }\n"], ["\n display: block;\n > *{\n display: block !important;\n }\n"])));
|
|
17
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
|
+
var SquareSm_styled_1 = require("./SquareSm.styled");
|
|
16
|
+
var react_1 = require("react");
|
|
17
|
+
var SquareSm = function (props) {
|
|
18
|
+
var image = props.image, title = props.title, show = props.show;
|
|
19
|
+
var _a = (0, react_1.useState)(show), isShow = _a[0], setIsShow = _a[1];
|
|
20
|
+
(0, react_1.useEffect)(function () {
|
|
21
|
+
setIsShow(show);
|
|
22
|
+
}, [show]);
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)(SquareSm_styled_1.SquareSmStyled, __assign({}, props, { show: isShow, 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
|
+
};
|
|
25
|
+
exports.default = SquareSm;
|
|
@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.Number = exports.ImageWrapper = exports.Description = exports.Title = exports.TextWrapper = exports.VerticalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
|
-
exports.VerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 4.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n max-width: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n min-height:
|
|
14
|
-
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top:
|
|
13
|
+
exports.VerticalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 4.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n max-width: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n min-height: 362px;\n box-sizing: border-box;\n @media only screen and ", " {\n grid-template-columns: 1fr;\n min-height: initial;\n padding: 3.5rem 3rem;\n }\n"], ["\n padding: 0 4.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n max-width: 672px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n min-height: 362px;\n box-sizing: border-box;\n @media only screen and ", " {\n grid-template-columns: 1fr;\n min-height: initial;\n padding: 3.5rem 3rem;\n }\n"])), devices_1.devices.md);
|
|
14
|
+
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 0;\n"], ["\n margin-top: 0;\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.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n"], ["\n margin: 1rem 0 0 0;\n"])));
|
|
16
|
+
exports.Description = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n color:var(--dark-opacity-75);\n"], ["\n margin: 1rem 0 0 0;\n color:var(--dark-opacity-75);\n"])));
|
|
17
17
|
exports.ImageWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-right: 2rem;\n @media only screen and ", " {\n display: none;\n }\n"], ["\n margin-right: 2rem;\n @media only screen and ", " {\n display: none;\n }\n"])), devices_1.devices.md);
|
|
18
18
|
exports.Number = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 30px 0 #eae9f0;\n text-shadow: 4px 4px 15px 0 rgba(151,99,246,.5);\n color: var(--primary-opacity-75);\n width: 124px;\n height: 124px;\n align-items: center;\n justify-content: center;\n display: flex;\n left: ", ";\n right: ", ";\n top: -3rem;\n @media only screen and ", " {\n width:80px;\n height: 80px;\n left: 0!important;\n right: auto!important;\n top: -2.5rem\n }\n"], ["\n position: absolute;\n border-radius: 8px;\n background: #fff;\n box-shadow: 0 6px 30px 0 #eae9f0;\n text-shadow: 4px 4px 15px 0 rgba(151,99,246,.5);\n color: var(--primary-opacity-75);\n width: 124px;\n height: 124px;\n align-items: center;\n justify-content: center;\n display: flex;\n left: ", ";\n right: ", ";\n top: -3rem;\n @media only screen and ", " {\n width:80px;\n height: 80px;\n left: 0!important;\n right: auto!important;\n top: -2.5rem\n }\n"])), function (props) { return props.numberAlignment === "left" ? '-2rem' : 'auto'; }, function (props) { return props.numberAlignment === "left" ? 'auto' : '-2rem'; }, devices_1.devices.md);
|
|
19
19
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -19,6 +19,6 @@ var Vertical_styled_1 = require("../vertical/Vertical.styled");
|
|
|
19
19
|
var classnames_1 = __importDefault(require("classnames"));
|
|
20
20
|
var Vertical = function (props) {
|
|
21
21
|
var image = props.image, title = props.title, description = props.description, numberAlignment = props.numberAlignment, hasNumber = props.hasNumber, number = props.number, isMobile = props.isMobile;
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(Vertical_styled_1.VerticalStyled, __assign({}, props, { children: [hasNumber && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Number, { numberAlignment: numberAlignment, className: (isMobile ? 'headline-black-48-58' : 'display-black-72-87'), children: number }), (0, jsx_runtime_1.jsx)(Vertical_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Vertical_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Vertical_styled_1.Title, { className: (0, classnames_1.default)((isMobile ? 'title-bold-16-19' : 'headline-bold-20-24')), children: title }), description && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Description, { className: (0, classnames_1.default)((isMobile ? 'body-regular-
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(Vertical_styled_1.VerticalStyled, __assign({}, props, { children: [hasNumber && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Number, { numberAlignment: numberAlignment, className: (isMobile ? 'headline-black-48-58' : 'display-black-72-87'), children: number }), (0, jsx_runtime_1.jsx)(Vertical_styled_1.ImageWrapper, { children: image }), (0, jsx_runtime_1.jsxs)(Vertical_styled_1.TextWrapper, { children: [(0, jsx_runtime_1.jsx)(Vertical_styled_1.Title, { className: (0, classnames_1.default)((isMobile ? 'title-bold-16-19' : 'headline-bold-20-24')), children: title }), description && (0, jsx_runtime_1.jsx)(Vertical_styled_1.Description, { className: (0, classnames_1.default)((isMobile ? 'body-regular-14-17' : 'title-regular-16-19')), children: description })] })] })));
|
|
23
23
|
};
|
|
24
24
|
exports.default = Vertical;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.alignments = exports.layouts = void 0;
|
|
4
|
-
exports.layouts = ['vertical', 'horizontal', 'square'];
|
|
4
|
+
exports.layouts = ['vertical', 'horizontal', 'square', 'squareSm', 'popover'];
|
|
5
5
|
exports.alignments = ['left', 'right'];
|
|
6
6
|
var ValuePropositionDefault = {
|
|
7
7
|
layout: exports.layouts[0],
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Square = exports.Vertical = exports.Horizontal = exports.Default = void 0;
|
|
17
|
+
exports.Popover = exports.SquareSmall = exports.Square = exports.Vertical = exports.Horizontal = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var ValueProposition_1 = __importDefault(require("../ValueProposition"));
|
|
20
20
|
var props_1 = require("../props");
|
|
@@ -27,6 +27,7 @@ exports.default = {
|
|
|
27
27
|
layout: { control: 'select', options: props_1.layouts },
|
|
28
28
|
dividerType: { control: 'select', options: props_2.types },
|
|
29
29
|
numberAlignment: { control: 'select', options: props_1.alignments },
|
|
30
|
+
show: { control: 'boolean' },
|
|
30
31
|
}
|
|
31
32
|
};
|
|
32
33
|
exports.Default = {
|
|
@@ -51,3 +52,9 @@ exports.Vertical = {
|
|
|
51
52
|
exports.Square = {
|
|
52
53
|
args: __assign(__assign({}, exports.Default.args), { image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/how-it-works-step-1.svg", width: 88, height: 88 }), layout: 'square', hasDivider: true, dividerType: "waveArrowUp" }),
|
|
53
54
|
};
|
|
55
|
+
exports.SquareSmall = {
|
|
56
|
+
args: __assign(__assign({}, exports.Default.args), { image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/how-it-works-step-1.svg", width: 56, height: 56 }), layout: 'squareSm', show: true }),
|
|
57
|
+
};
|
|
58
|
+
exports.Popover = {
|
|
59
|
+
args: __assign(__assign({}, exports.Default.args), { image: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/how-it-works-step-1.svg", width: 56, height: 56 }), layout: 'popover', show: true, onClose: function () { return console.log("test"); } }),
|
|
60
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Footer = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
|
|
6
|
+
exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = exports.Footer = exports.Accordion = exports.Divider = exports.SearchBox = exports.ValueProposition = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.ProductCard = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Spinner = exports.Button = void 0;
|
|
7
7
|
var Button_1 = __importDefault(require("./components/Button"));
|
|
8
8
|
exports.Button = Button_1.default;
|
|
9
9
|
var Spinner_1 = __importDefault(require("./components/Spinner"));
|
|
@@ -58,3 +58,7 @@ var Carousel_1 = __importDefault(require("./components/Carousel"));
|
|
|
58
58
|
exports.Carousel = Carousel_1.default;
|
|
59
59
|
var Badges_1 = __importDefault(require("./components/Badges"));
|
|
60
60
|
exports.Badges = Badges_1.default;
|
|
61
|
+
var SelectBox_1 = __importDefault(require("./components/SelectBox"));
|
|
62
|
+
exports.SelectBox = SelectBox_1.default;
|
|
63
|
+
var TextLink_1 = __importDefault(require("./components/TextLink"));
|
|
64
|
+
exports.TextLink = TextLink_1.default;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"value": "chocolate",
|
|
4
|
+
"label": "Chocolate",
|
|
5
|
+
"labelBottom": "Chocolate"
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
"value": "strawberry",
|
|
9
|
+
"label": "Strawberry",
|
|
10
|
+
"labelBottom": "Strawberry"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"value": "vanilla",
|
|
14
|
+
"label": "Vanilla",
|
|
15
|
+
"labelBottom": "Vanilla"
|
|
16
|
+
}
|
|
17
|
+
]
|