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

package/AccordionContainer/index.js

@@ -1,8 +1,42 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import{Component}from'react';import PropTypes from'prop-types';/**
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
  * The Accordion container component.
- */var AccordionContainer=/*#__PURE__*/function(_Component){function AccordionContainer(props){var _this2;_classCallCheck(this,AccordionContainer);_this2=_callSuper(this,AccordionContainer,[props]);_defineProperty(_this2,"open",function(){_this2.setState({open:true});});_defineProperty(_this2,"close",function(){_this2.setState({open:false});});_this2.state={open:props.open};return _this2;}_inherits(AccordionContainer,_Component);return _createClass(AccordionContainer,[{key:"render",value:/**
-   * @returns {JSX}
-   */function render(){return this.props.children({handleClose:this.close,open:this.state.open,handleOpen:this.open});}}]);}(Component);_defineProperty(AccordionContainer,"defaultProps",{open:false/**
+ */
+class AccordionContainer extends Component {
+  /**
    * Init
    * @param {Object} props Props
-   */});export default AccordionContainer;
+   */
+  constructor(props) {
+    super(props);
+    this.open = () => {
+      this.setState({
+        open: true
+      });
+    };
+    this.close = () => {
+      this.setState({
+        open: false
+      });
+    };
+    this.state = {
+      open: props.open
+    };
+  }
+  /**
+   * @returns {JSX}
+   */
+  render() {
+    return this.props.children({
+      handleClose: this.close,
+      open: this.state.open,
+      handleOpen: this.open
+    });
+  }
+}
+AccordionContainer.defaultProps = {
+  open: false
+};
+export default AccordionContainer;

package/AccordionContainer/spec.js

@@ -1,3 +1,26 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}import React from'react';import{shallow}from'enzyme';import AccordionContainer from"./index";/**
+import React from 'react';
+import { shallow } from 'enzyme';
+import AccordionContainer from "./index";
+
+/**
  * @returns {JSX}
- */var Child=function Child(){return React.createElement("div",null);};describe('<AccordionContainer />',function(){it('should render children with props',function(){var wrapper=shallow(React.createElement(AccordionContainer,null,function(props){return React.createElement(Child,props);}));var props=wrapper.find('Child').props();expect(wrapper).toMatchSnapshot();expect(props.open).toEqual(false);expect(_typeof(props.handleOpen)).toEqual('function');expect(_typeof(props.handleClose)).toEqual('function');});it('should update children props when state changes',function(){var wrapper=shallow(React.createElement(AccordionContainer,null,function(props){return React.createElement(Child,props);}));wrapper.setState({open:true});expect(wrapper).toMatchSnapshot();expect(wrapper.find('Child').props().open).toEqual(true);});});
+ */
+const Child = () => /*#__PURE__*/React.createElement("div", null);
+describe('<AccordionContainer />', () => {
+  it('should render children with props', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(AccordionContainer, null, props => /*#__PURE__*/React.createElement(Child, props)));
+    const props = wrapper.find('Child').props();
+    expect(wrapper).toMatchSnapshot();
+    expect(props.open).toEqual(false);
+    expect(typeof props.handleOpen).toEqual('function');
+    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)));
+    wrapper.setState({
+      open: true
+    });
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('Child').props().open).toEqual(true);
+  });
+});

package/ActionButton/index.js

