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

package/ProgressBar/index.js

@@ -1,25 +1,113 @@
-var _ProgressBar;function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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";var duration=150;var transitionStyles={entering:{transform:'scale(1, 1)'},entered:{transform:'scale(1, 1)'},exited:{transform:'scale(1, 0)'},exiting:{transform:'scale(1, 0)'}};/**
+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";
+const duration = 150;
+const transitionStyles = {
+  entering: {
+    transform: 'scale(1, 1)'
+  },
+  entered: {
+    transform: 'scale(1, 1)'
+  },
+  exited: {
+    transform: 'scale(1, 0)'
+  },
+  exiting: {
+    transform: 'scale(1, 0)'
+  }
+};
+
+/**
  * A component for visualizing any kind of progress.
  * This component will show the current progress in a linear bar.
- */var ProgressBar=/*#__PURE__*/function(_Component){/**
+ */
+class ProgressBar extends Component {
+  /**
    * The constructor
    * @param {Object} props The component props.
-   */function ProgressBar(props){var _this2;_classCallCheck(this,ProgressBar);_this2=_callSuper(this,ProgressBar,[props]);_this2.state={isAnimating:props.isVisible,isVisible:props.isVisible};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      isAnimating: props.isVisible,
+      isVisible: props.isVisible
+    };
+  }
+
+  /**
    * Update the state based on props.
    * @param {Object} nextProps The next set of props.
-   */_inherits(ProgressBar,_Component);return _createClass(ProgressBar,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isVisible===nextProps.isVisible){return;}this.setState(_extends({},nextProps.isVisible&&{isAnimating:true},{isVisible:nextProps.isVisible}));}/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.isVisible === nextProps.isVisible) {
+      return;
+    }
+    this.setState({
+      ...(nextProps.isVisible && {
+        isAnimating: true
+      }),
+      isVisible: nextProps.isVisible
+    });
+  }
+
+  /**
    * Only update when certain state changes are made.
    * @param {Object} nextProps The next set of props.
    * @param {Object} nextState The next component state.
    * @returns {boolean}
-   */},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){return this.state.isAnimating!==nextState.isAnimating||this.state.isVisible!==nextState.isVisible;}/**
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.isAnimating !== nextState.isAnimating || this.state.isVisible !== nextState.isVisible;
+  }
+
+  /**
    * Renders the component.
    * @return {JSX}
-   */},{key:"render",value:function render(){var _this3=this;var animationClasses=[styles.innerElement];// Add the animation if we need it.
-if(this.state.isAnimating){animationClasses.push(styles.animating);}return React.createElement(Transition,{"in":this.state.isVisible,timeout:duration,onExited:function onExited(){_this3.setState({isAnimating:false});}},function(state){return React.createElement("div",{className:"".concat(styles.wrapper()," ui-shared__progress-bar"),style:transitionStyles[state]},React.createElement("div",{className:animationClasses.join(' ')}));});}}]);}(Component);_ProgressBar=ProgressBar;_defineProperty(ProgressBar,"PROGRESS_BAR_SHOW",'PROGRESS_BAR_SHOW');_defineProperty(ProgressBar,"PROGRESS_BAR_HIDE",'PROGRESS_BAR_HIDE');/**
-   * Shows the progress bar.
-   * @param {string} pattern The router pattern to show the bar for.
-   */_defineProperty(ProgressBar,"show",function(pattern){UIEvents.emit(_ProgressBar.PROGRESS_BAR_SHOW,pattern);});/**
-   * Hides the progress bar.
-   * @param {string} pattern The router pattern to hide the bar from.
-   */_defineProperty(ProgressBar,"hide",function(pattern){UIEvents.emit(_ProgressBar.PROGRESS_BAR_HIDE,pattern);});_defineProperty(ProgressBar,"defaultProps",{isVisible:true});export default ProgressBar;
+   */
+  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, {
+      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(' ')
+    })));
+  }
+}
+_ProgressBar = ProgressBar;
+ProgressBar.PROGRESS_BAR_SHOW = 'PROGRESS_BAR_SHOW';
+ProgressBar.PROGRESS_BAR_HIDE = 'PROGRESS_BAR_HIDE';
+/**
+ * Shows the progress bar.
+ * @param {string} pattern The router pattern to show the bar for.
+ */
+ProgressBar.show = pattern => {
+  UIEvents.emit(_ProgressBar.PROGRESS_BAR_SHOW, pattern);
+};
+/**
+ * Hides the progress bar.
+ * @param {string} pattern The router pattern to hide the bar from.
+ */
+ProgressBar.hide = pattern => {
+  UIEvents.emit(_ProgressBar.PROGRESS_BAR_HIDE, pattern);
+};
+ProgressBar.defaultProps = {
+  isVisible: true
+};
+export default ProgressBar;

