@trafilea/afrodita-components 5.0.0-beta.24 → 5.0.0-beta.28
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 +45 -23
- package/build/index.esm.js.map +1 -1
- package/build/index.js +45 -23
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -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;
|
|
@@ -1403,8 +1404,8 @@ interface ProductItemProps {
|
|
|
1403
1404
|
price: Pick<PriceLabelProps, 'finalPrice' | 'originalPrice' | 'color'>;
|
|
1404
1405
|
rating: Pick<RatingProps, 'rating' | 'reviews'>;
|
|
1405
1406
|
tags?: {
|
|
1406
|
-
categoryTagText
|
|
1407
|
-
seasonOfferTagText
|
|
1407
|
+
categoryTagText?: string;
|
|
1408
|
+
seasonOfferTagText?: string;
|
|
1408
1409
|
};
|
|
1409
1410
|
alignName?: 'left' | 'center';
|
|
1410
1411
|
url?: string;
|
|
@@ -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
|
@@ -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), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), 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() {
|