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

package/Form/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
@@ -5,53 +6,60 @@ import PropTypes from 'prop-types';
  * Form component that handles keyboard submit, next buttons, ...
  * @deprecated Use `@shopgate/engage/components/Form` instead.
  */
-class Form extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let Form = /*#__PURE__*/function (_PureComponent) {
   /**
    * Initializes the form component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function Form(props) {
+    var _this;
+    _this = _PureComponent.call(this, props) || this;
     /**
      * Handles the form submit.
      * @param {Object} event The event that caused the submit.
      */
-    this.handleSubmit = event => {
+    _this.handleSubmit = event => {
       event.preventDefault();
-      const inputFocused = [...this.formElement.current.querySelectorAll('input')].some(input => document.activeElement === input);
+      const inputFocused = [].concat(_this.formElement.current.querySelectorAll('input')).some(input => document.activeElement === input);
       if (inputFocused) {
         document.activeElement.blur();
       }
-      this.props.onSubmit();
+      _this.props.onSubmit();
     };
     /**
      * Handles form submits by key.
      * @param {Object} event The event that caused the keypress.
      */
-    this.handleKeyPress = event => {
+    _this.handleKeyPress = event => {
       // Enter key and on iOS also the "Done" button.
       if (event.which === 13) {
-        this.handleSubmit(event);
+        _this.handleSubmit(event);
       }
     };
-    this.formElement = /*#__PURE__*/React.createRef();
+    _this.formElement = /*#__PURE__*/React.createRef();
+    return _this;
   }
+  _inheritsLoose(Form, _PureComponent);
+  var _proto = Form.prototype;
   /**
    * Renders the component.
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-    return /*#__PURE__*/React.createElement("form", {
+    return /*#__PURE__*/_jsx("form", {
       action: "#",
       onSubmit: this.handleSubmit,
       onKeyPress: this.handleKeyPress,
       ref: this.formElement,
-      className: "ui-shared__form"
-    }, this.props.children);
+      className: "ui-shared__form",
+      children: this.props.children
+    });
     /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-  }
-}
+  };
+  return Form;
+}(PureComponent);
 Form.defaultProps = {
   onSubmit: () => {}
 };

package/FormElement/components/ErrorText/index.js

