@shopgate/pwa-ui-shared 7.30.0-alpha.7 → 7.30.0-alpha.9

package/RatingStars/style.js

@@ -1,4 +1,53 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var container=css({position:'relative'}).toString();var icon=css({display:'inline-block',verticalAlign:'top',outline:0}).toString();var emptyStars=css({color:themeConfig.colors.shade7}).toString();var filledStars=css({position:'absolute',color:"var(--color-primary, ".concat(colors.primary,")"),top:0}).toString();/**
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+const container = css({
+  position: 'relative'
+}).toString();
+const icon = css({
+  display: 'inline-block',
+  verticalAlign: 'top',
+  outline: 0
+}).toString();
+const emptyStars = css({
+  color: themeConfig.colors.shade7
+}).toString();
+const filledStars = css({
+  position: 'absolute',
+  color: `var(--color-primary, ${colors.primary})`,
+  top: 0
+}).toString();
+
+/**
  * The rating stars styles that can be selected by passing the style key to the
  * @type {Object}
- */var iconStyles={small:{iconSize:'1em',iconStyle:css({marginRight:'0.1em'}).toString()},big:{iconSize:'1.24em',iconStyle:css({marginRight:'0.12em'}).toString()},large:{iconSize:'2.3em',iconStyle:css({marginRight:'0.23em'}).toString()}};export default{container:container,icon:icon,iconStyles:iconStyles,emptyStars:emptyStars,filledStars:filledStars};
+ */
+const iconStyles = {
+  small: {
+    iconSize: '1em',
+    iconStyle: css({
+      marginRight: '0.1em'
+    }).toString()
+  },
+  big: {
+    iconSize: '1.24em',
+    iconStyle: css({
+      marginRight: '0.12em'
+    }).toString()
+  },
+  large: {
+    iconSize: '2.3em',
+    iconStyle: css({
+      marginRight: '0.23em'
+    }).toString()
+  }
+};
+export default {
+  container,
+  icon,
+  iconStyles,
+  emptyStars,
+  filledStars
+};

package/Ripple/components/RippleAnimation/index.js

@@ -1,4 +1,10 @@
-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,{useEffect,useRef,useMemo}from'react';import PropTypes from'prop-types';import{Transition}from'react-transition-group';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import style from"../../style";/**
+import React, { useEffect, useRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Transition } from 'react-transition-group';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import style from "../../style";
+
+/**
  * The RippleAnimation component
  *
  * Plays a one-shot ripple animation and calls `onComplete` when finished.
@@ -10,10 +16,86 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {number} props.x The x coordinate of the ripple center.
  * @param {number} props.y The y coordinate of the ripple center.
  * @returns {JSX.Element}
- */function RippleAnimation(_ref){var color=_ref.color,duration=_ref.duration,onComplete=_ref.onComplete,size=_ref.size,x=_ref.x,y=_ref.y;var nodeRef=useRef(null);// Trigger the animation immediately
-var inProp=true;var baseStyle=useMemo(function(){return{position:'absolute',backgroundColor:color,height:size,width:size,left:x,top:y,borderRadius:'50%',transform:'translate3d(-50%, -50%, 0) scale3d(0, 0, 1)',opacity:0.25,transition:"opacity ".concat(duration,"ms cubic-bezier(0.25, 0.1, 0.25, 1), transform ").concat(duration,"ms cubic-bezier(0.25, 0.1, 0.25, 1)"),pointerEvents:'none'};},[color,duration,size,x,y]);var transitionStyles=useMemo(function(){return{entering:{transform:'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',opacity:0},entered:{transform:'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',opacity:0},exiting:{},exited:{},unmounted:{}};},[]);// Run callback when transition ends
-useEffect(function(){var el=nodeRef.current;if(!el)return undefined;/**
+ */
+function RippleAnimation({
+  color,
+  duration,
+  onComplete,
+  size,
+  x,
+  y
+}) {
+  const nodeRef = useRef(null);
+
+  // Trigger the animation immediately
+  const inProp = true;
+  const baseStyle = useMemo(() => ({
+    position: 'absolute',
+    backgroundColor: color,
+    height: size,
+    width: size,
+    left: x,
+    top: y,
+    borderRadius: '50%',
+    transform: 'translate3d(-50%, -50%, 0) scale3d(0, 0, 1)',
+    opacity: 0.25,
+    transition: `opacity ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1), transform ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`,
+    pointerEvents: 'none'
+  }), [color, duration, size, x, y]);
+  const transitionStyles = useMemo(() => ({
+    entering: {
+      transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
+      opacity: 0
+    },
+    entered: {
+      transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
+      opacity: 0
+    },
+    exiting: {},
+    exited: {},
+    unmounted: {}
+  }), []);
+
+  // Run callback when transition ends
+  useEffect(() => {
+    const el = nodeRef.current;
+    if (!el) return undefined;
+
+    /**
      * Handles the transition end event and calls onComplete for relevant properties.
      * @param {TransitionEvent} e - The transition event object
-     */var handleEnd=function handleEnd(e){// Only handle transform or opacity transitions
-if(e.propertyName==='transform'||e.propertyName==='opacity'){onComplete();}};el.addEventListener('transitionend',handleEnd);return function(){return el.removeEventListener('transitionend',handleEnd);};},[onComplete]);return React.createElement(Transition,{"in":inProp,timeout:duration,appear:true,mountOnEnter:true,unmountOnExit:true,nodeRef:nodeRef},function(state){return React.createElement("div",{ref:nodeRef,className:style.ripple,style:_extends({},baseStyle,{},transitionStyles[state])});});}RippleAnimation.defaultProps={color:themeConfig.colors.dark,duration:300,onComplete:function onComplete(){},size:48,x:0,y:0};export default React.memo(RippleAnimation);
+     */
+    const handleEnd = e => {
+      // Only handle transform or opacity transitions
+      if (e.propertyName === 'transform' || e.propertyName === 'opacity') {
+        onComplete();
+      }
+    };
+    el.addEventListener('transitionend', handleEnd);
+    return () => el.removeEventListener('transitionend', handleEnd);
+  }, [onComplete]);
+  return /*#__PURE__*/React.createElement(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]
+    }
+  }));
+}
+RippleAnimation.defaultProps = {
+  color: themeConfig.colors.dark,
+  duration: 300,
+  onComplete: () => {},
+  size: 48,
+  x: 0,
+  y: 0
+};
+export default /*#__PURE__*/React.memo(RippleAnimation);

