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

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: '',

package/Button/spec.js

@@ -3,30 +3,36 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Button from "./index";
 import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Button />', () => {
   it('should render as a regular button if type is omitted', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, null, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      children: "Press me"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.render().text()).toEqual('Press me');
   });
   it('should render as a regular button if type is explicitly defined', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
-      type: "regular"
-    }, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      type: "regular",
+      children: "Press me"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.regular(false).button}`);
   });
   it('should render as a primary button', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
-      type: "primary"
-    }, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      type: "primary",
+      children: "Press me"
+    }));
     expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.primary(false, false).button}`);
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as a secondary button', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Button, {
-      type: "secondary"
-    }, "Press me"));
+    const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
+      type: "secondary",
+      children: "Press me"
+    }));
     expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.secondary(false, false).button}`);
     expect(wrapper).toMatchSnapshot();
   });

package/ButtonLink/index.js

@@ -1,4 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ActionButton from "../ActionButton";
@@ -7,35 +7,43 @@ import connect from "./connector";
 /**
  * Simple wrapper around ActionButton so it's easy to render buttons which behave as links.
  */
-class ButtonLink extends Component {
-  constructor(...args) {
-    super(...args);
+import { jsx as _jsx } from "react/jsx-runtime";
+let ButtonLink = /*#__PURE__*/function (_Component) {
+  function ButtonLink(...args) {
+    var _this;
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
     /**
      * Opens the given url on click.
      * @returns {undefined}
      */
-    this.handleClick = () => {
-      this.props.navigate(this.props.href);
+    _this.handleClick = () => {
+      _this.props.navigate(_this.props.href);
     };
+    return _this;
   }
+  _inheritsLoose(ButtonLink, _Component);
+  var _proto = ButtonLink.prototype;
   /**
    * Renders an ActionButton and handles link handling.
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children,
       href,
       navigate,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement(ActionButton, _extends({
+    return /*#__PURE__*/_jsx(ActionButton, {
       className: "ui-shared__button-link",
       onClick: this.handleClick,
-      type: "secondary"
-    }, props), children);
-  }
-}
+      type: "secondary",
+      ...props,
+      children: children
+    });
+  };
+  return ButtonLink;
+}(Component);
 ButtonLink.defaultProps = {
   disabled: false,
   className: '',

package/ButtonLink/spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import ActionButton from "../ActionButton";
 import { UnwrappedButtonLink as ButtonLink } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<ButtonLink>', () => {
   describe('On click action', () => {
     beforeAll(() => {
@@ -10,10 +11,11 @@ describe('<ButtonLink>', () => {
     it('should create component and open page on click', () => {
       const mockedNavigate = jest.fn();
       const link = 'https://example.com';
-      const component = shallow(/*#__PURE__*/React.createElement(ButtonLink, {
+      const component = shallow(/*#__PURE__*/_jsx(ButtonLink, {
         href: link,
-        navigate: mockedNavigate
-      }, "Text inside"));
+        navigate: mockedNavigate,
+        children: "Text inside"
+      }));
       expect(component).toMatchSnapshot();
       component.simulate('click');
       expect(mockedNavigate).toHaveBeenCalledTimes(1);

package/Card/index.js

@@ -7,14 +7,16 @@ import styles from "./style";
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Card = ({
   className,
   children,
   id
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: `ui-shared__card ${styles} ${className}`,
-  id: id
-}, children);
+  id: id,
+  children: children
+});
 Card.defaultProps = {
   className: '',
   id: null

package/CardList/components/Item/index.js

@@ -8,6 +8,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Item = ({
   children,
   className,
@@ -16,10 +17,11 @@ const Item = ({
   if (!Children.count(children)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(ListItem, {
+  return /*#__PURE__*/_jsx(ListItem, {
     className: `${styles} ${className}`,
-    isSelected: isSelected
-  }, children);
+    isSelected: isSelected,
+    children: children
+  });
 };
 Item.defaultProps = {
   children: null,

package/CardList/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, Children, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import List from '@shopgate/pwa-common/components/List';
@@ -6,12 +7,18 @@ import Item from "./components/Item";
 /**
  * The CardList component.
  */
-class CardList extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let CardList = /*#__PURE__*/function (_Component) {
+  function CardList() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(CardList, _Component);
+  var _proto = CardList.prototype;
   /**
    * Renders the component.
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children,
       className
@@ -19,16 +26,18 @@ class CardList extends Component {
     if (!Children.count(children)) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(List, {
-      className: `ui-shared__card-list ${className}`
-    }, Children.map(children, child => {
-      if (! /*#__PURE__*/isValidElement(child)) {
-        return null;
-      }
-      return child;
-    }));
-  }
-}
+    return /*#__PURE__*/_jsx(List, {
+      className: `ui-shared__card-list ${className}`,
+      children: Children.map(children, child => {
+        if (! /*#__PURE__*/isValidElement(child)) {
+          return null;
+        }
+        return child;
+      })
+    });
+  };
+  return CardList;
+}(Component);
 CardList.Item = Item;
 CardList.defaultProps = {
   children: null,

package/CartTotalLine/components/Amount/index.js

@@ -8,6 +8,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Amount = ({
   amount,
   currency
@@ -15,14 +16,15 @@ const Amount = ({
   if (amount === null) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.amount
-  }, typeof amount === 'string' && /*#__PURE__*/React.createElement(I18n.Text, {
-    string: amount
-  }), typeof amount === 'number' && /*#__PURE__*/React.createElement(I18n.Price, {
-    price: amount,
-    currency: currency
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.amount,
+    children: [typeof amount === 'string' && /*#__PURE__*/_jsx(I18n.Text, {
+      string: amount
+    }), typeof amount === 'number' && /*#__PURE__*/_jsx(I18n.Price, {
+      price: amount,
+      currency: currency
+    })]
+  });
 };
 Amount.defaultProps = {
   amount: null,

package/CartTotalLine/components/Hint/index.js

@@ -8,17 +8,19 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX|null}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Hint = ({
   hint
 }) => {
   if (hint === null) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.hint
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: hint
-  }));
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.hint,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: hint
+    })
+  });
 };
 Hint.defaultProps = {
   hint: null

package/CartTotalLine/components/Label/index.js

@@ -9,6 +9,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX|null}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Label({
   label,
   showSeparator,
@@ -16,19 +17,20 @@ function Label({
   suffix
 }) {
   if (!label) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: styles.label
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.label
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: label,
-    params: labelParams,
-    className: classNames({
-      [styles.labelWithSuffix]: !!suffix
-    })
-  }), suffix, `${showSeparator ? ':' : ''}`);
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.label,
+    children: [/*#__PURE__*/_jsx(I18n.Text, {
+      string: label,
+      params: labelParams,
+      className: classNames({
+        [styles.labelWithSuffix]: !!suffix
+      })
+    }), suffix, `${showSeparator ? ':' : ''}`]
+  });
 }
 Label.defaultProps = {
   label: null,

package/CartTotalLine/components/Spacer/index.js

@@ -5,12 +5,14 @@ import PropTypes from 'prop-types';
  * @param {props} The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Spacer = ({
   children,
   className
-}) => /*#__PURE__*/React.createElement("div", {
-  className: className
-}, children);
+}) => /*#__PURE__*/_jsx("div", {
+  className: className,
+  children: children
+});
 Spacer.defaultProps = {
   children: null,
   className: null

package/CartTotalLine/index.js

@@ -10,6 +10,7 @@ import styles from "./style";
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartTotalLine = ({
   children,
   type,
@@ -19,13 +20,14 @@ const CartTotalLine = ({
   if (!children) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: classNames(className, `ui-shared__cart-total-line ui-shared__cart-${type}-line`, styles.line, {
       [styles.disabled]: isDisabled,
       [styles[type] || styles.base]: true
     }),
-    "data-test-id": `${type}CartTotal`
-  }, children);
+    "data-test-id": `${type}CartTotal`,
+    children: children
+  });
 };
 CartTotalLine.defaultProps = {
   children: null,

package/Checkbox/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -15,20 +14,22 @@ import styles from "./style";
  * @param {string} props.unCheckedClassName Class for unchecked icon.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Checkbox = ({
   checkedClassName,
   unCheckedClassName,
   className,
   ...props
-}) => /*#__PURE__*/React.createElement(BaseCheckbox, _extends({}, props, {
+}) => /*#__PURE__*/_jsx(BaseCheckbox, {
+  ...props,
   className: `ui-shared__checkbox ${className}`,
-  checkedIcon: /*#__PURE__*/React.createElement(CheckedIcon, {
+  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {
     className: classNames(styles.icon, checkedClassName, 'checkedIcon')
   }),
-  uncheckedIcon: /*#__PURE__*/React.createElement(UncheckedIcon, {
+  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {
     className: classNames(styles.icon, unCheckedClassName, 'uncheckedIcon')
   })
-}));
+});
 Checkbox.defaultProps = {
   checkedClassName: styles.checkedIcon,
   className: '',

package/Chip/index.js

@@ -10,6 +10,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Chip(props) {
   const {
     removable,
@@ -28,30 +29,35 @@ function Chip(props) {
   useEffect(() => {
     ref.current.removeAttribute('style');
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     className: `ui-shared__chip ${styles.chip(removable, invert)}`,
-    "data-test-id": id
-  }, removable && /*#__PURE__*/React.createElement(Button, {
-    className: styles.removeButton,
-    onClick: handleRemove,
-    testId: "removeFilter",
-    "aria-label": removeLabel
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: "<=xs",
-    appAlways: true
-  }, /*#__PURE__*/React.createElement(CrossIcon, {
-    size: 16
-  })), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    breakpoint: ">xs",
-    webOnly: true
-  }, /*#__PURE__*/React.createElement(CrossIcon, {
-    size: 18
-  }))), /*#__PURE__*/React.createElement(Button, {
-    className: styles.name,
-    onClick: onClick,
-    "aria-label": editLabel
-  }, children));
+    "data-test-id": id,
+    children: [removable && /*#__PURE__*/_jsxs(Button, {
+      className: styles.removeButton,
+      onClick: handleRemove,
+      testId: "removeFilter",
+      "aria-label": removeLabel,
+      children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+        breakpoint: "<=xs",
+        appAlways: true,
+        children: /*#__PURE__*/_jsx(CrossIcon, {
+          size: 16
+        })
+      }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+        breakpoint: ">xs",
+        webOnly: true,
+        children: /*#__PURE__*/_jsx(CrossIcon, {
+          size: 18
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Button, {
+      className: styles.name,
+      onClick: onClick,
+      "aria-label": editLabel,
+      children: children
+    })]
+  });
 }
 Chip.defaultProps = {
   invert: false,

package/Chip/spec.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Chip from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Chip />', () => {
   it('should render a tag', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Chip, {
-      id: "some-id"
-    }, "text"));
+    const wrapper = mount(/*#__PURE__*/_jsx(Chip, {
+      id: "some-id",
+      children: "text"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('button').length).toEqual(2);
     expect(wrapper.find('button').at(1).text()).toEqual('text');
@@ -13,10 +15,11 @@ describe('<Chip />', () => {
 });
 describe('<Chip />', () => {
   it('should render a without removable icon', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Chip, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Chip, {
       id: "some-id",
-      removable: false
-    }, "text"));
+      removable: false,
+      children: "text"
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('button').length).toEqual(1);
     expect(wrapper.find('button').at(0).text()).toEqual('text');