@@ -9,21 +9,23 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ErrorText = ({
   className,
   errorText,
   translate,
   elementName,
   ariaHidden
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsxs("div", {
   id: `ariaError-${elementName}`,
   className: classNames(className, styles, 'errorText'),
   "aria-live": "assertive",
   "aria-atomic": "true",
-  "aria-hidden": ariaHidden
-}, translate && /*#__PURE__*/React.createElement(I18n.Text, {
-  string: errorText
-}), !translate && errorText);
+  "aria-hidden": ariaHidden,
+  children: [translate && /*#__PURE__*/_jsx(I18n.Text, {
+    string: errorText
+  }), !translate && errorText]
+});
 ErrorText.defaultProps = {
   className: null,
   errorText: null,

package/FormElement/components/Label/index.js

@@ -9,6 +9,7 @@ import styles from "./style";
  * @param {Object} props The component props.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Label = ({
   hasErrorMessage,
   htmlFor,
@@ -18,14 +19,15 @@ const Label = ({
   labelStatic
 }) => {
   const labelStyles = styles.labelStyles(isFocused, isFloating, hasErrorMessage, labelStatic);
-  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */React.createElement("label", {
+  return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */_jsx("label", {
     htmlFor: htmlFor,
     className: classNames(labelStyles, 'label', {
       floating: isFloating
+    }),
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: label
     })
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: label
-  }));
+  });
 };
 Label.defaultProps = {
   htmlFor: '',

package/FormElement/components/Placeholder/index.js

@@ -12,17 +12,19 @@ import styles from "./style";
  * @param {boolean} hasLeftElement Whether a left element is present
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Placeholder = ({
   placeholder,
   visible,
   'aria-hidden': ariaHidden,
   hasLeftElement
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: classNames(styles.placeholderStyles(visible, hasLeftElement), 'placeholder'),
-  "aria-hidden": ariaHidden
-}, /*#__PURE__*/React.createElement(I18n.Text, {
-  string: placeholder
-}));
+  "aria-hidden": ariaHidden,
+  children: /*#__PURE__*/_jsx(I18n.Text, {
+    string: placeholder
+  })
+});
 Placeholder.defaultProps = {
   'aria-hidden': null,
   hasLeftElement: false,

package/FormElement/components/Underline/index.js

@@ -8,12 +8,14 @@ import styles from "./style";
  * @param {Object} props  The component props.
  * @return {JSX}
  */
-const Underline = props => /*#__PURE__*/React.createElement("div", {
-  className: classNames(styles.underlineWrapper, 'underline')
-}, /*#__PURE__*/React.createElement("div", {
-  className: styles.underline,
-  style: styles.underlineStyle(props.isFocused, props.hasErrorMessage)
-}));
+import { jsx as _jsx } from "react/jsx-runtime";
+const Underline = props => /*#__PURE__*/_jsx("div", {
+  className: classNames(styles.underlineWrapper, 'underline'),
+  children: /*#__PURE__*/_jsx("div", {
+    className: styles.underline,
+    style: styles.underlineStyle(props.isFocused, props.hasErrorMessage)
+  })
+});
 Underline.defaultProps = {
   isFocused: false,
   hasErrorMessage: false

package/FormElement/index.js

@@ -1,3 +1,5 @@
+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 classNames from 'classnames';
@@ -10,32 +12,17 @@ import style from "./style";
 /**
  * A component that provides a styled form element in material design.
  */
-class FormElement extends Component {
-  /**
-   * @returns {boolean} Whether the label is currently floating.
-   */
-  get isLabelFloating() {
-    return !this.props.labelStatic && (this.props.isFocused || this.props.hasValue);
-  }
-
-  /**
-   * @returns {boolean} Whether the hint text is currently visible.
-   */
-  get isPlaceholderVisible() {
-    return !this.props.isFocused && !this.props.hasValue;
-  }
-
-  /**
-   * @returns {boolean} Whether the hint text is currently visible.
-   */
-  get hasErrorMessage() {
-    return !!this.props.errorText;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let FormElement = /*#__PURE__*/function (_Component) {
+  function FormElement() {
+    return _Component.apply(this, arguments) || this;
   }
-
+  _inheritsLoose(FormElement, _Component);
+  var _proto = FormElement.prototype;
   /**
    * @return {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       isFocused,
       errorText,
@@ -50,32 +37,61 @@ class FormElement extends Component {
       labelStatic,
       showErrorText
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: classNames(style.formElement, className, 'formElement', 'ui-shared__form-element', {
         disabled
-      })
-    }, hasPlaceholder && (placeholder || label) && /*#__PURE__*/React.createElement(Placeholder, {
-      visible: this.isPlaceholderVisible,
-      placeholder: placeholder || label,
-      hasLeftElement: hasLeftElement,
-      "aria-hidden": true
-    }), label && /*#__PURE__*/React.createElement(Label, {
-      htmlFor: htmlFor,
-      label: label,
-      labelStatic: labelStatic,
-      isFocused: isFocused,
-      isFloating: this.isLabelFloating,
-      hasErrorMessage: this.hasErrorMessage
-    }), this.props.children, this.props.hasUnderline && /*#__PURE__*/React.createElement(Underline, {
-      isFocused: isFocused,
-      hasErrorMessage: this.hasErrorMessage
-    }), errorText && showErrorText && /*#__PURE__*/React.createElement(ErrorText, {
-      errorText: errorText,
-      translate: translateErrorText,
-      elementName: htmlFor
-    }));
-  }
-}
+      }),
+      children: [hasPlaceholder && (placeholder || label) && /*#__PURE__*/_jsx(Placeholder, {
+        visible: this.isPlaceholderVisible,
+        placeholder: placeholder || label,
+        hasLeftElement: hasLeftElement,
+        "aria-hidden": true
+      }), label && /*#__PURE__*/_jsx(Label, {
+        htmlFor: htmlFor,
+        label: label,
+        labelStatic: labelStatic,
+        isFocused: isFocused,
+        isFloating: this.isLabelFloating,
+        hasErrorMessage: this.hasErrorMessage
+      }), this.props.children, this.props.hasUnderline && /*#__PURE__*/_jsx(Underline, {
+        isFocused: isFocused,
+        hasErrorMessage: this.hasErrorMessage
+      }), errorText && showErrorText && /*#__PURE__*/_jsx(ErrorText, {
+        errorText: errorText,
+        translate: translateErrorText,
+        elementName: htmlFor
+      })]
+    });
+  };
+  return _createClass(FormElement, [{
+    key: "isLabelFloating",
+    get:
+    /**
+     * @returns {boolean} Whether the label is currently floating.
+     */
+    function () {
+      return !this.props.labelStatic && (this.props.isFocused || this.props.hasValue);
+    }
+
+    /**
+     * @returns {boolean} Whether the hint text is currently visible.
+     */
+  }, {
+    key: "isPlaceholderVisible",
+    get: function () {
+      return !this.props.isFocused && !this.props.hasValue;
+    }
+
+    /**
+     * @returns {boolean} Whether the hint text is currently visible.
+     */
+  }, {
+    key: "hasErrorMessage",
+    get: function () {
+      return !!this.props.errorText;
+    }
+  }]);
+}(Component);
 FormElement.defaultProps = {
   children: null,
   className: '',

package/FormElement/spec.js

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { mount } from 'enzyme';
 import FormElement from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const inputProps = {
   htmlFor: 'test-input'
 };
@@ -13,9 +13,7 @@ describe('<FormElement />', () => {
     },
     'should render a form element with 1 child': {
       props: {
-        children: [/*#__PURE__*/React.createElement("input", {
-          key: "test-key"
-        })]
+        children: [/*#__PURE__*/_jsx("input", {}, "test-key")]
       }
     },
     'should render a focused form element': {
@@ -48,7 +46,10 @@ describe('<FormElement />', () => {
   Object.keys(tests).forEach(test => {
     it(test, () => {
       const testFixtures = tests[test];
-      const wrapper = mount(/*#__PURE__*/React.createElement(FormElement, _extends({}, inputProps, testFixtures.props)));
+      const wrapper = mount(/*#__PURE__*/_jsx(FormElement, {
+        ...inputProps,
+        ...testFixtures.props
+      }));
       expect(wrapper).toMatchSnapshot();
       if (testFixtures.find) {
         expect(wrapper.find(testFixtures.find).find('Translate').props().string).toEqual(testFixtures.equal);
@@ -56,11 +57,11 @@ describe('<FormElement />', () => {
     });
   });
   it('Should hide placeholder with hasValue', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(FormElement, _extends({
-      label: "testlabel"
-    }, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(FormElement, {
+      label: "testlabel",
+      ...inputProps,
       hasValue: true
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('Placeholder').props().visible).toEqual(false);
   });

package/Glow/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 classNames from 'classnames';
@@ -9,43 +9,48 @@ import styles from "./style";
 /**
  * Renders a glowing component that is visible when the user interacts with the element.
  */
-class Glow extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Glow = /*#__PURE__*/function (_Component) {
   /**
    * The component constructor.
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.handleTouchTap = () => {
-      if (this.props.disabled) {
+  function Glow(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.handleTouchTap = () => {
+      if (_this.props.disabled) {
         return;
       }
-      this.setState({
+      _this.setState({
         hover: true
       });
-      this.timeout = setTimeout(() => {
-        this.setState({
+      _this.timeout = setTimeout(() => {
+        _this.setState({
           hover: false
         });
       }, 250);
     };
-    this.timeout = null;
-    this.state = {
+    _this.timeout = null;
+    _this.state = {
       hover: false
     };
+    return _this;
   }
 
   /**
    * Clears any previously set timeout.
    */
-  componentWillUnmount() {
+  _inheritsLoose(Glow, _Component);
+  var _proto = Glow.prototype;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     clearTimeout(this.timeout);
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children,
       styles: propStyles,
@@ -69,19 +74,22 @@ class Glow extends Component {
 
     /* eslint-disable jsx-a11y/no-static-element-interactions,
     jsx-a11y/click-events-have-key-events */
-    return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    return /*#__PURE__*/_jsxs("div", {
+      ...rest,
       className: classNames(styles.container, className, 'ui-shared__glow'),
       onClick: this.handleTouchTap,
       style: propStyles.container,
-      ref: forwardedRef
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles.glow,
-      style: innerInlineStyles
-    }), children);
+      ref: forwardedRef,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.glow,
+        style: innerInlineStyles
+      }), children]
+    });
     /* eslint-enable jsx-a11y/no-static-element-interactions,
     jsx-a11y/click-events-have-key-events */
-  }
-}
+  };
+  return Glow;
+}(Component);
 Glow.defaultProps = {
   color: themeConfig.colors.shade8,
   className: null,

package/Glow/spec.js

@@ -1,9 +1,14 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Glow from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Glow />', () => {
   it('should render with a smile', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Glow, null, /*#__PURE__*/React.createElement("p", null, "Glowing!")));
+    const wrapper = mount(/*#__PURE__*/_jsx(Glow, {
+      children: /*#__PURE__*/_jsx("p", {
+        children: "Glowing!"
+      })
+    }));
     expect(wrapper).toMatchSnapshot();
   });
 });

