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

package/ActionButton/index.js

@@ -1,80 +1,78 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles, cx } from '@shopgate/engage/styles';
 import IndicatorCircle from "../IndicatorCircle";
 import RippleButton from "../RippleButton";
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  withGap: {
+    textAlign: 'center',
+    margin: theme.spacing(1, 0)
+  },
+  noGap: {
+    textAlign: 'center'
+  },
+  containerCircle: {
+    textAlign: 'center',
+    margin: `${theme.spacing(1) + 5}px 0`
+  }
+}));
+const CLICK_DELAY = 300;
 
 /**
  * The action button component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let ActionButton = /*#__PURE__*/function (_Component) {
-  function ActionButton(...args) {
-    var _this;
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    /**
-     * The click handler
-     * @param {Object} event The event object for the click handler
-     */
-    _this.handleClick = event => {
-      const {
-        clickDelay
-      } = _this.constructor;
-      if (_this.props.disableClickDelay) {
-        _this.props.onClick(event);
-        return;
-      }
-      setTimeout(() => {
-        _this.props.onClick(event);
-      }, clickDelay);
-    };
-    return _this;
-  }
-  _inheritsLoose(ActionButton, _Component);
-  var _proto = ActionButton.prototype;
-  /**
-   * The render function.
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const containerClass = this.props.noGap ? styles.noGapContainer : styles.container;
-    if (this.props.loading) {
-      return /*#__PURE__*/_jsx("div", {
-        className: styles.containerCircle,
-        children: /*#__PURE__*/_jsx(IndicatorCircle, {})
-      });
+const ActionButton = ({
+  children,
+  className,
+  disabled,
+  flat,
+  type,
+  onClick,
+  disableClickDelay,
+  loading,
+  noGap,
+  testId,
+  ...rest
+}) => {
+  const {
+    classes
+  } = useStyles();
+  const handleClick = useCallback(event => {
+    if (disableClickDelay) {
+      onClick(event);
+      return;
     }
+    setTimeout(() => {
+      onClick(event);
+    }, CLICK_DELAY);
+  }, [disableClickDelay, onClick]);
+  const buttonProps = {
+    className,
+    disabled,
+    flat,
+    type
+  };
+  if (loading) {
     return /*#__PURE__*/_jsx("div", {
-      className: `ui-shared__action-button ${containerClass}`,
-      "data-test-id": this.props.testId,
-      children: /*#__PURE__*/_jsx(RippleButton, {
-        ...this.buttonProps,
-        onClick: this.handleClick,
-        children: this.props.children
-      })
+      className: classes.containerCircle,
+      children: /*#__PURE__*/_jsx(IndicatorCircle, {})
     });
-  };
-  return _createClass(ActionButton, [{
-    key: "buttonProps",
-    get:
-    /**
-     * Getter for the calculated button props.
-     * @returns {Object}
-     */
-    function () {
-      const buttonProps = {
-        className: this.props.className,
-        disabled: this.props.disabled,
-        flat: this.props.flat,
-        type: this.props.type
-      };
-      return buttonProps;
-    }
-  }]);
-}(Component);
-ActionButton.clickDelay = 300;
+  }
+  const containerClass = noGap ? classes.noGap : classes.withGap;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx('ui-shared__action-button', containerClass),
+    "data-test-id": testId,
+    children: /*#__PURE__*/_jsx(RippleButton, {
+      ...rest,
+      ...buttonProps,
+      onClick: handleClick,
+      children: children
+    })
+  });
+};
 ActionButton.defaultProps = {
   ...RippleButton.defaultProps,
   loading: false,
@@ -84,4 +82,5 @@ ActionButton.defaultProps = {
   testId: null,
   disableClickDelay: false
 };
+ActionButton.clickDelay = CLICK_DELAY;
 export default ActionButton;

package/AddToCartButton/index.js

@@ -1,212 +1,244 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
+import spring from 'css-spring';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { withForwardedRef } from '@shopgate/engage/core';
+import { keyframes, makeStyles } from '@shopgate/engage/styles';
 import CartPlusIcon from "../icons/CartPlusIcon";
 import TickIcon from "../icons/TickIcon";
 import IndicatorCircle from "../IndicatorCircle";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_BUTTON_SIZE = 40;
+const DEFAULT_ICON_SIZE = 20;
+const springOptions = {
+  stiffness: 381.47,
+  damping: 15
+};
+const springFromTopKeyframes = keyframes(spring({
+  transform: 'translate3d(0, 300%, 0)'
+}, {
+  transform: 'translate3d(0, -50%, 0)'
+}, springOptions));
+const springFromBottomKeyframes = keyframes(spring({
+  transform: 'translate3d(0, -300%, 0)'
+}, {
+  transform: 'translate3d(0, -50%, 0)'
+}, springOptions));
+const springToTopKeyframes = keyframes(spring({
+  transform: 'translate3d(0, -50%, 0)'
+}, {
+  transform: 'translate3d(0, 300%, 0)'
+}, springOptions));
+const springToBottomKeyframes = keyframes(spring({
+  transform: 'translate3d(0, -50%, 0)'
+}, {
+  transform: 'translate3d(0, -300%, 0)'
+}, springOptions));
+const useStyles = makeStyles()({
+  springFromBottom: {
+    animation: `${springFromBottomKeyframes} 600ms`
+  },
+  springFromTop: {
+    animation: `${springFromTopKeyframes} 600ms`
+  },
+  springToTop: {
+    animation: `${springToTopKeyframes} 600ms`
+  },
+  springToBottom: {
+    animation: `${springToBottomKeyframes} 600ms`
+  },
+  icon: {
+    transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+    opacity: 1,
+    position: 'absolute'
+  },
+  spinnerIcon: {
+    left: '50%',
+    top: '50%',
+    marginTop: -themeConfig.variables.loadingIndicator.size / 2,
+    marginLeft: -themeConfig.variables.loadingIndicator.size / 2
+  },
+  buttonReady: {
+    background: `var(--color-button-cta, ${themeConfig.colors.cta})`,
+    color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`
+  },
+  buttonSuccess: {
+    background: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
+    color: `var(--color-button-cta, ${themeConfig.colors.cta})`
+  },
+  buttonDisabled: {
+    background: themeConfig.colors.shade5,
+    color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
+    boxShadow: themeConfig.shadows.buttons.disabled
+  }
+});
+
+/**
+ * @param {number} bSize .
+ * @param {number} iSize .
+ * @returns {Object}
+ */
+const getWrapperStyle = (bSize, iSize) => ({
+  transition: 'background 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+  borderRadius: '50%',
+  width: bSize,
+  height: bSize,
+  position: 'relative',
+  fontSize: iSize,
+  outline: 0,
+  paddingLeft: (bSize - iSize) / 2,
+  paddingRight: (bSize - iSize) / 2,
+  zIndex: 2,
+  overflow: 'hidden',
+  flexShrink: 0
+});
 
 /**
  * AddToCartButton component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let AddToCartButton = /*#__PURE__*/function (_Component) {
-  /**
-   * Constructor for the AddToCartButton component.
-   * @param {Object} props Props for the component.
-   */
-  function AddToCartButton(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Handles the button click.
-     * - Show checkmark.
-     * - Add to cart.
-     * - Wait 900ms.
-     * - Show cart icon again.
-     * @param {Event} e Event
-     */
-    _this.handleClick = e => {
-      // Ignore clicks when check mark or loading spinner is shown or the button is disabled.
-      if (_this.state.showCheckmark || _this.props.isLoading || _this.props.isDisabled) {
-        return;
-      }
+const AddToCartButton = ({
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  buttonSize,
+  className,
+  forwardedRef,
+  iconSize,
+  isDisabled,
+  isLoading,
+  onClick,
+  onReset
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [showCheckmark, setShowCheckmark] = useState(null);
 
-      /** */
-      const handleCompletion = () => {
-        _this.setState({
-          showCheckmark: true
-        });
-        setTimeout(() => {
-          _this.setState({
-            showCheckmark: false
-          });
-        }, 900);
-      };
-      const result = _this.props.onClick(e);
-      if (result === false) {
-        // Do not trigger animation when adding to cart was aborted by the parent component (PWA-2764)
-        return;
-      }
-      if (result instanceof Promise) {
-        (async () => {
-          try {
-            await result;
-            handleCompletion();
-          } catch (error) {
-            // ignore error in button.
-          }
-        })();
-        return;
-      }
-      handleCompletion();
-    };
-    /**
-     * Handles the cart animation end event.
-     * Resets the showCheckmark state to null in order to
-     * prevent the icon from animating after changing visibility
-     * of the view.
-     * This is caused by CSS animations that get re-applied when
-     * setting an element from hidden (display: none) to visible.
-     */
-    _this.handleCartAnimationEnd = () => {
-      if (_this.state.showCheckmark === false) {
-        _this.setState({
-          showCheckmark: null
-        });
-      }
-      _this.props.onReset();
-    };
-    _this.state = {
-      showCheckmark: null
-    };
-    return _this;
-  }
-  _inheritsLoose(AddToCartButton, _Component);
-  var _proto = AddToCartButton.prototype;
   /**
-   * Renders the component
-   * @returns {JSX}
+   * @param {Event} e Click event.
    */
-  _proto.render = function render() {
-    // Set initial base styles
-    let buttonStyle = styles.buttonReady;
-    let tickIconStyle = styles.icon;
-    let cartPlusIconStyle = styles.icon;
+  const handleClick = useCallback(e => {
+    if (showCheckmark || isLoading || isDisabled) {
+      return;
+    }
 
-    // Depending on the isLoading prop we only show the spinner or the other way around.
-    const iconOpacity = this.props.isLoading ? {
-      opacity: 0
-    } : {
-      opacity: 1
+    /** Completes the success checkmark animation cycle. */
+    const handleCompletion = () => {
+      setShowCheckmark(true);
+      setTimeout(() => {
+        setShowCheckmark(false);
+      }, 900);
     };
-    const spinnerInlineStyle = this.props.isLoading ? {
-      opacity: 1
-    } : {
-      opacity: 0
+    const result = onClick(e);
+    if (result === false) {
+      return;
+    }
+    if (result instanceof Promise) {
+      (async () => {
+        try {
+          await result;
+          handleCompletion();
+        } catch (error) {
+          // ignore error in button.
+        }
+      })();
+      return;
+    }
+    handleCompletion();
+  }, [showCheckmark, isLoading, isDisabled, onClick]);
+  const handleCartAnimationEnd = useCallback(() => {
+    if (showCheckmark === false) {
+      setShowCheckmark(null);
+    }
+    onReset();
+  }, [showCheckmark, onReset]);
+  let buttonStateClass = classes.buttonReady;
+  let tickIconClass = classes.icon;
+  let cartPlusIconClass = classes.icon;
+  const iconOpacity = isLoading ? {
+    opacity: 0
+  } : {
+    opacity: 1
+  };
+  const spinnerInlineStyle = isLoading ? {
+    opacity: 1
+  } : {
+    opacity: 0
+  };
+  let tickInlineStyle = showCheckmark === null ? {
+    transform: 'translate3d(0, 300%, 0)',
+    ...iconOpacity
+  } : null;
+  let cartInlineStyle = showCheckmark === null ? {
+    transform: 'translate3d(0, -50%, 0)',
+    ...iconOpacity
+  } : null;
+  if (isDisabled && !isLoading) {
+    buttonStateClass = classes.buttonDisabled;
+  } else if (showCheckmark) {
+    tickIconClass = cx(classes.icon, classes.springFromBottom);
+    cartPlusIconClass = cx(classes.icon, classes.springToTop);
+    buttonStateClass = classes.buttonSuccess;
+    tickInlineStyle = {
+      transform: 'translate3d(0, -50%, 0)',
+      ...iconOpacity
     };
-
-    /**
-     * The initial positions for the icons:
-     * Tick icon stays hidden on top, Cart icon stays visibly at the center
-     */
-    let tickInlineStyle = this.state.showCheckmark === null ? {
-      transform: 'translate3d(0, 300%, 0)',
+    cartInlineStyle = {
+      transform: 'translate3d(0, -300%, 0)',
       ...iconOpacity
-    } : null;
-    let cartInlineStyle = this.state.showCheckmark === null ? {
+    };
+  } else if (showCheckmark !== null) {
+    tickIconClass = cx(classes.icon, classes.springToBottom);
+    cartPlusIconClass = cx(classes.icon, classes.springFromTop);
+    cartInlineStyle = {
       transform: 'translate3d(0, -50%, 0)',
       ...iconOpacity
-    } : null;
-    if (this.props.isDisabled && !this.props.isLoading) {
-      buttonStyle = styles.buttonDisabled;
-    } else if (this.state.showCheckmark) {
-      /**
-       * When checkmark should be shown, we start the spring transition
-       * Tick icon springs in, and cart icon springs out.
-       */
-      tickIconStyle += ` ${styles.springFromBottom}`;
-      cartPlusIconStyle += ` ${styles.springToTop}`;
-      buttonStyle = styles.buttonSuccess;
-      /**
-       * After the keyframe animation is done the transform values are reset
-       * We add the inline style to make sure the icons stay where they are even after the animation
-       */
-      tickInlineStyle = {
-        transform: 'translate3d(0, -50%, 0)',
-        ...iconOpacity
-      };
-      cartInlineStyle = {
-        transform: 'translate3d(0, -300%, 0)',
-        ...iconOpacity
-      };
-    } else if (this.state.showCheckmark !== null) {
-      /**
-       * When checkmark should no longer be shown we start the spring out transition.
-       * Tick icon springs out, cart icon spring in.
-       * We don't want a animation when we initially go to the page therefore this only happens
-       * after the user pressed the button.
-       */
-      tickIconStyle += ` ${styles.springToBottom}`;
-      cartPlusIconStyle += ` ${styles.springFromTop}`;
-      /**
-       * After the keyframe animation is done the transform values are reset
-       * We add the inline style to make sure the icons stay where they are even after the animation
-       */
-      cartInlineStyle = {
-        transform: 'translate3d(0, -50%, 0)',
-        ...iconOpacity
-      };
-      tickInlineStyle = {
-        transform: 'translate3d(0, -300%, 0)',
-        ...iconOpacity
-      };
-    }
-    let className = styles.buttonWrapper(this.props.buttonSize, this.props.iconSize);
-    if (this.props.noShadow) {
-      className = styles.buttonWrapperNoShadow(this.props.buttonSize, this.props.iconSize);
-    }
-    return /*#__PURE__*/_jsxs("button", {
-      "data-test-id": "addToCartButton",
-      className: `ui-shared__add-to-cart-button ${this.props.className} ${className} ${buttonStyle}`,
-      onClick: this.handleClick,
-      "aria-hidden": this.props['aria-hidden'],
-      "aria-label": this.props['aria-label'],
-      "aria-disabled": this.props.isDisabled,
-      ref: this.props.forwardedRef,
-      type: "button",
-      children: [this.props.isLoading && /*#__PURE__*/_jsx("div", {
-        className: `${styles.icon} ${styles.spinnerIcon}`,
-        style: spinnerInlineStyle,
-        children: /*#__PURE__*/_jsx(IndicatorCircle, {
-          color: themeConfig.colors.primaryContrast,
-          strokeWidth: 5,
-          paused: !this.props.isLoading
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: tickIconStyle,
-        style: tickInlineStyle,
-        children: /*#__PURE__*/_jsx(TickIcon, {})
-      }), /*#__PURE__*/_jsx("div", {
-        className: cartPlusIconStyle,
-        style: cartInlineStyle,
-        onAnimationEnd: this.handleCartAnimationEnd,
-        children: /*#__PURE__*/_jsx(CartPlusIcon, {})
-      })]
-    });
-  };
-  return AddToCartButton;
-}(Component);
+    };
+    tickInlineStyle = {
+      transform: 'translate3d(0, -300%, 0)',
+      ...iconOpacity
+    };
+  }
+  const wrapperStyle = getWrapperStyle(buttonSize, iconSize);
+  return /*#__PURE__*/_jsxs("button", {
+    "data-test-id": "addToCartButton",
+    className: cx('ui-shared__add-to-cart-button', buttonStateClass, className),
+    style: wrapperStyle,
+    onClick: handleClick,
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    "aria-disabled": isDisabled,
+    ref: forwardedRef,
+    type: "button",
+    children: [isLoading && /*#__PURE__*/_jsx("div", {
+      className: cx(classes.icon, classes.spinnerIcon),
+      style: spinnerInlineStyle,
+      children: /*#__PURE__*/_jsx(IndicatorCircle, {
+        color: themeConfig.colors.primaryContrast,
+        strokeWidth: 5,
+        paused: !isLoading
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: tickIconClass,
+      style: tickInlineStyle,
+      children: /*#__PURE__*/_jsx(TickIcon, {})
+    }), /*#__PURE__*/_jsx("div", {
+      className: cartPlusIconClass,
+      style: cartInlineStyle,
+      onAnimationEnd: handleCartAnimationEnd,
+      children: /*#__PURE__*/_jsx(CartPlusIcon, {})
+    })]
+  });
+};
 AddToCartButton.defaultProps = {
   'aria-hidden': false,
   'aria-label': null,
-  buttonSize: styles.buttonSize,
+  buttonSize: DEFAULT_BUTTON_SIZE,
   className: null,
   forwardedRef: null,
-  iconSize: styles.iconSize,
-  noShadow: false,
+  iconSize: DEFAULT_ICON_SIZE,
   onReset: () => {}
 };
 export default withForwardedRef(AddToCartButton);

package/Availability/index.js

@@ -1,7 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AVAILABILITY_STATE_OK, AVAILABILITY_STATE_WARNING, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  base: {
+    fontSize: '0.875rem'
+  },
+  stateOk: {
+    color: theme.palette.success.main
+  },
+  stateWarning: {
+    color: theme.palette.warning.main
+  },
+  stateAlert: {
+    color: theme.palette.error.main
+  }
+}));
 
 /**
  * This component renders the availability text for a product
@@ -13,25 +28,28 @@ import styles from "./style";
  * @param {string} [props.className] CSS classes
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Availability = ({
   text,
   state,
   showWhenAvailable = false,
   className = null
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!text || state === AVAILABILITY_STATE_OK && !showWhenAvailable) {
     return null;
   }
-  let style = styles.stateOk;
+  let stateClass = classes.stateOk;
   if (state === AVAILABILITY_STATE_WARNING) {
-    style = styles.stateWarning;
+    stateClass = classes.stateWarning;
   }
   if (state === AVAILABILITY_STATE_ALERT) {
-    style = styles.stateAlert;
+    stateClass = classes.stateAlert;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: `ui-shared__availability ${className} ${style}`,
+    className: cx('ui-shared__availability', classes.base, stateClass, className),
     "data-test-id": `availabilityText: ${text}`,
     children: text
   });