package/ProgressBar/spec.js

@@ -1 +1,13 @@
-import React from'react';import{shallow}from'enzyme';import Transition from'react-transition-group/Transition';import ProgressBar from"./index";describe('<ProgressBar />',function(){it('renders an indeterminate progress bar.',function(){var wrapper=shallow(React.createElement(ProgressBar,{isVisible:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Transition).length).toBe(1);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import Transition from 'react-transition-group/Transition';
+import ProgressBar from "./index";
+describe('<ProgressBar />', () => {
+  it('renders an indeterminate progress bar.', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(ProgressBar, {
+      isVisible: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Transition).length).toBe(1);
+  });
+});

package/ProgressBar/style.js

@@ -1,4 +1,85 @@
-import{css}from'glamor';import Color from'color';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{getCSSCustomProp}from'@shopgate/engage/styles';var colors=themeConfig.colors;var progressBarHeight=4;/**
+import { css } from 'glamor';
+import Color from 'color';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { getCSSCustomProp } from '@shopgate/engage/styles';
+const {
+  colors
+} = themeConfig;
+const progressBarHeight = 4;
+
+/**
  * Dynamically creates the class for the ProgressBar wrapper
  * @returns {string}
- */var wrapper=function wrapper(){return css({position:'absolute',bottom:0,background:Color(getCSSCustomProp('--color-secondary')||colors.accent).fade(0.6),width:'100%',height:progressBarHeight,overflow:'hidden',transition:'transform 150ms cubic-bezier(0.25, 0.1, 0.25, 1)',zIndex:'10'}).toString();};var innerElement=css({':before':{content:'""',position:'absolute',background:"var(--color-secondary, ".concat(colors.accent,")"),top:0,left:0,bottom:0,willChange:'left, right'},':after':{content:'""',position:'absolute',background:"var(--color-secondary, ".concat(colors.accent,")"),top:0,left:0,bottom:0,willChange:'left, right'}}).toString();var indeterminateLong=css.keyframes({'0%':{left:'-35%',right:'100%'},'60%':{left:'100%',right:'-90%'},'100%':{left:'100%',right:'-90%'}});var indeterminateShort=css.keyframes({'0%':{left:'-200%',right:'100%'},'60%':{left:'107%',right:'-8%'},'100%':{left:'107%',right:'-8%'}});var animating=css({':before':{animation:"".concat(indeterminateLong," 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite")},':after':{animation:"".concat(indeterminateShort," 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite"),animationDelay:'1.15s'}}).toString();export default{wrapper:wrapper,innerElement:innerElement,animating:animating};
+ */
+const wrapper = () => css({
+  position: 'absolute',
+  bottom: 0,
+  background: Color(getCSSCustomProp('--color-secondary') || colors.accent).fade(0.6),
+  width: '100%',
+  height: progressBarHeight,
+  overflow: 'hidden',
+  transition: 'transform 150ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+  zIndex: '10'
+}).toString();
+const innerElement = css({
+  ':before': {
+    content: '""',
+    position: 'absolute',
+    background: `var(--color-secondary, ${colors.accent})`,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    willChange: 'left, right'
+  },
+  ':after': {
+    content: '""',
+    position: 'absolute',
+    background: `var(--color-secondary, ${colors.accent})`,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    willChange: 'left, right'
+  }
+}).toString();
+const indeterminateLong = css.keyframes({
+  '0%': {
+    left: '-35%',
+    right: '100%'
+  },
+  '60%': {
+    left: '100%',
+    right: '-90%'
+  },
+  '100%': {
+    left: '100%',
+    right: '-90%'
+  }
+});
+const indeterminateShort = css.keyframes({
+  '0%': {
+    left: '-200%',
+    right: '100%'
+  },
+  '60%': {
+    left: '107%',
+    right: '-8%'
+  },
+  '100%': {
+    left: '107%',
+    right: '-8%'
+  }
+});
+const animating = css({
+  ':before': {
+    animation: `${indeterminateLong} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
+  },
+  ':after': {
+    animation: `${indeterminateShort} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite`,
+    animationDelay: '1.15s'
+  }
+}).toString();
+export default {
+  wrapper,
+  innerElement,
+  animating
+};

package/RadioButton/index.js

@@ -1,5 +1,21 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import BaseCheckbox from'@shopgate/pwa-common/components/Checkbox';import CheckedIcon from"../icons/RadioCheckedIcon";import UncheckedIcon from"../icons/RadioUncheckedIcon";import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import BaseCheckbox from '@shopgate/pwa-common/components/Checkbox';
+import CheckedIcon from "../icons/RadioCheckedIcon";
+import UncheckedIcon from "../icons/RadioUncheckedIcon";
+import styles from "./style";
+
+/**
  * The RadioButton template component.
  * @param {Object} props The component properties.
  * @returns {JSX}
- */var RadioButton=function RadioButton(props){return React.createElement(BaseCheckbox,_extends({},props,{checkedIcon:React.createElement(CheckedIcon,{className:styles.checkedIcon}),uncheckedIcon:React.createElement(UncheckedIcon,{className:styles.uncheckedIcon})}));};export default RadioButton;
+ */
+const RadioButton = props => /*#__PURE__*/React.createElement(BaseCheckbox, _extends({}, props, {
+  checkedIcon: /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: styles.checkedIcon
+  }),
+  uncheckedIcon: /*#__PURE__*/React.createElement(UncheckedIcon, {
+    className: styles.uncheckedIcon
+  })
+}));
+export default RadioButton;

package/RadioButton/spec.js

@@ -1 +1,21 @@
-import React from'react';import{mount}from'enzyme';import CheckedIcon from"../icons/RadioCheckedIcon";import UncheckedIcon from"../icons/RadioUncheckedIcon";import RadioButton from"./index";describe('RadioButton',function(){it('should render selected RadioButton',function(){var wrapper=mount(React.createElement(RadioButton,{checked:true}));expect(wrapper.find(CheckedIcon).exists()).toBe(true);expect(wrapper.find(UncheckedIcon).exists()).toBe(false);expect(wrapper).toMatchSnapshot();});it('should render unselected RadioButton',function(){var wrapper=mount(React.createElement(RadioButton,null));expect(wrapper.find(CheckedIcon).exists()).toBe(false);expect(wrapper.find(UncheckedIcon).exists()).toBe(true);expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { mount } from 'enzyme';
+import CheckedIcon from "../icons/RadioCheckedIcon";
+import UncheckedIcon from "../icons/RadioUncheckedIcon";
+import RadioButton from "./index";
+describe('RadioButton', () => {
+  it('should render selected RadioButton', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RadioButton, {
+      checked: true
+    }));
+    expect(wrapper.find(CheckedIcon).exists()).toBe(true);
+    expect(wrapper.find(UncheckedIcon).exists()).toBe(false);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render unselected RadioButton', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RadioButton, null));
+    expect(wrapper.find(CheckedIcon).exists()).toBe(false);
+    expect(wrapper.find(UncheckedIcon).exists()).toBe(true);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/RadioButton/style.js

@@ -1 +1,21 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var baseIcon={width:24,height:24};var checkedIcon=css(_extends({},baseIcon,{color:"var(--color-secondary, ".concat(colors.accent,")")})).toString();var uncheckedIcon=css(_extends({},baseIcon,{color:colors.shade6})).toString();export default{checkedIcon:checkedIcon,uncheckedIcon:uncheckedIcon};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const baseIcon = {
+  width: 24,
+  height: 24
+};
+const checkedIcon = css({
+  ...baseIcon,
+  color: `var(--color-secondary, ${colors.accent})`
+}).toString();
+const uncheckedIcon = css({
+  ...baseIcon,
+  color: colors.shade6
+}).toString();
+export default {
+  checkedIcon,
+  uncheckedIcon
+};

package/RatingNumber/index.js

@@ -1,7 +1,34 @@
-import React from'react';import PropTypes from'prop-types';import{I18n}from'@shopgate/engage/components';import{RATING_SCALE_DIVISOR}from"../RatingStars/constants";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { I18n } from '@shopgate/engage/components';
+import { RATING_SCALE_DIVISOR } from "../RatingStars/constants";
+
+/**
  * Rating number component.
  * @param {Object} props Props.
  * @param {number} props.rating Rating value.
  * @param {string} props.className Class name.
  * @returns {JSX.Element}
- */var RatingNumber=function RatingNumber(_ref){var rating=_ref.rating,className=_ref.className;if(!rating&&rating!==0){return null;}var number=rating/RATING_SCALE_DIVISOR;if(Number.isNaN(number)){return null;}return React.createElement(I18n.Number,{number:number,className:"".concat(className," ui-shared__rating-number"),fractions:2});};RatingNumber.defaultProps={className:'',rating:null};export default RatingNumber;
+ */
+const RatingNumber = ({
+  rating,
+  className
+}) => {
+  if (!rating && rating !== 0) {
+    return null;
+  }
+  const number = rating / RATING_SCALE_DIVISOR;
+  if (Number.isNaN(number)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(I18n.Number, {
+    number: number,
+    className: `${className} ui-shared__rating-number`,
+    fractions: 2
+  });
+};
+RatingNumber.defaultProps = {
+  className: '',
+  rating: null
+};
+export default RatingNumber;

package/RatingStars/constants.js

@@ -1,4 +1,5 @@
 /**
  * Value to recalculate the rating average.
  * @type {number}
- */export var RATING_SCALE_DIVISOR=20;
+ */
+export const RATING_SCALE_DIVISOR = 20;

package/RatingStars/index.js

@@ -1,30 +1,148 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import times from'lodash/times';import StarIcon from"../icons/StarIcon";import StarHalfIcon from"../icons/StarHalfIcon";import styles from"./style";import{RATING_SCALE_DIVISOR}from"./constants";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import times from 'lodash/times';
+import StarIcon from "../icons/StarIcon";
+import StarHalfIcon from "../icons/StarHalfIcon";
+import styles from "./style";
+import { RATING_SCALE_DIVISOR } from "./constants";
+
+/**
  * The available style keys for the rating stars.
- */var numStars=5;/**
+ */
+
+const numStars = 5;
+
+/**
  * The rating stars component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var RatingStars=/*#__PURE__*/function(_Component){function RatingStars(){_classCallCheck(this,RatingStars);return _callSuper(this,RatingStars,arguments);}_inherits(RatingStars,_Component);return _createClass(RatingStars,[{key:"shouldComponentUpdate",value:/**
+ */
+class RatingStars extends Component {
+  /**
    * Only update the component if the star rating changed.
    * @param {Object} nextProps The next component props.
    * @returns {boolean}
-   */function shouldComponentUpdate(nextProps){return nextProps.value!==this.props.value;}/**
+   */
+  shouldComponentUpdate(nextProps) {
+    return nextProps.value !== this.props.value;
+  }
+
+  /**
    * Returns textual version of stars for screen readers.
    * @param {number} stars Number of stars.
    * @returns {string}
-   */},{key:"getTextualFinal",value:function getTextualFinal(stars){var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;return __('reviews.rating_stars',{rate:stars,maxRate:numStars});}/**
+   */
+  getTextualFinal(stars) {
+    const {
+      __
+    } = this.context.i18n();
+    return __('reviews.rating_stars', {
+      rate: stars,
+      maxRate: numStars
+    });
+  }
+
+  /**
    * Returns text for call to a
    * @param {number} stars Number of stars.
    * @returns {string}
-   */},{key:"getTextualCTA",value:function getTextualCTA(stars){var _this$context$i18n2=this.context.i18n(),__=_this$context$i18n2.__;return __('reviews.press_to_rate_with_x_stars',{rate:stars});}/**
+   */
+  getTextualCTA(stars) {
+    const {
+      __
+    } = this.context.i18n();
+    return __('reviews.press_to_rate_with_x_stars', {
+      rate: stars
+    });
+  }
+
+  /**
    * Handles click on RatingStars.
    * @param {Object} e SyntheticEvent.
    * @param {number} pos Position/Index of clicked RatingStar.
-   */},{key:"handleSelection",value:function handleSelection(e,pos){var onSelection=this.props.onSelection;e.target.value=pos*RATING_SCALE_DIVISOR;onSelection(e);}/**
+   */
+  handleSelection(e, pos) {
+    const {
+      onSelection
+    } = this.props;
+    e.target.value = pos * RATING_SCALE_DIVISOR;
+    onSelection(e);
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX.Element}
-   */},{key:"render",value:function render(){var _this2=this;var _this$props=this.props,value=_this$props.value,isSelectable=_this$props.isSelectable;var ratedStars=value/RATING_SCALE_DIVISOR;var numFullStars=Math.floor(ratedStars);var numHalfStars=Math.ceil(ratedStars-numFullStars);var size=styles.iconStyles[this.props.display].iconSize;var className=[styles.container,this.props.className,'ui-shared__rating-stars'].join(' ');var iconClassName=[styles.iconStyles[this.props.display].iconStyle,styles.icon].join(' ');var emptyStars=[].concat(times(numStars,function(i){var pos=i+1;var starProps=_extends({className:iconClassName,key:pos},isSelectable&&{'aria-label':_this2.getTextualCTA(pos),role:'button',onClick:function onClick(e){return _this2.handleSelection(e,pos);}});return React.createElement("div",starProps,React.createElement(StarIcon,{size:size}));}));var filledStars=[].concat(times(numFullStars,function(i){var pos=i+1;var starProps=_extends({className:iconClassName,key:numStars+pos},isSelectable&&{'aria-hidden':true,// Aria hidden since it's basically a duplicate for a screen reader.
-role:'button',onClick:function onClick(e){return _this2.handleSelection(e,pos);}});return React.createElement("div",starProps,React.createElement(StarIcon,{size:size}));}),times(numHalfStars,function(i){return React.createElement("div",{className:iconClassName,key:i+numFullStars},React.createElement(StarHalfIcon,{size:size}));}));return React.createElement("div",{role:isSelectable?undefined:'img',className:className,"aria-label":this.getTextualFinal(ratedStars),"data-test-id":"ratedStars: ".concat(ratedStars)},React.createElement("div",{className:"".concat(styles.emptyStars," rating-stars-empty")},emptyStars),React.createElement("div",{className:"".concat(styles.filledStars," rating-stars-filled")},filledStars));}}]);}(Component);/**
-   * Context types definition.
-   * @type {{i18n: function}}
-   */_defineProperty(RatingStars,"contextTypes",{i18n:PropTypes.func});_defineProperty(RatingStars,"defaultProps",{className:'',display:'small',isSelectable:false,onSelection:function onSelection(){}});export default RatingStars;
+   */
+  render() {
+    const {
+      value,
+      isSelectable
+    } = this.props;
+    const ratedStars = value / RATING_SCALE_DIVISOR;
+    const numFullStars = Math.floor(ratedStars);
+    const numHalfStars = Math.ceil(ratedStars - numFullStars);
+    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 pos = i + 1;
+      const starProps = {
+        className: iconClassName,
+        key: pos,
+        ...(isSelectable && {
+          'aria-label': this.getTextualCTA(pos),
+          role: 'button',
+          onClick: e => this.handleSelection(e, pos)
+        })
+      };
+      return /*#__PURE__*/React.createElement("div", starProps, /*#__PURE__*/React.createElement(StarIcon, {
+        size: size
+      }));
+    })];
+    const filledStars = [...times(numFullStars, i => {
+      const pos = i + 1;
+      const starProps = {
+        className: iconClassName,
+        key: numStars + pos,
+        ...(isSelectable && {
+          'aria-hidden': true,
+          // Aria hidden since it's basically a duplicate for a screen reader.
+          role: 'button',
+          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", {
+      className: iconClassName,
+      key: i + numFullStars
+    }, /*#__PURE__*/React.createElement(StarHalfIcon, {
+      size: size
+    })))];
+    return /*#__PURE__*/React.createElement("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));
+  }
+}
+/**
+ * Context types definition.
+ * @type {{i18n: function}}
+ */
+RatingStars.contextTypes = {
+  i18n: PropTypes.func
+};
+RatingStars.defaultProps = {
+  className: '',
+  display: 'small',
+  isSelectable: false,
+  onSelection: () => {}
+};
+export default RatingStars;

package/RatingStars/spec.js

@@ -1,3 +1,90 @@
-import React from'react';import{shallow}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import StarIcon from"../icons/StarIcon";import StarHalfIcon from"../icons/StarHalfIcon";import RatingStars from"./index";var numEmptyStars=5;describe('<RatingStars />',function(){it('renders with value of 50',function(){var wrapper=shallow(React.createElement(RatingStars,{value:50}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find(StarIcon).length).toBe(numEmptyStars+2);expect(wrapper.find(StarHalfIcon).length).toBe(1);});it('renders with value of 0',function(){var wrapper=shallow(React.createElement(RatingStars,{value:0}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find(StarIcon).length).toBe(numEmptyStars);expect(wrapper.find(StarHalfIcon).length).toBe(0);});it('renders with value of 100',function(){var wrapper=shallow(React.createElement(RatingStars,{value:100}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find(StarIcon).length).toBe(numEmptyStars+5);expect(wrapper.find(StarHalfIcon).length).toBe(0);});it('should change rating on click',function(){var wrapper=shallow(React.createElement(RatingStars,{value:100,isSelectable:true}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find(StarIcon).length).toBe(10);wrapper.setProps({value:20});expect(wrapper.find(StarIcon).length).toBe(6);wrapper.setProps({value:70});expect(wrapper.find(StarIcon).length).toBe(8);expect(wrapper.find(StarHalfIcon).length).toBe(1);expect(wrapper).toMatchSnapshot();});it('should call onSelection callback when component is selectable',function(){var spy=jest.fn();var wrapper=shallow(React.createElement(RatingStars,{value:100,isSelectable:true,onSelection:function onSelection(e){wrapper.setProps({value:e.target.value});spy();}}),mockRenderOptions);// Click on 1 filled star.
-wrapper.find('[role="button"]').at(5).simulate('click',{target:{value:10}});expect(spy.mock.calls.length).toBe(1);expect(wrapper.find('[role="button"]').length).toBe(6);// Click on 4th empty star
-wrapper.find('[role="button"]').at(3).simulate('click',{target:{value:80}});expect(wrapper.find('[role="button"]').length).toBe(9);expect(spy.mock.calls.length).toBe(2);});it('should NOT call onSelection callback when component is NOT selectable',function(){var spy=jest.fn();var wrapper=shallow(React.createElement(RatingStars,{value:100,onSelection:spy}),mockRenderOptions);wrapper.find(StarIcon).at(5).parent('div').simulate('click');expect(wrapper.find('[role="button"]').length).toBe(0);expect(spy.mock.calls.length).toBe(0);});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import StarIcon from "../icons/StarIcon";
+import StarHalfIcon from "../icons/StarHalfIcon";
+import RatingStars from "./index";
+const numEmptyStars = 5;
+describe('<RatingStars />', () => {
+  it('renders with value of 50', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+      value: 50
+    }), mockRenderOptions);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(StarIcon).length).toBe(numEmptyStars + 2);
+    expect(wrapper.find(StarHalfIcon).length).toBe(1);
+  });
+  it('renders with value of 0', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+      value: 0
+    }), mockRenderOptions);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(StarIcon).length).toBe(numEmptyStars);
+    expect(wrapper.find(StarHalfIcon).length).toBe(0);
+  });
+  it('renders with value of 100', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+      value: 100
+    }), mockRenderOptions);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(StarIcon).length).toBe(numEmptyStars + 5);
+    expect(wrapper.find(StarHalfIcon).length).toBe(0);
+  });
+  it('should change rating on click', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+      value: 100,
+      isSelectable: true
+    }), mockRenderOptions);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(StarIcon).length).toBe(10);
+    wrapper.setProps({
+      value: 20
+    });
+    expect(wrapper.find(StarIcon).length).toBe(6);
+    wrapper.setProps({
+      value: 70
+    });
+    expect(wrapper.find(StarIcon).length).toBe(8);
+    expect(wrapper.find(StarHalfIcon).length).toBe(1);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should call onSelection callback when component is selectable', () => {
+    const spy = jest.fn();
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+      value: 100,
+      isSelectable: true,
+      onSelection: e => {
+        wrapper.setProps({
+          value: e.target.value
+        });
+        spy();
+      }
+    }), mockRenderOptions);
+    // Click on 1 filled star.
+    wrapper.find('[role="button"]').at(5).simulate('click', {
+      target: {
+        value: 10
+      }
+    });
+    expect(spy.mock.calls.length).toBe(1);
+    expect(wrapper.find('[role="button"]').length).toBe(6);
+    // Click on 4th empty star
+    wrapper.find('[role="button"]').at(3).simulate('click', {
+      target: {
+        value: 80
+      }
+    });
+    expect(wrapper.find('[role="button"]').length).toBe(9);
+    expect(spy.mock.calls.length).toBe(2);
+  });
+  it('should NOT call onSelection callback when component is NOT selectable', () => {
+    const spy = jest.fn();
+    const wrapper = shallow(/*#__PURE__*/React.createElement(RatingStars, {
+      value: 100,
+      onSelection: spy
+    }), mockRenderOptions);
+    wrapper.find(StarIcon).at(5).parent('div').simulate('click');
+    expect(wrapper.find('[role="button"]').length).toBe(0);
+    expect(spy.mock.calls.length).toBe(0);
+  });
+});