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

package/TextField/components/Label/index.js

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

package/TextField/components/Underline/index.js

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

package/TextField/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';
@@ -11,30 +13,32 @@ import FormElement from "./components/FormElement/index";
 /**
  * A component that provides a styled text field for user input in material design.
  */
-class TextField extends Component {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let TextField = /*#__PURE__*/function (_Component) {
   /**
    * Creates a new text field component.
    * @param {Object} props The component properties.
    */
-  constructor(props) {
-    super(props);
+  function TextField(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Internal focus event handler.
      * @param {boolean} isFocused Whether the input component is focused.
      */
-    this.handleFocusChange = isFocused => {
-      this.setState({
+    _this.handleFocusChange = isFocused => {
+      _this.setState({
         isFocused
       });
-      this.props.onFocusChange(isFocused);
+      _this.props.onFocusChange(isFocused);
     };
     /**
      * Updates the state if the input value has been changed.
      * @param {string} value The entered text.
      * @param {Object} event The original event object.
      */
-    this.handleChange = (value, event) => {
-      this.props.onChange(value, event);
+    _this.handleChange = (value, event) => {
+      _this.props.onChange(value, event);
     };
     /**
      * Updates the validation error text if required.
@@ -42,8 +46,8 @@ class TextField extends Component {
      * @param {boolean} isInitial Whether this is the initial value of the input field.
      * @return {boolean} Whether the validation was successful.
      */
-    this.handleValidate = (value, isInitial) => {
-      const validationError = this.props.onValidate(value);
+    _this.handleValidate = (value, isInitial) => {
+      const validationError = _this.props.onValidate(value);
       if (validationError !== true && validationError) {
         /**
          * An error message was returned by the validation callback. Update the state.
@@ -51,15 +55,15 @@ class TextField extends Component {
          * sure we're not calling setState() in this situation.
          */
         if (!isInitial) {
-          this.setState({
+          _this.setState({
             validationError
           });
         } else {
-          this.state.validationError = validationError;
+          _this.state.validationError = validationError;
         }
-      } else if (this.state.validationError) {
+      } else if (_this.state.validationError) {
         // There was no error, clear the state variable.
-        this.setState({
+        _this.setState({
           validationError: null
         });
       }
@@ -67,48 +71,23 @@ class TextField extends Component {
       // Forward the boolean result to the input field.
       return validationError === true;
     };
-    this.state = {
+    _this.state = {
       isFocused: false,
       validationError: null
     };
+    return _this;
   }
 
   /**
    * @returns {boolean} Whether the text field is currently focused.
    */
-  get isFocused() {
-    return this.state.isFocused;
-  }
-
-  /**
-   * @returns {boolean} Whether the label is currently floating.
-   */
-  get isLabelFloating() {
-    // On Firefox empty date inputs always show a placeholder with date pattern
-    if (navigator.userAgent.includes('Firefox') && this.props.type === 'date') {
-      return true;
-    }
-    return this.isFocused || !!this.props.value;
-  }
-
-  /**
-   * @returns {boolean} Whether the hint text is currently visible.
-   */
-  get isHintVisible() {
-    return this.isFocused && !this.props.value;
-  }
-
-  /**
-   * @return {boolean} Whether the error message is set.
-   */
-  get hasErrorMessage() {
-    return !!(this.state.validationError || this.props.errorText);
-  }
+  _inheritsLoose(TextField, _Component);
+  var _proto = TextField.prototype;
   /**
    * Renders the text field.
    * @return {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const styleType = this.props.multiLine ? 'multiLine' : 'input';
     const style = styles.container[styleType];
     const {
@@ -130,50 +109,88 @@ class TextField extends Component {
       translateErrorText,
       required
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: classNames(style, className, 'textField', 'ui-shared__text-field', {
         disabled
-      })
-    }, /*#__PURE__*/React.createElement(Hint, {
-      visible: this.isHintVisible,
-      hintText: hintText
-    }), /*#__PURE__*/React.createElement(Label, {
-      name: name,
-      label: label,
-      isFocused: this.isFocused,
-      isFloating: this.isLabelFloating,
-      hasErrorMessage: this.hasErrorMessage
-    }), /*#__PURE__*/React.createElement(FormElement, {
-      id: name,
-      multiLine: multiLine,
-      name: name,
-      setRef: setRef,
-      onFocusChange: this.handleFocusChange,
-      onChange: this.handleChange,
-      onSanitize: onSanitize,
-      onValidate: this.handleValidate,
-      password: password,
-      type: type,
-      value: value,
-      isControlled: isControlled,
-      inputComponent: inputComponent,
-      disabled: disabled,
-      required: required,
-      attributes: {
-        'aria-invalid': !!errorText,
-        'aria-describedby': this.hasErrorMessage ? `ariaError-${name}` : null
+      }),
+      children: [/*#__PURE__*/_jsx(Hint, {
+        visible: this.isHintVisible,
+        hintText: hintText
+      }), /*#__PURE__*/_jsx(Label, {
+        name: name,
+        label: label,
+        isFocused: this.isFocused,
+        isFloating: this.isLabelFloating,
+        hasErrorMessage: this.hasErrorMessage
+      }), /*#__PURE__*/_jsx(FormElement, {
+        id: name,
+        multiLine: multiLine,
+        name: name,
+        setRef: setRef,
+        onFocusChange: this.handleFocusChange,
+        onChange: this.handleChange,
+        onSanitize: onSanitize,
+        onValidate: this.handleValidate,
+        password: password,
+        type: type,
+        value: value,
+        isControlled: isControlled,
+        inputComponent: inputComponent,
+        disabled: disabled,
+        required: required,
+        attributes: {
+          'aria-invalid': !!errorText,
+          'aria-describedby': this.hasErrorMessage ? `ariaError-${name}` : null
+        }
+      }), /*#__PURE__*/_jsx(Underline, {
+        isFocused: this.isFocused,
+        hasErrorMessage: this.hasErrorMessage
+      }), showErrorText && /*#__PURE__*/_jsx(ErrorText, {
+        validationError: this.state.validationError,
+        errorText: errorText,
+        translate: translateErrorText,
+        elementName: name
+      })]
+    });
+  };
+  return _createClass(TextField, [{
+    key: "isFocused",
+    get: function () {
+      return this.state.isFocused;
+    }
+
+    /**
+     * @returns {boolean} Whether the label is currently floating.
+     */
+  }, {
+    key: "isLabelFloating",
+    get: function () {
+      // On Firefox empty date inputs always show a placeholder with date pattern
+      if (navigator.userAgent.includes('Firefox') && this.props.type === 'date') {
+        return true;
       }
-    }), /*#__PURE__*/React.createElement(Underline, {
-      isFocused: this.isFocused,
-      hasErrorMessage: this.hasErrorMessage
-    }), showErrorText && /*#__PURE__*/React.createElement(ErrorText, {
-      validationError: this.state.validationError,
-      errorText: errorText,
-      translate: translateErrorText,
-      elementName: name
-    }));
-  }
-}
+      return this.isFocused || !!this.props.value;
+    }
+
+    /**
+     * @returns {boolean} Whether the hint text is currently visible.
+     */
+  }, {
+    key: "isHintVisible",
+    get: function () {
+      return this.isFocused && !this.props.value;
+    }
+
+    /**
+     * @return {boolean} Whether the error message is set.
+     */
+  }, {
+    key: "hasErrorMessage",
+    get: function () {
+      return !!(this.state.validationError || this.props.errorText);
+    }
+  }]);
+}(Component);
 TextField.defaultProps = {
   className: '',
   errorText: '',

package/TextField/spec.js

@@ -1,35 +1,40 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { mount } from 'enzyme';
 import TextField from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const inputProps = {
   name: 'test-input'
 };
 describe('<TextField />', () => {
   it('should render a simple text field', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, inputProps));
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input').length).toBe(1);
   });
   it('should render the text field as password', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       password: true
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input[type="password"]').length).toBe(1);
   });
   it('should render the text field with a default value', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       value: "FooBar"
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('input[value="FooBar"]').length).toBe(1);
   });
   it('should trigger the onChange callback', () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onChange: onChangeMock
-    })));
+    }));
     wrapper.find('input').simulate('change', {
       target: {
         value: 'a'
@@ -39,7 +44,9 @@ describe('<TextField />', () => {
     expect(wrapper.find('input').props().value).toEqual('a');
   });
   it('should receive the correct value while typing', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, inputProps));
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps
+    }));
     const input = wrapper.find('input');
     input.simulate('change', {
       target: {
@@ -50,9 +57,10 @@ describe('<TextField />', () => {
     expect(input.instance().value).toBe('foobar');
   });
   it('should sanitize the input', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onSanitize: value => value.toUpperCase()
-    })));
+    }));
     const input = wrapper.find('input');
     input.simulate('change', {
       target: {
@@ -64,17 +72,19 @@ describe('<TextField />', () => {
   });
   it('should trigger the validation callback', () => {
     const onValidateMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onValidate: onValidateMock
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(onValidateMock).toHaveBeenCalled();
   });
   it('should focus the input', () => {
     const onFocusMock = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onFocusChange: onFocusMock
-    })));
+    }));
     const input = wrapper.find('input');
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.instance().isFocused).toBe(false);
@@ -85,25 +95,28 @@ describe('<TextField />', () => {
   });
   it('should show the error message', () => {
     const errorText = 'This is an error here';
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       errorText: errorText
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('Translate').at(2).props().string).toEqual(errorText);
   });
   it('should show the label', () => {
     const label = 'This is the label';
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       label: label
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('Label').find('Translate').props().string).toEqual(label);
   });
   it('should show the hint text', () => {
     const hintText = 'This is the hint text';
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       hintText: hintText
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('Hint').find('Translate').at(0).props().string).toEqual(hintText);
   });
