@shopgate/pwa-ui-shared 7.30.0-alpha.10 → 7.30.0-alpha.11

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,58 +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;
-      if (this.props.disableClickDelay) {
-        this.props.onClick(event);
+      } = _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,

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(() => {

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

@@ -7,11 +7,12 @@ import AddToCartButton from "./index";
  * Flushes the promise queue.
  * @returns {Promise}
  */
+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(() => Promise.resolve());
-    const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
+    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
       onClick: spy,
       isLoading: true,
       isOrderable: true,
@@ -25,7 +26,7 @@ describe('<AddToCartButton />', () => {
   });
   it('should render with checkmark icon and should not be clickable the second time', async () => {
     const spy = jest.fn(() => Promise.resolve());
-    const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
+    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
       onClick: spy,
       isLoading: false,
       isOrderable: true,
@@ -50,7 +51,7 @@ describe('<AddToCartButton />', () => {
   });
   it('should render with cart icon and should be clickable', async () => {
     const spy = jest.fn(() => Promise.resolve());
-    const wrapper = mount(/*#__PURE__*/React.createElement(AddToCartButton, {
+    const wrapper = mount(/*#__PURE__*/_jsx(AddToCartButton, {
       onClick: spy,
       isLoading: false,
       isOrderable: true,

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"
     }));

package/Button/index.js

@@ -1,79 +1,94 @@
-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 BaseButton from '@shopgate/pwa-common/components/Button';
 import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * The basic button component. This components applies Material Design styles and acts as
  * base to more feature-rich button components such as ActionButton and RippleButton, but can
  * also be used as standalone component or any other kind of new button.
  */
-class Button extends Component {
-  /**
-   * Getter for style depending on prop type.
-   * @returns {Object}
-   */
-  get style() {
-    const {
-      flat,
-      disabled
-    } = this.props;
-    switch (this.props.type) {
-      case 'plain':
-        return styles.plain();
-      case 'regular':
-        return styles.regular(disabled);
-      case 'simple':
-        return styles.simple(disabled);
-      default:
-      case 'primary':
-        return styles.primary(disabled, flat);
-      case 'secondary':
-        return styles.secondary(disabled, flat);
-    }
-  }
-
-  /**
-   * Getter for the calculated button props.
-   * @returns {Object}
-   */
-  get buttonProps() {
-    const {
-      className,
-      disabled,
-      onClick,
-      testId,
-      type,
-      wrapContent,
-      flat,
-      ...rest
-    } = this.props;
-    const buttonProps = {
-      className,
-      disabled,
-      onClick,
-      ...rest
-    };
-    return buttonProps;
+let Button = /*#__PURE__*/function (_Component) {
+  function Button() {
+    return _Component.apply(this, arguments) || this;
   }
-
+  _inheritsLoose(Button, _Component);
+  var _proto = Button.prototype;
   /**
    * Renders the component.
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       style
     } = this;
-    const content = this.props.wrapContent ? /*#__PURE__*/React.createElement("div", {
-      className: style.content
-    }, this.props.children) : this.props.children;
-    return /*#__PURE__*/React.createElement(BaseButton, _extends({}, this.buttonProps, {
+    const content = this.props.wrapContent ? /*#__PURE__*/_jsx("div", {
+      className: style.content,
+      children: this.props.children
+    }) : this.props.children;
+    return /*#__PURE__*/_jsx(BaseButton, {
+      ...this.buttonProps,
       className: `ui-shared__button ${style.button} ${this.props.className}`,
-      testId: this.props.testId
-    }), content);
-  }
-}
+      testId: this.props.testId,
+      children: content
+    });
+  };
+  return _createClass(Button, [{
+    key: "style",
+    get:
+    /**
+     * Getter for style depending on prop type.
+     * @returns {Object}
+     */
+    function () {
+      const {
+        flat,
+        disabled
+      } = this.props;
+      switch (this.props.type) {
+        case 'plain':
+          return styles.plain();
+        case 'regular':
+          return styles.regular(disabled);
+        case 'simple':
+          return styles.simple(disabled);
+        default:
+        case 'primary':
+          return styles.primary(disabled, flat);
+        case 'secondary':
+          return styles.secondary(disabled, flat);
+      }
+    }
+
+    /**
+     * Getter for the calculated button props.
+     * @returns {Object}
+     */
+  }, {
+    key: "buttonProps",
+    get: function () {
+      const {
+        className,
+        disabled,
+        onClick,
+        testId,
+        type,
+        wrapContent,
+        flat,
+        ...rest
+      } = this.props;
+      const buttonProps = {
+        className,
+        disabled,
+        onClick,
+        ...rest
+      };
+      return buttonProps;
+    }
+  }]);
+}(Component);
 Button.defaultProps = {
   ...BaseButton.defaultProps,
   className: '',