@trafilea/afrodita-components 5.0.0-beta.285 → 5.0.0-beta.287
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/build/theme/truekind.theme.js +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_DESKTOP), showMoreMobile = _b[0], setShowMoreMobile = _b[1];
|
|
13205
|
+
var _c = useState(description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), 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"])));
|