@trafilea/afrodita-components 5.0.0-beta.86 → 5.0.0-beta.89

package/build/index.d.ts

@@ -1688,6 +1688,8 @@ interface PaginationProps {
 }
 declare const Pagination: ({ from, to, currentPage, onChange, underlineActive, boldActive, disabled, }: PaginationProps) => JSX.Element;
 
+declare const PaginatorBlog: ({ from, to, currentPage, onChange, }: Pick<PaginationProps, 'from' | 'to' | 'onChange' | 'currentPage'>) => JSX.Element;
+
 declare const Text: ({ variant, children, testId, ...allProps }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare type TextHeroProps = {
     variant: 'hero1' | 'hero2' | 'hero3';
@@ -1805,8 +1807,9 @@ interface SearchBarProps {
     allResults?: number;
     initialTerm?: string;
     shouldClear?: boolean;
+    isBlogSearchBar?: boolean;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, isBlogSearchBar, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];
@@ -2055,4 +2058,4 @@ declare const formatPrice: (value: number, { locale, currency }?: {
     currency?: string | undefined;
 }) => string;
 
-export { Accordion, AccordionOptions, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelHomeColPDP, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AccordionOptions, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelHomeColPDP, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -4664,6 +4664,9 @@ var PriceLabelHomeColPDP = function (_a) {
     var _b;
     var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
     var theme = useTheme();
+    var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
+    var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
+    var isDiscount = discount && isDiffFinalAndOriginalPrice;
     var finalPriceArray = typeof finalPrice === 'string' && finalPrice.includes('.') && finalPrice.includes('$')
         ? finalPrice.split('$')[1].split('.')
         : ['', ''];
@@ -4673,7 +4676,7 @@ var PriceLabelHomeColPDP = function (_a) {
         weight: 700,
     };
     var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
-    return (jsxs$1(Container$H, { children: [originalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split('$')[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), discount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0) }), void 0))] }, void 0));
+    return (jsxs$1(Container$H, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split('$')[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
 };
 
 var OneColorSelector = function (_a) {
@@ -12325,7 +12328,7 @@ var IconContainer$1 = newStyled.div(templateObject_2$c || (templateObject_2$c =
 var PageNumbersContainer = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  display: flex;\n  ", ";\n"], ["\n  display: flex;\n  ", ";\n"])), mediaQueries({
     margin: ['0 0.75rem', '0 1.25rem'],
 }));
-var PageNumber = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n"])), function (_a) {
+var PageNumber = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n  background: ", ";\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  text-align: center;\n  cursor: pointer;\n  border-bottom: ", ";\n  ", ";\n  background: ", ";\n"])), function (_a) {
     var bold = _a.bold;
     return (bold ? '700' : '500');
 }, function (_a) {
@@ -12338,7 +12341,10 @@ var PageNumber = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __ma
     fontSize: ['1rem', '1.25rem'],
     lineHeight: ['1.5rem', '1.75rem'],
     width: ['1.25rem', '1.875rem'],
-}));
+}), function (_a) {
+    var background = _a.background;
+    return background || 'unset';
+});
 var templateObject_1$o, templateObject_2$c, templateObject_3$c, templateObject_4$7;
 
 var Pagination = function (_a) {
@@ -12355,6 +12361,22 @@ var Pagination = function (_a) {
     return (jsxs$1(Container$g, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
 };
 
+var PaginatorBlog = function (_a) {
+    var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange;
+    var theme = useTheme();
+    var _c = React__default.useState(currentPage), page = _c[0], setPage = _c[1];
+    var handlePageChange = function (page) {
+        if (page < from || page > to) {
+            return;
+        }
+        setPage(page);
+        onChange(page);
+    };
+    return (jsxs$1(Container$g, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
+                        ? theme.colors.shades['white'].color
+                        : theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
+};
+
 var Container$f = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: auto;\n  padding: 0.688rem 0rem;\n  ", ",\n"])), mediaQueries({
     borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
 }));
@@ -12509,10 +12531,13 @@ var SearchIconContainer = newStyled.div({
     alignSelf: 'center',
 });
 var SearchControl = function (_a) {
-    var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose;
+    var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
     var theme = useTheme();
     var isMobile = useWindowDimensions(theme.mediaQueries).isMobile;
-    if (isMobile) {
+    if (showSearchIcon) {
+        return (jsx(SearchIconContainer, { children: jsx(Icon.Navigation.Search, { height: 1.25, width: 1.25 }, void 0) }, void 0));
+    }
+    else if (isMobile) {
         return open ? (jsx(ClearButton, { onClick: onClose }, void 0)) : (jsx(SearchIconContainer, { children: jsx(Icon.Navigation.Search, { height: 1.25, width: 1.25 }, void 0) }, void 0));
     }
     else {
@@ -12546,12 +12571,12 @@ var Container$c = newStyled.div({
     display: 'flex',
 });
 var SearchBar = function (_a) {
-    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;
+    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, _c = _a.isBlogSearchBar, isBlogSearchBar = _c === void 0 ? false : _c;
     var theme = useTheme();
     if (initialTerm) {
         initialState$1.term = initialTerm;
     }
-    var _c = useReducer(reducer, initialState$1), state = _c[0], dispatch = _c[1];
+    var _d = useReducer(reducer, initialState$1), state = _d[0], dispatch = _d[1];
     var ref = useRef(null);
     var shouldDisplaySuggestion = function () {
         return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
@@ -12583,7 +12608,7 @@ var SearchBar = function (_a) {
                                 e.stopPropagation();
                                 onSearch(state.term);
                             }
-                        } }, 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));
+                        } }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, 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));
 };
 
 function _extends() {
@@ -17272,5 +17297,5 @@ var AccordionOptions = function (_a) {
 };
 var templateObject_1;
 
-export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelHomeColPDP, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelHomeColPDP, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map