krl-alfred 1.77.24 → 1.77.26
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/BannerCard/BannerCard.js +1 -1
- package/dist/components/BannerCard/BannerCard.styled.js +1 -1
- package/dist/components/Modal/Modal.js +3 -3
- package/dist/components/Modal/stories/Modal.stories.js +6 -2
- package/dist/components/PaymentCart/PaymentCart.js +1 -1
- package/dist/components/PaymentCart/PaymentCart.styled.js +1 -1
- package/dist/components/PaymentCart/stories/PaymentCart.stories.js +1 -2
- package/dist/hooks/useOnClickOutside.js +6 -1
- package/package.json +3 -2
|
@@ -19,7 +19,7 @@ var BannerCard_styled_1 = require("./BannerCard.styled");
|
|
|
19
19
|
var Button_1 = __importDefault(require("../Button"));
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
21
|
var BannerCard = function (props) {
|
|
22
|
-
return ((0, jsx_runtime_1.jsxs)(BannerCard_styled_1.BannerCardStyled, __assign({ "$hasDarkTheme": props.hasDarkTheme, "$hasShadow": props.hasShadow }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(props === null || props === void 0 ? void 0 : props.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.title } }), (props === null || props === void 0 ? void 0 : props.description) && (0, jsx_runtime_1.jsx)("p", { className: "description", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.description } }), (props === null || props === void 0 ? void 0 : props.buttonText) &&
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)(BannerCard_styled_1.BannerCardStyled, __assign({ "$hasDarkTheme": props.hasDarkTheme, "$hasShadow": props.hasShadow }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "mobileLink", onClick: props === null || props === void 0 ? void 0 : props.onClick }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(props === null || props === void 0 ? void 0 : props.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.title } }), (props === null || props === void 0 ? void 0 : props.description) && (0, jsx_runtime_1.jsx)("p", { className: "description", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.description } }), (props === null || props === void 0 ? void 0 : props.buttonText) &&
|
|
23
23
|
(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ size: "big", variant: "primary", onClick: props === null || props === void 0 ? void 0 : props.onClick }, { children: props === null || props === void 0 ? void 0 : props.buttonText }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: props === null || props === void 0 ? void 0 : props.img })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "textMobile", onClick: props === null || props === void 0 ? void 0 : props.onClick }, { children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: props === null || props === void 0 ? void 0 : props.shortDesc } }), props.hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] }))] })));
|
|
24
24
|
};
|
|
25
25
|
BannerCard.defaultProps = {};
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerCardStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n *{\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n }\n }\n }\n"], ["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n *{\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n }\n }\n }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
|
|
13
|
+
exports.BannerCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n position: relative;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n .mobileLink{\n position: absolute;\n inset: 0;\n z-index: 5;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n *{\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n }\n }\n }\n"], ["\n\n ", "\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n background-color: ", ";\n border-radius: 0.5rem;\n position: relative;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n max-width: 478px;\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n color: ", ";\n font:var(--headline-extra-bold-32-39);\n }\n\n .description {\n margin: 0;\n display: block;\n color: ", ";\n font:var(--title-regular-16-19);\n }\n button{\n margin-top: 1.5rem;\n }\n }\n .mobileLink{\n position: absolute;\n inset: 0;\n z-index: 5;\n @media only screen and ", " {\n display: none;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n font:var(--title-medium-16-19);\n svg {\n margin-left: 1rem;\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n *{\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: 0.5rem;\n * {\n height: 174px !important;\n max-height: 174px !important;\n }\n }\n }\n"])), function (props) { return props.$hasShadow ? "box-shadow: 0 6px 30px 0 var(--box-shadow-color);" : null; }, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lg, devices_1.devices.lg, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, function (props) { return !props.$hasDarkTheme ? "var(--dark)" : "#fff"; }, devices_1.devices.lgUp, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, function (props) { return props.$hasDarkTheme ? "var(--dark)" : "#fff"; });
|
|
14
14
|
var templateObject_1;
|
|
@@ -35,7 +35,7 @@ var Divider_1 = __importDefault(require("../Divider"));
|
|
|
35
35
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
36
36
|
var react_i18next_1 = require("react-i18next");
|
|
37
37
|
var Modal = function (props) {
|
|
38
|
-
var size = props.size, showCloseIcon = props.showCloseIcon, showBackIcon = props.showBackIcon, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, onBack = props.onBack, show = props.show, showDivider = props.showDivider, title = props.title, children = props.children, modalFooter = props.modalFooter, showPrimaryButton = props.showPrimaryButton, showSecondaryButton = props.showSecondaryButton, onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, buttonsAlignment = props.buttonsAlignment, buttonsAlignmentOnMobile = props.buttonsAlignmentOnMobile, primaryButtonText = props.primaryButtonText, secondaryButtonText = props.secondaryButtonText, showHeaderBorder = props.showHeaderBorder, showFooterBorder = props.showFooterBorder, autoHeight = props.autoHeight, titleAlignment = props.titleAlignment, titleDescription = props.titleDescription, isPrimaryButtonLoading = props.isPrimaryButtonLoading, primaryButtonIcon = props.primaryButtonIcon, secondaryButtonIcon = props.secondaryButtonIcon, isSecondaryButtonLoading = props.isSecondaryButtonLoading, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isSecondaryButtonDisabled = props.isSecondaryButtonDisabled, primaryButtonWidth = props.primaryButtonWidth, primaryButtonIconStrokeWidth = props.primaryButtonIconStrokeWidth, secondaryButtonWidth = props.secondaryButtonWidth, secondaryButtonIconStrokeWidth = props.secondaryButtonIconStrokeWidth, customContent = props.customContent, other = __rest(props, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "primaryButtonIconStrokeWidth", "secondaryButtonWidth", "secondaryButtonIconStrokeWidth", "customContent"]);
|
|
38
|
+
var size = props.size, showCloseIcon = props.showCloseIcon, showBackIcon = props.showBackIcon, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, onBack = props.onBack, show = props.show, showDivider = props.showDivider, title = props.title, children = props.children, modalFooter = props.modalFooter, showPrimaryButton = props.showPrimaryButton, showSecondaryButton = props.showSecondaryButton, onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, buttonsAlignment = props.buttonsAlignment, buttonsAlignmentOnMobile = props.buttonsAlignmentOnMobile, primaryButtonText = props.primaryButtonText, secondaryButtonText = props.secondaryButtonText, showHeaderBorder = props.showHeaderBorder, showFooterBorder = props.showFooterBorder, autoHeight = props.autoHeight, titleAlignment = props.titleAlignment, titleDescription = props.titleDescription, isPrimaryButtonLoading = props.isPrimaryButtonLoading, primaryButtonIcon = props.primaryButtonIcon, secondaryButtonIcon = props.secondaryButtonIcon, isSecondaryButtonLoading = props.isSecondaryButtonLoading, isPrimaryButtonDisabled = props.isPrimaryButtonDisabled, isSecondaryButtonDisabled = props.isSecondaryButtonDisabled, primaryButtonWidth = props.primaryButtonWidth, primaryButtonIconStrokeWidth = props.primaryButtonIconStrokeWidth, secondaryButtonWidth = props.secondaryButtonWidth, secondaryButtonIconStrokeWidth = props.secondaryButtonIconStrokeWidth, customContent = props.customContent, id = props.id, other = __rest(props, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "onBack", "show", "showDivider", "title", "children", "modalFooter", "showPrimaryButton", "showSecondaryButton", "onPrimaryAction", "onSecondaryAction", "buttonsAlignment", "buttonsAlignmentOnMobile", "primaryButtonText", "secondaryButtonText", "showHeaderBorder", "showFooterBorder", "autoHeight", "titleAlignment", "titleDescription", "isPrimaryButtonLoading", "primaryButtonIcon", "secondaryButtonIcon", "isSecondaryButtonLoading", "isPrimaryButtonDisabled", "isSecondaryButtonDisabled", "primaryButtonWidth", "primaryButtonIconStrokeWidth", "secondaryButtonWidth", "secondaryButtonIconStrokeWidth", "customContent", "id"]);
|
|
39
39
|
var uniqueId = (0, react_1.useId)();
|
|
40
40
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
41
41
|
var _a = (0, react_1.useState)(props.show), showModal = _a[0], setShowModal = _a[1];
|
|
@@ -58,7 +58,7 @@ var Modal = function (props) {
|
|
|
58
58
|
var modalRef = (0, react_1.useRef)();
|
|
59
59
|
(0, useOnClickOutside_1.default)(modalRef, props.onClose, props.hasCloseOnOutsideClick);
|
|
60
60
|
return (showModal &&
|
|
61
|
-
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": props.size, "$autoHeight": props.autoHeight, "$showHeaderBorder": props.showHeaderBorder, "$titleAlignment": props.titleAlignment, "$customContent": props.customContent, "$showFooterBorder": props.showFooterBorder, "$buttonsAlignment": props.buttonsAlignment, "$showSecondaryButton": props.showSecondaryButton, "$showDivider": props.showDivider, "$buttonsAlignmentOnMobile": props.buttonsAlignmentOnMobile }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) }))) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { children: props.title })), props.titleDescription && (0, jsx_runtime_1.jsx)("p", { children: props.titleDescription })] })), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: props.children })) })), props.modalFooter ? props.modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, icon: props.primaryButtonIcon, iconStrokeWidth: props.primaryButtonIconStrokeWidth }, { children: props.primaryButtonText }))), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && props.showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, icon: props.secondaryButtonIcon, iconStrokeWidth: props.secondaryButtonIconStrokeWidth }, { children: props.secondaryButtonText }))] }))] })) })] })) }), document.body));
|
|
61
|
+
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id) }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": props.size, "$autoHeight": props.autoHeight, "$showHeaderBorder": props.showHeaderBorder, "$titleAlignment": props.titleAlignment, "$customContent": props.customContent, "$showFooterBorder": props.showFooterBorder, "$buttonsAlignment": props.buttonsAlignment, "$showSecondaryButton": props.showSecondaryButton, "$showDivider": props.showDivider, "$buttonsAlignmentOnMobile": props.buttonsAlignmentOnMobile, id: id }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) }))) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { children: props.title })), props.titleDescription && (0, jsx_runtime_1.jsx)("p", { children: props.titleDescription })] })), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) }))) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "content" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "contentInner" }, { children: props.children })) })), props.modalFooter ? props.modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.showPrimaryButton || props.showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, icon: props.primaryButtonIcon, iconStrokeWidth: props.primaryButtonIconStrokeWidth }, { children: props.primaryButtonText }))), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && props.showDivider && ((0, jsx_runtime_1.jsx)(Divider_1.default, { text: t("or") })), (0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, icon: props.secondaryButtonIcon, iconStrokeWidth: props.secondaryButtonIconStrokeWidth }, { children: props.secondaryButtonText }))] }))] })) })] })) })) }), document.body));
|
|
62
62
|
};
|
|
63
63
|
exports.default = Modal;
|
|
64
64
|
Modal.defaultProps = {
|
|
@@ -66,7 +66,7 @@ Modal.defaultProps = {
|
|
|
66
66
|
showBackIcon: true,
|
|
67
67
|
showDivider: true,
|
|
68
68
|
showCloseIcon: true,
|
|
69
|
-
hasCloseOnOutsideClick:
|
|
69
|
+
hasCloseOnOutsideClick: true,
|
|
70
70
|
show: true,
|
|
71
71
|
buttonsAlignment: "vertical",
|
|
72
72
|
primaryButtonText: "Primary",
|
|
@@ -39,10 +39,14 @@ exports.Default = {
|
|
|
39
39
|
title: 'Title',
|
|
40
40
|
showPrimaryButton: true,
|
|
41
41
|
showSecondaryButton: true,
|
|
42
|
-
hasCloseOnOutsideClick:
|
|
42
|
+
hasCloseOnOutsideClick: true,
|
|
43
43
|
primaryButtonText: 'Primary Action',
|
|
44
44
|
secondaryButtonText: 'Other',
|
|
45
|
-
children: (0, jsx_runtime_1.jsx)("div", { children: "Content" })
|
|
45
|
+
children: (0, jsx_runtime_1.jsx)("div", { children: "Content" }),
|
|
46
|
+
id: "myModal",
|
|
47
|
+
onClose: function (e) {
|
|
48
|
+
console.log(e);
|
|
49
|
+
},
|
|
46
50
|
},
|
|
47
51
|
};
|
|
48
52
|
exports.Type1 = {
|
|
@@ -49,7 +49,7 @@ var PaymentCart = function (props) {
|
|
|
49
49
|
}
|
|
50
50
|
setPaymentDropdownList(list);
|
|
51
51
|
}, [props.isShowChoosePrimary, props.isShowChooseSpare, props.isShowDelete]);
|
|
52
|
-
return ((0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.PaymentCartStyled, __assign({ "$checked": props.checked, htmlFor: props.id, "$isShowRadio": props.isShowRadio }, { children: [(0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.LeftFrame, { children: [props.isShowRadio && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.RadioButtonWrapper, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", name: props.name, value: props.value }) })), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.ImageWrapper, { children: props.cartIcon }), (0, jsx_runtime_1.
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.PaymentCartStyled, __assign({ "$checked": props.checked, htmlFor: props.id, "$isShowRadio": props.isShowRadio }, { children: [(0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.LeftFrame, { children: [props.isShowRadio && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.RadioButtonWrapper, { children: (0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: props.id, onChange: props.onChange, checked: props.checked, isWrapText: false, layout: "basic", size: "small", name: props.name, value: props.value }) })), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.ImageWrapper, { children: props.cartIcon }), (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.Title, { children: (0, jsx_runtime_1.jsx)("span", { children: props.title }) })] }), (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.RightFrame, { children: [props.badgeText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.BadgeWrapper, __assign({ "$isHideMobileBadge": props.isHideMobileBadge }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { title: props.badgeText, layout: "text", variant: props.badgeVariant }) }))), props.infoText && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipWrapper, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: "small", position: "topRight", popupWidth: "147px", iconWidth: "24px", iconHeight: "24px", popupRight: "-8px" }, { children: (0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TooltipDescription, { children: props.infoText }) })) })), props.isShowTextLink && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: props.onClickTextLink }, { children: props.textLinkText })) })), props.isShowDropdown && ((0, jsx_runtime_1.jsx)(PaymentCart_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: paymentDropdownList, isShowTopChevron: true, toggle: function () { return (0, jsx_runtime_1.jsxs)(PaymentCart_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "-12px", width: "170px", top: "calc(100% + 10px)" }) }))] })] })));
|
|
53
53
|
};
|
|
54
54
|
PaymentCart.defaultProps = {
|
|
55
55
|
badgeText: "Badge text",
|
|
@@ -18,7 +18,7 @@ exports.BadgeWrapper = styled_components_1.default.div(templateObject_5 || (temp
|
|
|
18
18
|
exports.TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 1rem;\n"], ["\n margin-left: 1rem;\n"])));
|
|
19
19
|
exports.DropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-left: 1rem;\n"], ["\n margin-left: 1rem;\n"])));
|
|
20
20
|
exports.DropdownToggleButton = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0;\n padding: 0;\n cursor: pointer;\n transition: all .2s;\n outline: none;\n border:0;\n background: none;\n color: var(--primary);\n"], ["\n box-sizing: border-box;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 0;\n padding: 0;\n cursor: pointer;\n transition: all .2s;\n outline: none;\n border:0;\n background: none;\n color: var(--primary);\n"])));
|
|
21
|
-
exports.Title = styled_components_1.default.strong(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font: var(--body-bold-14-17);\n span{\n display: inline-block;\n vertical-align: middle;\n position: relative;\n line-height: 17px;\n
|
|
21
|
+
exports.Title = styled_components_1.default.strong(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font: var(--body-bold-14-17);\n span{\n display: inline-block;\n vertical-align: middle;\n position: relative;\n line-height: 17px;\n }\n"], ["\n font: var(--body-bold-14-17);\n span{\n display: inline-block;\n vertical-align: middle;\n position: relative;\n line-height: 17px;\n }\n"])));
|
|
22
22
|
exports.TooltipDescription = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n text-align: center;\n font: var(--caption-semi-bold-11-13);\n"], ["\n text-align: center;\n font: var(--caption-semi-bold-11-13);\n"])));
|
|
23
23
|
exports.TextLinkWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font: var(--body-bold-14-17);\n margin-left: 1rem;\n"], ["\n font: var(--body-bold-14-17);\n margin-left: 1rem;\n"])));
|
|
24
24
|
exports.RadioButtonWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n margin-right: 0.5rem;\n"], ["\n margin-right: 0.5rem;\n"])));
|
|
@@ -27,8 +27,7 @@ exports.Default = {
|
|
|
27
27
|
args: {
|
|
28
28
|
infoText: "Yeni bir kart eklemeden birincil kart silinemez",
|
|
29
29
|
badgeText: "Badge text",
|
|
30
|
-
|
|
31
|
-
title: "13/29",
|
|
30
|
+
title: "**** 5967",
|
|
32
31
|
cartIcon: (0, jsx_runtime_1.jsx)("img", { src: "http://localhost:3000/masterCard.svg", alt: "test" }),
|
|
33
32
|
isShowChoosePrimary: true,
|
|
34
33
|
isShowChooseSpare: true,
|
|
@@ -5,7 +5,12 @@ function useOnClickOutside(ref, handler, status) {
|
|
|
5
5
|
(0, react_1.useEffect)(function () {
|
|
6
6
|
if (status) {
|
|
7
7
|
var listener_1 = function (event) {
|
|
8
|
-
|
|
8
|
+
var _a, _b;
|
|
9
|
+
var modalBackdrop = document.querySelector("#modalBackdrop_".concat((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.id));
|
|
10
|
+
if (!(ref === null || ref === void 0 ? void 0 : ref.current) || ((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.contains(event === null || event === void 0 ? void 0 : event.target))) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
if (modalBackdrop && !(modalBackdrop === null || modalBackdrop === void 0 ? void 0 : modalBackdrop.contains(event === null || event === void 0 ? void 0 : event.target))) {
|
|
9
14
|
return;
|
|
10
15
|
}
|
|
11
16
|
handler(event);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "krl-alfred",
|
|
3
|
-
"version": "1.77.
|
|
3
|
+
"version": "1.77.26",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -95,5 +95,6 @@
|
|
|
95
95
|
"semantic-release": "^21.1.2",
|
|
96
96
|
"storybook": "7.2.1",
|
|
97
97
|
"storybook-addon-locale": "^0.3.6"
|
|
98
|
-
}
|
|
98
|
+
},
|
|
99
|
+
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
|
|
99
100
|
}
|