package/Ripple/index.js

@@ -1,60 +1,238 @@
-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 _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,{PureComponent}from'react';import PropTypes from'prop-types';import{findDOMNode}from'react-dom';import clamp from'lodash/clamp';import{shift}from'@shopgate/pwa-common/helpers/data';import{getOffset}from'@shopgate/pwa-common/helpers/dom';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import RippleAnimation from"./components/RippleAnimation";import style from"./style";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { findDOMNode } from 'react-dom';
+import clamp from 'lodash/clamp';
+import { shift } from '@shopgate/pwa-common/helpers/data';
+import { getOffset } from '@shopgate/pwa-common/helpers/dom';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import RippleAnimation from "./components/RippleAnimation";
+import style from "./style";
+
+/**
  * The ripple component.
- */var Ripple=/*#__PURE__*/function(_PureComponent){/**
+ */
+class Ripple extends PureComponent {
+  /**
    * Constructor.
    * @param {Object} props The component props.
-   */function Ripple(props){var _this2;_classCallCheck(this,Ripple);_this2=_callSuper(this,Ripple,[props]);/**
-   * Triggers adding of a new ripple on touch start event.
-   * @param {Object} event The even object.
-   */_defineProperty(_this2,"handleClick",function(event){if(_this2.props.disabled){return;}_this2.addRipple(event,true);_this2.props.onClick();});/**
-   * Will be triggered from the ripple animation component, when the
-   * ripple animation is over. It removes the ripple from the queue again.
-   */_defineProperty(_this2,"removeRipple",function(){if(!_this2.mounted){return;}_this2.setState(function(prevState){var ripples=shift(prevState.ripples);_this2.props.onComplete();return{ripples:ripples,hasRipples:!!ripples.length};});});_this2.state={ripples:[],nextKey:0,hasRipples:false};_this2.duration=500;_this2.ignoreNextMouseDown=false;_this2.mounted=false;_this2.offset=null;_this2.position=null;_this2.rootNode=null;_this2.style=null;return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Triggers adding of a new ripple on touch start event.
+     * @param {Object} event The even object.
+     */
+    this.handleClick = event => {
+      if (this.props.disabled) {
+        return;
+      }
+      this.addRipple(event, true);
+      this.props.onClick();
+    };
+    /**
+     * Will be triggered from the ripple animation component, when the
+     * ripple animation is over. It removes the ripple from the queue again.
+     */
+    this.removeRipple = () => {
+      if (!this.mounted) {
+        return;
+      }
+      this.setState(prevState => {
+        const ripples = shift(prevState.ripples);
+        this.props.onComplete();
+        return {
+          ripples,
+          hasRipples: !!ripples.length
+        };
+      });
+    };
+    this.state = {
+      ripples: [],
+      nextKey: 0,
+      hasRipples: false
+    };
+    this.duration = 500;
+    this.ignoreNextMouseDown = false;
+    this.mounted = false;
+    this.offset = null;
+    this.position = null;
+    this.rootNode = null;
+    this.style = null;
+  }
+
+  /**
    * Sets the `mounted` flag to true.
-   */_inherits(Ripple,_PureComponent);return _createClass(Ripple,[{key:"componentDidMount",value:function componentDidMount(){var fill=this.props.fill;// Reference to Ripple container (for now and later).
-this.rootNode=findDOMNode(this);// eslint-disable-line react/no-find-dom-node
-// Initially set the position values to be in the middle of the element.
-// If the Ripple's starting point has to follow the user's touch
-// Location then this is checked later.
-this.position={x:this.rootNode.offsetWidth/2,y:this.rootNode.offsetHeight/2};// Determine the duration based on the size of the ripple.
-this.duration=clamp(Math.round(Math.log(this.rippleSize)*100-(fill?-75:50)),0,10000);// Set the `mounted` flag to true.
-this.mounted=true;// If the Ripple is not allowed to overflow then apply some styles to the parent container.
-this.style=!this.props.overflow?{overflow:'hidden',position:'relative'}:null;}/**
+   */
+  componentDidMount() {
+    const {
+      fill
+    } = this.props;
+
+    // Reference to Ripple container (for now and later).
+    this.rootNode = findDOMNode(this); // eslint-disable-line react/no-find-dom-node
+
+    // Initially set the position values to be in the middle of the element.
+    // If the Ripple's starting point has to follow the user's touch
+    // Location then this is checked later.
+    this.position = {
+      x: this.rootNode.offsetWidth / 2,
+      y: this.rootNode.offsetHeight / 2
+    };
+
+    // Determine the duration based on the size of the ripple.
+    this.duration = clamp(Math.round(Math.log(this.rippleSize) * 100 - (fill ? -75 : 50)), 0, 10000);
+
+    // Set the `mounted` flag to true.
+    this.mounted = true;
+
+    // If the Ripple is not allowed to overflow then apply some styles to the parent container.
+    this.style = !this.props.overflow ? {
+      overflow: 'hidden',
+      position: 'relative'
+    } : null;
+  }
+
+  /**
    * Sets the `mounted` flag to false
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){this.mounted=false;}/**
+   */
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  /**
    * Calculate the size of the ripple.
    * @returns {number}
-   */},{key:"rippleSize",get:function get(){if(this.props.size){if(this.props.fill){return this.props.size*2;}return this.props.size;}/**
+   */
+  get rippleSize() {
+    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
      * will reach the furthest away corner if you click at a corner.
-     */if(this.props.fill){return Math.sqrt(Math.pow(this.rootNode.offsetWidth,2)+Math.pow(this.rootNode.offsetHeight,2))*2;}// Otherwise we set the size to be the smaller of the element's height and width.
-return Math.min(this.rootNode.offsetWidth,this.rootNode.offsetHeight);}/**
+     */
+    if (this.props.fill) {
+      return Math.sqrt(this.rootNode.offsetWidth ** 2 + this.rootNode.offsetHeight ** 2) * 2;
+    }
+
+    // Otherwise we set the size to be the smaller of the element's height and width.
+    return Math.min(this.rootNode.offsetWidth, this.rootNode.offsetHeight);
+  }
+
+  /**
    * Calculates the ripple position from the event.
    * @param {Object} event The event object.
    * @returns {Object} An object containing x and y values for the ripple.
-   */},{key:"getRipplePosition",value:function getRipplePosition(event){// If the Ripple is to fill the element then we should set the
-// Starting position to be where the user clicked within that element.
-if(this.props.fill){// Determine if event is a touch event.
-var isTouchEvent=event.touches&&event.touches.length;// Find the center points of the event.
-var pageX=isTouchEvent?event.touches[0].pageX:event.pageX;var pageY=isTouchEvent?event.touches[0].pageY:event.pageY;// The pointer location is relative to the element offset.
-this.position.x=pageX-this.offset.left;this.position.y=pageY-this.offset.top;}return this.position;}},{key:"addRipple",value:/**
+   */
+  getRipplePosition(event) {
+    // If the Ripple is to fill the element then we should set the
+    // Starting position to be where the user clicked within that element.
+    if (this.props.fill) {
+      // Determine if event is a touch event.
+      const isTouchEvent = event.touches && event.touches.length;
+
+      // Find the center points of the event.
+      const pageX = isTouchEvent ? event.touches[0].pageX : event.pageX;
+      const pageY = isTouchEvent ? event.touches[0].pageY : event.pageY;
+
+      // The pointer location is relative to the element offset.
+      this.position.x = pageX - this.offset.left;
+      this.position.y = pageY - this.offset.top;
+    }
+    return this.position;
+  }
+  /**
    * Adds a new Ripple to the queue.
    * @param {Object} event The event object.
    * @param {boolean} isTouchGenerated Whether the action was triggered by a touch or click.
-   */function addRipple(event,isTouchGenerated){// If the adding of the Ripple was already triggered
-// By a touch start event, no further action will be done.
-if(this.ignoreNextMouseDown&&!isTouchGenerated){this.ignoreNextMouseDown=false;return;}// Get the position of the element and store it.
-this.offset=getOffset(this.rootNode);// Receive the x and y position for the new Ripple.
-var _this$getRipplePositi=this.getRipplePosition(event),x=_this$getRipplePositi.x,y=_this$getRipplePositi.y;var ripples=this.state.ripples;// Append the new ripple to the ripples array.
-ripples.push(React.createElement(RippleAnimation,{color:this.props.color,duration:this.duration,fill:this.props.fill,key:this.state.nextKey,onComplete:this.removeRipple,size:this.rippleSize,x:x,y:y}));this.ignoreNextMouseDown=isTouchGenerated;// Update the state.
-this.setState(function(_ref){var nextKey=_ref.nextKey;return{ripples:ripples,nextKey:nextKey+1,hasRipples:true};});}/**
+   */
+  addRipple(event, isTouchGenerated) {
+    // If the adding of the Ripple was already triggered
+    // By a touch start event, no further action will be done.
+    if (this.ignoreNextMouseDown && !isTouchGenerated) {
+      this.ignoreNextMouseDown = false;
+      return;
+    }
+
+    // Get the position of the element and store it.
+    this.offset = getOffset(this.rootNode);
+
+    // Receive the x and y position for the new Ripple.
+    const {
+      x,
+      y
+    } = this.getRipplePosition(event);
+    const {
+      ripples
+    } = this.state;
+
+    // Append the new ripple to the ripples array.
+    ripples.push(/*#__PURE__*/React.createElement(RippleAnimation, {
+      color: this.props.color,
+      duration: this.duration,
+      fill: this.props.fill,
+      key: this.state.nextKey,
+      onComplete: this.removeRipple,
+      size: this.rippleSize,
+      x: x,
+      y: y
+    }));
+    this.ignoreNextMouseDown = isTouchGenerated;
+
+    // Update the state.
+    this.setState(({
+      nextKey
+    }) => ({
+      ripples,
+      nextKey: nextKey + 1,
+      hasRipples: true
+    }));
+  }
+
+  /**
    * Renders all the ripples in the queue.
    * @returns {JSX|null}
-   */},{key:"renderRipples",value:function renderRipples(){// It only needs to render, if there is at least one ripple in the queue.
-if(!this.state.hasRipples){return null;}return React.createElement("div",{className:style.container},this.state.ripples);}/**
+   */
+  renderRipples() {
+    // It only needs to render, if there is at least one ripple in the queue.
+    if (!this.state.hasRipples) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container
+    }, this.state.ripples);
+  }
+
+  /**
    * 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:"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 */}}]);}(PureComponent);_defineProperty(Ripple,"defaultProps",{className:'',color:themeConfig.colors.dark,disabled:false,fill:false,onClick:function onClick(){},onComplete:function onComplete(){},overflow:false,size:null});export default Ripple;
