@trafilea/afrodita-components 4.1.0 → 4.2.0

package/build/index.js

@@ -3498,7 +3498,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',
@@ -3534,20 +3534,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 ? exports.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 ? exports.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,
@@ -3559,13 +3558,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,
@@ -3576,13 +3574,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),
@@ -3595,7 +3592,7 @@ var ButtonSecondaryOutline = function (_a) {
                 color: theme.colors.text.disabled,
                 border: 'none',
             },
-        }, text: text }, void 0));
+        } }), void 0));
 };
 
 function _extends() {
@@ -7544,14 +7541,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) {
@@ -12448,6 +12484,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 = React.useMemo(function () { return (__assign(__assign({}, styleProp), { width: size, height: size, verticalAlign: 'middle', display: type === 'block' ? 'block' : 'inline-block' })); }, [size, type, styleProp]);
+    return jsxRuntime.jsx("div", __assign({ style: style }, { children: children }), void 0);
+};
+
 var ImageContainer = newStyled.div(function (_a) {
     var width = _a.width, height = _a.height;
     return ({
@@ -12470,6 +12512,11 @@ var getStylesBySize = function (size) {
                 width: '9.813rem',
                 height: '13.125rem',
             };
+        case exports.ComponentSize.Large:
+            return {
+                width: '262px',
+                height: '350px',
+            };
         /* istanbul ignore next */
         default:
             return {
@@ -12482,7 +12529,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: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.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: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
+    var spaces = React.useMemo(function () {
+        var _a, _b;
+        var first = (_a = {},
+            _a[exports.ComponentSize.Large] = 20,
+            _a[exports.ComponentSize.Medium] = 12,
+            _a[exports.ComponentSize.Small] = 6,
+            _a)[size];
+        var second = (_b = {},
+            _b[exports.ComponentSize.Large] = 12,
+            _b[exports.ComponentSize.Medium] = 6,
+            _b[exports.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: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.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: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
 };
 var templateObject_1$j, templateObject_2$9;
 
@@ -13112,6 +13173,7 @@ exports.SizeFitGuide = SizeFitGuide;
 exports.SizeSelector = SizeSelector;
 exports.SizeTable = SizeTable;
 exports.SliderNavigation = SliderNavigation;
+exports.Spacing = Spacing;
 exports.Spinner = Spinner;
 exports.StarList = StarList;
 exports.Text = Text$5;
@@ -13121,7 +13183,16 @@ exports.ThemeVariables = ThemeVariables;
 exports.Timer = Timer;
 exports.Tooltip = Tooltip;
 exports.Totals = Totals;
+exports.decimalFormat = decimalFormat;
+exports.formatPrice = formatPrice;
+exports.isEmail = isEmail;
+exports.isEmpty = isEmpty;
+exports.isNumber = isNumber;
+exports.isPhoneNumber = isPhoneNumber;
+exports.isValidDate = isValidDate;
 exports.modalEvent = modalEvent;
+exports.simulateMouseClick = simulateMouseClick;
+exports.sliceString = sliceString;
 exports.useOnClickOutside = useOnClickOutside;
 exports.useTheme = useTheme;
 exports.useThemeAssets = useThemeAssets;