@shopgate/pwa-ui-shared 7.11.1-beta.2 → 7.12.0-beta.1

package/ActionButton/index.js

@@ -3,7 +3,7 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
  */var ActionButton=/*#__PURE__*/function(_Component){_inherits(ActionButton,_Component);function ActionButton(){var _getPrototypeOf2;var _this;_classCallCheck(this,ActionButton);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(ActionButton)).call.apply(_getPrototypeOf2,[this].concat(args)));_defineProperty(_assertThisInitialized(_this),"handleClick",function(event){var clickDelay=_this.constructor.clickDelay;setTimeout(function(){_this.props.onClick(event);},clickDelay);});return _this;}_createClass(ActionButton,[{key:"render",/**
    * The render function.
    * @returns {JSX}
-   */value:function render(){var containerClass=this.props.noGap?styles.noGapContainer:styles.container;if(this.props.loading){return React.createElement("div",{className:styles.containerCircle},React.createElement(IndicatorCircle,null));}return React.createElement("div",{className:containerClass,"data-test-id":this.props.testId},React.createElement(RippleButton,_extends({},this.buttonProps,{onClick:this.handleClick}),this.props.children));}},{key:"buttonProps",/**
+   */value:function render(){var containerClass=this.props.noGap?styles.noGapContainer:styles.container;if(this.props.loading){return React.createElement("div",{className:styles.containerCircle},React.createElement(IndicatorCircle,null));}return React.createElement("div",{className:"ui-shared__action-button ".concat(containerClass),"data-test-id":this.props.testId},React.createElement(RippleButton,_extends({},this.buttonProps,{onClick:this.handleClick}),this.props.children));}},{key:"buttonProps",/**
    * Getter for the calculated button props.
    * @returns {Object}
    */get:function get(){var buttonProps={className:this.props.className,disabled:this.props.disabled,flat:this.props.flat,type:this.props.type};return buttonProps;}/**

package/Button/index.js

@@ -5,7 +5,7 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
  */var Button=/*#__PURE__*/function(_Component){_inherits(Button,_Component);function Button(){_classCallCheck(this,Button);return _possibleConstructorReturn(this,_getPrototypeOf(Button).apply(this,arguments));}_createClass(Button,[{key:"render",/**
    * Renders the component.
    * @return {JSX}
-   */value:function render(){var style=this.style;var content=this.props.wrapContent?React.createElement("div",{className:style.content},this.props.children):this.props.children;return React.createElement(BaseButton,_extends({},this.buttonProps,{className:"".concat(style.button," ").concat(this.props.className),testId:this.props.testId}),content);}},{key:"style",/**
+   */value:function render(){var style=this.style;var content=this.props.wrapContent?React.createElement("div",{className:style.content},this.props.children):this.props.children;return React.createElement(BaseButton,_extends({},this.buttonProps,{className:"ui-shared__button ".concat(style.button," ").concat(this.props.className),testId:this.props.testId}),content);}},{key:"style",/**
    * Getter for style depending on prop type.
    * @returns {Object}
    */get:function get(){var _this$props=this.props,flat=_this$props.flat,disabled=_this$props.disabled;switch(this.props.type){case'plain':return styles.plain();case'regular':return styles.regular(disabled);default:case'primary':return styles.primary(disabled,flat);case'secondary':return styles.secondary(disabled,flat);}}/**

package/Button/spec.js

@@ -1 +1 @@
-import trim from'lodash/trim';import React from'react';import{shallow}from'enzyme';import Button from"./index";import styles from"./style";describe('<Button />',function(){it('should render as a regular button if type is omitted',function(){var wrapper=shallow(React.createElement(Button,null,"Press me"));expect(wrapper).toMatchSnapshot();expect(wrapper.render().text()).toEqual('Press me');});it('should render as a regular button if type is explicitly defined',function(){var wrapper=shallow(React.createElement(Button,{type:"regular"},"Press me"));expect(wrapper).toMatchSnapshot();expect(trim(wrapper.prop('className'))).toEqual(styles.regular(false).button);});it('should render as a primary button',function(){var wrapper=shallow(React.createElement(Button,{type:"primary"},"Press me"));expect(trim(wrapper.prop('className'))).toEqual(styles.primary(false,false).button);expect(wrapper).toMatchSnapshot();});it('should render as a secondary button',function(){var wrapper=shallow(React.createElement(Button,{type:"secondary"},"Press me"));expect(trim(wrapper.prop('className'))).toEqual(styles.secondary(false,false).button);expect(wrapper).toMatchSnapshot();});});
+import trim from'lodash/trim';import React from'react';import{shallow}from'enzyme';import Button from"./index";import styles from"./style";describe('<Button />',function(){it('should render as a regular button if type is omitted',function(){var wrapper=shallow(React.createElement(Button,null,"Press me"));expect(wrapper).toMatchSnapshot();expect(wrapper.render().text()).toEqual('Press me');});it('should render as a regular button if type is explicitly defined',function(){var wrapper=shallow(React.createElement(Button,{type:"regular"},"Press me"));expect(wrapper).toMatchSnapshot();expect(trim(wrapper.prop('className'))).toEqual("ui-shared__button ".concat(styles.regular(false).button));});it('should render as a primary button',function(){var wrapper=shallow(React.createElement(Button,{type:"primary"},"Press me"));expect(trim(wrapper.prop('className'))).toEqual("ui-shared__button ".concat(styles.primary(false,false).button));expect(wrapper).toMatchSnapshot();});it('should render as a secondary button',function(){var wrapper=shallow(React.createElement(Button,{type:"secondary"},"Press me"));expect(trim(wrapper.prop('className'))).toEqual("ui-shared__button ".concat(styles.secondary(false,false).button));expect(wrapper).toMatchSnapshot();});});

package/RatingStars/index.js

@@ -26,5 +26,5 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    */},{key:"handleSelection",value:function handleSelection(e,pos){var onSelection=this.props.onSelection;e.target.value=pos*RATING_SCALE_DIVISOR;onSelection(e);}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this=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].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':_this.getTextualCTA(pos),role:'button',onClick:function onClick(e){return _this.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 _this.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}));}));/* eslint-disable jsx-a11y/aria-role */return React.createElement("div",{role:"text",className:className,"aria-label":this.getTextualFinal(ratedStars),"data-test-id":"ratedStars: ".concat(ratedStars)},React.createElement("div",{className:styles.emptyStars},emptyStars),React.createElement("div",{className:styles.filledStars},filledStars));/* eslint-enable jsx-a11y/aria-role */}}]);return RatingStars;}(Component);_defineProperty(RatingStars,"contextTypes",{i18n:PropTypes.func});_defineProperty(RatingStars,"defaultProps",{className:'',display:'small',isSelectable:false,onSelection:function onSelection(){}});export default RatingStars;
+   */},{key:"render",value:function render(){var _this=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':_this.getTextualCTA(pos),role:'button',onClick:function onClick(e){return _this.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 _this.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}));}));/* eslint-disable jsx-a11y/aria-role */return React.createElement("div",{role:"text",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));/* eslint-enable jsx-a11y/aria-role */}}]);return RatingStars;}(Component);_defineProperty(RatingStars,"contextTypes",{i18n:PropTypes.func});_defineProperty(RatingStars,"defaultProps",{className:'',display:'small',isSelectable:false,onSelection:function onSelection(){}});export default RatingStars;

package/Ripple/index.js

@@ -48,7 +48,7 @@ if(!this.state.hasRipples){return null;}return React.createElement("div",{classN
    * Renders the final ripple component including it's contents.
    * @returns {JSX}
    */},{key:"render",value:function render(){/* eslint-disable jsx-a11y/click-events-have-key-events,
-    jsx-a11y/no-static-element-interactions */return React.createElement("div",{className:this.props.className,"data-test-id":"Ripple",onClick:this.handleClick,style:this.style},this.renderRipples(),this.props.children);/* eslint-enable jsx-a11y/click-events-have-key-events,
+    jsx-a11y/no-static-element-interactions */return React.createElement("div",{className:"ui-shared__ripple ".concat(this.props.className),"data-test-id":"Ripple",onClick:this.handleClick,style:this.style},this.renderRipples(),this.props.children);/* eslint-enable jsx-a11y/click-events-have-key-events,
     jsx-a11y/no-static-element-interactions */}},{key:"rippleSize",get:function get(){if(this.props.size){if(this.props.fill){return this.props.size*2;}return this.props.size;}/**
      * We want the Ripple to fill the element. We set the diameter of the Ripple
      * to double the distance of the opposing corners of the node. That way the Ripple

package/RippleButton/index.js

@@ -8,4 +8,4 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
 return React.createElement(Button,_extends({},this.buttonProps,{wrapContent:true}),this.props.children);}var rippleProps={className:"".concat(style.contentWrapper," ").concat(this.props.rippleClassName),fill:true,size:this.props.rippleSize};return React.createElement(Button,_extends({},this.buttonProps,{testId:this.props.testId}),React.createElement(Ripple,rippleProps,this.props.children));}},{key:"buttonProps",/**
    * Getter for the calculated button props.
    * @returns {Object}
-   */get:function get(){return{className:this.props.className,disabled:this.props.disabled,onClick:this.props.onClick,flat:this.props.flat,type:this.props.type,wrapContent:false,'aria-label':this.props['aria-label'],'aria-haspopup':this.props['aria-haspopup']};}}]);return RippleButton;}(Component);_defineProperty(RippleButton,"defaultProps",_extends({},Button.defaultProps,{rippleClassName:'',rippleSize:null,testId:'Button'}));export default RippleButton;
+   */get:function get(){return{className:"".concat(this.props.className," ui-shared__ripple-button"),disabled:this.props.disabled,onClick:this.props.onClick,flat:this.props.flat,type:this.props.type,wrapContent:false,'aria-label':this.props['aria-label'],'aria-haspopup':this.props['aria-haspopup']};}}]);return RippleButton;}(Component);_defineProperty(RippleButton,"defaultProps",_extends({},Button.defaultProps,{rippleClassName:'',rippleSize:null,testId:'Button'}));export default RippleButton;

package/RippleButton/spec.js

@@ -1 +1 @@
-import trim from'lodash/trim';import React from'react';import{shallow,mount}from'enzyme';import Button from'@shopgate/pwa-common/components/Button';import Ripple from"../Ripple";import styles from"../Button/style";import RippleButton from"./index";describe('<RippleButton />',function(){it('should render as a regular ripple button effect if type is omitted',function(){var wrapper=shallow(React.createElement(RippleButton,null,"Press me"));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Ripple).render().text()).toEqual('Press me');});it('should render as a regular ripple button if type is explicitly defined',function(){var wrapper=mount(React.createElement(RippleButton,{type:"regular"},"Press me"));expect(trim(wrapper.find(Button).props().className)).toEqual(styles.regular(false).button);expect(wrapper.find(Ripple).render().text()).toEqual('Press me');expect(wrapper).toMatchSnapshot();});it('should render as a primary ripple button',function(){var wrapper=mount(React.createElement(RippleButton,{type:"primary"},"Press me"));expect(trim(wrapper.find(Button).props().className)).toEqual(styles.primary(false).button);expect(wrapper.find(Ripple).render().text()).toEqual('Press me');expect(wrapper).toMatchSnapshot();});it('should render as a secondary ripple button',function(){var wrapper=mount(React.createElement(RippleButton,{type:"secondary"},"Press me"));expect(trim(wrapper.find(Button).props().className)).toEqual(styles.secondary(false).button);expect(wrapper.find(Ripple).render().text()).toEqual('Press me');expect(wrapper).toMatchSnapshot();});it('should render as a disabled ripple button',function(){var wrapper=mount(React.createElement(RippleButton,{disabled:true},"Press me"));expect(wrapper.find(Button).props().disabled).toBe(true);expect(wrapper).toMatchSnapshot();});});
+import trim from'lodash/trim';import React from'react';import{shallow,mount}from'enzyme';import Button from'@shopgate/pwa-common/components/Button';import Ripple from"../Ripple";import styles from"../Button/style";import RippleButton from"./index";describe('<RippleButton />',function(){it('should render as a regular ripple button effect if type is omitted',function(){var wrapper=shallow(React.createElement(RippleButton,null,"Press me"));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Ripple).render().text()).toEqual('Press me');});it('should render as a regular ripple button if type is explicitly defined',function(){var wrapper=mount(React.createElement(RippleButton,{type:"regular"},"Press me"));expect(trim(wrapper.find(Button).props().className)).toEqual("ui-shared__button ".concat(styles.regular(false).button,"  ui-shared__ripple-button"));expect(wrapper.find(Ripple).render().text()).toEqual('Press me');expect(wrapper).toMatchSnapshot();});it('should render as a primary ripple button',function(){var wrapper=mount(React.createElement(RippleButton,{type:"primary"},"Press me"));expect(trim(wrapper.find(Button).props().className)).toEqual("ui-shared__button ".concat(styles.primary(false).button,"  ui-shared__ripple-button"));expect(wrapper.find(Ripple).render().text()).toEqual('Press me');expect(wrapper).toMatchSnapshot();});it('should render as a secondary ripple button',function(){var wrapper=mount(React.createElement(RippleButton,{type:"secondary"},"Press me"));expect(trim(wrapper.find(Button).props().className)).toEqual("ui-shared__button ".concat(styles.secondary(false).button,"  ui-shared__ripple-button"));expect(wrapper.find(Ripple).render().text()).toEqual('Press me');expect(wrapper).toMatchSnapshot();});it('should render as a disabled ripple button',function(){var wrapper=mount(React.createElement(RippleButton,{disabled:true},"Press me"));expect(wrapper.find(Button).props().disabled).toBe(true);expect(wrapper).toMatchSnapshot();});});

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.11.1-beta.2",
+  "version": "7.12.0-beta.1",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.11.1-beta.2",
-    "@shopgate/pwa-ui-material": "7.11.1-beta.2",
+    "@shopgate/pwa-ui-ios": "7.12.0-beta.1",
+    "@shopgate/pwa-ui-material": "7.12.0-beta.1",
     "react-day-picker": "^7.4.8"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.11.1-beta.2",
-    "@shopgate/pwa-common-commerce": "7.11.1-beta.2",
+    "@shopgate/pwa-common": "7.12.0-beta.1",
+    "@shopgate/pwa-common-commerce": "7.12.0-beta.1",
     "classnames": "^2.2.5",
     "react": "~16.12.0"
   },