krl-alfred 2.17.12 → 2.17.14
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/Modal/Modal.d.ts +1 -2
- package/dist/components/Modal/Modal.js +7 -3
- package/dist/components/Modal/Modal.styled.d.ts +3 -1
- package/dist/components/Modal/Modal.styled.js +1 -1
- package/dist/components/Modal/props.d.ts +1 -0
- package/dist/components/Modal/props.js +1 -0
- package/dist/components/Modal/stories/Modal.stories.d.ts +1 -2
- package/dist/components/ReviewBlock/ReviewBlock.d.ts +1 -1
- package/dist/components/ReviewBlock/ReviewBlock.js +3 -3
- package/dist/components/ReviewBlock/ReviewBlock.styled.d.ts +1 -1
- package/dist/components/ReviewBlock/ReviewBlock.styled.js +1 -1
- package/dist/components/ReviewBlock/props.d.ts +2 -0
- package/dist/components/ReviewBlock/props.js +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { ModalProps } from "./props";
|
|
3
|
-
declare const Modal: ({ size, showCloseIcon, showBackIcon, hasCloseOnOutsideClick, onClose, 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, secondaryButtonWidth, customContent, id, ...other }: ModalProps) =>
|
|
2
|
+
declare const Modal: ({ size, showCloseIcon, showBackIcon, hasCloseOnOutsideClick, onClose, 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, secondaryButtonWidth, customContent, id, renderInDOM, ...other }: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
3
|
export default Modal;
|
|
@@ -36,10 +36,10 @@ var Divider_1 = __importDefault(require("../Divider"));
|
|
|
36
36
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
37
37
|
var react_i18next_1 = require("react-i18next");
|
|
38
38
|
var Modal = function (_a) {
|
|
39
|
-
var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showBackIcon, showBackIcon = _d === void 0 ? props_1.ModalDefault.showBackIcon : _d, _e = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _e === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _e, _f = _a.onClose, onClose = _f === void 0 ? props_1.ModalDefault.onClose : _f, _g = _a.onBack, onBack = _g === void 0 ? props_1.ModalDefault.onBack : _g, _h = _a.show, show = _h === void 0 ? props_1.ModalDefault.show : _h, _j = _a.showDivider, showDivider = _j === void 0 ? props_1.ModalDefault.showDivider : _j, _k = _a.title, title = _k === void 0 ? props_1.ModalDefault.title : _k, _l = _a.children, children = _l === void 0 ? props_1.ModalDefault.children : _l, _m = _a.modalFooter, modalFooter = _m === void 0 ? props_1.ModalDefault.modalFooter : _m, _o = _a.showPrimaryButton, showPrimaryButton = _o === void 0 ? props_1.ModalDefault.showPrimaryButton : _o, _p = _a.showSecondaryButton, showSecondaryButton = _p === void 0 ? props_1.ModalDefault.showSecondaryButton : _p, _q = _a.onPrimaryAction, onPrimaryAction = _q === void 0 ? props_1.ModalDefault.onPrimaryAction : _q, _r = _a.onSecondaryAction, onSecondaryAction = _r === void 0 ? props_1.ModalDefault.onSecondaryAction : _r, _s = _a.buttonsAlignment, buttonsAlignment = _s === void 0 ? props_1.ModalDefault.buttonsAlignment : _s, _t = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _t === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _t, _u = _a.primaryButtonText, primaryButtonText = _u === void 0 ? props_1.ModalDefault.primaryButtonText : _u, _v = _a.secondaryButtonText, secondaryButtonText = _v === void 0 ? props_1.ModalDefault.secondaryButtonText : _v, _w = _a.showHeaderBorder, showHeaderBorder = _w === void 0 ? props_1.ModalDefault.showHeaderBorder : _w, _x = _a.showFooterBorder, showFooterBorder = _x === void 0 ? props_1.ModalDefault.showFooterBorder : _x, _y = _a.autoHeight, autoHeight = _y === void 0 ? props_1.ModalDefault.autoHeight : _y, _z = _a.titleAlignment, titleAlignment = _z === void 0 ? props_1.ModalDefault.titleAlignment : _z, _0 = _a.titleDescription, titleDescription = _0 === void 0 ? props_1.ModalDefault.titleDescription : _0, _1 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _1 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _1, _2 = _a.primaryButtonIcon, primaryButtonIcon = _2 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _2, _3 = _a.secondaryButtonIcon, secondaryButtonIcon = _3 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _3, _4 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _4 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _4, _5 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _5, _6 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _6 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _6, _7 = _a.primaryButtonWidth, primaryButtonWidth = _7 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _7, _8 = _a.secondaryButtonWidth, secondaryButtonWidth = _8 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _8, _9 = _a.customContent, customContent = _9 === void 0 ? props_1.ModalDefault.customContent : _9, _10 = _a.id, id = _10 === void 0 ? props_1.ModalDefault.id : _10, other = __rest(_a, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "onClose", "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", "secondaryButtonWidth", "customContent", "id"]);
|
|
39
|
+
var _b = _a.size, size = _b === void 0 ? props_1.ModalDefault.size : _b, _c = _a.showCloseIcon, showCloseIcon = _c === void 0 ? props_1.ModalDefault.showCloseIcon : _c, _d = _a.showBackIcon, showBackIcon = _d === void 0 ? props_1.ModalDefault.showBackIcon : _d, _e = _a.hasCloseOnOutsideClick, hasCloseOnOutsideClick = _e === void 0 ? props_1.ModalDefault.hasCloseOnOutsideClick : _e, _f = _a.onClose, onClose = _f === void 0 ? props_1.ModalDefault.onClose : _f, _g = _a.onBack, onBack = _g === void 0 ? props_1.ModalDefault.onBack : _g, _h = _a.show, show = _h === void 0 ? props_1.ModalDefault.show : _h, _j = _a.showDivider, showDivider = _j === void 0 ? props_1.ModalDefault.showDivider : _j, _k = _a.title, title = _k === void 0 ? props_1.ModalDefault.title : _k, _l = _a.children, children = _l === void 0 ? props_1.ModalDefault.children : _l, _m = _a.modalFooter, modalFooter = _m === void 0 ? props_1.ModalDefault.modalFooter : _m, _o = _a.showPrimaryButton, showPrimaryButton = _o === void 0 ? props_1.ModalDefault.showPrimaryButton : _o, _p = _a.showSecondaryButton, showSecondaryButton = _p === void 0 ? props_1.ModalDefault.showSecondaryButton : _p, _q = _a.onPrimaryAction, onPrimaryAction = _q === void 0 ? props_1.ModalDefault.onPrimaryAction : _q, _r = _a.onSecondaryAction, onSecondaryAction = _r === void 0 ? props_1.ModalDefault.onSecondaryAction : _r, _s = _a.buttonsAlignment, buttonsAlignment = _s === void 0 ? props_1.ModalDefault.buttonsAlignment : _s, _t = _a.buttonsAlignmentOnMobile, buttonsAlignmentOnMobile = _t === void 0 ? props_1.ModalDefault.buttonsAlignmentOnMobile : _t, _u = _a.primaryButtonText, primaryButtonText = _u === void 0 ? props_1.ModalDefault.primaryButtonText : _u, _v = _a.secondaryButtonText, secondaryButtonText = _v === void 0 ? props_1.ModalDefault.secondaryButtonText : _v, _w = _a.showHeaderBorder, showHeaderBorder = _w === void 0 ? props_1.ModalDefault.showHeaderBorder : _w, _x = _a.showFooterBorder, showFooterBorder = _x === void 0 ? props_1.ModalDefault.showFooterBorder : _x, _y = _a.autoHeight, autoHeight = _y === void 0 ? props_1.ModalDefault.autoHeight : _y, _z = _a.titleAlignment, titleAlignment = _z === void 0 ? props_1.ModalDefault.titleAlignment : _z, _0 = _a.titleDescription, titleDescription = _0 === void 0 ? props_1.ModalDefault.titleDescription : _0, _1 = _a.isPrimaryButtonLoading, isPrimaryButtonLoading = _1 === void 0 ? props_1.ModalDefault.isPrimaryButtonLoading : _1, _2 = _a.primaryButtonIcon, primaryButtonIcon = _2 === void 0 ? props_1.ModalDefault.primaryButtonIcon : _2, _3 = _a.secondaryButtonIcon, secondaryButtonIcon = _3 === void 0 ? props_1.ModalDefault.secondaryButtonIcon : _3, _4 = _a.isSecondaryButtonLoading, isSecondaryButtonLoading = _4 === void 0 ? props_1.ModalDefault.isSecondaryButtonLoading : _4, _5 = _a.isPrimaryButtonDisabled, isPrimaryButtonDisabled = _5 === void 0 ? props_1.ModalDefault.isPrimaryButtonDisabled : _5, _6 = _a.isSecondaryButtonDisabled, isSecondaryButtonDisabled = _6 === void 0 ? props_1.ModalDefault.isSecondaryButtonDisabled : _6, _7 = _a.primaryButtonWidth, primaryButtonWidth = _7 === void 0 ? props_1.ModalDefault.primaryButtonWidth : _7, _8 = _a.secondaryButtonWidth, secondaryButtonWidth = _8 === void 0 ? props_1.ModalDefault.secondaryButtonWidth : _8, _9 = _a.customContent, customContent = _9 === void 0 ? props_1.ModalDefault.customContent : _9, _10 = _a.id, id = _10 === void 0 ? props_1.ModalDefault.id : _10, _11 = _a.renderInDOM, renderInDOM = _11 === void 0 ? props_1.ModalDefault.renderInDOM : _11, other = __rest(_a, ["size", "showCloseIcon", "showBackIcon", "hasCloseOnOutsideClick", "onClose", "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", "secondaryButtonWidth", "customContent", "id", "renderInDOM"]);
|
|
40
40
|
var uniqueId = (0, react_1.useId)();
|
|
41
41
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
42
|
-
var
|
|
42
|
+
var _12 = (0, react_1.useState)(show), showModal = _12[0], setShowModal = _12[1];
|
|
43
43
|
(0, react_1.useEffect)(function () {
|
|
44
44
|
setShowModal(show);
|
|
45
45
|
if (!show) {
|
|
@@ -61,7 +61,11 @@ var Modal = function (_a) {
|
|
|
61
61
|
};
|
|
62
62
|
var modalRef = (0, react_1.useRef)();
|
|
63
63
|
(0, useOnClickOutside_1.default)(modalRef, onClose, hasCloseOnOutsideClick);
|
|
64
|
+
var modalContent = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, __assign({ id: "modalBackdrop_".concat(id), "$show": renderInDOM ? showModal : true }, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({ ref: modalRef, "$size": size, "$autoHeight": autoHeight, "$showHeaderBorder": showHeaderBorder, "$titleAlignment": titleAlignment, "$customContent": customContent, "$showFooterBorder": showFooterBorder, "$buttonsAlignment": buttonsAlignment, "$showSecondaryButton": showSecondaryButton, "$showDivider": showDivider, "$buttonsAlignmentOnMobile": buttonsAlignmentOnMobile, id: id }, other, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [showBackIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: onBack, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowLeftBig" }) }))) : (titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "title" }, { children: [title && ((0, jsx_runtime_1.jsx)("h5", { children: title })), titleDescription && (0, jsx_runtime_1.jsx)("p", { children: titleDescription })] })), showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClose, className: "icon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) }))) : ((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: children })) })), modalFooter ? modalFooter : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (showPrimaryButton || showSecondaryButton) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "buttons" }, { children: [showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: isPrimaryButtonLoading, disabled: isPrimaryButtonDisabled, width: primaryButtonWidth, icon: primaryButtonIcon }, { children: primaryButtonText }))), showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttonsAlignment === "vertical" && 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: isSecondaryButtonLoading, disabled: isSecondaryButtonDisabled, width: secondaryButtonWidth, icon: secondaryButtonIcon }, { children: secondaryButtonText }))] }))] })) })] })) })) }));
|
|
65
|
+
if (renderInDOM) {
|
|
66
|
+
return modalContent;
|
|
67
|
+
}
|
|
64
68
|
return (showModal &&
|
|
65
|
-
react_dom_1.default.createPortal(
|
|
69
|
+
react_dom_1.default.createPortal(modalContent, document.body));
|
|
66
70
|
};
|
|
67
71
|
exports.default = Modal;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ModalStyledProps } from "./props";
|
|
3
3
|
export declare const ModalStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ModalStyledProps>> & string;
|
|
4
|
-
export declare const OverlayStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").
|
|
4
|
+
export declare const OverlayStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
5
|
+
$show?: boolean;
|
|
6
|
+
}>> & string;
|
|
@@ -35,5 +35,5 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
35
35
|
return "";
|
|
36
36
|
}
|
|
37
37
|
}, devices_1.devices.md, function (props) { return props.$buttonsAlignmentOnMobile === 'vertical' ? "\n flex-direction : column;\n button {\n margin : 0 !important;\n + button {\n margin-top:1rem !important;\n }\n }\n " : " "; });
|
|
38
|
-
exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display:
|
|
38
|
+
exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display: ", ";\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n display: ", ";\n align-items: center;\n justify-content: center;\n background-color: #a3a5ad40;\n overflow: auto;\n left: 0;\n top: 0;\n z-index: 999999;\n"])), function (props) { return props.$show ? 'flex' : 'none'; });
|
|
39
39
|
var templateObject_1, templateObject_2;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare const _default: {
|
|
3
2
|
title: string;
|
|
4
|
-
component: ({ size, showCloseIcon, showBackIcon, hasCloseOnOutsideClick, onClose, 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, secondaryButtonWidth, customContent, id, ...other }: import("../props").Modal) =>
|
|
3
|
+
component: ({ size, showCloseIcon, showBackIcon, hasCloseOnOutsideClick, onClose, 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, secondaryButtonWidth, customContent, id, renderInDOM, ...other }: import("../props").Modal) => import("react/jsx-runtime").JSX.Element;
|
|
5
4
|
tags: string[];
|
|
6
5
|
argTypes: {
|
|
7
6
|
showDivider: {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ReviewBlockProps } from './props';
|
|
2
|
-
declare const ReviewBlock: ({ rating, customerName, date, comment, productReviews, maxStars, hasDropdown, hasApproveButton, hasBadge, badgeText, badgeVariant, onApproveButtonClick, onRemoveButtonClick, }: ReviewBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const ReviewBlock: ({ rating, customerName, date, comment, productReviews, maxStars, hasDropdown, hasApproveButton, hasBadge, badgeText, badgeVariant, hasShadow, onApproveButtonClick, onRemoveButtonClick, }: ReviewBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ReviewBlock;
|
|
@@ -23,7 +23,7 @@ var react_i18next_1 = require("react-i18next");
|
|
|
23
23
|
var TextLink_1 = __importDefault(require("../TextLink"));
|
|
24
24
|
var Dropdown_1 = __importDefault(require("../Dropdown"));
|
|
25
25
|
var ReviewBlock = function (_a) {
|
|
26
|
-
var _b = _a.rating, rating = _b === void 0 ? props_1.ReviewBlockDefault.rating : _b, customerName = _a.customerName, date = _a.date, _c = _a.comment, comment = _c === void 0 ? props_1.ReviewBlockDefault.comment : _c, productReviews = _a.productReviews, _d = _a.maxStars, maxStars = _d === void 0 ? props_1.ReviewBlockDefault.maxStars : _d, _e = _a.hasDropdown, hasDropdown = _e === void 0 ? props_1.ReviewBlockDefault.hasDropdown : _e, _f = _a.hasApproveButton, hasApproveButton = _f === void 0 ? props_1.ReviewBlockDefault.hasApproveButton : _f, _g = _a.hasBadge, hasBadge = _g === void 0 ? props_1.ReviewBlockDefault.hasBadge : _g, _h = _a.badgeText, badgeText = _h === void 0 ? props_1.ReviewBlockDefault.badgeText : _h, _j = _a.badgeVariant, badgeVariant = _j === void 0 ? props_1.ReviewBlockDefault.badgeVariant : _j, onApproveButtonClick = _a.onApproveButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick;
|
|
26
|
+
var _b = _a.rating, rating = _b === void 0 ? props_1.ReviewBlockDefault.rating : _b, customerName = _a.customerName, date = _a.date, _c = _a.comment, comment = _c === void 0 ? props_1.ReviewBlockDefault.comment : _c, productReviews = _a.productReviews, _d = _a.maxStars, maxStars = _d === void 0 ? props_1.ReviewBlockDefault.maxStars : _d, _e = _a.hasDropdown, hasDropdown = _e === void 0 ? props_1.ReviewBlockDefault.hasDropdown : _e, _f = _a.hasApproveButton, hasApproveButton = _f === void 0 ? props_1.ReviewBlockDefault.hasApproveButton : _f, _g = _a.hasBadge, hasBadge = _g === void 0 ? props_1.ReviewBlockDefault.hasBadge : _g, _h = _a.badgeText, badgeText = _h === void 0 ? props_1.ReviewBlockDefault.badgeText : _h, _j = _a.badgeVariant, badgeVariant = _j === void 0 ? props_1.ReviewBlockDefault.badgeVariant : _j, _k = _a.hasShadow, hasShadow = _k === void 0 ? props_1.ReviewBlockDefault.hasShadow : _k, onApproveButtonClick = _a.onApproveButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick;
|
|
27
27
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
28
28
|
var percentage = (rating / maxStars) * 100;
|
|
29
29
|
var dropdownList = [
|
|
@@ -32,9 +32,9 @@ var ReviewBlock = function (_a) {
|
|
|
32
32
|
onClick: onRemoveButtonClick,
|
|
33
33
|
}
|
|
34
34
|
];
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ReviewCard, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.Header, __assign({ "$hasDropdown": hasDropdown, "$hasApproveButton": hasApproveButton }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.StarsWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "notFilleds" }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--dark-opacity-10)" }, i)); }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "filleds", style: { width: "".concat(percentage, "%") } }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--yellowDark)" }, i)); }) }))] }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.CustomerName, { children: customerName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasApproveButton && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onApproveButtonClick }, { children: t("POST_COMMENTS") })) })), hasBadge && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: badgeVariant, title: badgeText }) })), hasDropdown && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "0", width: "145px", top: "calc(100% + 4px)" }) })), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Date, { children: date })] })] })), comment && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.PlatformReview, { children: comment }), productReviews === null || productReviews === void 0 ? void 0 : productReviews.map(function (product, idx) {
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ReviewCard, __assign({ "$hasShadow": hasShadow }, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.Header, __assign({ "$hasDropdown": hasDropdown, "$hasApproveButton": hasApproveButton }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.StarsWrapper, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "notFilleds" }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--dark-opacity-10)" }, i)); }) })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "filleds", style: { width: "".concat(percentage, "%") } }, { children: Array.from({ length: maxStars }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "StarfullSmall", color: "var(--yellowDark)" }, i)); }) }))] }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.CustomerName, { children: customerName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [hasApproveButton && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.TextLinkWrapper, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: onApproveButtonClick }, { children: t("POST_COMMENTS") })) })), hasBadge && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.BadgeWrapper, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: badgeVariant, title: badgeText }) })), hasDropdown && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: "small", list: dropdownList, isShowTopChevron: false, Toggle: function () { return (0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.DropdownToggleButton, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "MoreCircle" }), " "] }); }, childrenVariant: "primary", right: "0", width: "145px", top: "calc(100% + 4px)" }) })), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Date, { children: date })] })] })), comment && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.PlatformReview, { children: comment }), productReviews === null || productReviews === void 0 ? void 0 : productReviews.map(function (product, idx) {
|
|
36
36
|
var _a, _b;
|
|
37
37
|
return ((0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductReviewBlock, { children: [(0, jsx_runtime_1.jsxs)(ReviewBlock_styled_1.ProductWrapper, { children: [(0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductImage, { children: product === null || product === void 0 ? void 0 : product.image }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductReviewContent, { children: (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductName, { children: product === null || product === void 0 ? void 0 : product.name }) })] }), (product === null || product === void 0 ? void 0 : product.question) && (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductQuestion, { children: product === null || product === void 0 ? void 0 : product.question }), (0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.ProductAnswer, { children: product === null || product === void 0 ? void 0 : product.answer }), ((_a = product === null || product === void 0 ? void 0 : product.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(ReviewBlock_styled_1.Tags, { children: (_b = product === null || product === void 0 ? void 0 : product.tags) === null || _b === void 0 ? void 0 : _b.map(function (tag, i) { return ((0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: tag }, i)); }) }))] }, idx));
|
|
38
|
-
})] }));
|
|
38
|
+
})] })));
|
|
39
39
|
};
|
|
40
40
|
exports.default = ReviewBlock;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ReviewBlockStyledProps } from "./props";
|
|
3
|
-
export declare const ReviewCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").
|
|
3
|
+
export declare const ReviewCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ReviewBlockStyledProps>> & string;
|
|
4
4
|
export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ReviewBlockStyledProps>> & string;
|
|
5
5
|
export declare const CustomerName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
6
|
export declare const Date: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.DropdownToggleButton = exports.DropdownWrapper = exports.StarsWrapper = exports.BadgeWrapper = exports.TextLinkWrapper = exports.Tags = exports.ProductAnswer = exports.ProductQuestion = exports.ProductName = exports.ProductReviewContent = exports.ProductImage = exports.ProductWrapper = exports.ProductReviewBlock = exports.PlatformReview = exports.Date = exports.CustomerName = exports.Header = exports.ReviewCard = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n padding: 1.5rem;\n border-radius: 0.5rem;\n
|
|
13
|
+
exports.ReviewCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n padding: 1.5rem;\n border-radius: 0.5rem;\n ", "\n"], ["\n background: white;\n padding: 1.5rem;\n border-radius: 0.5rem;\n ", "\n"])), function (props) { return props.$hasShadow ? "\n box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n " : "\n border: 1px solid var(--grey-10);\n "; });
|
|
14
14
|
exports.Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: ", ";\n border-bottom: 1px solid var(--dark-opacity-10);\n padding-bottom: 1rem;\n margin-bottom: 1rem;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: ", ";\n border-bottom: 1px solid var(--dark-opacity-10);\n padding-bottom: 1rem;\n margin-bottom: 1rem;\n"])), function (props) { return props.$hasDropdown || props.$hasApproveButton ? "center" : "flex-end"; });
|
|
15
15
|
exports.CustomerName = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font: var(--body-semi-bold-13-16);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n"], ["\n font: var(--body-semi-bold-13-16);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n"])));
|
|
16
16
|
exports.Date = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font: var(--caption-semi-bold-12-15);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n text-align: end;\n"], ["\n font: var(--caption-semi-bold-12-15);\n color: var(--dark-opacity-50);\n margin-top: 1rem;\n text-align: end;\n"])));
|
|
@@ -20,9 +20,11 @@ export type ReviewBlockProps = {
|
|
|
20
20
|
hasBadge?: boolean;
|
|
21
21
|
badgeText?: string;
|
|
22
22
|
badgeVariant?: string;
|
|
23
|
+
hasShadow?: boolean;
|
|
23
24
|
};
|
|
24
25
|
export type ReviewBlockStyledProps = {
|
|
25
26
|
$hasApproveButton?: boolean;
|
|
26
27
|
$hasDropdown?: boolean;
|
|
28
|
+
$hasShadow?: boolean;
|
|
27
29
|
};
|
|
28
30
|
export declare const ReviewBlockDefault: ReviewBlockProps;
|