@shopgate/pwa-ui-shared 7.30.0-alpha.8 → 7.30.0-beta.1

package/AccordionContainer/index.js

@@ -1,41 +1,47 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * The Accordion container component.
  */
-class AccordionContainer extends Component {
+let AccordionContainer = /*#__PURE__*/function (_Component) {
   /**
    * Init
    * @param {Object} props Props
    */
-  constructor(props) {
-    super(props);
-    this.open = () => {
-      this.setState({
+  function AccordionContainer(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.open = () => {
+      _this.setState({
         open: true
       });
     };
-    this.close = () => {
-      this.setState({
+    _this.close = () => {
+      _this.setState({
         open: false
       });
     };
-    this.state = {
+    _this.state = {
       open: props.open
     };
+    return _this;
   }
+  _inheritsLoose(AccordionContainer, _Component);
+  var _proto = AccordionContainer.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     return this.props.children({
       handleClose: this.close,
       open: this.state.open,
       handleOpen: this.open
     });
-  }
-}
+  };
+  return AccordionContainer;
+}(Component);
 AccordionContainer.defaultProps = {
   open: false
 };

package/AccordionContainer/spec.js

@@ -5,10 +5,15 @@ import AccordionContainer from "./index";
 /**
  * @returns {JSX}
  */
-const Child = () => /*#__PURE__*/React.createElement("div", null);
+import { jsx as _jsx } from "react/jsx-runtime";
+const Child = () => /*#__PURE__*/_jsx("div", {});
 describe('<AccordionContainer />', () => {
   it('should render children with props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(AccordionContainer, null, props => /*#__PURE__*/React.createElement(Child, props)));
+    const wrapper = shallow(/*#__PURE__*/_jsx(AccordionContainer, {
+      children: props => /*#__PURE__*/_jsx(Child, {
+        ...props
+      })
+    }));
     const props = wrapper.find('Child').props();
     expect(wrapper).toMatchSnapshot();
     expect(props.open).toEqual(false);
@@ -16,7 +21,11 @@ describe('<AccordionContainer />', () => {
     expect(typeof props.handleClose).toEqual('function');
   });
   it('should update children props when state changes', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(AccordionContainer, null, props => /*#__PURE__*/React.createElement(Child, props)));
+    const wrapper = shallow(/*#__PURE__*/_jsx(AccordionContainer, {
+      children: props => /*#__PURE__*/_jsx(Child, {
+        ...props
+      })
+    }));
     wrapper.setState({
       open: true
     });

package/ActionButton/index.js

@@ -1,4 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import IndicatorCircle from "../IndicatorCircle";
@@ -8,54 +9,71 @@ import styles from "./style";
 /**
  * The action button component.
  */
-class ActionButton extends Component {
-  constructor(...args) {
-    super(...args);
+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 => {
+    _this.handleClick = event => {
       const {
         clickDelay
-      } = this.constructor;
+      } = _this.constructor;
+      if (_this.props.disableClickDelay) {
+        _this.props.onClick(event);
+        return;
+      }
       setTimeout(() => {
-        this.props.onClick(event);
+        _this.props.onClick(event);
       }, clickDelay);
     };
+    return _this;
   }
-  /**
-   * Getter for the calculated button props.
-   * @returns {Object}
-   */
-  get buttonProps() {
-    const buttonProps = {
-      className: this.props.className,
-      disabled: this.props.disabled,
-      flat: this.props.flat,
-      type: this.props.type
-    };
-    return buttonProps;
-  }
+  _inheritsLoose(ActionButton, _Component);
+  var _proto = ActionButton.prototype;
   /**
    * The render function.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const containerClass = this.props.noGap ? styles.noGapContainer : styles.container;
     if (this.props.loading) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.containerCircle
-      }, /*#__PURE__*/React.createElement(IndicatorCircle, null));
+      return /*#__PURE__*/_jsx("div", {
+        className: styles.containerCircle,
+        children: /*#__PURE__*/_jsx(IndicatorCircle, {})
+      });
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: `ui-shared__action-button ${containerClass}`,
-      "data-test-id": this.props.testId
-    }, /*#__PURE__*/React.createElement(RippleButton, _extends({}, this.buttonProps, {
-      onClick: this.handleClick
-    }), this.props.children));
-  }
-}
+      "data-test-id": this.props.testId,
+      children: /*#__PURE__*/_jsx(RippleButton, {
+        ...this.buttonProps,
+        onClick: this.handleClick,
+        children: this.props.children
+      })
+    });
+  };
+  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;
 ActionButton.defaultProps = {
   ...RippleButton.defaultProps,
@@ -63,6 +81,7 @@ ActionButton.defaultProps = {
   type: 'primary',
   flat: true,
   noGap: false,
-  testId: null
+  testId: null,
+  disableClickDelay: false
 };
 export default ActionButton;

package/ActionButton/spec.js

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import IndicatorCircle from "../IndicatorCircle";
 import RippleButton from "../RippleButton";
 import ActionButton from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<ActionButton />', () => {
   let renderedElement;
   let mockOnClick;
@@ -13,7 +14,10 @@ describe('<ActionButton />', () => {
    * @param {Object} props The component props.
    */
   const renderComponent = (props = {}) => {
-    renderedElement = shallow(/*#__PURE__*/React.createElement(ActionButton, props, "Action Button"));
+    renderedElement = shallow(/*#__PURE__*/_jsx(ActionButton, {
+      ...props,
+      children: "Action Button"
+    }));
   };
   describe('Given the component was mounted to the DOM', () => {
     beforeEach(() => {
@@ -44,17 +48,21 @@ describe('<ActionButton />', () => {
       });
     });
     describe('Given the component gets clicked', () => {
+      let timeoutSpy;
       beforeEach(() => {
+        timeoutSpy = jest.spyOn(global, 'setTimeout');
         renderedElement.find(RippleButton).simulate('click');
       });
+      afterEach(() => {
+        timeoutSpy.mockRestore();
+      });
       it('should use setTimeout for delaying the onClick handler', () => {
-        expect(setTimeout.mock.calls.length).toBe(1);
-        expect(setTimeout.mock.calls[0][1]).toBe(ActionButton.clickDelay);
+        expect(timeoutSpy).toHaveBeenCalledTimes(1);
+        expect(timeoutSpy.mock.calls[0][1]).toBe(ActionButton.clickDelay);
       });
       it('should eventually call the onClick handler', () => {
         jest.runOnlyPendingTimers();
-        expect(mockOnClick).toBeCalled();
-        expect(mockOnClick.mock.calls.length).toBe(1);
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
       });
     });
   });

package/AddToCartButton/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -10,13 +11,15 @@ import styles from "./style";
 /**
  * AddToCartButton component.
  */
-class AddToCartButton extends Component {
+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.
    */
-  constructor(props) {
-    super(props);
+  function AddToCartButton(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Handles the button click.
      * - Show checkmark.
@@ -25,24 +28,24 @@ class AddToCartButton extends Component {
      * - Show cart icon again.
      * @param {Event} e Event
      */
-    this.handleClick = e => {
+    _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) {
+      if (_this.state.showCheckmark || _this.props.isLoading || _this.props.isDisabled) {
         return;
       }
 
       /** */
       const handleCompletion = () => {
-        this.setState({
+        _this.setState({
           showCheckmark: true
         });
         setTimeout(() => {
-          this.setState({
+          _this.setState({
             showCheckmark: false
           });
         }, 900);
       };
-      const result = this.props.onClick(e);
+      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;
@@ -68,23 +71,26 @@ class AddToCartButton extends Component {
      * 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({
+    _this.handleCartAnimationEnd = () => {
+      if (_this.state.showCheckmark === false) {
+        _this.setState({
           showCheckmark: null
         });
       }
-      this.props.onReset();
+      _this.props.onReset();
     };
-    this.state = {
+    _this.state = {
       showCheckmark: null
     };
+    return _this;
   }
+  _inheritsLoose(AddToCartButton, _Component);
+  var _proto = AddToCartButton.prototype;
   /**
    * Renders the component
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     // Set initial base styles
     let buttonStyle = styles.buttonReady;
     let tickIconStyle = styles.icon;
@@ -162,7 +168,7 @@ class AddToCartButton extends Component {
     if (this.props.noShadow) {
       className = styles.buttonWrapperNoShadow(this.props.buttonSize, this.props.iconSize);
     }
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/_jsxs("button", {
       "data-test-id": "addToCartButton",
       className: `ui-shared__add-to-cart-button ${this.props.className} ${className} ${buttonStyle}`,
       onClick: this.handleClick,
@@ -170,24 +176,29 @@ class AddToCartButton extends Component {
       "aria-label": this.props['aria-label'],
       "aria-disabled": this.props.isDisabled,
       ref: this.props.forwardedRef,
-      type: "button"
-    }, this.props.isLoading && /*#__PURE__*/React.createElement("div", {
-      className: `${styles.icon} ${styles.spinnerIcon}`,
-      style: spinnerInlineStyle
-    }, /*#__PURE__*/React.createElement(IndicatorCircle, {
-      color: themeConfig.colors.primaryContrast,
-      strokeWidth: 5,
-      paused: !this.props.isLoading
-    })), /*#__PURE__*/React.createElement("div", {
-      className: tickIconStyle,
-      style: tickInlineStyle
-    }, /*#__PURE__*/React.createElement(TickIcon, null)), /*#__PURE__*/React.createElement("div", {
-      className: cartPlusIconStyle,
-      style: cartInlineStyle,
-      onAnimationEnd: this.handleCartAnimationEnd
-    }, /*#__PURE__*/React.createElement(CartPlusIcon, null)));
-  }
-}
+      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);
 AddToCartButton.defaultProps = {
   'aria-hidden': false,
   'aria-label': null,

package/AddToCartButton/mock.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 var _Class;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -7,17 +8,28 @@ import PropTypes from 'prop-types';
  * @deprecated
  */
 // eslint-disable-next-line react/prefer-stateless-function
-export const MockedAddToCartButton = (_Class = class MockedAddToCartButton extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MockedAddToCartButton = (_Class = /*#__PURE__*/function (_Component) {
+  function MockedAddToCartButton() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(MockedAddToCartButton, _Component);
+  var _proto = MockedAddToCartButton.prototype;
   /**
    * Renders mocked button.
    * @return {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement("button", {
-      onClick: this.props.onClick,
-      type: "button"
-    });
-  }
-}, _Class.defaultProps = {
+  _proto.render = function render() {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/control-has-associated-label
+      _jsx("button", {
+        onClick: this.props.onClick,
+        type: "button"
+      })
+    );
+  };
+  return MockedAddToCartButton;
+}(Component), _Class.defaultProps = {
   onClick: () => {}
 }, _Class);

package/AddToCartButton/spec.js

@@ -1,52 +1,67 @@
-import "core-js/modules/web.immediate.js";
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import AddToCartButton from "./index";
 
 /**
  * Flushes the promise queue.
  * @returns {Promise}
  */
-const flushPromises = () => new Promise(resolve => setImmediate(resolve));
+import { jsx as _jsx } from "react/jsx-runtime";
+const flushMicrotasks = () => Promise.resolve();
 describe('<AddToCartButton />', () => {
   it('should render in loading state and should not be clickable', () => {
-    const spy = jest.fn(() => new Promise(resolve => resolve()));
-    const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
+    const spy = jest.fn(() => Promise.resolve());
+    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
       onClick: spy,
       isLoading: true,
       isOrderable: true,
       isDisabled: false
     }));
+
+    // Click shouldn’t fire when loading
     wrapper.find('button').prop('onClick')();
     expect(wrapper).toMatchSnapshot();
     expect(spy).toHaveBeenCalledTimes(0);
   });
   it('should render with checkmark icon and should not be clickable the second time', async () => {
-    const spy = jest.fn(() => new Promise(resolve => resolve()));
-    const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
+    const spy = jest.fn(() => Promise.resolve());
+    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
       onClick: spy,
       isLoading: false,
       isOrderable: true,
       isDisabled: false
     }));
-    wrapper.find('button').prop('onClick')();
+
+    // First click triggers async work
+    await act(async () => {
+      wrapper.find('button').prop('onClick')();
+      await flushMicrotasks();
+    });
     wrapper.update();
-    await flushPromises();
-    wrapper.find('button').prop('onClick')();
+
+    // Second click should be ignored
+    await act(async () => {
+      wrapper.find('button').prop('onClick')();
+      await flushMicrotasks();
+    });
     wrapper.update();
-    await flushPromises();
     expect(wrapper).toMatchSnapshot();
     expect(spy).toHaveBeenCalledTimes(1);
   });
-  it('should render with cart icon and should be clickable', () => {
-    const spy = jest.fn(() => new Promise(resolve => resolve()));
-    const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
+  it('should render with cart icon and should be clickable', async () => {
+    const spy = jest.fn(() => Promise.resolve());
+    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
       onClick: spy,
       isLoading: false,
       isOrderable: true,
       isDisabled: false
     }));
-    wrapper.find('button').prop('onClick')();
+    await act(async () => {
+      wrapper.find('button').prop('onClick')();
+      await flushMicrotasks();
+    });
+    wrapper.update();
     expect(wrapper).toMatchSnapshot();
     expect(spy).toHaveBeenCalledTimes(1);
   });

package/Availability/index.js

@@ -13,6 +13,7 @@ import styles from "./style";
  * @param {string} [props.className] CSS classes
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Availability = ({
   text,
   state,
@@ -29,10 +30,11 @@ const Availability = ({
   if (state === AVAILABILITY_STATE_ALERT) {
     style = styles.stateAlert;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: `ui-shared__availability ${className} ${style}`,
-    "data-test-id": `availabilityText: ${text}`
-  }, text);
+    "data-test-id": `availabilityText: ${text}`,
+    children: text
+  });
 };
 Availability.defaultProps = {
   className: '',

package/Availability/spec.js

@@ -2,22 +2,23 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { AVAILABILITY_STATE_OK, AVAILABILITY_STATE_WARNING, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants';
 import Availability from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Availability />', () => {
   it('should not render when text is empty', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
       text: ""
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should not render by default if state is "ok"', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
       state: AVAILABILITY_STATE_OK,
       text: "Available"
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render if state is "ok" when "showWhenAvailable" is set', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
       state: AVAILABILITY_STATE_OK,
       text: "Available",
       showWhenAvailable: true
@@ -25,14 +26,14 @@ describe('<Availability />', () => {
     expect(wrapper).toMatchSnapshot();
   });
   it('should render if state is "warning"', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
       state: AVAILABILITY_STATE_WARNING,
       text: "Only 5 left"
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('should render if state is "warning"', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Availability, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
       state: AVAILABILITY_STATE_ALERT,
       text: "Out of stock"
     }));