@trafilea/afrodita-components 5.0.0-beta.227 → 5.0.0-beta.228

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.d.ts CHANGED
@@ -2884,7 +2884,7 @@ declare const formatPrice: (value: number, { locale, currency }?: {
2884
2884
  currency?: string | undefined;
2885
2885
  }) => string;
2886
2886
 
2887
- declare const getSrcSet: (imgLink: string, widthUnits?: number[]) => string;
2887
+ declare const getSrcSet: (imgLink: string, ...breakpoints: number[]) => string;
2888
2888
 
2889
2889
  declare const mediaQueries: facepaint.DynamicStyleFunction;
2890
2890
 
@@ -5562,12 +5562,15 @@ var formatPrice = function (value, _a) {
5562
5562
  }).format(valueToFormat);
5563
5563
  };
5564
5564
 
5565
- var DEFAULT_SHOGUN_RESOLUTIONS = [180, 360, 720, 900, 1080, 1200, 1920, 2048];
5566
- var getSrcSet = function (imgLink, widthUnits) {
5567
- if (widthUnits === void 0) { widthUnits = DEFAULT_SHOGUN_RESOLUTIONS; }
5568
- return Array.isArray(widthUnits)
5569
- ? widthUnits.reduce(function (prev, curr) { return "".concat(prev).concat(imgLink, " ").concat(curr, "w,"); }, '').slice(0, -1)
5570
- : DEFAULT_SHOGUN_RESOLUTIONS.reduce(function (prev, curr) { return "".concat(prev).concat(imgLink, " ").concat(curr, "w,"); }, '').slice(0, -1);
5565
+ var getSrcSet = function (imgLink) {
5566
+ var breakpoints = [];
5567
+ for (var _i = 1; _i < arguments.length; _i++) {
5568
+ breakpoints[_i - 1] = arguments[_i];
5569
+ }
5570
+ return breakpoints
5571
+ .reduce(function (prev, curr) { return "".concat(prev, " ").concat(imgLink, " ").concat(curr, "w,"); }, '')
5572
+ .slice(0, -1)
5573
+ .trimStart();
5571
5574
  };
5572
5575
 
5573
5576
  /* eslint-disable no-param-reassign */
@@ -5665,9 +5668,9 @@ var Image$2 = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __make
5665
5668
  : 'inherit';
5666
5669
  });
5667
5670
  var ImageSmallPreview = function (_a) {
5668
- var imageUrl = _a.imageUrl, _b = _a.imageSizes, imageSizes = _b === void 0 ? '65w' : _b, alt = _a.alt, _c = _a.selected, selected = _c === void 0 ? false : _c, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
5671
+ var imageUrl = _a.imageUrl, alt = _a.alt, _b = _a.selected, selected = _b === void 0 ? false : _b, className = _a.className, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
5669
5672
  var theme = useTheme();
5670
- return (jsx$1(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, [180, 360, 720]), sizes: imageSizes, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
5673
+ return (jsx$1(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
5671
5674
  };
5672
5675
  var templateObject_1$1h;
5673
5676
 
@@ -13126,9 +13129,6 @@ var BottomTagContainer$2 = newStyled.div(templateObject_6$7 || (templateObject_6
13126
13129
  return style.width;
13127
13130
  });
13128
13131
  var MarginTopContainer = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
13129
- var DEFAULT_SIZES = '(min-width: 1201px) 262w, (max-width: 1200px) and (min-width: 481px) 205w, (max-width: 480px) 45vw';
13130
- var DEFAULT_WIDTH_PROD_IMG = '205px';
13131
- var DEFAULT_HEIGHT_PROD_IMG = '274px';
13132
13132
  var ProductItemMobile = function (_a) {
13133
13133
  var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.colorPicker, colorPicker = _d === void 0 ? {
13134
13134
  display: false,
@@ -13157,7 +13157,7 @@ var ProductItemMobile = function (_a) {
13157
13157
  return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
13158
13158
  };
13159
13159
  var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
13160
- return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, [180, 360, 720, 900, 1080]), alt: image.alt, width: image.width || DEFAULT_WIDTH_PROD_IMG, height: image.height || DEFAULT_HEIGHT_PROD_IMG, sizes: image.sizes || DEFAULT_SIZES }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, [180, 360, 720, 900, 1080]), alt: image.alt, width: (styles === null || styles === void 0 ? void 0 : styles.width) || DEFAULT_WIDTH_PROD_IMG, height: (styles === null || styles === void 0 ? void 0 : styles.height) || DEFAULT_HEIGHT_PROD_IMG, sizes: image.sizes || DEFAULT_SIZES }, void 0)), !!imageHover && (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, [180, 360, 720, 900, 1080]), loading: "lazy", alt: imageHover.alt, sizes: imageHover.sizes || DEFAULT_SIZES, width: (styles === null || styles === void 0 ? void 0 : styles.width) || DEFAULT_WIDTH_PROD_IMG, height: (styles === null || styles === void 0 ? void 0 : styles.height) || DEFAULT_HEIGHT_PROD_IMG }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), showBNPL && (jsx(BuyNowPayLater, { installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0))] }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
13160
+ return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), showBNPL && (jsx(BuyNowPayLater, { installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0))] }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
13161
13161
  };
13162
13162
  var templateObject_1$E, templateObject_2$q, templateObject_3$n, templateObject_4$e, templateObject_5$8, templateObject_6$7, templateObject_7$5;
13163
13163