+   */
+  render() {
+    /* eslint-disable jsx-a11y/click-events-have-key-events,
+    jsx-a11y/no-static-element-interactions */
+    return /*#__PURE__*/React.createElement("div", {
+      className: `ui-shared__ripple ${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 */
+  }
+}
+Ripple.defaultProps = {
+  className: '',
+  color: themeConfig.colors.dark,
+  disabled: false,
+  fill: false,
+  onClick: () => {},
+  onComplete: () => {},
+  overflow: false,
+  size: null
+};
+export default Ripple;

package/Ripple/style.js

@@ -1 +1,18 @@
-import{css}from'glamor';var ripple=css({position:'absolute',borderRadius:'50%',transformOrigin:'50% 50% 0'}).toString();var container=css({position:'absolute',zIndex:0,top:0,left:0,width:'100%',height:'100%'}).toString();export default{ripple:ripple,container:container};
+import { css } from 'glamor';
+const ripple = css({
+  position: 'absolute',
+  borderRadius: '50%',
+  transformOrigin: '50% 50% 0'
+}).toString();
+const container = css({
+  position: 'absolute',
+  zIndex: 0,
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%'
+}).toString();
+export default {
+  ripple,
+  container
+};

package/RippleButton/index.js

@@ -1,11 +1,58 @@
-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 Ripple from"../Ripple";import Button from"../Button";import style from"../Button/style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Ripple from "../Ripple";
+import Button from "../Button";
+import style from "../Button/style";
+
+/**
  * The ripple button component is a special derivation of the basic button component
  * that adds a ripple effect when clicked.
- */var RippleButton=/*#__PURE__*/function(_Component){function RippleButton(){_classCallCheck(this,RippleButton);return _callSuper(this,RippleButton,arguments);}_inherits(RippleButton,_Component);return _createClass(RippleButton,[{key:"buttonProps",get:/**
+ */
+class RippleButton extends Component {
+  /**
    * Getter for the calculated button props.
    * @returns {Object}
-   */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']};}/**
+   */
+  get buttonProps() {
+    return {
+      className: `${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']
+    };
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){if(this.props.disabled){// Don't show the ripple effect when the button is disabled.
-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,overflow:true};return React.createElement(Button,_extends({},this.buttonProps,{testId:this.props.testId}),React.createElement(Ripple,rippleProps,this.props.children));}}]);}(Component);_defineProperty(RippleButton,"defaultProps",_extends({},Button.defaultProps,{rippleClassName:'',rippleSize:null,testId:'Button'}));export default RippleButton;
+   */
+  render() {
+    if (this.props.disabled) {
+      // Don't show the ripple effect when the button is disabled.
+      return /*#__PURE__*/React.createElement(Button, _extends({}, this.buttonProps, {
+        wrapContent: true
+      }), this.props.children);
+    }
+    const rippleProps = {
+      className: `${style.contentWrapper} ${this.props.rippleClassName}`,
+      fill: true,
+      size: this.props.rippleSize,
+      overflow: true
+    };
+    return /*#__PURE__*/React.createElement(Button, _extends({}, this.buttonProps, {
+      testId: this.props.testId
+    }), /*#__PURE__*/React.createElement(Ripple, rippleProps, this.props.children));
+  }
+}
+RippleButton.defaultProps = {
+  ...Button.defaultProps,
+  rippleClassName: '',
+  rippleSize: null,
+  testId: 'Button'
+};
+export default RippleButton;