@@ -1,12 +1,68 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import IndicatorCircle from"../IndicatorCircle";import RippleButton from"../RippleButton";import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import IndicatorCircle from "../IndicatorCircle";
+import RippleButton from "../RippleButton";
+import styles from "./style";
+
+/**
  * The action button component.
- */var ActionButton=/*#__PURE__*/function(_Component){function ActionButton(){var _this2;_classCallCheck(this,ActionButton);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,ActionButton,[].concat(args));/**
-   * The click handler
-   * @param {Object} event The event object for the click handler
-   */_defineProperty(_this2,"handleClick",function(event){var clickDelay=_this2.constructor.clickDelay;setTimeout(function(){_this2.props.onClick(event);},clickDelay);});return _this2;}_inherits(ActionButton,_Component);return _createClass(ActionButton,[{key:"buttonProps",get:/**
+ */
+class ActionButton extends Component {
+  constructor(...args) {
+    super(...args);
+    /**
+     * The click handler
+     * @param {Object} event The event object for the click handler
+     */
+    this.handleClick = event => {
+      const {
+        clickDelay
+      } = this.constructor;
+      setTimeout(() => {
+        this.props.onClick(event);
+      }, clickDelay);
+    };
+  }
+  /**
    * Getter for the calculated button props.
    * @returns {Object}
-   */function get(){var buttonProps={className:this.props.className,disabled:this.props.disabled,flat:this.props.flat,type:this.props.type};return buttonProps;}},{key:"render",value:/**
+   */
+  get buttonProps() {
+    const buttonProps = {
+      className: this.props.className,
+      disabled: this.props.disabled,
+      flat: this.props.flat,
+      type: this.props.type
+    };
+    return buttonProps;
+  }
+  /**
    * The render function.
    * @returns {JSX}
-   */function render(){var containerClass=this.props.noGap?styles.noGapContainer:styles.container;if(this.props.loading){return React.createElement("div",{className:styles.containerCircle},React.createElement(IndicatorCircle,null));}return React.createElement("div",{className:"ui-shared__action-button ".concat(containerClass),"data-test-id":this.props.testId},React.createElement(RippleButton,_extends({},this.buttonProps,{onClick:this.handleClick}),this.props.children));}}]);}(Component);_defineProperty(ActionButton,"clickDelay",300);_defineProperty(ActionButton,"defaultProps",_extends({},RippleButton.defaultProps,{loading:false,type:'primary',flat:true,noGap:false,testId:null}));export default ActionButton;
+   */
+  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__*/React.createElement("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));
+  }
+}
+ActionButton.clickDelay = 300;
+ActionButton.defaultProps = {
+  ...RippleButton.defaultProps,
+  loading: false,
+  type: 'primary',
+  flat: true,
+  noGap: false,
+  testId: null
+};
+export default ActionButton;

package/ActionButton/spec.js

@@ -1,4 +1,61 @@
-import React from'react';import{shallow}from'enzyme';import IndicatorCircle from"../IndicatorCircle";import RippleButton from"../RippleButton";import ActionButton from"./index";describe('<ActionButton />',function(){var renderedElement;var mockOnClick;jest.useFakeTimers();/**
+import React from 'react';
+import { shallow } from 'enzyme';
+import IndicatorCircle from "../IndicatorCircle";
+import RippleButton from "../RippleButton";
+import ActionButton from "./index";
+describe('<ActionButton />', () => {
+  let renderedElement;
+  let mockOnClick;
+  jest.useFakeTimers();
+
+  /**
    * Renders the component.
    * @param {Object} props The component props.
-   */var renderComponent=function renderComponent(){var props=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};renderedElement=shallow(React.createElement(ActionButton,props,"Action Button"));};describe('Given the component was mounted to the DOM',function(){beforeEach(function(){mockOnClick=jest.fn();renderComponent({onClick:mockOnClick});});it('should match snapshot',function(){expect(renderedElement).toMatchSnapshot();});it('should not show the loading indicator by default',function(){var indicator=renderedElement.find(IndicatorCircle);expect(indicator.length).toBe(0);});describe('Given the loading prop is set to true',function(){beforeEach(function(){renderedElement.setProps({loading:true});});it('should match snapshot',function(){expect(renderedElement).toMatchSnapshot();});it('should show the loading indicator',function(){var indicator=renderedElement.find(IndicatorCircle);expect(indicator.length).toBe(1);});});describe('Given the component gets clicked',function(){beforeEach(function(){renderedElement.find(RippleButton).simulate('click');});it('should use setTimeout for delaying the onClick handler',function(){expect(setTimeout.mock.calls.length).toBe(1);expect(setTimeout.mock.calls[0][1]).toBe(ActionButton.clickDelay);});it('should eventually call the onClick handler',function(){jest.runOnlyPendingTimers();expect(mockOnClick).toBeCalled();expect(mockOnClick.mock.calls.length).toBe(1);});});});});
+   */
+  const renderComponent = (props = {}) => {
+    renderedElement = shallow(/*#__PURE__*/React.createElement(ActionButton, props, "Action Button"));
+  };
+  describe('Given the component was mounted to the DOM', () => {
+    beforeEach(() => {
+      mockOnClick = jest.fn();
+      renderComponent({
+        onClick: mockOnClick
+      });
+    });
+    it('should match snapshot', () => {
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should not show the loading indicator by default', () => {
+      const indicator = renderedElement.find(IndicatorCircle);
+      expect(indicator.length).toBe(0);
+    });
+    describe('Given the loading prop is set to true', () => {
+      beforeEach(() => {
+        renderedElement.setProps({
+          loading: true
+        });
+      });
+      it('should match snapshot', () => {
+        expect(renderedElement).toMatchSnapshot();
+      });
+      it('should show the loading indicator', () => {
+        const indicator = renderedElement.find(IndicatorCircle);
+        expect(indicator.length).toBe(1);
+      });
+    });
+    describe('Given the component gets clicked', () => {
+      beforeEach(() => {
+        renderedElement.find(RippleButton).simulate('click');
+      });
+      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);
+      });
+      it('should eventually call the onClick handler', () => {
+        jest.runOnlyPendingTimers();
+        expect(mockOnClick).toBeCalled();
+        expect(mockOnClick.mock.calls.length).toBe(1);
+      });
+    });
+  });
+});

