@trafilea/afrodita-components 5.0.0-beta.41 → 5.0.0-beta.44

package/build/index.d.ts

@@ -356,7 +356,7 @@ interface IconWrapperProps {
     fill?: string;
 }
 
-declare const Mail: ({ height, width }: IconWrapperProps) => JSX.Element;
+declare const Mail: ({ height, width, }: Pick<IconWrapperProps, 'width' | 'height'>) => JSX.Element;
 
 declare const Messaging_QuestionCircle: typeof QuestionCircle;
 declare const Messaging_Messenger: typeof Messenger;
@@ -602,8 +602,10 @@ interface RatingProps {
     reviews: number;
     reviewsText: string;
     wrapWithParenthesis?: boolean;
+    underline?: boolean;
+    reviewsContainerId?: string;
 }
-declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, }: RatingProps) => JSX.Element;
+declare const Rating: ({ size, reviews, reviewsText, rating, wrapWithParenthesis, underline, reviewsContainerId, }: RatingProps) => JSX.Element;
 
 interface FitPredictorProps {
     onClick: () => void;

package/build/index.esm.js

@@ -3637,6 +3637,7 @@ var ButtonSecondary = function (props) {
             backgroundColor: theme.component.button.secondary.active.backgroundColor,
             color: theme.component.button.secondary.active.color,
             border: theme.component.button.border,
+            fontFamily: 'inherit',
             '&:hover': {
                 backgroundColor: theme.component.button.secondary.hover.backgroundColor,
             },
@@ -3653,6 +3654,7 @@ var ButtonSecondaryOutline = function (props) {
             backgroundColor: theme.component.button.secondary.active.color,
             color: theme.component.button.secondary.active.backgroundColor,
             border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
+            fontFamily: 'inherit',
             '&:hover': {
                 backgroundColor: theme.component.button.secondary.active.backgroundColor,
                 color: theme.component.button.secondary.active.color,
@@ -4233,9 +4235,7 @@ var getStylesBySize$7 = function (size) {
 };
 var textButtonStyles$1 = function (theme, size) {
     var stylesBySize = getStylesBySize$7(size);
-    return __assign$1(__assign$1({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontWeight: 600 }, stylesBySize), { '&:hover': {
-            textDecorationLine: 'underline',
-        }, '&:disabled': {
+    return __assign$1(__assign$1({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontWeight: 500, textDecorationLine: 'underline' }, stylesBySize), { '&:disabled': {
             color: theme.colors.shades['250'].color,
             textDecorationLine: 'none',
         } });
@@ -10583,11 +10583,11 @@ var LabelStyles = {
         });
     },
 };
-var Container$x = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var Container$x = newStyled.a(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var templateObject_1$S;
 
 var CustomLabel = newStyled.div(function (_a) {
-    var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis;
+    var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
     return [
         LabelStyles.baseStyles(theme),
         LabelStyles[size](theme),
@@ -10599,13 +10599,30 @@ var CustomLabel = newStyled.div(function (_a) {
                 content: wrapWithParenthesis ? '")"' : '""',
             },
         },
+        css({
+            textDecoration: underline ? 'underline' : 'none',
+        }),
     ];
 });
 var starsNumber = 5;
 var Rating = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.wrapWithParenthesis, wrapWithParenthesis = _c === void 0 ? false : _c;
+    var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.wrapWithParenthesis, wrapWithParenthesis = _c === void 0 ? false : _c, _d = _a.underline, underline = _d === void 0 ? false : _d, reviewsContainerId = _a.reviewsContainerId;
+    function handleAnchorClick(e) {
+        var _a;
+        e.preventDefault();
+        if (reviewsContainerId) {
+            (_a = document.querySelector(reviewsContainerId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: 'smooth',
+            });
+        }
+    }
     var theme = useTheme();
-    return (jsxs$1(Container$x, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
+    var containerAttributes = reviewsContainerId
+        ? {
+            href: reviewsContainerId,
+        }
+        : {};
+    return (jsxs$1(Container$x, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
 };
 
 var Container$w = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 0.88rem;\n"])));
@@ -11822,13 +11839,13 @@ var ImageContainer = newStyled.div(function (_a) {
     });
 });
 var Container$f = newStyled.a(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: min-content;\n  text-decoration: none;\n"])));
-var H1 = newStyled.h1(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
+var H1 = newStyled.h1(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"], ["\n  font-size: 0.83rem;\n  font-weight: normal;\n  line-height: 1.375rem;\n  min-height: 2.75rem;\n  text-align: center;\n  color: ", ";\n  margin: 0.25rem 0;\n  text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
 var getStylesBySize = function (size) {
     switch (size) {
         case ComponentSize.Medium:
             return {
-                width: '12.1rem',
-                height: '15.8rem',
+                width: '205px',
+                height: '274px',
             };
         case ComponentSize.Small:
             return {
@@ -11843,8 +11860,8 @@ var getStylesBySize = function (size) {
         /* istanbul ignore next */
         default:
             return {
-                width: '12.1rem',
-                height: '15.8rem',
+                width: '205px',
+                height: '274px',
             };
     }
 };