@trafilea/afrodita-components 5.0.0-beta.238 → 5.0.0-beta.239
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 +4 -3
- package/build/index.esm.js +10 -6
- package/build/index.esm.js.map +1 -1
- package/build/index.js +10 -6
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -2285,8 +2285,8 @@ interface ProductItemSmallMobileProps extends ProductItemProps {
|
|
|
2285
2285
|
position: string;
|
|
2286
2286
|
component: JSX.Element | JSX.Element[] | undefined;
|
|
2287
2287
|
};
|
|
2288
|
-
showBNPL?: boolean;
|
|
2289
2288
|
isBNPL?: {
|
|
2289
|
+
displayBNPL: boolean;
|
|
2290
2290
|
installments: number;
|
|
2291
2291
|
installmentPrice: string;
|
|
2292
2292
|
iconFolder?: string;
|
|
@@ -2307,7 +2307,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
|
|
|
2307
2307
|
};
|
|
2308
2308
|
|
|
2309
2309
|
declare const Collection: {
|
|
2310
|
-
ProductItemMobile: ({ title, image, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, priceAtBottom, priceLoading, colorPicker,
|
|
2310
|
+
ProductItemMobile: ({ title, image, imageHover, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, priceAtBottom, priceLoading, colorPicker, isBNPL, hasStrength, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
2311
2311
|
withProductGrid: typeof withProductGrid;
|
|
2312
2312
|
};
|
|
2313
2313
|
|
|
@@ -2864,6 +2864,7 @@ interface HurryUpProps {
|
|
|
2864
2864
|
declare const HurryUp: ({ hurryUpText, backgroundColor, iconSize, textPosition, showTimer, }: HurryUpProps) => JSX.Element;
|
|
2865
2865
|
|
|
2866
2866
|
interface BuyNowPayLaterProps {
|
|
2867
|
+
displayBNPL: boolean;
|
|
2867
2868
|
installments: number;
|
|
2868
2869
|
installmentPrice: string;
|
|
2869
2870
|
iconFolder?: string;
|
|
@@ -2872,7 +2873,7 @@ interface BuyNowPayLaterProps {
|
|
|
2872
2873
|
iconColor?: string;
|
|
2873
2874
|
fontSize?: string;
|
|
2874
2875
|
}
|
|
2875
|
-
declare const BuyNowPayLater: ({ installments, installmentPrice, iconFolder, iconName, showLogo, iconColor, fontSize, }: BuyNowPayLaterProps) => JSX.Element | null;
|
|
2876
|
+
declare const BuyNowPayLater: ({ displayBNPL, installments, installmentPrice, iconFolder, iconName, showLogo, iconColor, fontSize, }: BuyNowPayLaterProps) => JSX.Element | null;
|
|
2876
2877
|
|
|
2877
2878
|
interface StrengthBarProps {
|
|
2878
2879
|
barsFilled?: number;
|
package/build/index.esm.js
CHANGED
|
@@ -12419,7 +12419,7 @@ var Container$M = newStyled.div(templateObject_2$M || (templateObject_2$M = __ma
|
|
|
12419
12419
|
var Minimalistic = function (_a) {
|
|
12420
12420
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
12421
12421
|
var theme = useTheme();
|
|
12422
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem
|
|
12422
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12423
12423
|
};
|
|
12424
12424
|
var templateObject_1$15, templateObject_2$M;
|
|
12425
12425
|
|
|
@@ -13145,18 +13145,21 @@ var SkeletonBox = function (_a) {
|
|
|
13145
13145
|
};
|
|
13146
13146
|
var templateObject_1$I;
|
|
13147
13147
|
|
|
13148
|
-
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display:
|
|
13148
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
13149
|
+
var displayBNPL = _a.displayBNPL;
|
|
13150
|
+
return (displayBNPL ? 'flex' : 'none');
|
|
13151
|
+
});
|
|
13149
13152
|
var IconWrapper$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n"])));
|
|
13150
13153
|
var BuyNowPayLater = function (_a) {
|
|
13151
13154
|
var _b;
|
|
13152
|
-
var installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
13155
|
+
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
13153
13156
|
// @ts-ignore
|
|
13154
13157
|
var IconComponent = (_b = Icon === null || Icon === void 0 ? void 0 : Icon[iconFolder]) === null || _b === void 0 ? void 0 : _b[iconName];
|
|
13155
13158
|
if (!IconComponent) {
|
|
13156
13159
|
console.error('Icon', iconName, 'not found');
|
|
13157
13160
|
return null;
|
|
13158
13161
|
}
|
|
13159
|
-
return (jsx$1(Container$y, { children: jsxs$1(Text$6, __assign$1({ variant: "body", style: { fontSize: fontSize }, testId: "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$6, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }, void 0));
|
|
13162
|
+
return (jsx$1(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(Text$6, __assign$1({ variant: "body", style: { fontSize: fontSize }, testId: "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$6, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
13160
13163
|
};
|
|
13161
13164
|
var templateObject_1$H, templateObject_2$t;
|
|
13162
13165
|
|
|
@@ -13227,7 +13230,8 @@ var ProductItemMobile = function (_a) {
|
|
|
13227
13230
|
display: false,
|
|
13228
13231
|
position: 'top',
|
|
13229
13232
|
component: undefined,
|
|
13230
|
-
} : _d,
|
|
13233
|
+
} : _d, _e = _a.isBNPL, isBNPL = _e === void 0 ? {
|
|
13234
|
+
displayBNPL: false,
|
|
13231
13235
|
installments: 4,
|
|
13232
13236
|
installmentPrice: '',
|
|
13233
13237
|
iconFolder: 'PDP',
|
|
@@ -13253,7 +13257,7 @@ var ProductItemMobile = function (_a) {
|
|
|
13253
13257
|
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));
|
|
13254
13258
|
};
|
|
13255
13259
|
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)); };
|
|
13256
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$w, __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$w, __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), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, 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),
|
|
13260
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$w, __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$w, __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), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, 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), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, 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));
|
|
13257
13261
|
};
|
|
13258
13262
|
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
13259
13263
|
|