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

package/PriceStriked/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import I18n from '@shopgate/pwa-common/components/I18n';
@@ -8,6 +9,7 @@ import styles from "./style";
  * @param {HTMLElement} element The price element
  * @returns {number} the calculated angle
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const calcAngle = element => {
   /**
    * If the element is in a hidden container the browser won't calculate it's size.
@@ -31,66 +33,76 @@ const calcAngle = element => {
  * @param {string} [props.className] CSS classes
  * @return {JSX}
  */
-class PriceStriked extends Component {
+let PriceStriked = /*#__PURE__*/function (_Component) {
   /**
    * Constructor
    * @param {Object} props The component props
    */
-  constructor(props) {
-    super(props);
+  function PriceStriked(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Sets the calculated angle for the DOM element
      * and returns true if succeeded.
      * @returns {boolean}
      */
-    this.setAngle = () => {
-      if (this.element) {
-        this.angle = calcAngle(this.element);
+    _this.setAngle = () => {
+      if (_this.element) {
+        _this.angle = calcAngle(_this.element);
         return true;
       }
       return false;
     };
-    this.angle = null;
-    this.element = null;
+    _this.angle = null;
+    _this.element = null;
+    return _this;
   }
 
   /**
    * Updates the component one more time with the calculated angle
    * based on the DOM element.
    */
-  componentDidMount() {
+  _inheritsLoose(PriceStriked, _Component);
+  var _proto = PriceStriked.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     if (this.setAngle()) {
       this.forceUpdate();
     }
-  }
+  };
   /**
    * Renders the component.
    * @returns {JSX.Element}
    */
-  render() {
+  _proto.render = function render() {
     const {
       __,
       _p
     } = this.context.i18n();
     const angleStyle = this.angle ? styles.getAngleStyle(this.angle) : '';
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `${styles.basic} ${this.props.className} ${angleStyle} price-striked ui-shared__price-striked`
-    }, /*#__PURE__*/React.createElement("span", {
-      "aria-hidden": true,
-      ref: ref => {
-        this.element = ref;
-      },
-      "data-test-id": `strikedPrice: ${this.props.value}`
-    }, /*#__PURE__*/React.createElement(I18n.Price, {
-      price: this.props.value,
-      currency: this.props.currency
-    }))), /*#__PURE__*/React.createElement("span", {
-      className: "sr-only"
-    }, __('price.label_old_price', {
-      price: _p(this.props.value, this.props.currency, true)
-    })));
-  }
-}
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${styles.basic} ${this.props.className} ${angleStyle} price-striked ui-shared__price-striked`,
+        children: /*#__PURE__*/_jsx("span", {
+          "aria-hidden": true,
+          ref: ref => {
+            this.element = ref;
+          },
+          "data-test-id": `strikedPrice: ${this.props.value}`,
+          children: /*#__PURE__*/_jsx(I18n.Price, {
+            price: this.props.value,
+            currency: this.props.currency
+          })
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        className: "sr-only",
+        children: __('price.label_old_price', {
+          price: _p(this.props.value, this.props.currency, true)
+        })
+      })]
+    });
+  };
+  return PriceStriked;
+}(Component);
 PriceStriked.defaultProps = {
   className: ''
 };

package/ProductProperties/index.js

@@ -8,6 +8,7 @@ import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Properties = ({
   lineClamp,
   properties,
@@ -16,16 +17,18 @@ const Properties = ({
   if (!properties.length) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("ul", {
-    className: classNames(className, 'ui-shared__product-properties')
-  }, properties.map(({
-    label,
-    value
-  }) => /*#__PURE__*/React.createElement("li", {
-    key: `${label}-${value}`
-  }, lineClamp && /*#__PURE__*/React.createElement(Ellipsis, {
-    rows: lineClamp
-  }, `${label}: ${value}`), !lineClamp && `${label}: ${value}`)));
+  return /*#__PURE__*/_jsx("ul", {
+    className: classNames(className, 'ui-shared__product-properties'),
+    children: properties.map(({
+      label,
+      value
+    }) => /*#__PURE__*/_jsxs("li", {
+      children: [lineClamp && /*#__PURE__*/_jsx(Ellipsis, {
+        rows: lineClamp,
+        children: `${label}: ${value}`
+      }), !lineClamp && `${label}: ${value}`]
+    }, `${label}-${value}`))
+  });
 };
 Properties.defaultProps = {
   className: null,

package/ProgressBar/index.js

@@ -1,9 +1,11 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 var _ProgressBar;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import UIEvents from '@shopgate/pwa-core/emitters/ui';
 import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 const duration = 150;
 const transitionStyles = {
   entering: {
@@ -24,24 +26,28 @@ const transitionStyles = {
  * A component for visualizing any kind of progress.
  * This component will show the current progress in a linear bar.
  */
-class ProgressBar extends Component {
+let ProgressBar = /*#__PURE__*/function (_Component) {
   /**
    * The constructor
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
-    this.state = {
+  function ProgressBar(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.state = {
       isAnimating: props.isVisible,
       isVisible: props.isVisible
     };
+    return _this;
   }
 
   /**
    * Update the state based on props.
    * @param {Object} nextProps The next set of props.
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(ProgressBar, _Component);
+  var _proto = ProgressBar.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.isVisible === nextProps.isVisible) {
       return;
     }
@@ -58,38 +64,41 @@ class ProgressBar extends Component {
    * @param {Object} nextProps The next set of props.
    * @param {Object} nextState The next component state.
    * @returns {boolean}
-   */
-  shouldComponentUpdate(nextProps, nextState) {
+   */;
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     return this.state.isAnimating !== nextState.isAnimating || this.state.isVisible !== nextState.isVisible;
   }
 
   /**
    * Renders the component.
    * @return {JSX}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const animationClasses = [styles.innerElement];
 
     // Add the animation if we need it.
     if (this.state.isAnimating) {
       animationClasses.push(styles.animating);
     }
-    return /*#__PURE__*/React.createElement(Transition, {
+    return /*#__PURE__*/_jsx(Transition, {
       in: this.state.isVisible,
       timeout: duration,
       onExited: () => {
         this.setState({
           isAnimating: false
         });
-      }
-    }, state => /*#__PURE__*/React.createElement("div", {
-      className: `${styles.wrapper()} ui-shared__progress-bar`,
-      style: transitionStyles[state]
-    }, /*#__PURE__*/React.createElement("div", {
-      className: animationClasses.join(' ')
-    })));
-  }
-}
+      },
+      children: state => /*#__PURE__*/_jsx("div", {
+        className: `${styles.wrapper()} ui-shared__progress-bar`,
+        style: transitionStyles[state],
+        children: /*#__PURE__*/_jsx("div", {
+          className: animationClasses.join(' ')
+        })
+      })
+    });
+  };
+  return ProgressBar;
+}(Component);
 _ProgressBar = ProgressBar;
 ProgressBar.PROGRESS_BAR_SHOW = 'PROGRESS_BAR_SHOW';
 ProgressBar.PROGRESS_BAR_HIDE = 'PROGRESS_BAR_HIDE';

package/ProgressBar/spec.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Transition from 'react-transition-group/Transition';
 import ProgressBar from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('<ProgressBar />', () => {
   it('renders an indeterminate progress bar.', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ProgressBar, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ProgressBar, {
       isVisible: true
     }));
     expect(wrapper).toMatchSnapshot();

package/RadioButton/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import BaseCheckbox from '@shopgate/pwa-common/components/Checkbox';
 import CheckedIcon from "../icons/RadioCheckedIcon";
@@ -10,12 +9,14 @@ import styles from "./style";
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
-const RadioButton = props => /*#__PURE__*/React.createElement(BaseCheckbox, _extends({}, props, {
-  checkedIcon: /*#__PURE__*/React.createElement(CheckedIcon, {
+import { jsx as _jsx } from "react/jsx-runtime";
+const RadioButton = props => /*#__PURE__*/_jsx(BaseCheckbox, {
+  ...props,
+  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {
     className: styles.checkedIcon
   }),
-  uncheckedIcon: /*#__PURE__*/React.createElement(UncheckedIcon, {
+  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {
     className: styles.uncheckedIcon
   })
-}));
+});
 export default RadioButton;

package/RadioButton/spec.js

@@ -3,9 +3,10 @@ import { mount } from 'enzyme';
 import CheckedIcon from "../icons/RadioCheckedIcon";
 import UncheckedIcon from "../icons/RadioUncheckedIcon";
 import RadioButton from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 describe('RadioButton', () => {
   it('should render selected RadioButton', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(RadioButton, {
+    const wrapper = mount(/*#__PURE__*/_jsx(RadioButton, {
       checked: true
     }));
     expect(wrapper.find(CheckedIcon).exists()).toBe(true);
@@ -13,7 +14,7 @@ describe('RadioButton', () => {
     expect(wrapper).toMatchSnapshot();
   });
   it('should render unselected RadioButton', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(RadioButton, null));
+    const wrapper = mount(/*#__PURE__*/_jsx(RadioButton, {}));
     expect(wrapper.find(CheckedIcon).exists()).toBe(false);
     expect(wrapper.find(UncheckedIcon).exists()).toBe(true);
     expect(wrapper).toMatchSnapshot();

package/RatingNumber/index.js

@@ -10,6 +10,7 @@ import { RATING_SCALE_DIVISOR } from "../RatingStars/constants";
  * @param {string} props.className Class name.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const RatingNumber = ({
   rating,
   className
@@ -21,7 +22,7 @@ const RatingNumber = ({
   if (Number.isNaN(number)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(I18n.Number, {
+  return /*#__PURE__*/_jsx(I18n.Number, {
     number: number,
     className: `${className} ui-shared__rating-number`,
     fractions: 2

package/RatingStars/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import times from 'lodash/times';
@@ -9,7 +10,7 @@ import { RATING_SCALE_DIVISOR } from "./constants";
 /**
  * The available style keys for the rating stars.
  */
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const numStars = 5;
 
 /**
@@ -17,13 +18,18 @@ const numStars = 5;
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-class RatingStars extends Component {
+let RatingStars = /*#__PURE__*/function (_Component) {
+  function RatingStars() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(RatingStars, _Component);
+  var _proto = RatingStars.prototype;
   /**
    * Only update the component if the star rating changed.
    * @param {Object} nextProps The next component props.
    * @returns {boolean}
    */
-  shouldComponentUpdate(nextProps) {
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     return nextProps.value !== this.props.value;
   }
 
@@ -31,8 +37,8 @@ class RatingStars extends Component {
    * Returns textual version of stars for screen readers.
    * @param {number} stars Number of stars.
    * @returns {string}
-   */
-  getTextualFinal(stars) {
+   */;
+  _proto.getTextualFinal = function getTextualFinal(stars) {
     const {
       __
     } = this.context.i18n();
@@ -46,8 +52,8 @@ class RatingStars extends Component {
    * Returns text for call to a
    * @param {number} stars Number of stars.
    * @returns {string}
-   */
-  getTextualCTA(stars) {
+   */;
+  _proto.getTextualCTA = function getTextualCTA(stars) {
     const {
       __
     } = this.context.i18n();
@@ -60,8 +66,8 @@ class RatingStars extends Component {
    * Handles click on RatingStars.
    * @param {Object} e SyntheticEvent.
    * @param {number} pos Position/Index of clicked RatingStar.
-   */
-  handleSelection(e, pos) {
+   */;
+  _proto.handleSelection = function handleSelection(e, pos) {
     const {
       onSelection
     } = this.props;
@@ -72,8 +78,8 @@ class RatingStars extends Component {
   /**
    * Renders the component.
    * @returns {JSX.Element}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       value,
       isSelectable
@@ -84,7 +90,7 @@ class RatingStars extends Component {
     const size = styles.iconStyles[this.props.display].iconSize;
     const className = [styles.container, this.props.className, 'ui-shared__rating-stars'].join(' ');
     const iconClassName = [styles.iconStyles[this.props.display].iconStyle, styles.icon].join(' ');
-    const emptyStars = [...times(numStars, i => {
+    const emptyStars = [].concat(times(numStars, i => {
       const pos = i + 1;
       const starProps = {
         className: iconClassName,
@@ -95,11 +101,14 @@ class RatingStars extends Component {
           onClick: e => this.handleSelection(e, pos)
         })
       };
-      return /*#__PURE__*/React.createElement("div", starProps, /*#__PURE__*/React.createElement(StarIcon, {
-        size: size
-      }));
-    })];
-    const filledStars = [...times(numFullStars, i => {
+      return /*#__PURE__*/_jsx("div", {
+        ...starProps,
+        children: /*#__PURE__*/_jsx(StarIcon, {
+          size: size
+        })
+      });
+    }));
+    const filledStars = [].concat(times(numFullStars, i => {
       const pos = i + 1;
       const starProps = {
         className: iconClassName,
@@ -111,27 +120,34 @@ class RatingStars extends Component {
           onClick: e => this.handleSelection(e, pos)
         })
       };
-      return /*#__PURE__*/React.createElement("div", starProps, /*#__PURE__*/React.createElement(StarIcon, {
-        size: size
-      }));
-    }), ...times(numHalfStars, i => /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/_jsx("div", {
+        ...starProps,
+        children: /*#__PURE__*/_jsx(StarIcon, {
+          size: size
+        })
+      });
+    }), times(numHalfStars, i => /*#__PURE__*/_jsx("div", {
       className: iconClassName,
-      key: i + numFullStars
-    }, /*#__PURE__*/React.createElement(StarHalfIcon, {
-      size: size
-    })))];
-    return /*#__PURE__*/React.createElement("div", {
+      children: /*#__PURE__*/_jsx(StarHalfIcon, {
+        size: size
+      })
+    }, i + numFullStars)));
+    return /*#__PURE__*/_jsxs("div", {
       role: isSelectable ? undefined : 'img',
       className: className,
       "aria-label": this.getTextualFinal(ratedStars),
-      "data-test-id": `ratedStars: ${ratedStars}`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${styles.emptyStars} rating-stars-empty`
-    }, emptyStars), /*#__PURE__*/React.createElement("div", {
-      className: `${styles.filledStars} rating-stars-filled`
-    }, filledStars));
-  }
-}
+      "data-test-id": `ratedStars: ${ratedStars}`,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${styles.emptyStars} rating-stars-empty`,
+        children: emptyStars
+      }), /*#__PURE__*/_jsx("div", {
+        className: `${styles.filledStars} rating-stars-filled`,
+        children: filledStars
+      })]
+    });
+  };
+  return RatingStars;
+}(Component);
 /**
  * Context types definition.
  * @type {{i18n: function}}

package/RatingStars/spec.js

@@ -4,10 +4,11 @@ import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOpti
 import StarIcon from "../icons/StarIcon";
 import StarHalfIcon from "../icons/StarHalfIcon";
 import RatingStars from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 const numEmptyStars = 5;
 describe('<RatingStars />', () => {
   it('renders with value of 50', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(RatingStars, {
       value: 50
     }), mockRenderOptions);
     expect(wrapper).toMatchSnapshot();
@@ -15,7 +16,7 @@ describe('<RatingStars />', () => {
     expect(wrapper.find(StarHalfIcon).length).toBe(1);
   });
   it('renders with value of 0', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(RatingStars, {
       value: 0
     }), mockRenderOptions);
     expect(wrapper).toMatchSnapshot();
@@ -23,7 +24,7 @@ describe('<RatingStars />', () => {
     expect(wrapper.find(StarHalfIcon).length).toBe(0);
   });
   it('renders with value of 100', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(RatingStars, {
       value: 100
     }), mockRenderOptions);
     expect(wrapper).toMatchSnapshot();
@@ -31,7 +32,7 @@ describe('<RatingStars />', () => {
     expect(wrapper.find(StarHalfIcon).length).toBe(0);
   });
   it('should change rating on click', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(RatingStars, {
       value: 100,
       isSelectable: true
     }), mockRenderOptions);
@@ -50,7 +51,7 @@ describe('<RatingStars />', () => {
   });
   it('should call onSelection callback when component is selectable', () => {
     const spy = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(RatingStars, {
       value: 100,
       isSelectable: true,
       onSelection: e => {
@@ -79,7 +80,7 @@ describe('<RatingStars />', () => {
   });
   it('should NOT call onSelection callback when component is NOT selectable', () => {
     const spy = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(RatingStars, {
       value: 100,
       onSelection: spy
     }), mockRenderOptions);

package/Ripple/components/RippleAnimation/index.js

@@ -17,6 +17,7 @@ import style from "../../style";
  * @param {number} props.y The y coordinate of the ripple center.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 function RippleAnimation({
   color,
   duration,
@@ -74,21 +75,22 @@ function RippleAnimation({
     el.addEventListener('transitionend', handleEnd);
     return () => el.removeEventListener('transitionend', handleEnd);
   }, [onComplete]);
-  return /*#__PURE__*/React.createElement(Transition, {
+  return /*#__PURE__*/_jsx(Transition, {
     in: inProp,
     timeout: duration,
     appear: true,
     mountOnEnter: true,
     unmountOnExit: true,
-    nodeRef: nodeRef
-  }, state => /*#__PURE__*/React.createElement("div", {
-    ref: nodeRef,
-    className: style.ripple,
-    style: {
-      ...baseStyle,
-      ...transitionStyles[state]
-    }
-  }));
+    nodeRef: nodeRef,
+    children: state => /*#__PURE__*/_jsx("div", {
+      ref: nodeRef,
+      className: style.ripple,
+      style: {
+        ...baseStyle,
+        ...transitionStyles[state]
+      }
+    })
+  });
 }
 RippleAnimation.defaultProps = {
   color: themeConfig.colors.dark,