@trafilea/afrodita-components 6.3.0 → 6.4.0

package/build/index.d.ts

@@ -1219,7 +1219,7 @@ declare type Theme = {
 };
 declare type ThemeBreakpoints = {
     mobile: number;
-    tablet?: number;
+    tablet: number;
     desktop: number;
 };
 declare type ThemeBasicPallete = {
@@ -1943,7 +1943,14 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
-};
+};
+declare const Viewports: {
+    readonly mobile: "mobile";
+    readonly tablet: "tablet";
+    readonly desktop: "desktop";
+    readonly desktopLarge: "desktopLarge";
+};
+declare type Viewport = typeof Viewports[keyof typeof Viewports];
 
 declare type ThemeProviderProps = {
     isSameOriginIcons?: boolean;
@@ -3338,8 +3345,9 @@ declare const Spinner: React.FC<SpinnerProps>;
 
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
-declare type Viewport = 'mobile' | 'tablet' | 'desktop';
-declare type UseWindowDimensions = (breakpoints: ThemeBreakpoints, shouldListenChanges?: boolean) => {
+declare type UseWindowDimensions = (breakpoints?: ThemeBreakpoints, options?: {
+    shouldListenChanges?: boolean;
+}) => {
     viewport: Viewport;
     isMobile: boolean;
     isTablet: boolean;

package/build/index.esm.js

@@ -3107,6 +3107,20 @@ var formatPrice = function (value, _a) {
     }).format(valueToFormat);
 };
 
+var Viewports = {
+    mobile: 'mobile',
+    tablet: 'tablet',
+    desktop: 'desktop',
+    desktopLarge: 'desktopLarge',
+};
+
+//ANNOTATION: Those values are up to.
+var DEFAULT_BREAKPOINTS = {
+    mobile: 640,
+    tablet: 1024,
+    desktop: 1280,
+};
+
 var Container$17 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"], ["\n  @keyframes shimmer {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  display: inline-block;\n  height: ", ";\n  width: ", ";\n  position: relative;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n\n  ::after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      ", ",\n      ", ",\n      ", "\n    );\n    animation: shimmer 2s infinite;\n    content: '';\n    box-sizing: border-box;\n  }\n"])), function (_a) {
     var height = _a.height;
     return (height ? height : '1.5em');
@@ -5216,12 +5230,6 @@ var DiscountTag = function (_a) {
 };
 var templateObject_1$1A, templateObject_2$10;
 
-//TODO Move this to types with ThemeBreakpoints
-var Viewports = {
-    mobile: 'mobile',
-    tablet: 'tablet',
-    desktop: 'desktop',
-};
 function getWindowDimensions() {
     if (typeof window === 'undefined')
         return { width: 0, height: 0 };
@@ -5234,19 +5242,22 @@ function getWindowDimensions() {
 var getViewport = function (breakpoints, width) {
     if (width <= breakpoints.mobile)
         return Viewports.mobile;
-    if (breakpoints.tablet && width <= breakpoints.tablet) {
+    if (width <= breakpoints.tablet)
         return Viewports.tablet;
-    }
-    return Viewports.desktop;
+    if (width <= breakpoints.desktop)
+        return Viewports.desktop;
+    return Viewports.desktopLarge;
 };
-var useWindowDimensions = function (breakpoints, shouldListenChanges) {
-    var _a = useState(function () {
+var useWindowDimensions = function (breakpoints, _a) {
+    if (breakpoints === void 0) { breakpoints = DEFAULT_BREAKPOINTS; }
+    var _b = _a === void 0 ? {} : _a, shouldListenChanges = _b.shouldListenChanges;
+    var _c = useState(function () {
         var dimension = getWindowDimensions();
         return {
             windowDimensions: dimension,
             viewport: getViewport(breakpoints, dimension.width),
         };
-    }), state = _a[0], setState = _a[1];
+    }), state = _c[0], setState = _c[1];
     useEffect(function () {
         function handleResize() {
             var newDimension = getWindowDimensions();
@@ -5268,7 +5279,7 @@ var useWindowDimensions = function (breakpoints, shouldListenChanges) {
     }, [shouldListenChanges]);
     var isMobile = state.viewport === Viewports.mobile;
     var isTablet = state.viewport === Viewports.tablet;
-    var isDesktop = state.viewport === Viewports.desktop;
+    var isDesktop = state.viewport === Viewports.desktop || state.viewport === Viewports.desktopLarge;
     return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
 };
 
@@ -5352,7 +5363,7 @@ function getTestId() {
 var PriceLabel = function (_a) {
     var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle"]);
     var theme = useTheme();
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     var priceCommonProps = {
         size: finalPriceStyled ? ComponentSize.Small : size,
         color: color || theme.colors.pallete.secondary.color,
@@ -5898,7 +5909,7 @@ var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObj
 var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n  font-size: 13px;\n"], ["\n  font-size: 13px;\n"])));
 var ClubPriceLabel = function (_a) {
     var clubPrice = _a.clubPrice;
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
 };
 var templateObject_1$1h, templateObject_2$T, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
@@ -6095,7 +6106,7 @@ var ProductItemMobile = function (_a) {
     } : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading;
     var theme = useTheme();
     var styles = getStylesBySize$9(size);
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     var space = useMemo(function () {
         var _a;
         return (_a = {},
@@ -6194,7 +6205,7 @@ var ProductItemTK = function (_a) {
     } : _h, _j = _a.clubPrice, clubPrice = _j === void 0 ? '' : _j, _k = _a.showClubPriceLabel, showClubPriceLabel = _k === void 0 ? false : _k;
     var theme = useTheme();
     var styles = getStylesBySize$8(size);
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     var space = useMemo(function () {
         var _a;
         return (_a = {},
@@ -13080,7 +13091,7 @@ var IconWrapper = newStyled.div(function (props) { return ({
 var IconsWithTitle = function (_a) {
     var _b;
     var iconName = _a.iconName, iconTitle = _a.iconTitle, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'MyAccount' : _c, _d = _a.withWrapper, withWrapper = _d === void 0 ? true : _d, backgroundColor = _a.backgroundColor, iconColor = _a.iconColor, _e = _a.iconSizeDesktop, iconSizeDesktop = _e === void 0 ? 4 : _e, _f = _a.iconSizeMobile, iconSizeMobile = _f === void 0 ? 3 : _f, _g = _a.iconTitlePosition, iconTitlePosition = _g === void 0 ? 'bottom' : _g, _h = _a.iconTitleStyle, iconTitleStyle = _h === void 0 ? '' : _h, _j = _a.iconStyle, iconStyle = _j === void 0 ? '' : _j, _k = _a.isTitleInnerHtml, isTitleInnerHtml = _k === void 0 ? false : _k;
-    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     // @ts-ignore
     var IconComponent = (_b = Icon[iconFolder][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
     if (IconComponent == null) {
@@ -13115,7 +13126,7 @@ var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __ma
 });
 var ImageCardWithDescription = function (_a) {
     var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
-    var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     return (jsxs$1(Container$B, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
 };
 var templateObject_1$P, templateObject_2$y, templateObject_3$s;
@@ -18985,7 +18996,7 @@ var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __
 var TextWithImage = function (_a) {
     var _b, _c, _d, _e;
     var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
-    var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
+    var isMobile = useWindowDimensions().isMobile;
     var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$8, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
                 ? titleStyle
                 : {