@trafilea/afrodita-components 5.0.0-beta.171 → 5.0.0-beta.173
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/build/index.d.ts +19 -2
- package/build/index.esm.js +45 -19
- package/build/index.esm.js.map +1 -1
- package/build/index.js +45 -19
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -117,6 +117,16 @@ var BulletThree = function (_a) {
|
|
|
117
117
|
return (jsxRuntime.jsxs(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: title, fill: "none" }, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12.0004", r: "10.25", stroke: fill, strokeWidth: "1.5" }, void 0), jsxRuntime.jsx("path", { d: "M10.5092 12.8645H10.9892C12.1892 12.8645 13.7412 13.3125 13.7412 14.7845C13.7412 16.1445 12.6532 16.6565 11.6612 16.6565C10.4612 16.6565 9.67719 15.9525 9.40519 15.0565L7.61319 15.6165C8.22119 17.5045 9.82119 18.2885 11.7252 18.2885C13.6452 18.2885 15.6772 17.1525 15.6772 14.8005C15.6772 13.4085 14.7172 12.3525 13.3412 12.0805V12.0485C14.5732 11.7445 15.3732 10.7045 15.3732 9.48855C15.3732 7.45655 13.7092 6.38455 11.7252 6.38455C9.91719 6.38455 8.42919 7.45655 8.02919 8.97655L9.83719 9.44055C10.0612 8.57655 10.7172 7.98455 11.6452 7.98455C12.6052 7.98455 13.4372 8.59255 13.4372 9.61655C13.4372 11.0085 12.1572 11.3285 11.0212 11.3285H10.5092V12.8645Z", fill: fill }, void 0)] }), void 0));
|
|
118
118
|
};
|
|
119
119
|
|
|
120
|
+
var ThumbsUp = function (_a) {
|
|
121
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b, title = _a.title;
|
|
122
|
+
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 20, title: title, fill: "none" }, { children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M3.59375 7.31409H1.90625C1.1307 7.31409 0.5 7.99598 0.5 8.83787V16.7615C0.5 17.6034 1.1307 18.2853 1.90625 18.2853H3.59375C4.3707 18.2853 5 17.6034 5 16.7615V8.83787C5 7.99598 4.3707 7.31409 3.59375 7.31409ZM3.875 16.7615C3.875 16.9291 3.74879 17.0663 3.59375 17.0663H1.90625C1.75121 17.0663 1.625 16.9291 1.625 16.7615V8.83787C1.625 8.67025 1.75121 8.53311 1.90625 8.53311H3.59375C3.74879 8.53311 3.875 8.67025 3.875 8.83787V16.7615ZM18.5 8.43788C18.5 7.14648 17.5297 6.09507 16.3379 6.09507H12.7344C13.1555 5.06424 13.3964 4.05779 13.3964 3.53018C13.3988 2.39382 12.5797 1.21899 11.2191 1.21899C9.77 1.21899 9.43672 2.32792 9.1407 3.30695C8.16758 6.51792 6.125 7.03982 6.125 7.9236C6.125 8.27026 6.38867 8.53311 6.6875 8.53311C6.83164 8.53311 6.97578 8.47216 7.08477 8.35407C8.9368 6.33355 9.44094 6.2166 10.207 3.68751C10.5301 2.62658 10.632 2.43801 11.2191 2.43801C11.9455 2.43801 12.2717 3.07686 12.2717 3.53018C12.2717 3.91455 11.9591 5.20443 11.3359 6.40554C11.2878 6.49819 11.2639 6.60101 11.2639 6.70382C11.2648 7.06648 11.5391 7.31409 11.8273 7.31409H16.3379C16.9109 7.31409 17.375 7.81694 17.375 8.43788C17.375 9.02187 16.9503 9.51062 16.4089 9.55023C16.1114 9.57238 15.8847 9.84162 15.8847 10.1582C15.8847 10.6226 16.3087 10.6481 16.3087 11.3251C16.3087 11.8637 15.9533 12.3269 15.4639 12.4256C15.2608 12.4668 15.0048 12.67 15.0048 13.0256C15.0048 13.3641 15.2426 13.434 15.2426 13.9231C15.2426 15.1048 14.1348 14.7657 14.1348 15.5631C14.1348 15.6974 14.1765 15.7585 14.1765 15.9444C14.1758 16.5634 13.7117 17.0663 13.1387 17.0663H11.184C8.30082 17.0663 7.37656 14.6275 6.6875 14.6275C6.37556 14.6275 6.125 14.9015 6.125 15.2354C6.09336 15.8587 8.39609 18.2853 11.184 18.2853H13.1397C14.3319 18.2853 15.3018 17.2346 15.3018 15.9436C15.954 15.5299 16.3681 14.7627 16.3681 13.9223C16.3681 13.7396 16.3472 13.5568 16.3072 13.3787C16.986 12.978 17.4343 12.1989 17.4343 11.3239C17.4343 11.0489 17.3892 10.7788 17.3024 10.5247C18.0148 10.1407 18.5 9.34453 18.5 8.43788Z", fill: fill }, void 0) }, void 0) }), void 0));
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
var ThumbsDown = function (_a) {
|
|
126
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b, title = _a.title;
|
|
127
|
+
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 20, title: title, fill: "none" }, { children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M3.59375 12.1903H1.90625C1.1307 12.1903 0.5 11.5084 0.5 10.6665V2.74289C0.5 1.90101 1.1307 1.21912 1.90625 1.21912H3.59375C4.3707 1.21912 5 1.90101 5 2.74289V10.6665C5 11.5084 4.3707 12.1903 3.59375 12.1903ZM3.875 2.74289C3.875 2.57528 3.74879 2.43814 3.59375 2.43814H1.90625C1.75121 2.43814 1.625 2.57528 1.625 2.74289V10.6665C1.625 10.8341 1.75121 10.9713 1.90625 10.9713H3.59375C3.74879 10.9713 3.875 10.8341 3.875 10.6665V2.74289ZM18.5 11.0665C18.5 12.3579 17.5297 13.4093 16.3379 13.4093H12.7344C13.1555 14.4402 13.3964 15.4466 13.3964 15.9742C13.3988 17.1106 12.5797 18.2854 11.2191 18.2854C9.77 18.2854 9.43672 17.1765 9.1407 16.1974C8.16758 12.9865 6.125 12.4646 6.125 11.5808C6.125 11.2341 6.38867 10.9713 6.6875 10.9713C6.83164 10.9713 6.97578 11.0322 7.08477 11.1503C8.9368 13.1708 9.44094 13.2878 10.207 15.8169C10.5301 16.8778 10.632 17.0664 11.2191 17.0664C11.9455 17.0664 12.2717 16.4275 12.2717 15.9742C12.2717 15.5898 11.9591 14.3 11.3359 13.0989C11.2878 13.0062 11.2639 12.9034 11.2639 12.8006C11.2648 12.4379 11.5391 12.1903 11.8273 12.1903H16.3379C16.9109 12.1903 17.375 11.6875 17.375 11.0665C17.375 10.4825 16.9503 9.99378 16.4089 9.95416C16.1114 9.93202 15.8847 9.66278 15.8847 9.34617C15.8847 8.8818 16.3087 8.85628 16.3087 8.17934C16.3087 7.64069 15.9533 7.17746 15.4639 7.0788C15.2608 7.03758 15.0048 6.83434 15.0048 6.47881C15.0048 6.1403 15.2426 6.07044 15.2426 5.58131C15.2426 4.39962 14.1348 4.73866 14.1348 3.94134C14.1348 3.80702 14.1765 3.74592 14.1765 3.56002C14.1758 2.94098 13.7117 2.43814 13.1387 2.43814H11.184C8.30082 2.43814 7.37656 4.87694 6.6875 4.87694C6.37556 4.87694 6.125 4.60293 6.125 4.26895C6.09336 3.64573 8.39609 1.21912 11.184 1.21912H13.1397C14.3319 1.21912 15.3018 2.26976 15.3018 3.56078C15.954 3.97449 16.3681 4.74171 16.3681 5.58207C16.3681 5.76481 16.3472 5.94755 16.3072 6.12567C16.986 6.52643 17.4343 7.30546 17.4343 8.18048C17.4343 8.45549 17.3892 8.72562 17.3024 8.97971C18.0148 9.3637 18.5 10.1599 18.5 11.0665Z", fill: fill }, void 0) }, void 0) }), void 0));
|
|
128
|
+
};
|
|
129
|
+
|
|
120
130
|
var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
121
131
|
__proto__: null,
|
|
122
132
|
SixtyDaysGuarantee: SixtyDaysGuarantee,
|
|
@@ -124,7 +134,9 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
124
134
|
Smiling: Smiling,
|
|
125
135
|
BulletOne: BulletOne,
|
|
126
136
|
BulletTwo: BulletTwo,
|
|
127
|
-
BulletThree: BulletThree
|
|
137
|
+
BulletThree: BulletThree,
|
|
138
|
+
ThumbsUp: ThumbsUp,
|
|
139
|
+
ThumbsDown: ThumbsDown
|
|
128
140
|
});
|
|
129
141
|
|
|
130
142
|
var Check$1 = function (_a) {
|
|
@@ -4805,13 +4817,13 @@ var TAGS = {
|
|
|
4805
4817
|
heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
|
|
4806
4818
|
body: newStyled.p(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
|
|
4807
4819
|
link: newStyled.a(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4808
|
-
button: newStyled.span(templateObject_14$
|
|
4809
|
-
pricing: newStyled.span(templateObject_15$
|
|
4810
|
-
label: newStyled.label(templateObject_16$
|
|
4820
|
+
button: newStyled.span(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
4821
|
+
pricing: newStyled.span(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "], ["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
|
|
4822
|
+
label: newStyled.label(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n color: ", " !important;\n "], ["\n color: ", " !important;\n "])), function (_a) {
|
|
4811
4823
|
var theme = _a.theme;
|
|
4812
4824
|
return theme.component.label.color;
|
|
4813
4825
|
}),
|
|
4814
|
-
tag: newStyled.span(templateObject_17$
|
|
4826
|
+
tag: newStyled.span(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4815
4827
|
};
|
|
4816
4828
|
var Text$6 = function (_a) {
|
|
4817
4829
|
var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
|
|
@@ -4918,7 +4930,7 @@ var DEFAULTS = {
|
|
|
4918
4930
|
size: 'regular',
|
|
4919
4931
|
},
|
|
4920
4932
|
};
|
|
4921
|
-
var templateObject_1$1f, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$h, templateObject_6$d, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$
|
|
4933
|
+
var templateObject_1$1f, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$h, templateObject_6$d, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
|
|
4922
4934
|
|
|
4923
4935
|
var ButtonsContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4924
4936
|
var inline = _a.inline;
|
|
@@ -12482,8 +12494,9 @@ var Col$1 = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemp
|
|
|
12482
12494
|
textAlign: ['center', 'inherit'],
|
|
12483
12495
|
width: ['100%', 'inherit'],
|
|
12484
12496
|
}));
|
|
12485
|
-
var IconContainer$2 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n
|
|
12486
|
-
|
|
12497
|
+
var IconContainer$2 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n ", "\n"])), mediaQueries({
|
|
12498
|
+
marginRight: ['0', '0.438rem'],
|
|
12499
|
+
marginBottom: ['10px', '0'],
|
|
12487
12500
|
width: ['auto', '1.375rem'],
|
|
12488
12501
|
}));
|
|
12489
12502
|
var SectionTitle = newStyled.h1(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
|
|
@@ -12492,10 +12505,13 @@ var SectionTitle = newStyled.h1(templateObject_6$a || (templateObject_6$a = __ma
|
|
|
12492
12505
|
var theme = _a.theme;
|
|
12493
12506
|
return theme.colors.shades['700'].color;
|
|
12494
12507
|
});
|
|
12495
|
-
var SectionDetails = newStyled.p(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-
|
|
12496
|
-
var _b;
|
|
12508
|
+
var SectionDetails = newStyled.p(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
12497
12509
|
var theme = _a.theme;
|
|
12498
|
-
return
|
|
12510
|
+
return theme.component.deliveryDetails.SectionDetails
|
|
12511
|
+
? mediaQueries({
|
|
12512
|
+
marginLeft: ['0', theme.component.deliveryDetails.SectionDetails.marginLeft],
|
|
12513
|
+
})
|
|
12514
|
+
: '';
|
|
12499
12515
|
});
|
|
12500
12516
|
var KeepMeUpdated = newStyled.h1(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
12501
12517
|
var DeliveryDetails = function (_a) {
|
|
@@ -12644,12 +12660,17 @@ var ImagesContainer = newStyled.div(templateObject_10$2 || (templateObject_10$2
|
|
|
12644
12660
|
var Images = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
12645
12661
|
var ImageSpace = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
12646
12662
|
var ImageWrapper$2 = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"], ["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"])));
|
|
12663
|
+
var HelpfulContainerDesktop = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n margin-top: 12px;\n display: flex;\n\n @media (max-width: 768px) {\n display: none;\n }\n"], ["\n margin-top: 12px;\n display: flex;\n\n @media (max-width: 768px) {\n display: none;\n }\n"])));
|
|
12664
|
+
var HelpfulContainerMobile = newStyled.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: none;\n\n @media (max-width: 768px) {\n margin-top: 12px;\n display: flex;\n }\n"], ["\n display: none;\n\n @media (max-width: 768px) {\n margin-top: 12px;\n display: flex;\n }\n"])));
|
|
12665
|
+
var HelpfulText = newStyled.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 34px;\n font-weight: 600;\n color: #d4605b;\n"], ["\n font-size: 14px;\n line-height: 34px;\n font-weight: 600;\n color: #d4605b;\n"])));
|
|
12666
|
+
var HelpfulTexti = newStyled.i(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n content: '\f164';\n"], ["\n content: '\\f164';\n"])));
|
|
12667
|
+
var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n margin-right: 15px;\n"], ["\n margin-right: 15px;\n"])));
|
|
12647
12668
|
var Review$1 = function (_a) {
|
|
12648
|
-
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, images = _a.images, reviewVariant = _a.reviewVariant, onClickImage = _a.onClickImage;
|
|
12669
|
+
var reviewId = _a.reviewId, reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, images = _a.images, reviewVariant = _a.reviewVariant, onClickImage = _a.onClickImage, helpfulActionText = _a.helpfulActionText, helpfulAction = _a.helpfulAction, helpfulCount = _a.helpfulCount;
|
|
12649
12670
|
var theme = useTheme();
|
|
12650
|
-
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt,
|
|
12671
|
+
return (jsxRuntime.jsxs(Container$r, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
12651
12672
|
};
|
|
12652
|
-
var templateObject_1$A, templateObject_2$o, templateObject_3$m, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
12673
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$m, templateObject_4$f, templateObject_5$a, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
12653
12674
|
|
|
12654
12675
|
var List = newStyled.ul(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12655
12676
|
var Item$1 = newStyled.li(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
@@ -17900,12 +17921,17 @@ var ProductTitle = newStyled.div(templateObject_14 || (templateObject_14 = __mak
|
|
|
17900
17921
|
var ProductImage = newStyled(Image)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n max-height: 100px;\n height: auto;\n width: auto;\n"], ["\n max-height: 100px;\n height: auto;\n width: auto;\n"])));
|
|
17901
17922
|
var ProductImageWrapper = newStyled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: inline-block;\n padding: 10px;\n border: 1px solid #ececec;\n line-height: 0;\n text-align: center;\n width: 100%;\n box-sizing: border-box !important;\n max-width: 192px;\n"], ["\n display: inline-block;\n padding: 10px;\n border: 1px solid #ececec;\n line-height: 0;\n text-align: center;\n width: 100%;\n box-sizing: border-box !important;\n max-width: 192px;\n"])));
|
|
17902
17923
|
var DescriptionContainer = newStyled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n @media (min-width: 768px) {\n min-width: 40%;\n }\n"], ["\n @media (min-width: 768px) {\n min-width: 40%;\n }\n"])));
|
|
17903
|
-
var
|
|
17924
|
+
var HelpfulContainer = newStyled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n margin-top: 20px;\n"], ["\n display: flex;\n justify-content: end;\n margin-top: 20px;\n"])));
|
|
17925
|
+
var HelpfulAction = newStyled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: flex;\n cursor: pointer;\n"], ["\n display: flex;\n cursor: pointer;\n"])));
|
|
17926
|
+
var NotHelpfulAction = newStyled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: flex;\n cursor: pointer;\n"], ["\n display: flex;\n cursor: pointer;\n"])));
|
|
17927
|
+
var HelpfulCount = newStyled.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n font-size: 15px;\n text-align: right;\n margin-right: 15px;\n margin-left: 4px;\n"], ["\n font-size: 15px;\n text-align: right;\n margin-right: 15px;\n margin-left: 4px;\n"])));
|
|
17928
|
+
var NotHelpfulCount = newStyled.span(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n font-size: 15px;\n text-align: right;\n margin-left: 4px;\n"], ["\n font-size: 15px;\n text-align: right;\n margin-left: 4px;\n"])));
|
|
17929
|
+
var CloseButton = newStyled.span(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n cursor: pointer;\n display: inline-block;\n position: absolute;\n background: #fff;\n color: #000;\n box-shadow: none;\n opacity: 0.8;\n top: 0;\n right: 0;\n z-index: 3;\n font-size: 0;\n line-height: 30px;\n text-align: center;\n width: 45px;\n height: 50px;\n font-weight: 400;\n float: right;\n\n &::before {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(-45deg);\n }\n\n &::after {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(45deg);\n }\n"], ["\n cursor: pointer;\n display: inline-block;\n position: absolute;\n background: #fff;\n color: #000;\n box-shadow: none;\n opacity: 0.8;\n top: 0;\n right: 0;\n z-index: 3;\n font-size: 0;\n line-height: 30px;\n text-align: center;\n width: 45px;\n height: 50px;\n font-weight: 400;\n float: right;\n\n &::before {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(-45deg);\n }\n\n &::after {\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n top: 50%;\n left: 0;\n margin-top: -1px;\n background: #000;\n transform: rotate(45deg);\n }\n"])));
|
|
17904
17930
|
var Review = function (_a) {
|
|
17905
|
-
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image, modalId = _a.modalId, _b = _a.maxFullScreen, maxFullScreen = _b === void 0 ? false : _b, verified = _a.verified, productImage = _a.productImage, productTitle = _a.productTitle, productLink = _a.productLink;
|
|
17931
|
+
var reviewId = _a.reviewId, reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image, modalId = _a.modalId, _b = _a.maxFullScreen, maxFullScreen = _b === void 0 ? false : _b, verified = _a.verified, productImage = _a.productImage, productTitle = _a.productTitle, productLink = _a.productLink, _c = _a.helpfulCount, helpfulCount = _c === void 0 ? 0 : _c, helpfulAction = _a.helpfulAction, _d = _a.notHelpfulCount, notHelpfulCount = _d === void 0 ? 0 : _d, notHelpfulAction = _a.notHelpfulAction;
|
|
17906
17932
|
var isVideo = image === null || image === void 0 ? void 0 : image.src.includes('/video');
|
|
17907
17933
|
var refVideo = React$2.useRef(null);
|
|
17908
|
-
var
|
|
17934
|
+
var _e = useModal(modalId), opened = _e.opened, close = _e.close;
|
|
17909
17935
|
React$2.useEffect(function () {
|
|
17910
17936
|
if (refVideo.current) {
|
|
17911
17937
|
if (opened) {
|
|
@@ -17917,9 +17943,9 @@ var Review = function (_a) {
|
|
|
17917
17943
|
}
|
|
17918
17944
|
}, [opened]);
|
|
17919
17945
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
17920
|
-
(!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
17946
|
+
(!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
17921
17947
|
};
|
|
17922
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
17948
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
17923
17949
|
|
|
17924
17950
|
exports.Accordion = Accordion$1;
|
|
17925
17951
|
exports.AccordionOptions = AccordionOptions;
|