krl-alfred 1.76.5 → 1.76.7
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/Agreement/Agreement.styled.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.styled.js +1 -1
- package/dist/components/Button/Button.js +2 -2
- package/dist/components/Icon/stories/Icons.stories.js +1 -6
- package/dist/components/InsuranceBox/InsuranceBox.js +1 -1
- package/dist/components/Loader/Loader.styled.js +1 -1
- package/dist/components/TextLink/TextLink.js +3 -2
- package/dist/components/Tooltip/Tooltip.js +4 -3
- package/package.json +1 -1
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.AgreementStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n font:var(--body-regular-14-17);\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n
|
|
12
|
+
exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n font:var(--body-regular-14-17);\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n color: var(--red);\n p {\n margin: 0 !important;\n font:var(--caption-semi-bold-11-13);\n }\n\n svg {\n margin-right: 8px;\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n font:var(--body-regular-14-17);\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n color: var(--red);\n p {\n margin: 0 !important;\n font:var(--caption-semi-bold-11-13);\n }\n\n svg {\n margin-right: 8px;\n }\n }\n"])), function (props) { return props.hasError ? "15px" : "16px"; }, function (props) { return props.hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.hasError ? ' var(--red)' : ' var(--dark)'; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -67,7 +67,7 @@ var Breadcrumbs = function (props) {
|
|
|
67
67
|
};
|
|
68
68
|
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
|
|
69
69
|
var _a;
|
|
70
|
-
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "
|
|
70
|
+
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "3px", name: "ArrowLeftBig", width: "16px", height: "16px" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children })] })) : ((0, jsx_runtime_1.jsxs)(ButtonLinkComponent, __assign({ item: breadCrumbItem }, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { children: breadCrumbItem.name })] })))] }, key));
|
|
71
71
|
}) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
|
|
72
72
|
};
|
|
73
73
|
exports.default = Breadcrumbs;
|
|
@@ -15,7 +15,7 @@ exports.BreadcrumbsList = styled_components_1.default.ul(templateObject_2 || (te
|
|
|
15
15
|
exports.BreadcrumbsListItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n margin: 0 0;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n &:not(:nth-child(2)) {\n display: none;\n }\n }\n > a {\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: inherit;\n }\n &:hover{\n ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n button {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n position: relative;\n margin: 0 0;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n &:not(:nth-child(2)) {\n display: none;\n }\n }\n > a {\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: inherit;\n }\n &:hover{\n ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n button {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n"])), devices_1.devices.xl);
|
|
16
16
|
exports.BreadcrumbsListItemInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n margin: 0;\n display: block;\n color: var(--dark-opacity-50);\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font:var(--caption-bold-12-15);\n"], ["\n position: relative;\n margin: 0;\n display: block;\n color: var(--dark-opacity-50);\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font:var(--caption-bold-12-15);\n"])));
|
|
17
17
|
exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-left: 16px;\n margin-right: 16px;\n color:var(--dark-opacity-50);\n\n @media only screen and ", " {\n display: none;\n }\n svg {\n display: block;\n }\n"], ["\n display: block;\n margin-left: 16px;\n margin-right: 16px;\n color:var(--dark-opacity-50);\n\n @media only screen and ", " {\n display: none;\n }\n svg {\n display: block;\n }\n"])), devices_1.devices.xl);
|
|
18
|
-
exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 0;\n margin-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n
|
|
18
|
+
exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 0;\n margin-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n div {\n display: block;\n }\n"], ["\n margin-left: 0;\n margin-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n div {\n display: block;\n }\n"])), devices_1.devices.xl);
|
|
19
19
|
exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n\n"])));
|
|
20
20
|
exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 4px;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n font:var(--caption-bold-12-15);\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 4px;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n font:var(--caption-bold-12-15);\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n transition: all 0.2s ease-in-out;\n }\n"])));
|
|
21
21
|
exports.DropdownList = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 55px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"], ["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 55px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"])), function (props) { return props.gridTemplateColumns || "3"; });
|
|
@@ -21,12 +21,12 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
21
21
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
22
22
|
var prop_types_1 = __importDefault(require("prop-types"));
|
|
23
23
|
var Children = function (props) {
|
|
24
|
-
var children = props.children, icon = props.icon,
|
|
24
|
+
var children = props.children, icon = props.icon, iconStrokeWidth = props.iconStrokeWidth;
|
|
25
25
|
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "children" }, { children: children })), icon && ((0, jsx_runtime_1.jsx)(Button_styled_1.IconStyled, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, width: "16px", height: "16px" }) })))] });
|
|
26
26
|
};
|
|
27
27
|
var Button = function (props) {
|
|
28
28
|
var type = props.type, isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children, iconStrokeWidth = props.iconStrokeWidth;
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' })) : (0, jsx_runtime_1.jsx)(Children, __assign({ iconStrokeWidth: iconStrokeWidth, icon: icon
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, __assign({ className: (0, classnames_1.default)({ "loading": isLoading }), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, icon: icon, type: type }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' })) : (0, jsx_runtime_1.jsx)(Children, __assign({ iconStrokeWidth: iconStrokeWidth, icon: icon }, { children: children })) })));
|
|
30
30
|
};
|
|
31
31
|
Button.propTypes = {
|
|
32
32
|
iconStrokeWidth: prop_types_1.default.string,
|
|
@@ -21,17 +21,12 @@ var Icon_styled_1 = require("../Icon.styled");
|
|
|
21
21
|
var Icon_1 = __importDefault(require("../Icon"));
|
|
22
22
|
var IconStoryList = function (props) {
|
|
23
23
|
return ((0, jsx_runtime_1.jsx)(Icon_styled_1.IconStyled, { children: Object.entries(index_1.iconList).map(function (value, key) {
|
|
24
|
-
return (
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'item' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "svg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, props, { name: value[0] })) })), (0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: value[0] }))] })));
|
|
25
25
|
}) }));
|
|
26
26
|
};
|
|
27
27
|
exports.default = {
|
|
28
28
|
title: 'Design System/Icons',
|
|
29
29
|
component: IconStoryList,
|
|
30
|
-
//parameters: {
|
|
31
|
-
// controls: {
|
|
32
|
-
// exclude: /.*/g,
|
|
33
|
-
// },
|
|
34
|
-
//},
|
|
35
30
|
argTypes: {
|
|
36
31
|
color: { control: 'color' },
|
|
37
32
|
},
|
|
@@ -21,7 +21,7 @@ var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
|
21
21
|
var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
22
22
|
var InsuranceBox = function (props) {
|
|
23
23
|
var popupWidth = props.popupWidth, disabled = props.disabled, hasBorder = props.hasBorder, hasBgColor = props.hasBgColor, priceText = props.priceText, onChange = props.onChange, width = props.width, checked = props.checked, height = props.height, tooltipTitle = props.tooltipTitle, tooltipDescription = props.tooltipDescription, tooltipPosition = props.tooltipPosition, isTitleWrap = props.isTitleWrap, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick;
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, __assign({ hasBorder: hasBorder, hasBgColor: hasBgColor, width: width, height: height }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.CheckboxWrapper, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "large" }) }), (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, { color: "var(--primary)", name: "Tamamlarsin" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.Description, { children: ["Hasar g\u00FCvenceni %100\u2019e ", isTitleWrap && (0, jsx_runtime_1.jsx)("br", {}), "tamamlars\u0131n! ", (0, jsx_runtime_1.jsx)("b", { children: priceText })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "medium", 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: props.insuranceText })) }))] })] })] })));
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, __assign({ hasBorder: hasBorder, hasBgColor: hasBgColor, width: width, height: height }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.CheckboxWrapper, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "large" }) }), (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, { color: "var(--primary)", name: "Tamamlarsin" }) }), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, { children: [(0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.Description, { children: ["Hasar g\u00FCvenceni %100\u2019e ", isTitleWrap && (0, jsx_runtime_1.jsx)("br", {}), "tamamlars\u0131n! ", (0, jsx_runtime_1.jsx)("b", { children: priceText })] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "medium", 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: props.insuranceText })) }))] })] })] })));
|
|
25
25
|
};
|
|
26
26
|
InsuranceBox.defaultProps = {
|
|
27
27
|
height: "90px",
|
|
@@ -31,6 +31,6 @@ exports.WaveStyled = exports.SpinnerStyled = void 0;
|
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n transform:rotate(0deg);\n }\n to {\n transform:rotate(360deg);\n }\n"], ["\n from {\n transform:rotate(0deg);\n }\n to {\n transform:rotate(360deg);\n }\n"])));
|
|
33
33
|
var wave = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n transform: scale(0.5);\n }\n 50% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.5);\n }\n"], ["\n 0% {\n transform: scale(0.5);\n }\n 50% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.5);\n }\n"])));
|
|
34
|
-
exports.SpinnerStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: block;\n div{\n display: block;\n }\n svg {\n animation-name: ", ";\n animation-duration:
|
|
34
|
+
exports.SpinnerStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: block;\n div{\n display: block;\n }\n svg {\n animation-name: ", ";\n animation-duration: 800ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear; \n }\n"], ["\n width: ", ";\n height: ", ";\n display: block;\n div{\n display: block;\n }\n svg {\n animation-name: ", ";\n animation-duration: 800ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear; \n }\n"])), function (props) { return props.width; }, function (props) { return props.height; }, spin);
|
|
35
35
|
exports.WaveStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n span {\n border-radius: 50%;\n display: inline-block;\n margin: 0 1px;\n vertical-align: middle;\n width: 7px;\n height: 7px;\n &:first-child {\n background-color: var(--primary-opacity-50);\n animation: ", " 0.9s 0.2s linear infinite;\n }\n &:nth-child(2) {\n background-color: var(--primary-opacity-75);\n animation: ", " 0.9s 0.4s linear infinite;\n }\n &:nth-child(3) {\n background-color: var(--primary);\n animation: ", " 0.9s 0.6s linear infinite;\n }\n }\n"], ["\n span {\n border-radius: 50%;\n display: inline-block;\n margin: 0 1px;\n vertical-align: middle;\n width: 7px;\n height: 7px;\n &:first-child {\n background-color: var(--primary-opacity-50);\n animation: ", " 0.9s 0.2s linear infinite;\n }\n &:nth-child(2) {\n background-color: var(--primary-opacity-75);\n animation: ", " 0.9s 0.4s linear infinite;\n }\n &:nth-child(3) {\n background-color: var(--primary);\n animation: ", " 0.9s 0.6s linear infinite;\n }\n }\n"])), wave, wave, wave);
|
|
36
36
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -18,8 +18,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
18
18
|
var TextLink_styled_1 = require("./TextLink.styled");
|
|
19
19
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
20
20
|
var TextLink = function (props) {
|
|
21
|
-
var onClick = props.onClick, children = props.children, href = props.href, target = props.target, icon = props.icon, iconWidth = props.iconWidth, iconHeight = props.iconHeight, size = props.size, iconDirection = props.iconDirection;
|
|
22
|
-
return ((0, jsx_runtime_1.jsx)(TextLink_styled_1.TextLinkStyled, __assign({ size: size, href: href, target: target, onClick: onClick }, props, { children: (0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, __assign({ iconDirection: iconDirection }, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, __assign({ iconDirection: iconDirection }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, width: iconWidth, height: iconHeight }) }))), children] })) })));
|
|
21
|
+
var onClick = props.onClick, children = props.children, href = props.href, target = props.target, icon = props.icon, iconWidth = props.iconWidth, iconHeight = props.iconHeight, size = props.size, iconDirection = props.iconDirection, iconStrokeWidth = props.iconStrokeWidth;
|
|
22
|
+
return ((0, jsx_runtime_1.jsx)(TextLink_styled_1.TextLinkStyled, __assign({ size: size, href: href, target: target, onClick: onClick }, props, { children: (0, jsx_runtime_1.jsxs)(TextLink_styled_1.Inner, __assign({ iconDirection: iconDirection }, { children: [icon && ((0, jsx_runtime_1.jsx)(TextLink_styled_1.IconStyled, __assign({ iconDirection: iconDirection }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: icon, width: iconWidth, height: iconHeight }) }))), children] })) })));
|
|
23
23
|
};
|
|
24
24
|
TextLink.defaultProps = {
|
|
25
25
|
iconWidth: "24px",
|
|
@@ -27,5 +27,6 @@ TextLink.defaultProps = {
|
|
|
27
27
|
variant: "primary",
|
|
28
28
|
size: "small",
|
|
29
29
|
iconDirection: "left",
|
|
30
|
+
iconStrokeWidth: "2px",
|
|
30
31
|
};
|
|
31
32
|
exports.default = TextLink;
|
|
@@ -20,19 +20,20 @@ var Tooltip_styled_1 = require("./Tooltip.styled");
|
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
21
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
22
22
|
var Tooltip = function (props) {
|
|
23
|
-
var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth, position = props.position, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, popupSize = props.popupSize, popupLeft = props.popupLeft, popupRight = props.popupRight, popupTop = props.popupTop, popupBottom = props.popupBottom;
|
|
23
|
+
var children = props.children, title = props.title, hasClickAction = props.hasClickAction, isOpen = props.isOpen, iconWidth = props.iconWidth, iconHeight = props.iconHeight, popupWidth = props.popupWidth, position = props.position, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, popupSize = props.popupSize, popupLeft = props.popupLeft, popupRight = props.popupRight, popupTop = props.popupTop, popupBottom = props.popupBottom, iconStrokeWidth = props.iconStrokeWidth;
|
|
24
24
|
var _a = (0, react_1.useState)(isOpen), isOpenTooltip = _a[0], setIsOpenTooltip = _a[1];
|
|
25
25
|
(0, react_1.useEffect)(function () {
|
|
26
26
|
setIsOpenTooltip(isOpen);
|
|
27
27
|
}, [isOpen]);
|
|
28
28
|
var tooltipRef = (0, react_1.useRef)();
|
|
29
29
|
(0, useOnClickOutside_1.default)(tooltipRef, function () { return setIsOpenTooltip(false); }, hasCloseOnOutsideClick);
|
|
30
|
-
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, __assign({ ref: tooltipRef, hasClickAction: hasClickAction }, { children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, __assign({ isOpen: isOpenTooltip, position: position, hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth:
|
|
30
|
+
return ((0, jsx_runtime_1.jsxs)(Tooltip_styled_1.TooltipStyled, __assign({ ref: tooltipRef, hasClickAction: hasClickAction }, { children: [(0, jsx_runtime_1.jsx)(Tooltip_styled_1.Selector, __assign({ isOpen: isOpenTooltip, position: position, hasClickAction: hasClickAction, onClick: function () { return setIsOpenTooltip(!isOpenTooltip); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: iconStrokeWidth, name: "InfoSquare", width: iconWidth, height: iconHeight }) })), (0, jsx_runtime_1.jsxs)(Tooltip_styled_1.Popup, __assign({ popupSize: popupSize, iconWidth: iconWidth, position: position, popupWidth: popupWidth, isOpen: isOpenTooltip, hasClickAction: hasClickAction, popupLeft: popupLeft, popupRight: popupRight, popupTop: popupTop, popupBottom: popupBottom }, { children: [title && (0, jsx_runtime_1.jsx)(Tooltip_styled_1.Title, { children: title }), children] }))] })));
|
|
31
31
|
};
|
|
32
32
|
Tooltip.defaultProps = {
|
|
33
33
|
iconWidth: "16px",
|
|
34
34
|
iconHeight: "16px",
|
|
35
35
|
position: "bottomCenter",
|
|
36
|
-
hasCloseOnOutsideClick: false
|
|
36
|
+
hasCloseOnOutsideClick: false,
|
|
37
|
+
iconStrokeWidth: "2.5px"
|
|
37
38
|
};
|
|
38
39
|
exports.default = Tooltip;
|