@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.js
CHANGED
|
@@ -4991,7 +4991,7 @@ var TAGS = {
|
|
|
4991
4991
|
var theme = _a.theme;
|
|
4992
4992
|
return theme.component.label.color;
|
|
4993
4993
|
}),
|
|
4994
|
-
tag: newStyled.span(templateObject_19$
|
|
4994
|
+
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' : ''); }),
|
|
4995
4995
|
};
|
|
4996
4996
|
var Text$8 = function (_a) {
|
|
4997
4997
|
var _b;
|
|
@@ -5102,7 +5102,7 @@ var DEFAULTS = {
|
|
|
5102
5102
|
size: 'regular',
|
|
5103
5103
|
},
|
|
5104
5104
|
};
|
|
5105
|
-
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$
|
|
5105
|
+
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;
|
|
5106
5106
|
|
|
5107
5107
|
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) {
|
|
5108
5108
|
var inline = _a.inline;
|
|
@@ -13200,6 +13200,8 @@ function formatDate(date) {
|
|
|
13200
13200
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
13201
13201
|
}
|
|
13202
13202
|
|
|
13203
|
+
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
13204
|
+
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
13203
13205
|
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"])));
|
|
13204
13206
|
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"])));
|
|
13205
13207
|
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"])));
|
|
@@ -13208,22 +13210,51 @@ var DateText$1 = newStyled.span(templateObject_5$e || (templateObject_5$e = __ma
|
|
|
13208
13210
|
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"])));
|
|
13209
13211
|
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"])));
|
|
13210
13212
|
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"])));
|
|
13211
|
-
var
|
|
13212
|
-
var
|
|
13213
|
-
var
|
|
13214
|
-
var
|
|
13215
|
-
var
|
|
13216
|
-
var
|
|
13217
|
-
var
|
|
13218
|
-
var
|
|
13219
|
-
|
|
13220
|
-
|
|
13213
|
+
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"])));
|
|
13214
|
+
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"])));
|
|
13215
|
+
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"])));
|
|
13216
|
+
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"])));
|
|
13217
|
+
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"])));
|
|
13218
|
+
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"])));
|
|
13219
|
+
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) {
|
|
13220
|
+
var showMoreDesktop = _a.showMoreDesktop;
|
|
13221
|
+
return (showMoreDesktop ? '12px' : '50px');
|
|
13222
|
+
});
|
|
13223
|
+
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"])));
|
|
13224
|
+
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"])));
|
|
13225
|
+
var HelpfulTexti = newStyled.i(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n content: '\f164';\n"], ["\n content: '\\f164';\n"])));
|
|
13226
|
+
var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n margin-right: 15px;\n"], ["\n margin-right: 15px;\n"])));
|
|
13221
13227
|
var Review$1 = function (_a) {
|
|
13222
13228
|
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;
|
|
13223
|
-
var
|
|
13224
|
-
|
|
13229
|
+
var randomId = Math.random().toString(36).substring(7);
|
|
13230
|
+
var _b = React$2.useState(description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), showMoreMobile = _b[0], setShowMoreMobile = _b[1];
|
|
13231
|
+
var _c = React$2.useState(description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP), showMoreDesktop = _c[0], setShowMoreDesktop = _c[1];
|
|
13232
|
+
React$2.useEffect(function () {
|
|
13233
|
+
var seeMoreElements = document.querySelectorAll("#see-more-".concat(randomId));
|
|
13234
|
+
var showAllDescription = function () {
|
|
13235
|
+
setShowMoreMobile(false);
|
|
13236
|
+
setShowMoreDesktop(false);
|
|
13237
|
+
};
|
|
13238
|
+
seeMoreElements.forEach(function (element) {
|
|
13239
|
+
element.addEventListener('click', showAllDescription);
|
|
13240
|
+
});
|
|
13241
|
+
return function () {
|
|
13242
|
+
seeMoreElements.forEach(function (element) {
|
|
13243
|
+
element.removeEventListener('click', showAllDescription);
|
|
13244
|
+
});
|
|
13245
|
+
};
|
|
13246
|
+
}, [randomId]);
|
|
13247
|
+
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName$1, { 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$2, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
13248
|
+
__html: showMoreMobile
|
|
13249
|
+
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
13250
|
+
: description,
|
|
13251
|
+
} }, void 0), jsxRuntime.jsx(ReviewDescriptionDesktop, { dangerouslySetInnerHTML: {
|
|
13252
|
+
__html: showMoreDesktop
|
|
13253
|
+
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
13254
|
+
: description,
|
|
13255
|
+
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { 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", width: "7.5rem" }, 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));
|
|
13225
13256
|
};
|
|
13226
|
-
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;
|
|
13257
|
+
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;
|
|
13227
13258
|
|
|
13228
13259
|
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"])));
|
|
13229
13260
|
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"])));
|