package/RippleButton/spec.js

@@ -1 +1,45 @@
-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();});});
+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 />', () => {
+  it('should render as a regular ripple button effect if type is omitted', () => {
+    const wrapper = shallow(/*#__PURE__*/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', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RippleButton, {
+      type: "regular"
+    }, "Press me"));
+    expect(trim(wrapper.find(Button).props().className)).toEqual(`ui-shared__button ${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', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RippleButton, {
+      type: "primary"
+    }, "Press me"));
+    expect(trim(wrapper.find(Button).props().className)).toEqual(`ui-shared__button ${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', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RippleButton, {
+      type: "secondary"
+    }, "Press me"));
+    expect(trim(wrapper.find(Button).props().className)).toEqual(`ui-shared__button ${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', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RippleButton, {
+      disabled: true
+    }, "Press me"));
+    expect(wrapper.find(Button).props().disabled).toBe(true);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/ScannerOverlay/components/CameraOverlay/index.js

@@ -1,3 +1,14 @@
-import React from'react';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{SCANNER_CAMERA}from'@shopgate/pwa-common-commerce/scanner/constants/Portals';import styles from"./style";/**
+import React from 'react';
+import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
+import { SCANNER_CAMERA } from '@shopgate/pwa-common-commerce/scanner/constants/Portals';
+import styles from "./style";
+
+/**
  * @returns {JSX}
- */var CameraOverlay=function CameraOverlay(){return React.createElement(SurroundPortals,{portalName:SCANNER_CAMERA},React.createElement("div",{className:styles},React.createElement("div",null)));};export default CameraOverlay;
+ */
+const CameraOverlay = () => /*#__PURE__*/React.createElement(SurroundPortals, {
+  portalName: SCANNER_CAMERA
+}, /*#__PURE__*/React.createElement("div", {
+  className: styles
+}, /*#__PURE__*/React.createElement("div", null)));
+export default CameraOverlay;

package/ScannerOverlay/components/CameraOverlay/style.js

@@ -1 +1,40 @@
-import{css}from'glamor';import{themeVariables,themeColors}from'@shopgate/pwa-common/helpers/config';var edgeHeight=45;var edgeWidth=35;var edgeBorderWidth=3;var edgeOffsetHorizontal=themeVariables.gap.xbig;var edgeOffsetVertical=themeVariables.gap.xxbig;export default css({position:'relative',height:'90%',width:'100%',':before,:after,>:before,>:after':{display:'block',content:' ',width:edgeWidth,height:edgeHeight,position:'absolute',borderStyle:'solid',borderColor:themeColors.light},':before':{top:edgeOffsetVertical,left:edgeOffsetHorizontal,borderWidth:"".concat(edgeBorderWidth,"px 0 0 ").concat(edgeBorderWidth,"px")},':after':{top:edgeOffsetVertical,right:edgeOffsetHorizontal,borderWidth:"".concat(edgeBorderWidth,"px ").concat(edgeBorderWidth,"px 0 0")},'>:before':{bottom:edgeOffsetVertical,left:edgeOffsetHorizontal,borderWidth:"0 0 ".concat(edgeBorderWidth,"px ").concat(edgeBorderWidth,"px")},'>:after':{bottom:edgeOffsetVertical,right:edgeOffsetHorizontal,borderWidth:"0 ".concat(edgeBorderWidth,"px ").concat(edgeBorderWidth,"px 0")}}).toString();
+import { css } from 'glamor';
+import { themeVariables, themeColors } from '@shopgate/pwa-common/helpers/config';
+const edgeHeight = 45;
+const edgeWidth = 35;
+const edgeBorderWidth = 3;
+const edgeOffsetHorizontal = themeVariables.gap.xbig;
+const edgeOffsetVertical = themeVariables.gap.xxbig;
+export default css({
+  height: '90%',
+  width: '100%',
+  ':before,:after,>:before,>:after': {
+    display: 'block',
+    content: ' ',
+    width: edgeWidth,
+    height: edgeHeight,
+    position: 'absolute',
+    borderStyle: 'solid',
+    borderColor: themeColors.light
+  },
+  ':before': {
+    top: edgeOffsetVertical,
+    left: edgeOffsetHorizontal,
+    borderWidth: `${edgeBorderWidth}px 0 0 ${edgeBorderWidth}px`
+  },
+  ':after': {
+    top: edgeOffsetVertical,
+    right: edgeOffsetHorizontal,
+    borderWidth: `${edgeBorderWidth}px ${edgeBorderWidth}px 0 0`
+  },
+  '>:before': {
+    bottom: edgeOffsetVertical,
+    left: edgeOffsetHorizontal,
+    borderWidth: `0 0 ${edgeBorderWidth}px ${edgeBorderWidth}px`
+  },
+  '>:after': {
+    bottom: edgeOffsetVertical,
+    right: edgeOffsetHorizontal,
+    borderWidth: `0 ${edgeBorderWidth}px ${edgeBorderWidth}px 0`
+  }
+}).toString();