@trafilea/afrodita-components 4.1.0 → 4.2.0

package/build/index.d.ts

@@ -42,6 +42,7 @@ interface CTAProps {
     text: string;
     type?: ButtonType;
     className?: string;
+    inline?: boolean;
 }
 declare type DropdownOption<T> = {
     key: string;
@@ -446,11 +447,11 @@ declare const _default: (({ children, backgroundColor, widthAuto, border, flex }
     Body: ({ children }: CardBodyProps) => JSX.Element;
 };
 
-declare const ButtonPrimary: ({ text, onClick, disabled, wide, size, type }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ButtonPrimary: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const ButtonSecondary: ({ text, onClick, disabled, wide, size, className }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ButtonSecondary: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const ButtonSecondaryOutline: ({ text, onClick, disabled, wide, size, className, }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ButtonSecondaryOutline: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare type Value<T> = DropdownOption<T>;
 declare type OnChange<T> = (option: Value<T>) => void;
@@ -1121,6 +1122,7 @@ interface BaseCTAProps {
     size?: ComponentSize;
     text: string;
     type?: ButtonType;
+    inline?: boolean;
 }
 
 declare type ButtonProps = {
@@ -1341,7 +1343,7 @@ interface ProductItemProps {
 }
 
 interface ProductItemSmallMobileProps extends ProductItemProps {
-    size: ComponentSize.Medium | ComponentSize.Small;
+    size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
 }
 
 declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
@@ -1608,6 +1610,13 @@ declare type QuantityPickerProps = {
 } & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
 declare const QuantityPicker: ({ initialValue, maxValue, value, onChange, }: QuantityPickerProps) => JSX.Element;
 
+declare type SpacingProps = {
+    size: number;
+    type?: 'block' | 'inline';
+    style?: CSSProperties;
+};
+declare const Spacing: FC<SpacingProps>;
+
 declare const useOnClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void) => void;
 
 declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
@@ -1618,4 +1627,24 @@ declare const useWindowDimensions: (breakpoints: ThemeBreakpoints) => {
     };
 };
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, modalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+/**
+ * @returns number formatted with "," and 2 decimals as string
+ */
+declare const decimalFormat: (number: number) => string;
+
+declare const isEmpty: (value: string) => boolean;
+declare const isEmail: (value: string) => boolean;
+declare const isNumber: (value: string) => boolean;
+declare const isPhoneNumber: (value: string) => boolean;
+declare const isValidDate: (value: string) => boolean;
+
+declare const simulateMouseClick: (element: HTMLElement) => void;
+
+declare const sliceString: (str: string, maxLength: number) => string;
+
+declare const formatPrice: (value: number, { locale, currency }?: {
+    locale?: string | undefined;
+    currency?: string | undefined;
+}) => string;
+
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -3490,7 +3490,7 @@ function jsxs(type, props, key) {
 var BaseButton = function (_a) {
     var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline;
     return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: {
-            display: inline ? 'inherit-flex' : 'flex',
+            display: inline ? 'inline-flex' : 'flex',
             justifyContent: 'center',
             alignItems: 'center',
             padding: '0.75rem 2rem',
@@ -3526,20 +3526,19 @@ var getStylesBySize$9 = function (size, theme) {
     }
 };
 var BaseCTA = function (_a) {
-    var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, type = _a.type, className = _a.className;
+    var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
     var theme = useTheme();
     var stylesBySize = getStylesBySize$9(size, theme);
-    return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
+    return (jsx(BaseButton, __assign({}, props, { css: __assign(__assign({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
                 backgroundColor: theme.colors.background.disabled,
                 color: theme.colors.text.disabled,
                 cursor: 'not-allowed',
             } }) }, { children: text }), void 0));
 };
 
-var ButtonPrimary = function (_a) {
-    var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size, type = _a.type;
+var ButtonPrimary = function (props) {
     var theme = useTheme();
-    return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, css: {
+    return (jsx(BaseCTA, __assign({}, props, { css: {
             backgroundColor: theme.component.button.primary.active.backgroundColor,
             color: theme.component.button.primary.active.color,
             border: theme.component.button.border,
@@ -3551,13 +3550,12 @@ var ButtonPrimary = function (_a) {
                 backgroundColor: theme.colors.background.disabled,
                 color: theme.colors.text.disabled,
             },
-        }, text: text, type: type }, void 0));
+        } }), void 0));
 };
 
-var ButtonSecondary = function (_a) {
-    var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size, className = _a.className;
+var ButtonSecondary = function (props) {
     var theme = useTheme();
-    return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, css: {
+    return (jsx(BaseCTA, __assign({}, props, { css: {
             backgroundColor: theme.component.button.secondary.active.backgroundColor,
             color: theme.component.button.secondary.active.color,
             border: theme.component.button.border,
@@ -3568,13 +3566,12 @@ var ButtonSecondary = function (_a) {
                 backgroundColor: theme.colors.shades['50'].color,
                 color: theme.colors.shades['250'].color,
             },
-        }, text: text, className: className }, void 0));
+        } }), void 0));
 };
 
-var ButtonSecondaryOutline = function (_a) {
-    var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, wide = _a.wide, size = _a.size, className = _a.className;
+var ButtonSecondaryOutline = function (props) {
     var theme = useTheme();
-    return (jsx(BaseCTA, { onClick: onClick, disabled: disabled, wide: wide, size: size, className: className, css: {
+    return (jsx(BaseCTA, __assign({}, props, { css: {
             backgroundColor: theme.component.button.secondary.active.color,
             color: theme.component.button.secondary.active.backgroundColor,
             border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
@@ -3587,7 +3584,7 @@ var ButtonSecondaryOutline = function (_a) {
                 color: theme.colors.text.disabled,
                 border: 'none',
             },
-        }, text: text }, void 0));
+        } }), void 0));
 };
 
 function _extends() {
@@ -7536,14 +7533,53 @@ var InputLabel = function (_a) {
 };
 var templateObject_1$F, templateObject_2$q;
 
+/**
+ * @returns number formatted with "," and 2 decimals as string
+ */
+var decimalFormat = function (number) {
+    return number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
+};
+
 var isEmpty = function (value) {
     return value.length === 0;
+};
+var isEmail = function (value) {
+    return /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value);
+};
+var isNumber = function (value) {
+    return /^[0-9]*$/.test(value);
+};
+var isPhoneNumber = function (value) {
+    return /^\d{10}$/.test(value);
+};
+var isValidDate = function (value) {
+    return /^\d{4}-\d{2}-\d{2}$/.test(value);
+};
+
+var mouseClickEvents = ['mousedown', 'click', 'mouseup'];
+var simulateMouseClick = function (element) {
+    mouseClickEvents.forEach(function (mouseEventType) {
+        return element.dispatchEvent(new MouseEvent(mouseEventType, {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+            buttons: 1,
+        }));
+    });
 };
 
 var sliceString = function (str, maxLength) {
     return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
 };
 
+var formatPrice = function (value, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.locale, locale = _c === void 0 ? 'en-US' : _c, _d = _b.currency, currency = _d === void 0 ? 'USD' : _d;
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currency,
+    }).format(value);
+};
+
 var ErrorText = newStyled.h3(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
 var ErrorContainer = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 0.25rem;\n"])));
 var Error$1 = function (_a) {
@@ -12440,6 +12476,12 @@ var index = /*#__PURE__*/Object.freeze({
     CrossSellCheckbox: CrossSellCheckbox
 });
 
+var Spacing = function (_a) {
+    var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
+    var style = useMemo(function () { return (__assign(__assign({}, styleProp), { width: size, height: size, verticalAlign: 'middle', display: type === 'block' ? 'block' : 'inline-block' })); }, [size, type, styleProp]);
+    return jsx$1("div", __assign({ style: style }, { children: children }), void 0);
+};
+
 var ImageContainer = newStyled.div(function (_a) {
     var width = _a.width, height = _a.height;
     return ({
@@ -12462,6 +12504,11 @@ var getStylesBySize = function (size) {
                 width: '9.813rem',
                 height: '13.125rem',
             };
+        case ComponentSize.Large:
+            return {
+                width: '262px',
+                height: '350px',
+            };
         /* istanbul ignore next */
         default:
             return {
@@ -12474,7 +12521,21 @@ var ProductItemMobile = function (_a) {
     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;
     var theme = useTheme();
     var styles = getStylesBySize(size);
-    return (jsxs(Container$d, { children: [tags ? (jsxs(ImageContainer, __assign({ 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(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
+    var spaces = useMemo(function () {
+        var _a, _b;
+        var first = (_a = {},
+            _a[ComponentSize.Large] = 20,
+            _a[ComponentSize.Medium] = 12,
+            _a[ComponentSize.Small] = 6,
+            _a)[size];
+        var second = (_b = {},
+            _b[ComponentSize.Large] = 12,
+            _b[ComponentSize.Medium] = 6,
+            _b[ComponentSize.Small] = 4,
+            _b)[size];
+        return [first, second];
+    }, [size]);
+    return (jsxs(Container$d, { children: [tags ? (jsxs(ImageContainer, __assign({ 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: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
 };
 var templateObject_1$j, templateObject_2$9;
 
@@ -13052,5 +13113,5 @@ var QuantityPicker = function (_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, modalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map