package/ActionButton/style.js

@@ -1 +1,22 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var halfGapBig=themeConfig.variables.gap.big/2;var containerBase={textAlign:'center'};var container=css(_extends({},containerBase,{margin:"".concat(halfGapBig,"px 0")})).toString();var noGapContainer=css(_extends({},containerBase)).toString();var containerCircle=css(_extends({},containerBase,{margin:"".concat(halfGapBig+5,"px 0")})).toString();export default{container:container,containerCircle:containerCircle,noGapContainer:noGapContainer};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const halfGapBig = themeConfig.variables.gap.big / 2;
+const containerBase = {
+  textAlign: 'center'
+};
+const container = css({
+  ...containerBase,
+  margin: `${halfGapBig}px 0`
+}).toString();
+const noGapContainer = css({
+  ...containerBase
+}).toString();
+const containerCircle = css({
+  ...containerBase,
+  margin: `${halfGapBig + 5}px 0`
+}).toString();
+export default {
+  container,
+  containerCircle,
+  noGapContainer
+};

package/AddToCartButton/index.js

@@ -1,44 +1,201 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{withForwardedRef}from'@shopgate/engage/core';import CartPlusIcon from"../icons/CartPlusIcon";import TickIcon from"../icons/TickIcon";import IndicatorCircle from"../IndicatorCircle";import styles from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { withForwardedRef } from '@shopgate/engage/core';
+import CartPlusIcon from "../icons/CartPlusIcon";
+import TickIcon from "../icons/TickIcon";
+import IndicatorCircle from "../IndicatorCircle";
+import styles from "./style";
+
+/**
  * AddToCartButton component.
- */var AddToCartButton=/*#__PURE__*/function(_Component){/**
+ */
+class AddToCartButton extends Component {
+  /**
    * Constructor for the AddToCartButton component.
    * @param {Object} props Props for the component.
-   */function AddToCartButton(props){var _this2;_classCallCheck(this,AddToCartButton);_this2=_callSuper(this,AddToCartButton,[props]);/**
-   * Handles the button click.
-   * - Show checkmark.
-   * - Add to cart.
-   * - Wait 900ms.
-   * - Show cart icon again.
-   * @param {Event} e Event
-   */_defineProperty(_this2,"handleClick",function(e){// Ignore clicks when check mark or loading spinner is shown or the button is disabled.
-if(_this2.state.showCheckmark||_this2.props.isLoading||_this2.props.isDisabled){return;}/** */var handleCompletion=function handleCompletion(){_this2.setState({showCheckmark:true});setTimeout(function(){_this2.setState({showCheckmark:false});},900);};var result=_this2.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){_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return result;case 3:handleCompletion();_context.next=8;break;case 6:_context.prev=6;_context.t0=_context["catch"](0);case 8:case"end":return _context.stop();}},_callee,null,[[0,6]]);}))();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.
-   */_defineProperty(_this2,"handleCartAnimationEnd",function(){if(_this2.state.showCheckmark===false){_this2.setState({showCheckmark:null});}_this2.props.onReset();});_this2.state={showCheckmark:null};return _this2;}_inherits(AddToCartButton,_Component);return _createClass(AddToCartButton,[{key:"render",value:/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * 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 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
+    };
+  }
+  /**
    * Renders the component
    * @returns {JSX}
-   */function render(){// Set initial base styles
-var buttonStyle=styles.buttonReady;var tickIconStyle=styles.icon;var cartPlusIconStyle=styles.icon;// Depending on the isLoading prop we only show the spinner or the other way around.
-var iconOpacity=this.props.isLoading?{opacity:0}:{opacity:1};var spinnerInlineStyle=this.props.isLoading?{opacity:1}:{opacity:0};/**
+   */
+  render() {
+    // Set initial base styles
+    let buttonStyle = styles.buttonReady;
+    let tickIconStyle = styles.icon;
+    let cartPlusIconStyle = styles.icon;
+
+    // Depending on the isLoading prop we only show the spinner or the other way around.
+    const iconOpacity = this.props.isLoading ? {
+      opacity: 0
+    } : {
+      opacity: 1
+    };
+    const spinnerInlineStyle = this.props.isLoading ? {
+      opacity: 1
+    } : {
+      opacity: 0
+    };
+
+    /**
      * The initial positions for the icons:
      * Tick icon stays hidden on top, Cart icon stays visibly at the center
-     */var tickInlineStyle=this.state.showCheckmark===null?_extends({transform:'translate3d(0, 300%, 0)'},iconOpacity):null;var cartInlineStyle=this.state.showCheckmark===null?_extends({transform:'translate3d(0, -50%, 0)'},iconOpacity):null;if(this.props.isDisabled&&!this.props.isLoading){buttonStyle=styles.buttonDisabled;}else if(this.state.showCheckmark){/**
+     */
+    let tickInlineStyle = this.state.showCheckmark === null ? {
+      transform: 'translate3d(0, 300%, 0)',
+      ...iconOpacity
+    } : null;
+    let cartInlineStyle = this.state.showCheckmark === null ? {
+      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+=" ".concat(styles.springFromBottom);cartPlusIconStyle+=" ".concat(styles.springToTop);buttonStyle=styles.buttonSuccess;/**
+       */
+      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=_extends({transform:'translate3d(0, -50%, 0)'},iconOpacity);cartInlineStyle=_extends({transform:'translate3d(0, -300%, 0)'},iconOpacity);}else if(this.state.showCheckmark!==null){/**
+       */
+      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+=" ".concat(styles.springToBottom);cartPlusIconStyle+=" ".concat(styles.springFromTop);/**
+       */
+      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=_extends({transform:'translate3d(0, -50%, 0)'},iconOpacity);tickInlineStyle=_extends({transform:'translate3d(0, -300%, 0)'},iconOpacity);}var className=styles.buttonWrapper(this.props.buttonSize,this.props.iconSize);if(this.props.noShadow){className=styles.buttonWrapperNoShadow(this.props.buttonSize,this.props.iconSize);}return React.createElement("button",{"data-test-id":"addToCartButton",className:"ui-shared__add-to-cart-button ".concat(this.props.className," ").concat(className," ").concat(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"},this.props.isLoading&&React.createElement("div",{className:"".concat(styles.icon," ").concat(styles.spinnerIcon),style:spinnerInlineStyle},React.createElement(IndicatorCircle,{color:themeConfig.colors.primaryContrast,strokeWidth:5,paused:!this.props.isLoading})),React.createElement("div",{className:tickIconStyle,style:tickInlineStyle},React.createElement(TickIcon,null)),React.createElement("div",{className:cartPlusIconStyle,style:cartInlineStyle,onAnimationEnd:this.handleCartAnimationEnd},React.createElement(CartPlusIcon,null)));}}]);}(Component);_defineProperty(AddToCartButton,"defaultProps",{'aria-hidden':false,'aria-label':null,buttonSize:styles.buttonSize,className:null,forwardedRef:null,iconSize:styles.iconSize,noShadow:false,onReset:function onReset(){}});export default withForwardedRef(AddToCartButton);
+       */
+      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__*/React.createElement("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"
+    }, 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)));
+  }
+}
+AddToCartButton.defaultProps = {
+  'aria-hidden': false,
+  'aria-label': null,
+  buttonSize: styles.buttonSize,
+  className: null,
+  forwardedRef: null,
+  iconSize: styles.iconSize,
+  noShadow: false,
+  onReset: () => {}
+};
+export default withForwardedRef(AddToCartButton);

package/AddToCartButton/mock.js

@@ -1,9 +1,23 @@
-var _Class,_temp;function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';/**
+var _Class;
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+/**
  * Mocked AddToCartButton.
  * @type {MockedAddToCartButton}
  * @deprecated
- */ // eslint-disable-next-line react/prefer-stateless-function
-export var MockedAddToCartButton=(_temp=_Class=/*#__PURE__*/function(_Component){function MockedAddToCartButton(){_classCallCheck(this,MockedAddToCartButton);return _callSuper(this,MockedAddToCartButton,arguments);}_inherits(MockedAddToCartButton,_Component);return _createClass(MockedAddToCartButton,[{key:"render",value:/**
+ */
+// eslint-disable-next-line react/prefer-stateless-function
+export const MockedAddToCartButton = (_Class = class MockedAddToCartButton extends Component {
+  /**
    * Renders mocked button.
    * @return {JSX}
-   */function render(){return React.createElement("button",{onClick:this.props.onClick,type:"button"});}}]);}(Component),_defineProperty(_Class,"defaultProps",{onClick:function onClick(){}}),_temp);
+   */
+  render() {
+    return /*#__PURE__*/React.createElement("button", {
+      onClick: this.props.onClick,
+      type: "button"
+    });
+  }
+}, _Class.defaultProps = {
+  onClick: () => {}
+}, _Class);

package/AddToCartButton/spec.js

@@ -1,4 +1,53 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React from'react';import{mount}from'enzyme';import AddToCartButton from"./index";/**
+import "core-js/modules/web.immediate.js";
+import React from 'react';
+import { mount } from 'enzyme';
+import AddToCartButton from "./index";
+
+/**
  * Flushes the promise queue.
  * @returns {Promise}
- */var flushPromises=function flushPromises(){return new Promise(function(resolve){return setImmediate(resolve);});};describe('<AddToCartButton />',function(){it('should render in loading state and should not be clickable',function(){var spy=jest.fn(function(){return new Promise(function(resolve){return resolve();});});var wrapper=mount(React.createElement(AddToCartButton,{onClick:spy,isLoading:true,isOrderable:true,isDisabled:false}));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',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var spy,wrapper;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:spy=jest.fn(function(){return new Promise(function(resolve){return resolve();});});wrapper=mount(React.createElement(AddToCartButton,{onClick:spy,isLoading:false,isOrderable:true,isDisabled:false}));wrapper.find('button').prop('onClick')();wrapper.update();_context.next=6;return flushPromises();case 6:wrapper.find('button').prop('onClick')();wrapper.update();_context.next=10;return flushPromises();case 10:expect(wrapper).toMatchSnapshot();expect(spy).toHaveBeenCalledTimes(1);case 12:case"end":return _context.stop();}},_callee);})));it('should render with cart icon and should be clickable',function(){var spy=jest.fn(function(){return new Promise(function(resolve){return resolve();});});var wrapper=mount(React.createElement(AddToCartButton,{onClick:spy,isLoading:false,isOrderable:true,isDisabled:false}));wrapper.find('button').prop('onClick')();expect(wrapper).toMatchSnapshot();expect(spy).toHaveBeenCalledTimes(1);});});
+ */
+const flushPromises = () => new Promise(resolve => setImmediate(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, {
+      onClick: spy,
+      isLoading: true,
+      isOrderable: true,
+      isDisabled: false
+    }));
+    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, {
+      onClick: spy,
+      isLoading: false,
+      isOrderable: true,
+      isDisabled: false
+    }));
+    wrapper.find('button').prop('onClick')();
+    wrapper.update();
+    await flushPromises();
+    wrapper.find('button').prop('onClick')();
+    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, {
+      onClick: spy,
+      isLoading: false,
+      isOrderable: true,
+      isDisabled: false
+    }));
+    wrapper.find('button').prop('onClick')();
+    expect(wrapper).toMatchSnapshot();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});