@trafilea/afrodita-components 5.0.0-beta.25 → 5.0.0-beta.29
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 +8 -5
- package/build/index.esm.js +49 -27
- package/build/index.esm.js.map +1 -1
- package/build/index.js +49 -27
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -305,11 +305,11 @@ declare namespace SocialMedia {
|
|
|
305
305
|
};
|
|
306
306
|
}
|
|
307
307
|
|
|
308
|
-
declare const Search: ({ height, width, fill }: IconProps) => JSX.Element;
|
|
308
|
+
declare const Search: ({ height, width, fill, testId }: IconProps) => JSX.Element;
|
|
309
309
|
|
|
310
310
|
declare const User: ({ height, width, fill }: IconProps) => JSX.Element;
|
|
311
311
|
|
|
312
|
-
declare const ShoppingBag: ({ height, width, fill }: IconProps) => JSX.Element;
|
|
312
|
+
declare const ShoppingBag: ({ height, width, fill, testId }: IconProps) => JSX.Element;
|
|
313
313
|
|
|
314
314
|
declare const ShoppingCart: FC<IconProps>;
|
|
315
315
|
|
|
@@ -587,8 +587,9 @@ interface ProductGalleryProps {
|
|
|
587
587
|
BestSellerTagElement?: JSX.Element;
|
|
588
588
|
productImageDataTestId?: string;
|
|
589
589
|
previewListDataTestId?: string;
|
|
590
|
+
thumbnailPosition?: 'vertical' | 'horizontal';
|
|
590
591
|
}
|
|
591
|
-
declare const ProductGallery: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, previewListDataTestId, }: ProductGalleryProps) => JSX.Element;
|
|
592
|
+
declare const ProductGallery: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, previewListDataTestId, thumbnailPosition, }: ProductGalleryProps) => JSX.Element;
|
|
592
593
|
|
|
593
594
|
interface RatingProps {
|
|
594
595
|
rating: number;
|
|
@@ -1413,6 +1414,7 @@ interface ProductItemProps {
|
|
|
1413
1414
|
|
|
1414
1415
|
interface ProductItemSmallMobileProps extends ProductItemProps {
|
|
1415
1416
|
size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
|
|
1417
|
+
onClick?: () => void;
|
|
1416
1418
|
}
|
|
1417
1419
|
|
|
1418
1420
|
declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
|
|
@@ -1421,7 +1423,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
|
|
|
1421
1423
|
};
|
|
1422
1424
|
|
|
1423
1425
|
declare const Collection: {
|
|
1424
|
-
ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1426
|
+
ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, onClick, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1425
1427
|
withProductGrid: typeof withProductGrid;
|
|
1426
1428
|
};
|
|
1427
1429
|
|
|
@@ -1591,8 +1593,9 @@ interface SearchBarProps {
|
|
|
1591
1593
|
resultsPanelDataTestId?: string;
|
|
1592
1594
|
allResults?: number;
|
|
1593
1595
|
initialTerm?: string;
|
|
1596
|
+
shouldClear?: boolean;
|
|
1594
1597
|
}
|
|
1595
|
-
declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, }: SearchBarProps) => JSX.Element;
|
|
1598
|
+
declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, }: SearchBarProps) => JSX.Element;
|
|
1596
1599
|
|
|
1597
1600
|
interface ProductGalleryMobileProps {
|
|
1598
1601
|
images: ImageType[];
|
package/build/index.esm.js
CHANGED
|
@@ -308,8 +308,8 @@ var SocialMedia = /*#__PURE__*/Object.freeze({
|
|
|
308
308
|
});
|
|
309
309
|
|
|
310
310
|
var Search = function (_a) {
|
|
311
|
-
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
312
|
-
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 36, viewBoxY: 36, title: "Search" }, { children: jsx$1("path", { d: "M35.7522 32.9679L27.2166 24.4324C27.0549 24.2707 26.844 24.1863 26.619 24.1863H25.6909C27.9057 21.62 29.2486 18.2804 29.2486 14.6243C29.2486 6.54577 22.7028 0 14.6243 0C6.54577 0 0 6.54577 0 14.6243C0 22.7028 6.54577 29.2486 14.6243 29.2486C18.2804 29.2486 21.62 27.9057 24.1863 25.6909V26.619C24.1863 26.844 24.2777 27.0549 24.4324 27.2166L32.9679 35.7522C33.2984 36.0826 33.8327 36.0826 34.1632 35.7522L35.7522 34.1632C36.0826 33.8327 36.0826 33.2984 35.7522 32.9679ZM14.6243 25.8737C8.40896 25.8737 3.37484 20.8396 3.37484 14.6243C3.37484 8.40896 8.40896 3.37484 14.6243 3.37484C20.8396 3.37484 25.8737 8.40896 25.8737 14.6243C25.8737 20.8396 20.8396 25.8737 14.6243 25.8737Z", fill: fill }, void 0) }), void 0));
|
|
311
|
+
var height = _a.height, width = _a.width, fill = _a.fill, _b = _a.testId, testId = _b === void 0 ? 'search-icon' : _b;
|
|
312
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 36, viewBoxY: 36, title: "Search", testId: testId }, { children: jsx$1("path", { d: "M35.7522 32.9679L27.2166 24.4324C27.0549 24.2707 26.844 24.1863 26.619 24.1863H25.6909C27.9057 21.62 29.2486 18.2804 29.2486 14.6243C29.2486 6.54577 22.7028 0 14.6243 0C6.54577 0 0 6.54577 0 14.6243C0 22.7028 6.54577 29.2486 14.6243 29.2486C18.2804 29.2486 21.62 27.9057 24.1863 25.6909V26.619C24.1863 26.844 24.2777 27.0549 24.4324 27.2166L32.9679 35.7522C33.2984 36.0826 33.8327 36.0826 34.1632 35.7522L35.7522 34.1632C36.0826 33.8327 36.0826 33.2984 35.7522 32.9679ZM14.6243 25.8737C8.40896 25.8737 3.37484 20.8396 3.37484 14.6243C3.37484 8.40896 8.40896 3.37484 14.6243 3.37484C20.8396 3.37484 25.8737 8.40896 25.8737 14.6243C25.8737 20.8396 20.8396 25.8737 14.6243 25.8737Z", fill: fill }, void 0) }), void 0));
|
|
313
313
|
};
|
|
314
314
|
|
|
315
315
|
var User = function (_a) {
|
|
@@ -318,8 +318,8 @@ var User = function (_a) {
|
|
|
318
318
|
};
|
|
319
319
|
|
|
320
320
|
var ShoppingBag = function (_a) {
|
|
321
|
-
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
322
|
-
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 32, viewBoxY: 38, title: "Shopping bag" }, { children: jsx$1("path", { d: "M25.1429 9.5C25.1429 4.26164 21.0414 0 16 0C10.9586 0 6.85714 4.26164 6.85714 9.5H0V32.0625C0 35.3417 2.55836 38 5.71429 38H26.2857C29.4416 38 32 35.3417 32 32.0625V9.5H25.1429ZM16 3.5625C19.1509 3.5625 21.7143 6.22606 21.7143 9.5H10.2857C10.2857 6.22606 12.8491 3.5625 16 3.5625ZM28.5714 32.0625C28.5714 33.3721 27.5461 34.4375 26.2857 34.4375H5.71429C4.45393 34.4375 3.42857 33.3721 3.42857 32.0625V13.0625H6.85714V16.0312C6.85714 17.015 7.62464 17.8125 8.57143 17.8125C9.51822 17.8125 10.2857 17.015 10.2857 16.0312V13.0625H21.7143V16.0312C21.7143 17.015 22.4818 17.8125 23.4286 17.8125C24.3754 17.8125 25.1429 17.015 25.1429 16.0312V13.0625H28.5714V32.0625Z", fill: fill }, void 0) }), void 0));
|
|
321
|
+
var height = _a.height, width = _a.width, fill = _a.fill, _b = _a.testId, testId = _b === void 0 ? 'shopping-bag-icon' : _b;
|
|
322
|
+
return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 32, viewBoxY: 38, title: "Shopping bag", testId: testId }, { children: jsx$1("path", { d: "M25.1429 9.5C25.1429 4.26164 21.0414 0 16 0C10.9586 0 6.85714 4.26164 6.85714 9.5H0V32.0625C0 35.3417 2.55836 38 5.71429 38H26.2857C29.4416 38 32 35.3417 32 32.0625V9.5H25.1429ZM16 3.5625C19.1509 3.5625 21.7143 6.22606 21.7143 9.5H10.2857C10.2857 6.22606 12.8491 3.5625 16 3.5625ZM28.5714 32.0625C28.5714 33.3721 27.5461 34.4375 26.2857 34.4375H5.71429C4.45393 34.4375 3.42857 33.3721 3.42857 32.0625V13.0625H6.85714V16.0312C6.85714 17.015 7.62464 17.8125 8.57143 17.8125C9.51822 17.8125 10.2857 17.015 10.2857 16.0312V13.0625H21.7143V16.0312C21.7143 17.015 22.4818 17.8125 23.4286 17.8125C24.3754 17.8125 25.1429 17.015 25.1429 16.0312V13.0625H28.5714V32.0625Z", fill: fill }, void 0) }), void 0));
|
|
323
323
|
};
|
|
324
324
|
|
|
325
325
|
var ShoppingCart = function (_a) {
|
|
@@ -4065,8 +4065,8 @@ var SelectorSecondary = function (_a) {
|
|
|
4065
4065
|
var TAGS = {
|
|
4066
4066
|
hero1: newStyled.h1(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject([""], [""]))),
|
|
4067
4067
|
hero2: newStyled.h2(templateObject_2$H || (templateObject_2$H = __makeTemplateObject([""], [""]))),
|
|
4068
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4069
|
-
display1: newStyled.h1(templateObject_4$
|
|
4068
|
+
hero3: newStyled.h3(templateObject_3$t || (templateObject_3$t = __makeTemplateObject([""], [""]))),
|
|
4069
|
+
display1: newStyled.h1(templateObject_4$j || (templateObject_4$j = __makeTemplateObject([""], [""]))),
|
|
4070
4070
|
display2: newStyled.h2(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""]))),
|
|
4071
4071
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4072
4072
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
@@ -4186,7 +4186,7 @@ var DEFAULTS = {
|
|
|
4186
4186
|
size: 'regular',
|
|
4187
4187
|
},
|
|
4188
4188
|
};
|
|
4189
|
-
var templateObject_1$14, templateObject_2$H, templateObject_3$
|
|
4189
|
+
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;
|
|
4190
4190
|
|
|
4191
4191
|
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) {
|
|
4192
4192
|
var inline = _a.inline;
|
|
@@ -4255,12 +4255,12 @@ var templateObject_1$12;
|
|
|
4255
4255
|
|
|
4256
4256
|
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"])));
|
|
4257
4257
|
var P$3 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4258
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4258
|
+
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"])));
|
|
4259
4259
|
var SizeFitGuide = function (_a) {
|
|
4260
4260
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4261
4261
|
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));
|
|
4262
4262
|
};
|
|
4263
|
-
var templateObject_1$11, templateObject_2$G, templateObject_3$
|
|
4263
|
+
var templateObject_1$11, templateObject_2$G, templateObject_3$s;
|
|
4264
4264
|
|
|
4265
4265
|
var getStylesBySize$6 = function (size) {
|
|
4266
4266
|
switch (size) {
|
|
@@ -4376,7 +4376,7 @@ var Price = newStyled.h1(templateObject_2$E || (templateObject_2$E = __makeTempl
|
|
|
4376
4376
|
var margin = _a.margin, size = _a.size;
|
|
4377
4377
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4378
4378
|
});
|
|
4379
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4379
|
+
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) {
|
|
4380
4380
|
var _b;
|
|
4381
4381
|
var size = _a.size;
|
|
4382
4382
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4393,7 +4393,7 @@ var PriceLabel = function (_a) {
|
|
|
4393
4393
|
var theme = useTheme();
|
|
4394
4394
|
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));
|
|
4395
4395
|
};
|
|
4396
|
-
var templateObject_1$$, templateObject_2$E, templateObject_3$
|
|
4396
|
+
var templateObject_1$$, templateObject_2$E, templateObject_3$r;
|
|
4397
4397
|
|
|
4398
4398
|
var OneColorSelector = function (_a) {
|
|
4399
4399
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4434,8 +4434,8 @@ var OutOfStock = function (_a) {
|
|
|
4434
4434
|
|
|
4435
4435
|
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"])));
|
|
4436
4436
|
newStyled(lt.Label)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4437
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4438
|
-
var Span = newStyled.span(templateObject_4$
|
|
4437
|
+
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"])));
|
|
4438
|
+
var Span = newStyled.span(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4439
4439
|
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"])));
|
|
4440
4440
|
var Label$2 = function (_a) {
|
|
4441
4441
|
var label = _a.label, values = _a.values;
|
|
@@ -4454,7 +4454,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4454
4454
|
Option: Option,
|
|
4455
4455
|
OptionsContainer: OptionsContainer,
|
|
4456
4456
|
});
|
|
4457
|
-
var templateObject_1$_, templateObject_2$D, templateObject_3$
|
|
4457
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$q, templateObject_4$i, templateObject_5$b;
|
|
4458
4458
|
|
|
4459
4459
|
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) {
|
|
4460
4460
|
var borderColor = _a.borderColor;
|
|
@@ -4536,15 +4536,20 @@ var ImageSmallPreview = function (_a) {
|
|
|
4536
4536
|
};
|
|
4537
4537
|
var templateObject_1$Y;
|
|
4538
4538
|
|
|
4539
|
-
var
|
|
4540
|
-
var
|
|
4539
|
+
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"])));
|
|
4540
|
+
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"])));
|
|
4541
|
+
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) {
|
|
4542
|
+
var position = _a.position;
|
|
4543
|
+
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
4544
|
+
});
|
|
4545
|
+
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"])));
|
|
4541
4546
|
var ImagePreviewList = function (_a) {
|
|
4542
|
-
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick,
|
|
4543
|
-
return (jsx$1(Container$B, __assign$1({ "data-testid":
|
|
4547
|
+
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
|
|
4548
|
+
return (jsx$1(Container$B, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: images.map(function (item) {
|
|
4544
4549
|
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));
|
|
4545
4550
|
}) }), void 0));
|
|
4546
4551
|
};
|
|
4547
|
-
var templateObject_1$X, templateObject_2$B;
|
|
4552
|
+
var templateObject_1$X, templateObject_2$B, templateObject_3$p, templateObject_4$h;
|
|
4548
4553
|
|
|
4549
4554
|
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; });
|
|
4550
4555
|
var Image = function (_a) {
|
|
@@ -4564,15 +4569,15 @@ var templateObject_1$V, templateObject_2$A, templateObject_3$o;
|
|
|
4564
4569
|
|
|
4565
4570
|
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"])));
|
|
4566
4571
|
var ProductGallery = function (_a) {
|
|
4567
|
-
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
4572
|
+
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition;
|
|
4568
4573
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
4569
4574
|
var _b = useState(initialValue), selectedImage = _b[0], setSelectedImage = _b[1];
|
|
4570
4575
|
useEffect(function () {
|
|
4571
4576
|
setSelectedImage(initialValue);
|
|
4572
4577
|
}, [initialValue]);
|
|
4573
|
-
return (jsxs$1(Container$z, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage,
|
|
4578
|
+
return (jsxs$1(Container$z, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
4574
4579
|
setSelectedImage(value);
|
|
4575
|
-
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
4580
|
+
}, position: thumbnailPosition }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
|
|
4576
4581
|
};
|
|
4577
4582
|
var templateObject_1$U;
|
|
4578
4583
|
|
|
@@ -10249,7 +10254,7 @@ var getStylesBySize = function (size) {
|
|
|
10249
10254
|
}
|
|
10250
10255
|
};
|
|
10251
10256
|
var ProductItemMobile = function (_a) {
|
|
10252
|
-
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className;
|
|
10257
|
+
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, onClick = _a.onClick;
|
|
10253
10258
|
var theme = useTheme();
|
|
10254
10259
|
var styles = getStylesBySize(size);
|
|
10255
10260
|
var space = useMemo(function () {
|
|
@@ -10260,7 +10265,7 @@ var ProductItemMobile = function (_a) {
|
|
|
10260
10265
|
_a[ComponentSize.Small] = 2,
|
|
10261
10266
|
_a)[size];
|
|
10262
10267
|
}, [size]);
|
|
10263
|
-
return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __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, alt: image.alt, width: "100%", height: "100%" }, void 0), (tags === null || tags === void 0 ? void 0 : tags.seasonOfferTagText) && (jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0)), (tags === null || tags === void 0 ? void 0 : tags.categoryTagText) && (jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0))] }), void 0)) : (jsx(Image, { src: image.src, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10268
|
+
return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [tags ? (jsxs(ImageContainer, __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, alt: image.alt, width: "100%", height: "100%" }, void 0), (tags === null || tags === void 0 ? void 0 : tags.seasonOfferTagText) && (jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0)), (tags === null || tags === void 0 ? void 0 : tags.categoryTagText) && (jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0))] }), void 0)) : (jsx(Image, { src: image.src, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
10264
10269
|
};
|
|
10265
10270
|
var templateObject_1$n, templateObject_2$d;
|
|
10266
10271
|
|
|
@@ -10601,6 +10606,9 @@ var reducer = function (state, action) {
|
|
|
10601
10606
|
case 'UPDATE_TERM': {
|
|
10602
10607
|
return __assign$1(__assign$1({}, state), { term: action.payload.term });
|
|
10603
10608
|
}
|
|
10609
|
+
case 'CLEAR': {
|
|
10610
|
+
return __assign$1(__assign$1({}, state), { term: '', open: false });
|
|
10611
|
+
}
|
|
10604
10612
|
case 'TOGGLE_PANEL': {
|
|
10605
10613
|
return __assign$1(__assign$1({}, state), { open: action.payload.open });
|
|
10606
10614
|
}
|
|
@@ -10611,12 +10619,12 @@ var Container$8 = newStyled.div({
|
|
|
10611
10619
|
display: 'flex',
|
|
10612
10620
|
});
|
|
10613
10621
|
var SearchBar = function (_a) {
|
|
10614
|
-
var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, onClose = _a.onClose, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm;
|
|
10622
|
+
var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, onClose = _a.onClose, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm, _b = _a.shouldClear, shouldClear = _b === void 0 ? false : _b;
|
|
10615
10623
|
var theme = useTheme();
|
|
10616
10624
|
if (initialTerm) {
|
|
10617
10625
|
initialState$1.term = initialTerm;
|
|
10618
10626
|
}
|
|
10619
|
-
var
|
|
10627
|
+
var _c = useReducer(reducer, initialState$1), state = _c[0], dispatch = _c[1];
|
|
10620
10628
|
var ref = useRef(null);
|
|
10621
10629
|
var shouldDisplaySuggestion = function () {
|
|
10622
10630
|
return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
|
|
@@ -10634,7 +10642,21 @@ var SearchBar = function (_a) {
|
|
|
10634
10642
|
: shouldDisplaySuggestion()
|
|
10635
10643
|
? suggestions
|
|
10636
10644
|
: [];
|
|
10637
|
-
|
|
10645
|
+
var handleOnClose = function () {
|
|
10646
|
+
if (shouldClear) {
|
|
10647
|
+
dispatch({ type: 'CLEAR', payload: {} });
|
|
10648
|
+
}
|
|
10649
|
+
else {
|
|
10650
|
+
onClose();
|
|
10651
|
+
}
|
|
10652
|
+
};
|
|
10653
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$8, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products", onKeyDown: function (e) {
|
|
10654
|
+
if (e.key === 'Enter') {
|
|
10655
|
+
e.preventDefault();
|
|
10656
|
+
e.stopPropagation();
|
|
10657
|
+
onSearch(state.term);
|
|
10658
|
+
}
|
|
10659
|
+
} }, void 0), jsx$1(SearchControl, { open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
10638
10660
|
};
|
|
10639
10661
|
|
|
10640
10662
|
function _extends() {
|