@trafilea/afrodita-components 5.0.0-beta.286 → 5.0.0-beta.288
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.esm.js +46 -15
- package/build/index.esm.js.map +1 -1
- package/build/index.js +46 -15
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4965,7 +4965,7 @@ var TAGS = {
|
|
|
4965
4965
|
var theme = _a.theme;
|
|
4966
4966
|
return theme.component.label.color;
|
|
4967
4967
|
}),
|
|
4968
|
-
tag: newStyled.span(templateObject_19$
|
|
4968
|
+
tag: newStyled.span(templateObject_19$2 || (templateObject_19$2 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4969
4969
|
};
|
|
4970
4970
|
var Text$8 = function (_a) {
|
|
4971
4971
|
var _b;
|
|
@@ -5076,7 +5076,7 @@ var DEFAULTS = {
|
|
|
5076
5076
|
size: 'regular',
|
|
5077
5077
|
},
|
|
5078
5078
|
};
|
|
5079
|
-
var templateObject_1$1w, templateObject_2$$, templateObject_3$P, templateObject_4$z, templateObject_5$m, templateObject_6$k, templateObject_7$c, templateObject_8$8, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$
|
|
5079
|
+
var templateObject_1$1w, templateObject_2$$, templateObject_3$P, templateObject_4$z, templateObject_5$m, templateObject_6$k, templateObject_7$c, templateObject_8$8, templateObject_9$5, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2;
|
|
5080
5080
|
|
|
5081
5081
|
var ButtonsContainer = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
5082
5082
|
var inline = _a.inline;
|
|
@@ -13174,6 +13174,8 @@ function formatDate(date) {
|
|
|
13174
13174
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
13175
13175
|
}
|
|
13176
13176
|
|
|
13177
|
+
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
13178
|
+
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
13177
13179
|
var Container$A = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
13178
13180
|
var Heading = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13179
13181
|
var Content$2 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
@@ -13182,22 +13184,51 @@ var DateText$1 = newStyled.span(templateObject_5$e || (templateObject_5$e = __ma
|
|
|
13182
13184
|
var VariantText = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
13183
13185
|
var ReviewerName$1 = newStyled.h2(templateObject_7$8 || (templateObject_7$8 = __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"])));
|
|
13184
13186
|
var ReviewTitle$1 = newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __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"])));
|
|
13185
|
-
var
|
|
13186
|
-
var
|
|
13187
|
-
var
|
|
13188
|
-
var
|
|
13189
|
-
var
|
|
13190
|
-
var
|
|
13191
|
-
var
|
|
13192
|
-
var
|
|
13193
|
-
|
|
13194
|
-
|
|
13187
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n }\n }\n"])));
|
|
13188
|
+
var ReviewDescriptionMobile = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
13189
|
+
var ImagesContainer = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
13190
|
+
var Images = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
13191
|
+
var ImageSpace = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
13192
|
+
var ImageWrapper$2 = newStyled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n cursor: zoom-in;\n display: none;\n margin-right: 4px;\n\n &:first-child {\n display: inline-block;\n }\n\n & img {\n object-fit: cover;\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 & img {\n object-fit: cover;\n }\n\n @media (min-width: 1024px) {\n display: inline-block;\n }\n"])));
|
|
13193
|
+
var HelpfulContainerDesktop = newStyled.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: flex;\n margin-top: ", ";\n\n @media (max-width: 768px) {\n display: none;\n }\n"], ["\n display: flex;\n margin-top: ", ";\n\n @media (max-width: 768px) {\n display: none;\n }\n"])), function (_a) {
|
|
13194
|
+
var showMoreDesktop = _a.showMoreDesktop;
|
|
13195
|
+
return (showMoreDesktop ? '12px' : '50px');
|
|
13196
|
+
});
|
|
13197
|
+
var HelpfulContainerMobile = newStyled.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n display: none;\n\n @media (max-width: 768px) {\n margin-top: 10px;\n display: flex;\n }\n"], ["\n display: none;\n\n @media (max-width: 768px) {\n margin-top: 10px;\n display: flex;\n }\n"])));
|
|
13198
|
+
var HelpfulText = newStyled.div(templateObject_17$1 || (templateObject_17$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"])));
|
|
13199
|
+
var HelpfulTexti = newStyled.i(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n content: '\f164';\n"], ["\n content: '\\f164';\n"])));
|
|
13200
|
+
var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n margin-right: 15px;\n"], ["\n margin-right: 15px;\n"])));
|
|
13195
13201
|
var Review$1 = function (_a) {
|
|
13196
13202
|
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;
|
|
13197
|
-
var
|
|
13198
|
-
|
|
13203
|
+
var randomId = Math.random().toString(36).substring(7);
|
|
13204
|
+
var _b = useState(description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), showMoreMobile = _b[0], setShowMoreMobile = _b[1];
|
|
13205
|
+
var _c = useState(description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP), showMoreDesktop = _c[0], setShowMoreDesktop = _c[1];
|
|
13206
|
+
useEffect(function () {
|
|
13207
|
+
var seeMoreElements = document.querySelectorAll("#see-more-".concat(randomId));
|
|
13208
|
+
var showAllDescription = function () {
|
|
13209
|
+
setShowMoreMobile(false);
|
|
13210
|
+
setShowMoreDesktop(false);
|
|
13211
|
+
};
|
|
13212
|
+
seeMoreElements.forEach(function (element) {
|
|
13213
|
+
element.addEventListener('click', showAllDescription);
|
|
13214
|
+
});
|
|
13215
|
+
return function () {
|
|
13216
|
+
seeMoreElements.forEach(function (element) {
|
|
13217
|
+
element.removeEventListener('click', showAllDescription);
|
|
13218
|
+
});
|
|
13219
|
+
};
|
|
13220
|
+
}, [randomId]);
|
|
13221
|
+
return (jsxs$1(Container$A, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName$1, { 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$2, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
13222
|
+
__html: showMoreMobile
|
|
13223
|
+
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
13224
|
+
: description,
|
|
13225
|
+
} }, void 0), jsx$1(ReviewDescriptionDesktop, { dangerouslySetInnerHTML: {
|
|
13226
|
+
__html: showMoreDesktop
|
|
13227
|
+
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
13228
|
+
: description,
|
|
13229
|
+
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { 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", width: "7.5rem" }, 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));
|
|
13199
13230
|
};
|
|
13200
|
-
var templateObject_1$N, templateObject_2$x, templateObject_3$u, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$8, templateObject_8$6, templateObject_9$4, 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;
|
|
13231
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$u, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$8, templateObject_8$6, templateObject_9$4, 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, templateObject_19$1;
|
|
13201
13232
|
|
|
13202
13233
|
var List = newStyled.ul(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
13203
13234
|
var Item$1 = newStyled.li(templateObject_2$w || (templateObject_2$w = __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"])));
|