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

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, ...breakpoints: number[]) => string;
2887
+ declare const getSrcSet: (imgLink: string, widthUnits?: number[]) => string;
2888
2888
 
2889
2889
  declare const mediaQueries: facepaint.DynamicStyleFunction;
2890
2890
 
@@ -4890,9 +4890,9 @@ var SelectorSecondary = function (_a) {
4890
4890
  fontWeight: theme.component.selector.hover.fontWeight,
4891
4891
  }
4892
4892
  : {
4893
- background: theme.component.selector.default.background,
4894
- color: theme.component.selector.default.color,
4895
- border: theme.component.selector.default.border,
4893
+ background: "".concat(theme.component.selector.default.background, " !important"),
4894
+ color: "".concat(theme.component.selector.default.color, " !important"),
4895
+ border: "".concat(theme.component.selector.default.border, " !important"),
4896
4896
  fontWeight: theme.component.selector.default.fontWeight,
4897
4897
  };
4898
4898
  if (showNoStockStyles) {
@@ -5562,15 +5562,12 @@ var formatPrice = function (value, _a) {
5562
5562
  }).format(valueToFormat);
5563
5563
  };
5564
5564
 
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();
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);
5574
5571
  };
5575
5572
 
5576
5573
  /* eslint-disable no-param-reassign */
@@ -5668,9 +5665,9 @@ var Image$2 = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __make
5668
5665
  : 'inherit';
5669
5666
  });
5670
5667
  var ImageSmallPreview = function (_a) {
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;
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;
5672
5669
  var theme = useTheme();
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));
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));
5674
5671
  };
5675
5672
  var templateObject_1$1h;
5676
5673
 
@@ -13129,6 +13126,9 @@ var BottomTagContainer$2 = newStyled.div(templateObject_6$7 || (templateObject_6
13129
13126
  return style.width;
13130
13127
  });
13131
13128
  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, 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));
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));
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