@@ -113,9 +126,10 @@ describe('<TextField />', () => {
      * @return {string} The error message.
      */
     const onValidate = () => 'Custom validation error';
-    const wrapper = mount(/*#__PURE__*/React.createElement(TextField, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
+      ...inputProps,
       onValidate: onValidate
-    })));
+    }));
     wrapper.find('input').simulate('blur');
     expect(wrapper).toMatchSnapshot();
     // Expect at least one element containing the validation error text.

package/ToggleIcon/index.js

@@ -1,48 +1,54 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * No operational default handler
  */
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const noop = () => {};
 
 /**
  * An toggle icon with toggle handlers.
  */
-class ToggleIcon extends Component {
+let ToggleIcon = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component properties.
    */
-  constructor(props) {
-    super(props);
+  function ToggleIcon(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Toggle icon
      */
-    this.handleToggle = () => {
-      this.setState(({
+    _this.handleToggle = () => {
+      _this.setState(({
         on
       }) => ({
         on: !on
-      }), () => this.props.toggleHandler(this.state.on));
+      }), () => _this.props.toggleHandler(_this.state.on));
     };
-    this.state = {
+    _this.state = {
       on: props.on
     };
+    return _this;
   }
 
   /**
    * Reset state to received props
    * @param {Object} nextProps next props
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(ToggleIcon, _Component);
+  var _proto = ToggleIcon.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({
       on: nextProps.on
     });
-  }
+  };
   /**
    * @return {*}
    */
-  render() {
+  _proto.render = function render() {
     const {
       onIcon,
       offIcon
@@ -50,13 +56,15 @@ class ToggleIcon extends Component {
     const {
       on
     } = this.state;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: "ui-shared__toggle-icon",
       onClick: this.handleToggle,
-      "aria-hidden": true
-    }, on && onIcon, !on && offIcon);
-  }
-}
+      "aria-hidden": true,
+      children: [on && onIcon, !on && offIcon]
+    });
+  };
+  return ToggleIcon;
+}(Component);
 ToggleIcon.defaultProps = {
   on: true,
   toggleHandler: noop

package/ToggleIcon/spec.js

@@ -1,33 +1,37 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { mount } from 'enzyme';
 import ToggleIcon from "./index";
 import VisibilityIcon from "../icons/VisibilityIcon";
 import VisibilityOffIcon from "../icons/VisibilityOffIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
 const inputProps = {
-  onIcon: /*#__PURE__*/React.createElement(VisibilityIcon, null),
-  offIcon: /*#__PURE__*/React.createElement(VisibilityOffIcon, null)
+  onIcon: /*#__PURE__*/_jsx(VisibilityIcon, {}),
+  offIcon: /*#__PURE__*/_jsx(VisibilityOffIcon, {})
 };
 describe('<ToggleIcon>', () => {
   it('should render a toggle icon', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(ToggleIcon, inputProps));
+    const wrapper = mount(/*#__PURE__*/_jsx(ToggleIcon, {
+      ...inputProps
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('VisibilityIcon').length).toBe(1);
     expect(wrapper.find('VisibilityOffIcon').length).toBe(0);
   });
   it('should render a toggle icon with false as default', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(ToggleIcon, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(ToggleIcon, {
+      ...inputProps,
       on: false
-    })));
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find('VisibilityIcon').length).toBe(0);
     expect(wrapper.find('VisibilityOffIcon').length).toBe(1);
   });
   it('should trigger the toggleHandler callback', () => {
     const mockToggleHandler = jest.fn();
-    const wrapper = mount(/*#__PURE__*/React.createElement(ToggleIcon, _extends({}, inputProps, {
+    const wrapper = mount(/*#__PURE__*/_jsx(ToggleIcon, {
+      ...inputProps,
       toggleHandler: mockToggleHandler
-    })));
+    }));
     wrapper.find('div').simulate('click');
     expect(wrapper).toMatchSnapshot();
     expect(mockToggleHandler.mock.calls.length).toBe(1);

package/icons/AccountBoxIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,7 +7,9 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {Object} props The icon component properties.
  * @returns {JSX}
  */
-const AccountBox = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  content: themeConfig.icons.accountBox
-}, props));
+import { jsx as _jsx } from "react/jsx-runtime";
+const AccountBox = props => /*#__PURE__*/_jsx(Icon, {
+  content: themeConfig.icons.accountBox,
+  ...props
+});
 export default AccountBox;

