@shopgate/pwa-ui-shared 7.30.4-beta.1 → 7.31.0-alpha.2

package/FavoritesButton/index.js

@@ -1,121 +1,116 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useCallback, useRef, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
-import appConfig from '@shopgate/pwa-common/helpers/config';
+import appConfig, { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 import HeartIcon from "../icons/HeartIcon";
 import HeartOutlineIcon from "../icons/HeartOutlineIcon";
 import HeartPlusOutlineIcon from "../icons/HeartPlusOutlineIcon";
 import HeartPlus from "../icons/HeartPlusIcon";
 import Ripple from "../Ripple";
-import styles from "./style";
 import connect from "./connector";
+import { jsx as _jsx } from "react/jsx-runtime";
+const buttonProto = {
+  display: 'block',
+  position: 'relative',
+  background: themeColors.light,
+  borderRadius: '50%',
+  padding: 0,
+  fontSize: 20,
+  lineHeight: 1,
+  color: 'var(--color-secondary)',
+  outline: 0
+};
+const useStyles = makeStyles()({
+  buttonFlat: {
+    ...buttonProto
+  },
+  button: {
+    ...buttonProto,
+    boxShadow: themeShadows.buttons.elevated
+  },
+  ripple: {
+    padding: 6
+  }
+});
 
 /**
  * The favorites button component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element|null}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let FavoritesButton = /*#__PURE__*/function (_Component) {
-  /**
-   * Construct and init state
-   * @param {Object} props Component props
-   */
-  function FavoritesButton(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Callback for the moment when the ripple animation is done.
-     */
-    _this.onRippleComplete = () => {
-      _this.props.onRippleComplete(_this.props.active);
-    };
-    /**
-     * Adds or removes a given product ID from the favorite list.
-     * @param {Object} event The click event object.
-     */
-    _this.handleClick = event => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (_this.props.once && _this.clickedOnce) {
-        return;
-      }
-      _this.clickedOnce = true;
-      if (!_this.props.productId) {
-        return;
-      }
-
-      // When wishlist item quantity is active, items cannot be removed via the button
-      if (!_this.props.active || _this.props.wishlistItemQuantityEnabled) {
-        _this.props.addFavorites(_this.props.productId);
-      } else {
-        setTimeout(() => {
-          _this.props.removeFavorites(_this.props.productId, _this.props.removeWithRelatives);
-        }, _this.props.removeThrottle);
-      }
-    };
-    _this.clickedOnce = false;
-    return _this;
-  }
-  _inheritsLoose(FavoritesButton, _Component);
-  var _proto = FavoritesButton.prototype;
-  /**
-   * Returns text for aria-label.
-   * @returns {string}
-   */
-  _proto.getLabel = function getLabel() {
-    const {
-      __
-    } = this.context.i18n();
-    const lang = this.props.active ? 'favorites.remove' : 'favorites.add';
-    return __(lang);
-  };
-  /**
-   * Renders the heart icon as filled or outlined, depending on the favorite button being active.
-   * @returns {JSX}
-   */
-  _proto.renderIcon = function renderIcon() {
-    if (!this.props.loadWishlistOnAppStartEnabled || this.props.wishlistItemQuantityEnabled && !this.props.active) {
+const FavoritesButton = ({
+  active,
+  addFavorites,
+  'aria-hidden': ariaHidden,
+  className,
+  loadWishlistOnAppStartEnabled,
+  noShadow,
+  once,
+  onRippleComplete,
+  productId,
+  removeFavorites,
+  removeThrottle,
+  removeWithRelatives,
+  rippleClassName,
+  wishlistItemQuantityEnabled
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const clickedOnceRef = useRef(false);
+  const handleRippleComplete = useCallback(() => {
+    onRippleComplete(active);
+  }, [onRippleComplete, active]);
+  const handleClick = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (once && clickedOnceRef.current) {
+      return;
+    }
+    clickedOnceRef.current = true;
+    if (!productId) {
+      return;
+    }
+    if (!active || wishlistItemQuantityEnabled) {
+      addFavorites(productId);
+    } else {
+      setTimeout(() => {
+        removeFavorites(productId, removeWithRelatives);
+      }, removeThrottle);
+    }
+  }, [once, productId, active, wishlistItemQuantityEnabled, addFavorites, removeFavorites, removeWithRelatives, removeThrottle]);
+  const icon = useMemo(() => {
+    if (!loadWishlistOnAppStartEnabled || wishlistItemQuantityEnabled && !active) {
       return /*#__PURE__*/_jsx(HeartPlusOutlineIcon, {});
     }
-    if (this.props.wishlistItemQuantityEnabled && this.props.active) {
+    if (wishlistItemQuantityEnabled && active) {
       return /*#__PURE__*/_jsx(HeartPlus, {});
     }
-    if (this.props.active) {
+    if (active) {
       return /*#__PURE__*/_jsx(HeartIcon, {});
     }
     return /*#__PURE__*/_jsx(HeartOutlineIcon, {});
+  }, [loadWishlistOnAppStartEnabled, wishlistItemQuantityEnabled, active]);
+  if (!appConfig.hasFavorites) {
+    return null;
   }
-
-  /**
-   * Renders the component.
-   * @returns {JSX|null}
-   */;
-  _proto.render = function render() {
-    if (!appConfig.hasFavorites) {
-      return null;
-    }
-    const className = this.props.noShadow ? styles.buttonFlat : styles.button;
-    return /*#__PURE__*/_jsx("button", {
-      "aria-label": this.getLabel(),
-      "aria-hidden": this.props['aria-hidden'],
-      className: `ui-shared__favorites-button ${className} ${this.props.className}`,
-      onClick: this.handleClick,
-      "data-test-id": "favoriteButton",
-      type: "button",
-      children: /*#__PURE__*/_jsx(Ripple, {
-        className: `${styles.ripple} ${this.props.rippleClassName}`,
-        onComplete: this.onRippleComplete,
-        children: this.renderIcon()
-      })
-    });
-  };
-  return FavoritesButton;
-}(Component);
-/**
- * Context types definition.
- * @type {{i18n: shim}}
- */
-FavoritesButton.contextTypes = {
-  i18n: PropTypes.func
+  const buttonClass = noShadow ? classes.buttonFlat : classes.button;
+  const ariaLabel = i18n.text(active ? 'favorites.remove' : 'favorites.add');
+  return /*#__PURE__*/_jsx("button", {
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden,
+    className: cx('ui-shared__favorites-button', buttonClass, className),
+    onClick: handleClick,
+    "data-test-id": "favoriteButton",
+    type: "button",
+    children: /*#__PURE__*/_jsx(Ripple, {
+      className: cx(classes.ripple, rippleClassName),
+      onComplete: handleRippleComplete,
+      children: icon
+    })
+  });
 };
 FavoritesButton.defaultProps = {
   active: false,
@@ -133,4 +128,4 @@ FavoritesButton.defaultProps = {
   wishlistItemQuantityEnabled: false,
   loadWishlistOnAppStartEnabled: true
 };
-export default connect(FavoritesButton);
+export default connect(/*#__PURE__*/memo(FavoritesButton));

package/FavoritesButton/spec.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import { mount } from 'enzyme';
@@ -80,14 +81,16 @@ describe('<FavoritesButton />', () => {
       done();
     }, 0);
   });
-  it('should process ripple complete callback', () => {
+  it('should process ripple complete callback', async () => {
     const onRippleComplete = jest.fn();
     component = createComponent(mockedStateOnList, {
       productId: '1',
       active: true,
       onRippleComplete
     });
-    component.find('Ripple').instance().props.onComplete();
+    await act(async () => {
+      component.find('Ripple').invoke('onComplete')();
+    });
     component.update();
     expect(onRippleComplete).toHaveBeenCalled();
   });

package/Form/Builder/classes/ActionListener/index.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import { logger } from '@shopgate/pwa-core/helpers';
 import { ELEMENT_TYPE_NUMBER, ELEMENT_TYPE_COUNTRY, ELEMENT_TYPE_PROVINCE, ELEMENT_TYPE_CHECKBOX } from "../../elementTypes";
 import { ACTION_TYPE_UPDATE_PROVINCE_ELEMENT, ACTION_TYPE_SET_VISIBILITY, ACTION_TYPE_SET_VALUE, ACTION_TYPE_TRANSFORM, ACTION_SET_VALUE_FIXED, ACTION_SET_VALUE_COPY_FROM, ACTION_SET_VALUE_LENGTH_OF, ACTION_RULE_TYPE_NOT_IN, ACTION_RULE_TYPE_ONE_OF, ACTION_RULE_TYPE_BOOLEAN, ACTION_RULE_TYPE_REGEX, ACTION_RULE_DATA_TYPES, ACTION_RULES_CONCAT_METHOD_ALL, ACTION_RULES_CONCAT_METHOD_ANY, ACTION_RULES_CONCAT_METHOD_NONE } from "./constants";

package/Form/Checkbox/index.js

@@ -1,11 +1,28 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import UICheckbox from '@shopgate/pwa-ui-shared/Checkbox';
 import FormElement from '@shopgate/pwa-ui-shared/FormElement';
-import style from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    marginLeft: -2,
+    cursor: 'pointer',
+    '& svg': {
+      float: 'left'
+    }
+  },
+  label: {
+    lineHeight: 1.6
+  },
+  labelWrapper: {
+    marginLeft: theme.spacing(4)
+  },
+  checked: {
+    color: 'var(--color-primary)'
+  }
+}));
 
 /**
  * @typedef {Object} Props
@@ -27,57 +44,48 @@ import style from "./style";
  * @extends {React.Component<Props>}
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Checkbox = /*#__PURE__*/function (_PureComponent) {
-  function Checkbox() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Checkbox, _PureComponent);
-  var _proto = Checkbox.prototype;
-  /**
-   * @return {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      name,
-      label,
-      onChange,
-      className,
-      errorText,
-      translateErrorText,
-      showErrorText,
-      checkboxClassName,
-      ...restProps
-    } = this.props;
-    return /*#__PURE__*/_jsx(FormElement, {
-      className: classNames(className, style.root, 'checkbox', 'ui-shared__form__checkbox'),
-      htmlFor: name,
-      errorText: errorText,
-      translateErrorText: translateErrorText,
-      hasUnderline: false,
-      hasPlaceholder: false,
-      disabled: restProps.disabled,
-      showErrorText: showErrorText,
-      children: /*#__PURE__*/_jsx(UICheckbox, {
-        ...restProps,
-        className: checkboxClassName,
-        name: name,
-        onCheck: onChange,
-        checkedClassName: `${className} ${style.checked}`,
-        unCheckedClassName: className,
-        labelPosition: "right",
-        label: typeof label === 'string' ? /*#__PURE__*/_jsx("div", {
-          className: classNames(style.labelWrapper, 'label'),
-          children: /*#__PURE__*/_jsx(I18n.Text, {
-            className: style.label,
-            string: label
-          })
-        }) : label
-      })
-    });
-  };
-  return Checkbox;
-}(PureComponent);
+const Checkbox = ({
+  name,
+  label,
+  onChange,
+  className,
+  errorText,
+  translateErrorText,
+  showErrorText,
+  checkboxClassName,
+  ...restProps
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx(FormElement, {
+    className: cx(classes.root, 'checkbox', 'ui-shared__form__checkbox', className),
+    htmlFor: name,
+    errorText: errorText,
+    translateErrorText: translateErrorText,
+    hasUnderline: false,
+    hasPlaceholder: false,
+    disabled: restProps.disabled,
+    showErrorText: showErrorText,
+    children: /*#__PURE__*/_jsx(UICheckbox, {
+      ...restProps,
+      className: checkboxClassName,
+      name: name,
+      onCheck: onChange,
+      checkedClassName: `${className} ${classes.checked}`,
+      unCheckedClassName: className,
+      labelPosition: "right",
+      label: typeof label === 'string' ? /*#__PURE__*/_jsx("div", {
+        className: cx(classes.labelWrapper, 'label'),
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          className: classes.label,
+          string: label
+        })
+      }) : label
+    })
+  });
+};
 Checkbox.defaultProps = {
   className: '',
   checkboxClassName: undefined,

package/Form/InfoField/index.js

@@ -1,14 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@shopgate/pwa-common/components/Grid';
+import { makeStyles } from '@shopgate/engage/styles';
 import FormElement from "../../FormElement";
-import style from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  info: {
+    paddingTop: 24
+  },
+  element: {
+    marginTop: 16
+  }
+});
 
 /**
- * @param {Object} props .
+ * @param {Object} props Props.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InfoField = props => {
   const {
     className,
@@ -21,6 +29,10 @@ const InfoField = props => {
     hasValue,
     showErrorText
   } = props;
+  const {
+    classes,
+    cx
+  } = useStyles();
   return /*#__PURE__*/_jsx(FormElement, {
     className: className,
     label: label,
@@ -32,15 +44,15 @@ const InfoField = props => {
     children: /*#__PURE__*/_jsxs(Grid, {
       children: [leftElement && /*#__PURE__*/_jsx(Grid.Item, {
         grow: 0,
-        className: style.element,
+        className: classes.element,
         children: leftElement
       }), /*#__PURE__*/_jsx(Grid.Item, {
         grow: 1,
-        className: `${style.info} info-field`,
+        className: cx(classes.info, 'info-field'),
         children: children
       }), rightElement && /*#__PURE__*/_jsx(Grid.Item, {
         grow: 0,
-        className: style.element,
+        className: classes.element,
         children: rightElement
       })]
     })

package/Form/Password/index.js

@@ -1,62 +1,49 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useCallback } from 'react';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import ToggleIcon from "../../ToggleIcon";
 import VisibilityIcon from "../../icons/VisibilityIcon";
 import VisibilityOffIcon from "../../icons/VisibilityOffIcon";
 import TextField from "../TextField";
-import style from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()({
+  visOff: {
+    color: colors.shade4
+  }
+});
 
 /**
  * A component that provides a password field with visibility toggle.
+ * @param {Object} props Props (same as TextField).
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Password = /*#__PURE__*/function (_Component) {
-  /**
-   * Initializes the component.
-   * @param {Object} props The components props.
-   */
-  function Password(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * @param {boolean} isVisible The next isVisible state.
-     */
-    _this.togglePasswordVisibility = isVisible => {
-      _this.setState({
-        isVisible
-      });
-    };
-    _this.state = {
-      isVisible: false
-    };
-    return _this;
-  }
-  _inheritsLoose(Password, _Component);
-  var _proto = Password.prototype;
-  /**
-   * @return {*}
-   */
-  _proto.render = function render() {
-    const {
-      isVisible
-    } = this.state;
-    return /*#__PURE__*/_jsx(TextField, {
-      ...this.props,
-      className: `ui-shared__form__password ${this.props.className}`,
-      rightElement: /*#__PURE__*/_jsx(ToggleIcon, {
-        on: isVisible,
-        onIcon: /*#__PURE__*/_jsx(VisibilityIcon, {
-          size: 24
-        }),
-        offIcon: /*#__PURE__*/_jsx(VisibilityOffIcon, {
-          size: 24,
-          className: style.visOff
-        }),
-        toggleHandler: this.togglePasswordVisibility
+const Password = props => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [isVisible, setIsVisible] = useState(false);
+  const togglePasswordVisibility = useCallback(visible => {
+    setIsVisible(visible);
+  }, []);
+  return /*#__PURE__*/_jsx(TextField, {
+    ...props,
+    className: cx('ui-shared__form__password', props.className || ''),
+    rightElement: /*#__PURE__*/_jsx(ToggleIcon, {
+      on: isVisible,
+      onIcon: /*#__PURE__*/_jsx(VisibilityIcon, {
+        size: 24
+      }),
+      offIcon: /*#__PURE__*/_jsx(VisibilityOffIcon, {
+        size: 24,
+        className: classes.visOff
       }),
-      type: isVisible ? 'text' : 'password'
-    });
-  };
-  return Password;
-}(Component);
+      toggleHandler: togglePasswordVisibility
+    }),
+    type: isVisible ? 'text' : 'password'
+  });
+};
 export default Password;