@trafilea/afrodita-components 5.0.0-beta.27 → 5.0.0-beta.28

package/build/index.d.ts

@@ -587,8 +587,9 @@ interface ProductGalleryProps {
     BestSellerTagElement?: JSX.Element;
     productImageDataTestId?: string;
     previewListDataTestId?: string;
+    thumbnailPosition?: 'vertical' | 'horizontal';
 }
-declare const ProductGallery: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, previewListDataTestId, }: ProductGalleryProps) => JSX.Element;
+declare const ProductGallery: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, previewListDataTestId, thumbnailPosition, }: ProductGalleryProps) => JSX.Element;
 
 interface RatingProps {
     rating: number;

package/build/index.esm.js

@@ -4065,8 +4065,8 @@ var SelectorSecondary = function (_a) {
 var TAGS = {
     hero1: newStyled.h1(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject([""], [""]))),
     hero2: newStyled.h2(templateObject_2$H || (templateObject_2$H = __makeTemplateObject([""], [""]))),
-    hero3: newStyled.h3(templateObject_3$s || (templateObject_3$s = __makeTemplateObject([""], [""]))),
-    display1: newStyled.h1(templateObject_4$i || (templateObject_4$i = __makeTemplateObject([""], [""]))),
+    hero3: newStyled.h3(templateObject_3$t || (templateObject_3$t = __makeTemplateObject([""], [""]))),
+    display1: newStyled.h1(templateObject_4$j || (templateObject_4$j = __makeTemplateObject([""], [""]))),
     display2: newStyled.h2(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""]))),
     heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
     heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
@@ -4186,7 +4186,7 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$14, templateObject_2$H, templateObject_3$s, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1$14, templateObject_2$H, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
 
 var ButtonsContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin: ", ";\n"])), function (_a) {
     var inline = _a.inline;
@@ -4255,12 +4255,12 @@ var templateObject_1$12;
 
 var Container$F = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.88rem;\n"])));
 var P$3 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-var PercentageSpan = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"])));
+var PercentageSpan = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"], ["\n  font-weight: 700;\n  text-decoration-line: underline;\n  cursor: pointer;\n"])));
 var SizeFitGuide = function (_a) {
     var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
     return (jsxs$1(Container$F, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
 };
-var templateObject_1$11, templateObject_2$G, templateObject_3$r;
+var templateObject_1$11, templateObject_2$G, templateObject_3$s;
 
 var getStylesBySize$6 = function (size) {
     switch (size) {
@@ -4376,7 +4376,7 @@ var Price = newStyled.h1(templateObject_2$E || (templateObject_2$E = __makeTempl
     var margin = _a.margin, size = _a.size;
     return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
 });
-var TagContainer = newStyled.h1(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
+var TagContainer = newStyled.h1(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  margin: ", ";\n  display: flex;\n  align-items: center;\n"])), function (_a) {
     var _b;
     var size = _a.size;
     return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
@@ -4393,7 +4393,7 @@ var PriceLabel = function (_a) {
     var theme = useTheme();
     return (jsxs$1(Container$D, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": getTestId(testId, 'price') }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
 };
-var templateObject_1$$, templateObject_2$E, templateObject_3$q;
+var templateObject_1$$, templateObject_2$E, templateObject_3$r;
 
 var OneColorSelector = function (_a) {
     var color = _a.color, selected = _a.selected, testId = _a.testId;
@@ -4434,8 +4434,8 @@ var OutOfStock = function (_a) {
 
 var CustomRadioGroup = newStyled(lt)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 newStyled(lt.Label)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
-var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
-var Span = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
+var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  margin-right: 8px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var Span = newStyled.span(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
 var OptionsContainer = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  display: flex;\n  margin-top: 0.63rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  margin-top: 0.63rem;\n  flex-wrap: wrap;\n"])));
 var Label$2 = function (_a) {
     var label = _a.label, values = _a.values;
@@ -4454,7 +4454,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
     Option: Option,
     OptionsContainer: OptionsContainer,
 });
-var templateObject_1$_, templateObject_2$D, templateObject_3$p, templateObject_4$h, templateObject_5$b;
+var templateObject_1$_, templateObject_2$D, templateObject_3$q, templateObject_4$i, templateObject_5$b;
 
 var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"], ["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  border: 0.081rem solid ", ";\n  box-sizing: border-box;\n  padding: 0.156rem;\n  cursor: pointer;\n"])), function (_a) {
     var borderColor = _a.borderColor;
@@ -4536,15 +4536,20 @@ var ImageSmallPreview = function (_a) {
 };
 var templateObject_1$Y;
 
-var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  grid-row-gap: 20px;\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  overflow: auto;\n  align-items: flex-start;\n"], ["\n  grid-row-gap: 20px;\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  overflow: auto;\n  align-items: flex-start;\n"])));
-var Button$4 = newStyled.button(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
+var horizontalStyles = css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n"], ["\n  grid-row: 2;\n  grid-auto-flow: column;\n  grid-column-gap: 6px;\n  margin-top: 20px;\n"])));
+var verticalStyles = css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  grid-row-gap: 20px;\n  overflow: auto;\n"], ["\n  grid-row-gap: 20px;\n  overflow: auto;\n"])));
+var Container$B = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n"], ["\n  display: grid;\n  max-height: 45rem;\n  height: min-content;\n  align-items: flex-start;\n  ", "\n"])), function (_a) {
+    var position = _a.position;
+    return (position == 'horizontal' ? horizontalStyles : verticalStyles);
+});
+var Button$4 = newStyled.button(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
 var ImagePreviewList = function (_a) {
-    var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
-    return (jsx$1(Container$B, __assign$1({ "data-testid": testId }, { children: images.map(function (item) {
+    var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
+    return (jsx$1(Container$B, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: images.map(function (item) {
             return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
         }) }), void 0));
 };
-var templateObject_1$X, templateObject_2$B;
+var templateObject_1$X, templateObject_2$B, templateObject_3$p, templateObject_4$h;
 
 var Img = newStyled.img(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
 var Image = function (_a) {
@@ -4564,15 +4569,15 @@ var templateObject_1$V, templateObject_2$A, templateObject_3$o;
 
 var Container$z = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: auto auto;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: auto auto;\n  grid-column-gap: 20px;\n  max-height: 45rem;\n  width: fit-content;\n"])));
 var ProductGallery = function (_a) {
-    var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
+    var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
     var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
     var _b = useState(initialValue), selectedImage = _b[0], setSelectedImage = _b[1];
     useEffect(function () {
         setSelectedImage(initialValue);
     }, [initialValue]);
-    return (jsxs$1(Container$z, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
+    return (jsxs$1(Container$z, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
                     setSelectedImage(value);
-                } }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
+                }, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
 };
 var templateObject_1$U;