@trafilea/afrodita-components 5.0.0-beta.172 → 5.0.0-beta.174
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 +38 -16
- package/build/index.esm.js.map +1 -1
- package/build/index.js +38 -16
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -148,12 +148,18 @@ declare const BulletTwo: ({ height, width, fill, title }: IconProps) => JSX.Elem
|
|
|
148
148
|
|
|
149
149
|
declare const BulletThree: ({ height, width, fill, title }: IconProps) => JSX.Element;
|
|
150
150
|
|
|
151
|
+
declare const ThumbsUp: ({ height, width, fill, title }: IconProps) => JSX.Element;
|
|
152
|
+
|
|
153
|
+
declare const ThumbsDown: ({ height, width, fill, title }: IconProps) => JSX.Element;
|
|
154
|
+
|
|
151
155
|
declare const Custom_SixtyDaysGuarantee: typeof SixtyDaysGuarantee;
|
|
152
156
|
declare const Custom_Frown: typeof Frown;
|
|
153
157
|
declare const Custom_Smiling: typeof Smiling;
|
|
154
158
|
declare const Custom_BulletOne: typeof BulletOne;
|
|
155
159
|
declare const Custom_BulletTwo: typeof BulletTwo;
|
|
156
160
|
declare const Custom_BulletThree: typeof BulletThree;
|
|
161
|
+
declare const Custom_ThumbsUp: typeof ThumbsUp;
|
|
162
|
+
declare const Custom_ThumbsDown: typeof ThumbsDown;
|
|
157
163
|
declare namespace Custom {
|
|
158
164
|
export {
|
|
159
165
|
Custom_SixtyDaysGuarantee as SixtyDaysGuarantee,
|
|
@@ -162,6 +168,8 @@ declare namespace Custom {
|
|
|
162
168
|
Custom_BulletOne as BulletOne,
|
|
163
169
|
Custom_BulletTwo as BulletTwo,
|
|
164
170
|
Custom_BulletThree as BulletThree,
|
|
171
|
+
Custom_ThumbsUp as ThumbsUp,
|
|
172
|
+
Custom_ThumbsDown as ThumbsDown,
|
|
165
173
|
};
|
|
166
174
|
}
|
|
167
175
|
|
|
@@ -2021,6 +2029,7 @@ interface ProductOrderItemProps {
|
|
|
2021
2029
|
declare const SimpleOrderItem: ({ title, className, subtitle, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
|
|
2022
2030
|
|
|
2023
2031
|
interface ReviewProps$1 {
|
|
2032
|
+
reviewId: string;
|
|
2024
2033
|
reviewerName: string;
|
|
2025
2034
|
date: Date;
|
|
2026
2035
|
rating: number;
|
|
@@ -2036,8 +2045,11 @@ interface ReviewProps$1 {
|
|
|
2036
2045
|
}[];
|
|
2037
2046
|
reviewVariant?: string;
|
|
2038
2047
|
onClickImage?: (image: string) => void;
|
|
2048
|
+
helpfulActionText?: string;
|
|
2049
|
+
helpfulAction?: (id: string) => void;
|
|
2050
|
+
helpfulCount?: number;
|
|
2039
2051
|
}
|
|
2040
|
-
declare const Review$1: ({ reviewerName, date, rating, stars, title, description, images, reviewVariant, onClickImage, }: ReviewProps$1) => JSX.Element;
|
|
2052
|
+
declare const Review$1: ({ reviewId, reviewerName, date, rating, stars, title, description, images, reviewVariant, onClickImage, helpfulActionText, helpfulAction, helpfulCount, }: ReviewProps$1) => JSX.Element;
|
|
2041
2053
|
|
|
2042
2054
|
interface SliderNavigationProps {
|
|
2043
2055
|
children: JSX.Element | JSX.Element[] | StyledComponent<any>;
|
|
@@ -2598,6 +2610,7 @@ interface ReviewsHeaderProps {
|
|
|
2598
2610
|
declare const ReviewsHeader: ({ title, rating, reviews, reviewsText, reviewsSummary, onClickReview, }: ReviewsHeaderProps) => JSX.Element;
|
|
2599
2611
|
|
|
2600
2612
|
interface ReviewProps {
|
|
2613
|
+
reviewId: string;
|
|
2601
2614
|
reviewerName: string;
|
|
2602
2615
|
date: Date;
|
|
2603
2616
|
rating: number;
|
|
@@ -2617,8 +2630,12 @@ interface ReviewProps {
|
|
|
2617
2630
|
productImage?: string;
|
|
2618
2631
|
productTitle?: string;
|
|
2619
2632
|
productLink?: string;
|
|
2633
|
+
helpfulCount?: number;
|
|
2634
|
+
helpfulAction?: (id: string) => void;
|
|
2635
|
+
notHelpfulCount?: number;
|
|
2636
|
+
notHelpfulAction?: (id: string) => void;
|
|
2620
2637
|
}
|
|
2621
|
-
declare const Review: ({ reviewerName, date, rating, stars, title, description, image, modalId, maxFullScreen, verified, productImage, productTitle, productLink, }: ReviewProps) => JSX.Element;
|
|
2638
|
+
declare const Review: ({ reviewId, reviewerName, date, rating, stars, title, description, image, modalId, maxFullScreen, verified, productImage, productTitle, productLink, helpfulCount, helpfulAction, notHelpfulCount, notHelpfulAction, }: ReviewProps) => JSX.Element;
|
|
2622
2639
|
|
|
2623
2640
|
declare global {
|
|
2624
2641
|
interface Events {
|
package/build/index.esm.js
CHANGED
|
@@ -91,6 +91,16 @@ var BulletThree = function (_a) {
|
|
|
91
91
|
return (jsxs$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 24, viewBoxY: 24, title: title, fill: "none" }, { children: [jsx$1("circle", { cx: "12", cy: "12.0004", r: "10.25", stroke: fill, strokeWidth: "1.5" }, void 0), jsx$1("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));
|
|
92
92
|
};
|
|
93
93
|
|
|
94
|
+
var ThumbsUp = function (_a) {
|
|
95
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b, title = _a.title;
|
|
96
|
+
return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 20, title: title, fill: "none" }, { children: jsx$1("g", { children: jsx$1("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));
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
var ThumbsDown = function (_a) {
|
|
100
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b, title = _a.title;
|
|
101
|
+
return (jsx$1(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 20, title: title, fill: "none" }, { children: jsx$1("g", { children: jsx$1("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));
|
|
102
|
+
};
|
|
103
|
+
|
|
94
104
|
var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
95
105
|
__proto__: null,
|
|
96
106
|
SixtyDaysGuarantee: SixtyDaysGuarantee,
|
|
@@ -98,7 +108,9 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
98
108
|
Smiling: Smiling,
|
|
99
109
|
BulletOne: BulletOne,
|
|
100
110
|
BulletTwo: BulletTwo,
|
|
101
|
-
BulletThree: BulletThree
|
|
111
|
+
BulletThree: BulletThree,
|
|
112
|
+
ThumbsUp: ThumbsUp,
|
|
113
|
+
ThumbsDown: ThumbsDown
|
|
102
114
|
});
|
|
103
115
|
|
|
104
116
|
var Check$1 = function (_a) {
|
|
@@ -4779,13 +4791,13 @@ var TAGS = {
|
|
|
4779
4791
|
heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
|
|
4780
4792
|
body: newStyled.p(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
|
|
4781
4793
|
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'); }),
|
|
4782
|
-
button: newStyled.span(templateObject_14$
|
|
4783
|
-
pricing: newStyled.span(templateObject_15$
|
|
4784
|
-
label: newStyled.label(templateObject_16$
|
|
4794
|
+
button: newStyled.span(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
4795
|
+
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'); }),
|
|
4796
|
+
label: newStyled.label(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n color: ", " !important;\n "], ["\n color: ", " !important;\n "])), function (_a) {
|
|
4785
4797
|
var theme = _a.theme;
|
|
4786
4798
|
return theme.component.label.color;
|
|
4787
4799
|
}),
|
|
4788
|
-
tag: newStyled.span(templateObject_17$
|
|
4800
|
+
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' : ''); }),
|
|
4789
4801
|
};
|
|
4790
4802
|
var Text$6 = function (_a) {
|
|
4791
4803
|
var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
|
|
@@ -4892,7 +4904,7 @@ var DEFAULTS = {
|
|
|
4892
4904
|
size: 'regular',
|
|
4893
4905
|
},
|
|
4894
4906
|
};
|
|
4895
|
-
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$
|
|
4907
|
+
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;
|
|
4896
4908
|
|
|
4897
4909
|
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) {
|
|
4898
4910
|
var inline = _a.inline;
|
|
@@ -12617,17 +12629,22 @@ var DateText$1 = newStyled.span(templateObject_5$a || (templateObject_5$a = __ma
|
|
|
12617
12629
|
var VariantText = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12618
12630
|
var ReviewerName$1 = newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
12619
12631
|
var ReviewTitle$1 = newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12620
|
-
var ReviewDescription$1 = newStyled.p(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12632
|
+
var ReviewDescription$1 = newStyled.p(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n white-space: pre-wrap;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n white-space: pre-wrap;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12621
12633
|
var ImagesContainer = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
12622
12634
|
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"])));
|
|
12623
12635
|
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"])));
|
|
12624
12636
|
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"])));
|
|
12637
|
+
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"])));
|
|
12638
|
+
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"])));
|
|
12639
|
+
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"])));
|
|
12640
|
+
var HelpfulTexti = newStyled.i(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n content: '\f164';\n"], ["\n content: '\\f164';\n"])));
|
|
12641
|
+
var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n margin-right: 15px;\n"], ["\n margin-right: 15px;\n"])));
|
|
12625
12642
|
var Review$1 = function (_a) {
|
|
12626
|
-
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;
|
|
12643
|
+
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;
|
|
12627
12644
|
var theme = useTheme();
|
|
12628
|
-
return (jsxs$1(Container$r, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsx$1(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }), void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image, { src: image.src, alt: image.alt,
|
|
12645
|
+
return (jsxs$1(Container$r, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsx$1(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxs$1(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
12629
12646
|
};
|
|
12630
|
-
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;
|
|
12647
|
+
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;
|
|
12631
12648
|
|
|
12632
12649
|
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"])));
|
|
12633
12650
|
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"])));
|
|
@@ -17869,7 +17886,7 @@ var DateText = newStyled.span(templateObject_5 || (templateObject_5 = __makeTemp
|
|
|
17869
17886
|
var ReviewerName = newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
17870
17887
|
var VerifiedText = newStyled.h1(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
17871
17888
|
var ReviewTitle = newStyled.h2(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
17872
|
-
var ReviewDescription = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n"])));
|
|
17889
|
+
var ReviewDescription = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
17873
17890
|
var ImageContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
17874
17891
|
var ImageWrapper = newStyled(Image)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
17875
17892
|
var VideoWrapper = newStyled.video(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -17878,12 +17895,17 @@ var ProductTitle = newStyled.div(templateObject_14 || (templateObject_14 = __mak
|
|
|
17878
17895
|
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"])));
|
|
17879
17896
|
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"])));
|
|
17880
17897
|
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"])));
|
|
17881
|
-
var
|
|
17898
|
+
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"])));
|
|
17899
|
+
var HelpfulAction = newStyled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n display: flex;\n cursor: pointer;\n"], ["\n display: flex;\n cursor: pointer;\n"])));
|
|
17900
|
+
var NotHelpfulAction = newStyled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n display: flex;\n cursor: pointer;\n"], ["\n display: flex;\n cursor: pointer;\n"])));
|
|
17901
|
+
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"])));
|
|
17902
|
+
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"])));
|
|
17903
|
+
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"])));
|
|
17882
17904
|
var Review = function (_a) {
|
|
17883
|
-
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;
|
|
17905
|
+
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;
|
|
17884
17906
|
var isVideo = image === null || image === void 0 ? void 0 : image.src.includes('/video');
|
|
17885
17907
|
var refVideo = useRef(null);
|
|
17886
|
-
var
|
|
17908
|
+
var _e = useModal(modalId), opened = _e.opened, close = _e.close;
|
|
17887
17909
|
useEffect(function () {
|
|
17888
17910
|
if (refVideo.current) {
|
|
17889
17911
|
if (opened) {
|
|
@@ -17895,9 +17917,9 @@ var Review = function (_a) {
|
|
|
17895
17917
|
}
|
|
17896
17918
|
}, [opened]);
|
|
17897
17919
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
17898
|
-
(!isVideo ? (jsx$1(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [jsxs$1(ReviewerName, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
17920
|
+
(!isVideo ? (jsx$1(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [jsxs$1(ReviewerName, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
17899
17921
|
};
|
|
17900
|
-
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;
|
|
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, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
17901
17923
|
|
|
17902
17924
|
export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17903
17925
|
//# sourceMappingURL=index.esm.js.map
|