krl-alfred 1.69.0 → 1.69.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Breadcrumbs/Breadcrumbs.js +7 -9
- package/dist/components/{Assurance/Assurance.js → InsuranceBox/InsuranceBox.js} +6 -6
- package/dist/components/{Assurance/Assurance.styled.js → InsuranceBox/InsuranceBox.styled.js} +2 -2
- package/dist/components/{Assurance → InsuranceBox}/index.js +2 -2
- package/dist/components/{Assurance/stories/Assurance.stories.js → InsuranceBox/stories/InsuranceBox.stories.js} +3 -4
- package/dist/components/SearchBox/SearchBox.js +14 -1
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/Tooltip/Tooltip.js +1 -1
- package/dist/components/Tooltip/Tooltip.styled.js +10 -10
- package/dist/index.js +3 -3
- package/package.json +1 -1
- /package/dist/components/{Assurance → InsuranceBox}/props.js +0 -0
|
@@ -24,16 +24,14 @@ var Breadcrumbs = function (props) {
|
|
|
24
24
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", { href: item.slug, children: children }));
|
|
25
25
|
};
|
|
26
26
|
(0, react_1.useEffect)(function () {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
elem.scrollLeft = activeItem.offsetLeft - 15;
|
|
34
|
-
}
|
|
27
|
+
var _a, _b;
|
|
28
|
+
if (window && typeof window !== "undefined") {
|
|
29
|
+
var elem = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.querySelector(".breadcrumbSm");
|
|
30
|
+
var activeItem = (_b = window === null || window === void 0 ? void 0 : window.document) === null || _b === void 0 ? void 0 : _b.querySelector(".breadcrumbSm li.active");
|
|
31
|
+
if (activeItem && elem) {
|
|
32
|
+
elem.scrollLeft = activeItem.offsetLeft - 15;
|
|
35
33
|
}
|
|
36
|
-
}
|
|
34
|
+
}
|
|
37
35
|
}, [data]);
|
|
38
36
|
var SubMenu = function (_a) {
|
|
39
37
|
var data = _a.data, item = _a.item;
|
|
@@ -4,18 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
-
var
|
|
7
|
+
var InsuranceBox_styled_1 = require("./InsuranceBox.styled");
|
|
8
8
|
var Checkbox_1 = __importDefault(require("../Checkbox"));
|
|
9
9
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
10
10
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
11
|
-
var
|
|
11
|
+
var InsuranceBox = function (props) {
|
|
12
12
|
var popupWidth = props.popupWidth, disabled = props.disabled, hasBorder = props.hasBorder, hasBgColor = props.hasBgColor, priceText = props.priceText, onChange = props.onChange, width = props.width, isMobile = props.isMobile, checked = props.checked, height = props.height, tooltipTitle = props.tooltipTitle, tooltipDescription = props.tooltipDescription, tooltipPosition = props.tooltipPosition, isTitleWrap = props.isTitleWrap, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick;
|
|
13
|
-
var
|
|
13
|
+
var InsuranceText = function () {
|
|
14
14
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { className: "body-extra-bold-13-16", children: "Tamamlars\u0131n %100\u2019e Tamamlay\u0131c\u0131 Ek G\u00FCvence Paketi " }), (0, jsx_runtime_1.jsx)("p", { className: "caption-medium-11-13", children: "Tamamlars\u0131n, kira s\u00FCreniz boyunca cihaz\u0131n\u0131za ek g\u00FCvence sa\u011Flar. Ek g\u00FCvence kapsam\u0131nda cihaz\u0131n\u0131z de\u011Fi\u015Ftirilir veya \u00FCcretsiz onar\u0131l\u0131r. Ek g\u00FCvenceli kiralamalarda kira s\u00FCrenizi uzat\u0131rken, yeni kira s\u00FCresine ait ek g\u00FCvenceniz otomatik olarak sepete eklenir. Ek g\u00FCvencesiz yap\u0131lan kiralamalarda, s\u00FCre uzat\u0131m\u0131 s\u0131ras\u0131nda sonradan ek g\u00FCvence eklenemez." }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "D\u00FC\u015Fme, \u00E7arpma gibi kazalarda olu\u015Fan hasarlar" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "S\u0131v\u0131 temas\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Ekran vb par\u00E7a k\u0131r\u0131lmalar\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "\u00C7izilmeler" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Kutu hasarlar\u0131" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "K\u0131sa devre, voltaj nedeniyle olu\u015Fabilecek sorunlar" }), (0, jsx_runtime_1.jsx)("li", { className: "caption-medium-11-13", children: "Hatal\u0131 aksesuar kullan\u0131m\u0131 sorunlar\u0131" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "caption-medium-11-13", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Uyar\u0131:" }), " Kay\u0131p, \u00E7al\u0131nma, kas\u0131tl\u0131 zarar verme, onar\u0131lamaz duruma getirme, cihaz\u0131n kutusunu kaybetme gibi durumlarda ve 5.000 TL\u2019yi a\u015Fan hasarlarda ek g\u00FCvence paketi ge\u00E7erli de\u011Fildir."] })] }));
|
|
15
15
|
};
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, { hasBorder: hasBorder, hasBgColor: hasBgColor, width: width, height: height, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "medium" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Tamamlarsin", width: isMobile ? "116px" : "64.51px", height: isMobile ? "13.25px" : "7.37px" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.Description, { className: "caption-semi-bold-12-15", children: ["Hasar g\u00FCvenceni %100\u2019e ", isTitleWrap && (0, jsx_runtime_1.jsx)("br", {}), "tamamlars\u0131n! ", (0, jsx_runtime_1.jsx)("b", { className: "body-extra-bold-13-16", children: priceText })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: true, popupWidth: popupWidth, iconWidth: "24px", iconHeight: "24px", children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: (0, jsx_runtime_1.jsx)(InsuranceText, {}) })) })] })] })] }));
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
InsuranceBox.defaultProps = {
|
|
19
19
|
height: "90px",
|
|
20
20
|
checked: false,
|
|
21
21
|
isTitleWrap: true,
|
|
@@ -25,4 +25,4 @@ Assurance.defaultProps = {
|
|
|
25
25
|
tooltipPosition: "topCenter",
|
|
26
26
|
popupWidth: "351px"
|
|
27
27
|
};
|
|
28
|
-
exports.default =
|
|
28
|
+
exports.default = InsuranceBox;
|
package/dist/components/{Assurance/Assurance.styled.js → InsuranceBox/InsuranceBox.styled.js}
RENAMED
|
@@ -7,10 +7,10 @@ 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.TooltipDescription = exports.Description = exports.Logo = exports.DescriptionWrapper = exports.InnerWrapper = exports.
|
|
10
|
+
exports.TooltipDescription = exports.Description = exports.Logo = exports.DescriptionWrapper = exports.InnerWrapper = exports.InsuranceBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.
|
|
13
|
+
exports.InsuranceBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 1.5rem;\n height: ", ";\n background: ", ";\n border: ", ";\n border-radius: 8px;\n width: ", ";\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 1rem;\n height: auto;\n align-items: flex-start;\n }\n"], ["\n padding: 0 1.5rem;\n height: ", ";\n background: ", ";\n border: ", ";\n border-radius: 8px;\n width: ", ";\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 1rem;\n height: auto;\n align-items: flex-start;\n }\n"])), function (props) { return props.height; }, function (props) { return props.hasBgColor ? 'var(--primary-opacity-5)' : '#fff'; }, function (props) { return props.hasBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.width ? props.width : "466px"; }, devices_1.devices.md);
|
|
14
14
|
exports.InnerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n @media only screen and ", " {\n grid-template-columns: 1fr;\n }\n"], ["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n @media only screen and ", " {\n grid-template-columns: 1fr;\n }\n"])), devices_1.devices.md);
|
|
15
15
|
exports.DescriptionWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n margin-top: 18px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n margin-top: 18px;\n }\n"])), devices_1.devices.md);
|
|
16
16
|
exports.Logo = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: white;\n width: 80px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n svg{\n display: block;\n }\n @media only screen and ", " {\n display: block;\n background-color: transparent;\n width: auto;\n height: auto;\n border: 0;\n border-radius: 0;\n margin-top: 6px;\n }\n"], ["\n background-color: white;\n width: 80px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n svg{\n display: block;\n }\n @media only screen and ", " {\n display: block;\n background-color: transparent;\n width: auto;\n height: auto;\n border: 0;\n border-radius: 0;\n margin-top: 6px;\n }\n"])), devices_1.devices.md);
|
|
@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
8
|
-
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(
|
|
7
|
+
var InsuranceBox_1 = require("./InsuranceBox");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(InsuranceBox_1).default; } });
|
|
@@ -16,12 +16,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
-
var
|
|
19
|
+
var InsuranceBox_1 = __importDefault(require("../InsuranceBox"));
|
|
20
20
|
var props_1 = require("../../Tooltip/props");
|
|
21
21
|
exports.default = {
|
|
22
|
-
title: 'Components/
|
|
23
|
-
|
|
24
|
-
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "15rem 0 0 0", display: "block" }, children: (0, jsx_runtime_1.jsx)(Assurance_1.default, __assign({}, props)) }); },
|
|
22
|
+
title: 'Components/InsuranceBox',
|
|
23
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", { style: { margin: "15rem 0 0 0", display: "block" }, children: (0, jsx_runtime_1.jsx)(InsuranceBox_1.default, __assign({}, props)) }); },
|
|
25
24
|
tags: ['autodocs'],
|
|
26
25
|
argTypes: {
|
|
27
26
|
checked: { control: 'boolean' },
|
|
@@ -4,15 +4,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
var react_1 = require("react");
|
|
7
8
|
var SearchBox_styled_1 = require("./SearchBox.styled");
|
|
8
9
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
9
10
|
var Spinner_1 = __importDefault(require("../Spinner"));
|
|
10
11
|
var SearchBox = function (props) {
|
|
12
|
+
var _a;
|
|
11
13
|
var onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, children = props.children, isLoading = props.isLoading, showResultList = props.showResultList, placeholder = props.placeholder;
|
|
14
|
+
var _b = (0, react_1.useState)("48px"), shadowHeight = _b[0], setShadowHeight = _b[1];
|
|
12
15
|
var LoadingContent = function () {
|
|
13
16
|
return (0, jsx_runtime_1.jsx)(SearchBox_styled_1.LoadingStyled, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, { variant: "primary", width: "32px", height: "32px" }) });
|
|
14
17
|
};
|
|
15
|
-
|
|
18
|
+
var resultRef = (0, react_1.useRef)();
|
|
19
|
+
(0, react_1.useEffect)(function () {
|
|
20
|
+
var _a, _b;
|
|
21
|
+
if (((_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && showResultList) {
|
|
22
|
+
setShadowHeight((50 + ((_b = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) + "px");
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
setShadowHeight("48px");
|
|
26
|
+
}
|
|
27
|
+
}, [(_a = resultRef === null || resultRef === void 0 ? void 0 : resultRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, showResultList, isLoading]);
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)(SearchBox_styled_1.SearchBoxStyled, { shadowHeight: shadowHeight, children: [(0, jsx_runtime_1.jsx)("div", { className: "shadow" }), (0, jsx_runtime_1.jsxs)("div", { className: "inputWrapper", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: placeholder, onKeyUp: onKeyUp, onBlur: onBlur, onFocus: onFocus }), (0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Search", width: "16px", height: "16px" }) })] }), showResultList && ((0, jsx_runtime_1.jsx)("div", { ref: resultRef, className: "resultList", children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingContent, {}) : children }))] }));
|
|
16
29
|
};
|
|
17
30
|
SearchBox.defaultProps = {
|
|
18
31
|
showResultList: false,
|
|
@@ -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 .
|
|
13
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n .shadow{\n height: ", "; \n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\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 .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: 408px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\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 //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n }\n }\n"], ["\n position: relative;\n .shadow{\n height: ", "; \n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 8px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 8px;\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 .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: 408px;\n box-sizing: border-box;\n overflow: auto;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\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 //box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 326px;\n }\n }\n"])), function (props) { return props.shadowHeight; }, devices_1.devices.xl, devices_1.devices.xl);
|
|
14
14
|
exports.LoadingStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2;
|
|
@@ -16,7 +16,7 @@ var Tooltip = function (props) {
|
|
|
16
16
|
}, [isOpen]);
|
|
17
17
|
var tooltipRef = (0, react_1.useRef)();
|
|
18
18
|
(0, useOnClickOutside_1.default)(tooltipRef, function () { return setIsOpenTooltip(false); }, hasCloseOnOutsideClick);
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { ref: tooltipRef, hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
|
|
19
|
+
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, { ref: tooltipRef, hasClickAction: hasClickAction, children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, { hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); }, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "InfoSquare", width: iconWidth, height: iconHeight }) }), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, { iconWidth: iconWidth, position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, className: "caption-medium-11-13", children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { className: "body-extra-bold-13-16", children: title }), children] })] }));
|
|
20
20
|
};
|
|
21
21
|
Tooltip.defaultProps = {
|
|
22
22
|
iconWidth: "16px",
|
|
@@ -13,37 +13,37 @@ var devices_1 = require("../../constants/devices");
|
|
|
13
13
|
exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.hasClickAction && "\n &:hover {\n > div {\n opacity: 1;\n }\n }\n "; });
|
|
14
14
|
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"], ["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
|
|
15
15
|
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin-bottom: 0.5rem;\n"], ["\n display: block;\n margin-bottom: 0.5rem;\n"])));
|
|
16
|
-
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right:
|
|
16
|
+
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right: ", " !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n"], ["\n\n position: absolute;\n width: ", ";\n padding: 1rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right: ", " !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
|
|
17
17
|
switch (props.position) {
|
|
18
18
|
case 'bottomRight':
|
|
19
|
-
return "\n right: -
|
|
19
|
+
return "\n right: -22px;\n top: calc(100% + 10px);\n ";
|
|
20
20
|
case 'bottomCenter':
|
|
21
21
|
return "\n left: 50%;\n top: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
22
22
|
case 'bottomLeft':
|
|
23
|
-
return "\n left:
|
|
23
|
+
return "\n left: -22px;\n top: calc(100% + 10px);\n ";
|
|
24
24
|
case 'topRight':
|
|
25
|
-
return "\n right: -
|
|
25
|
+
return "\n right: -22px;\n bottom: calc(100% + 10px);\n ";
|
|
26
26
|
case 'topCenter':
|
|
27
27
|
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
28
28
|
case 'topLeft':
|
|
29
|
-
return "\n left:
|
|
29
|
+
return "\n left: -22px;\n bottom: calc(100% + 10px);\n ";
|
|
30
30
|
default:
|
|
31
31
|
return "\n left: 50%;\n bottom: calc(100% + 10px);\n transform: translateX(-50%);\n ";
|
|
32
32
|
}
|
|
33
|
-
}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) {
|
|
33
|
+
}, function (props) { return (props.hasClickAction && props.isOpen) ? '1' : "0"; }, devices_1.devices.xl, function (props) { return props.iconWidth === "16px" ? "27px" : "30px"; }, function (props) {
|
|
34
34
|
switch (props.position) {
|
|
35
35
|
case 'bottomRight':
|
|
36
|
-
return "\n bottom: calc(100% - 7px);\n right:
|
|
36
|
+
return "\n bottom: calc(100% - 7px);\n right: ".concat(props.iconWidth === "16px" ? "24px" : "28px", ";\n transform: rotate(45deg);\n ");
|
|
37
37
|
case 'bottomCenter':
|
|
38
38
|
return "\n bottom: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
39
39
|
case 'bottomLeft':
|
|
40
|
-
return "\n bottom: calc(100% - 7px);\n left:
|
|
40
|
+
return "\n bottom: calc(100% - 7px);\n left: ".concat(props.iconWidth === "16px" ? "24px" : "28px", ";\n transform: rotate(45deg);\n ");
|
|
41
41
|
case 'topRight':
|
|
42
|
-
return "\n top: calc(100% - 7px);\n right:
|
|
42
|
+
return "\n top: calc(100% - 7px);\n right: ".concat(props.iconWidth === "16px" ? "24px" : "28px", ";\n transform: rotate(45deg);\n ");
|
|
43
43
|
case 'topCenter':
|
|
44
44
|
return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
45
45
|
case 'topLeft':
|
|
46
|
-
return "\n top: calc(100% - 7px);\n left:
|
|
46
|
+
return "\n top: calc(100% - 7px);\n left: ".concat(props.iconWidth === "16px" ? "24px" : "28px", ";\n transform: rotate(45deg);\n ");
|
|
47
47
|
default:
|
|
48
48
|
return "\n top: calc(100% - 7px);\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
|
|
49
49
|
}
|
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.InfoBox = exports.ContentBox = exports.ListGroup = exports.
|
|
6
|
+
exports.InfoBox = exports.ContentBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.Carousel = exports.SuggestBox = exports.Toast = exports.Banner = 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"));
|
|
@@ -62,8 +62,8 @@ var TextLink_1 = __importDefault(require("./components/TextLink"));
|
|
|
62
62
|
exports.TextLink = TextLink_1.default;
|
|
63
63
|
var Tooltip_1 = __importDefault(require("./components/Tooltip"));
|
|
64
64
|
exports.Tooltip = Tooltip_1.default;
|
|
65
|
-
var
|
|
66
|
-
exports.
|
|
65
|
+
var InsuranceBox_1 = __importDefault(require("./components/InsuranceBox"));
|
|
66
|
+
exports.InsuranceBox = InsuranceBox_1.default;
|
|
67
67
|
var ListGroup_1 = __importDefault(require("./components/ListGroup"));
|
|
68
68
|
exports.ListGroup = ListGroup_1.default;
|
|
69
69
|
var ContentBox_1 = __importDefault(require("./components/ContentBox"));
|
package/package.json
CHANGED
|
File without changes
|