package/IndicatorCircle/index.js

@@ -12,24 +12,26 @@ import styles from "./style";
  * @param {boolean} props.paused Animation should be paused.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const IndicatorCircle = ({
   size,
   color,
   strokeWidth,
   paused
-}) => /*#__PURE__*/React.createElement("svg", {
+}) => /*#__PURE__*/_jsx("svg", {
   className: `${styles.spinner(paused)} ui-shared__indicator-circle`,
   viewBox: "25 25 50 50",
   width: size,
   height: size,
   xmlns: "http://www.w3.org/2000/svg",
-  "data-test-id": "loadingIndicator"
-}, /*#__PURE__*/React.createElement("circle", {
-  className: styles.circle(color, strokeWidth, paused),
-  cx: "50",
-  cy: "50",
-  r: "20"
-}));
+  "data-test-id": "loadingIndicator",
+  children: /*#__PURE__*/_jsx("circle", {
+    className: styles.circle(color, strokeWidth, paused),
+    cx: "50",
+    cy: "50",
+    r: "20"
+  })
+});
 IndicatorCircle.defaultProps = {
   color: `var(--color-secondary, ${themeConfig.colors.accent})`,
   paused: false,

package/IndicatorCircle/spec.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import IndicatorCircle from "./index";
 import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<IndicatorCircle />', () => {
   it('should apply the given size', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(IndicatorCircle, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(IndicatorCircle, {
       size: 32
     }));
     expect(wrapper).toMatchSnapshot();
@@ -13,7 +14,7 @@ describe('<IndicatorCircle />', () => {
     expect(svg.props().height).toBe(32);
   });
   it('should apply the given color', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(IndicatorCircle, {
+    const wrapper = mount(/*#__PURE__*/_jsx(IndicatorCircle, {
       size: 32,
       color: "#fff",
       strokeWidth: 4

package/LoadingIndicator/index.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { themeConfig } from '@shopgate/engage';
 import IndicatorCircle from "../IndicatorCircle";
 import { container, imgContainer } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   loadingIndicator: {
     imgSrc: loadingImageSrc
@@ -16,15 +17,16 @@ const {
  */
 const LoadingIndicator = ({
   className
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: classNames(className, {
     [container]: !loadingImageSrc,
     [imgContainer]: !!loadingImageSrc
-  }, 'loading-indicator', 'ui-shared__loading-indicator')
-}, loadingImageSrc ? /*#__PURE__*/React.createElement("img", {
-  src: loadingImageSrc,
-  alt: ""
-}) : /*#__PURE__*/React.createElement(IndicatorCircle, null));
+  }, 'loading-indicator', 'ui-shared__loading-indicator'),
+  children: loadingImageSrc ? /*#__PURE__*/_jsx("img", {
+    src: loadingImageSrc,
+    alt: ""
+  }) : /*#__PURE__*/_jsx(IndicatorCircle, {})
+});
 LoadingIndicator.defaultProps = {
   className: null
 };

package/Manufacturer/index.js

@@ -9,16 +9,18 @@ import styles from "./style";
  * @param {string} [props.className] CSS classes.
  * @return {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Manufacturer = ({
   className,
   text
-}) => /*#__PURE__*/React.createElement("div", {
-  className: `${styles} ${className} ui-shared__manufacturer`
-}, /*#__PURE__*/React.createElement("span", {
-  dangerouslySetInnerHTML: {
-    __html: text
-  }
-}));
+}) => /*#__PURE__*/_jsx("div", {
+  className: `${styles} ${className} ui-shared__manufacturer`,
+  children: /*#__PURE__*/_jsx("span", {
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  })
+});
 Manufacturer.defaultProps = {
   className: ''
 };

package/MessageBar/index.js

@@ -12,27 +12,30 @@ import styles from "./style";
  * @returns {JSX}
  * @deprecated Please import from `@shopgate/engage/components` instead.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const MessageBar = /*#__PURE__*/memo(({
   messages,
   classNames
-}) => /*#__PURE__*/React.createElement("div", {
+}) => /*#__PURE__*/_jsx("div", {
   className: classnames(styles.container, classNames.container, 'ui-shared__message-bar'),
-  role: messages.length > 0 ? 'alert' : null
-}, messages.map(item => {
-  const {
-    type = 'info',
-    message,
-    messageParams = null,
-    translated
-  } = item;
-  const messageOutput = !translated ? i18n.text(message, messageParams) : message;
-  return /*#__PURE__*/React.createElement("div", {
-    key: `${type}-${message}`,
-    className: classnames(classNames.message, styles[type])
-  }, /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": true
-  }, messageOutput));
-})));
+  role: messages.length > 0 ? 'alert' : null,
+  children: messages.map(item => {
+    const {
+      type = 'info',
+      message,
+      messageParams = null,
+      translated
+    } = item;
+    const messageOutput = !translated ? i18n.text(message, messageParams) : message;
+    return /*#__PURE__*/_jsx("div", {
+      className: classnames(classNames.message, styles[type]),
+      children: /*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        children: messageOutput
+      })
+    }, `${type}-${message}`);
+  })
+}));
 MessageBar.defaultProps = {
   classNames: {
     container: null,