package/icons/AddMoreIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,7 +7,9 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {Object} props The icon component properties.
  * @returns {JSX}
  */
-const AddMore = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  content: themeConfig.icons.addMore
-}, props));
+import { jsx as _jsx } from "react/jsx-runtime";
+const AddMore = props => /*#__PURE__*/_jsx(Icon, {
+  content: themeConfig.icons.addMore,
+  ...props
+});
 export default AddMore;

package/icons/ArrowDropIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
@@ -8,7 +7,9 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {Object} props The icon component properties.
  * @returns {JSX}
  */
-const ArrowDrop = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  content: themeConfig.icons.arrowDrop
-}, props));
+import { jsx as _jsx } from "react/jsx-runtime";
+const ArrowDrop = props => /*#__PURE__*/_jsx(Icon, {
+  content: themeConfig.icons.arrowDrop,
+  ...props
+});
 export default ArrowDrop;

package/icons/ArrowIcon.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@shopgate/pwa-common/components/Icon';
@@ -10,14 +9,16 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
  * @param {boolean} props.shadow Whether to show a shadow under the arrow.
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ArrowIcon = ({
   shadow,
   ...props
 }) => {
   const content = shadow ? themeConfig.icons.arrowShadowed : themeConfig.icons.arrow;
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    content: content
-  }, props));
+  return /*#__PURE__*/_jsx(Icon, {
+    content: content,
+    ...props
+  });
 };
 ArrowIcon.defaultProps = {
   shadow: false