@shopgate/pwa-ui-shared 7.12.3-beta.1 → 7.20.0-beta.1

package/Sheet/components/Header/index.js

@@ -1,12 +1,12 @@
-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 _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 classNames from'classnames';import Grid from'@shopgate/pwa-common/components/Grid';import Ripple from"../../../Ripple";import CrossIcon from"../../../icons/CrossIcon";import styles from"./style";/**
+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 classNames from'classnames';import Grid from'@shopgate/pwa-common/components/Grid';import Ripple from"../../../Ripple";import CrossIcon from"../../../icons/CrossIcon";import styles from"./style";import SearchBar from"./components/SearchBar";/**
  * Header component.
- */var Header=/*#__PURE__*/function(_Component){_inherits(Header,_Component);function Header(){_classCallCheck(this,Header);return _possibleConstructorReturn(this,_getPrototypeOf(Header).apply(this,arguments));}_createClass(Header,[{key:"shouldComponentUpdate",/**
-   * The component's default props.
-   * @type {Object}
-   */ /**
+ */var Header=/*#__PURE__*/function(_Component){function Header(){_classCallCheck(this,Header);return _callSuper(this,Header,arguments);}_inherits(Header,_Component);return _createClass(Header,[{key:"shouldComponentUpdate",value:/**
    * @param {Object} nextProps Next Props
    * @returns {boolean}
-   */value:function shouldComponentUpdate(nextProps){return this.props.shadow!==nextProps.shadow||this.props.title!==nextProps.title;}/**
+   */function shouldComponentUpdate(nextProps){return this.props.shadow!==nextProps.shadow||this.props.title!==nextProps.title;}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var allowClose=this.props.allowClose;var classes=classNames(styles.wrapper,_defineProperty({},styles.shadow,this.props.shadow));var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;return React.createElement(Grid,{className:classes,component:"div",wrap:false},allowClose?React.createElement("button",{className:styles.closeButton,onClick:this.props.onToggleClose,"aria-label":__('common.close'),type:"button"},React.createElement(Ripple,{className:styles.closeIcon},React.createElement(CrossIcon,{size:24}))):React.createElement("div",{className:styles.closePlaceholder}),React.createElement(Grid.Item,_extends({className:styles.title,component:"div",grow:1,role:"heading"},allowClose?{tabIndex:0}:null),this.props.title));}}]);return Header;}(Component);_defineProperty(Header,"defaultProps",{onToggleClose:function onToggleClose(){},shadow:false,allowClose:true});_defineProperty(Header,"contextTypes",{i18n:PropTypes.func});export default Header;
+   */},{key:"render",value:function render(){var allowClose=this.props.allowClose;var classes=classNames(styles.wrapper);var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;return React.createElement("div",{className:classNames(_defineProperty({},styles.shadow,this.props.shadow))},React.createElement(Grid,{className:classes,component:"div",wrap:false},allowClose?React.createElement("button",{className:styles.closeButton,onClick:this.props.onToggleClose,"aria-label":__('common.close'),type:"button"},React.createElement(Ripple,{className:styles.closeIcon},React.createElement(CrossIcon,{size:24}))):React.createElement("div",{className:styles.closePlaceholder}),React.createElement(Grid.Item,_extends({className:styles.title,component:"div",grow:1,role:"heading"},allowClose?{tabIndex:0}:null),this.props.title)),this.props.showSearch&&React.createElement(SearchBar,{handleChange:this.props.handleChange}));}}]);}(Component);/**
+   * The component's default props.
+   * @type {Object}
+   */_defineProperty(Header,"defaultProps",{onToggleClose:function onToggleClose(){},shadow:false,allowClose:true,handleChange:function handleChange(){},showSearch:false});_defineProperty(Header,"contextTypes",{i18n:PropTypes.func});export default Header;

package/Sheet/index.js

@@ -1,23 +1,26 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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 throttle from'lodash/throttle';import classNames from'classnames';import UIEvents from'@shopgate/pwa-core/emitters/ui';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Drawer from'@shopgate/pwa-common/components/Drawer';import ProgressBar from"../ProgressBar";import Header from"./components/Header";import styles from"./style";export var SHEET_EVENTS={OPEN:'Sheet.open',CLOSE:'Sheet.close'};/**
+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 throttle from'lodash/throttle';import classNames from'classnames';import UIEvents from'@shopgate/pwa-core/emitters/ui';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Drawer from'@shopgate/pwa-common/components/Drawer';import ProgressBar from"../ProgressBar";import Header from"./components/Header";import styles from"./style";export var SHEET_EVENTS={OPEN:'Sheet.open',CLOSE:'Sheet.close'};/**
  * Sheet component.
- */var Sheet=/*#__PURE__*/function(_Component){_inherits(Sheet,_Component);/**
-   * The component default props.
-   * @type {Object}
-   */ /**
+ */var Sheet=/*#__PURE__*/function(_Component){/**
    * The constructor.
    * @param {Object} props The component props.
-   */function Sheet(props){var _this;_classCallCheck(this,Sheet);_this=_possibleConstructorReturn(this,_getPrototypeOf(Sheet).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleScroll",throttle(function(){var scrolled=_this.content.current.scrollTop!==0;if(_this.state.scrolled!==scrolled){_this.setState({scrolled:scrolled});}},10));_defineProperty(_assertThisInitialized(_this),"handleClose",function(){_this.props.onClose();_this.setState({isOpen:false,scrolled:false});});_defineProperty(_assertThisInitialized(_this),"handleDidOpen",function(){UIEvents.emit(SHEET_EVENTS.OPEN);_this.props.onDidOpen();});_defineProperty(_assertThisInitialized(_this),"handleDidClose",function(){UIEvents.emit(SHEET_EVENTS.CLOSE);_this.props.onDidClose();});_this.content=React.createRef();_this.state={isOpen:props.isOpen,scrolled:false};return _this;}/**
+   */function Sheet(props){var _this2;_classCallCheck(this,Sheet);_this2=_callSuper(this,Sheet,[props]);/**
+   * Close the Sheet.
+   */_defineProperty(_this2,"handleScroll",throttle(function(){var scrolled=_this2.content.current.scrollTop!==0;if(_this2.state.scrolled!==scrolled){_this2.setState({scrolled:scrolled});}},10));/**
+   * Close the Sheet.
+   */_defineProperty(_this2,"handleClose",function(){_this2.props.onClose();_this2.setState({isOpen:false,scrolled:false});});/** The Sheet is opened */_defineProperty(_this2,"handleDidOpen",function(){UIEvents.emit(SHEET_EVENTS.OPEN);_this2.props.onDidOpen();});/** The Sheet is closed */_defineProperty(_this2,"handleDidClose",function(){UIEvents.emit(SHEET_EVENTS.CLOSE);_this2.props.onDidClose();});/**
+   * New value from SearchBar
+   * @param {string} value .
+   */_defineProperty(_this2,"handleSearchInput",function(value){_this2.setState({query:value});});_this2.content=React.createRef();_this2.state={isOpen:props.isOpen,scrolled:false,query:''};return _this2;}/**
    * Change isOpen state for new incoming props.
    * @param {Object} nextProps The next component props.
-   */_createClass(Sheet,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(_ref){var isOpen=_ref.isOpen;if(this.state.isOpen!==isOpen){this.setState({isOpen:isOpen});}}/**
-   * Close the Sheet.
-   */},{key:"render",/**
-   * Renders the component.
-   * @returns {JSX}
-   */value:function render(){var _this2=this;var allowClose=this.props.allowClose;var children=React.Children.map(this.props.children,function(child){return React.cloneElement(child,// Only add onClose prop to other components
-typeof child.type==='function'&&_this2.props.onClose!==null?{onClose:_this2.props.onClose}:{});});var drawerClassNames=classNames(styles.container,_defineProperty({},this.props.className,this.props.className));var contentClassNames=classNames(styles.content,_defineProperty({},this.props.contentClassName,this.props.contentClassName),_defineProperty({},styles.shadow,!this.props.backdrop));return React.createElement("section",{className:this.state.isOpen?styles.section:null},React.createElement(Drawer,{className:drawerClassNames,isOpen:this.state.isOpen,onDidOpen:this.handleDidOpen,onDidClose:this.handleDidClose,onOpen:this.props.onOpen,onClose:this.handleClose,animation:this.animationProps},this.props.title&&React.createElement(Sheet.Header,{onToggleClose:this.handleClose,shadow:this.state.scrolled,title:this.props.title,allowClose:allowClose}),React.createElement("div",{className:styles.progressBarContainer},React.createElement(ProgressBar,{isVisible:this.props.isLoading})),React.createElement("div",{ref:this.content,onScroll:this.handleScroll,className:contentClassNames},children)),this.props.backdrop&&React.createElement(Backdrop,{isVisible:this.state.isOpen,level:4,onClick:allowClose?this.handleClose:function(){},opacity:20}));}},{key:"animationProps",/**
+   */_inherits(Sheet,_Component);return _createClass(Sheet,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(_ref){var isOpen=_ref.isOpen;if(this.state.isOpen!==isOpen){this.setState({isOpen:isOpen});}}},{key:"animationProps",get:/**
    * Getter for the animation props of the Sheet.
    * @returns {Object}
-   */get:function get(){return _extends({duration:this.props.duration},styles.drawerAnimation,{},this.props.animation);}/**
-   * Close the Sheet.
-   */}]);return Sheet;}(Component);_defineProperty(Sheet,"Header",Header);_defineProperty(Sheet,"defaultProps",{animation:{},backdrop:true,children:null,className:null,contentClassName:null,duration:300,isOpen:false,isLoading:false,onClose:function onClose(){},onDidClose:function onDidClose(){},onDidOpen:function onDidOpen(){},onOpen:function onOpen(){},title:'',allowClose:true});export default Sheet;
+   */function get(){return _extends({duration:this.props.duration},styles.drawerAnimation,{},this.props.animation);}},{key:"render",value:/**
+   * Renders the component.
+   * @returns {JSX}
+   */function render(){var _this3=this;var allowClose=this.props.allowClose;var children=React.Children.map(this.props.children,function(child){return React.cloneElement(child,// Only add onClose prop to other components
+typeof child.type==='function'&&_this3.props.onClose!==null?{onClose:_this3.props.onClose,query:_this3.state.query}:{});});var drawerClassNames=classNames(styles.container,_defineProperty({},this.props.className,this.props.className));var contentClassNames=classNames(styles.content,_defineProperty({},styles.containerFullScreen,this.props.showSearch),_defineProperty({},this.props.contentClassName,this.props.contentClassName),_defineProperty({},styles.shadow,!this.props.backdrop));return React.createElement("section",{className:classNames('ui-shared__sheet',_defineProperty({},styles.section,this.state.isOpen))},React.createElement(Drawer,{className:drawerClassNames,isOpen:this.state.isOpen,onDidOpen:this.handleDidOpen,onDidClose:this.handleDidClose,onOpen:this.props.onOpen,onClose:this.handleClose,animation:this.animationProps},this.props.title&&React.createElement(Sheet.Header,{showSearch:this.props.showSearch,handleChange:this.handleSearchInput,onToggleClose:this.handleClose,shadow:this.state.scrolled,title:this.props.title,allowClose:allowClose}),React.createElement("div",{className:styles.progressBarContainer},React.createElement(ProgressBar,{isVisible:this.props.isLoading})),React.createElement("div",{ref:this.content,onScroll:this.handleScroll,className:contentClassNames},children)),this.props.backdrop&&React.createElement(Backdrop,{isVisible:this.state.isOpen,level:4,onClick:allowClose?this.handleClose:function(){},opacity:20}));}}]);}(Component);_defineProperty(Sheet,"Header",Header);/**
+   * The component default props.
+   * @type {Object}
+   */_defineProperty(Sheet,"defaultProps",{animation:{},backdrop:true,children:null,className:null,contentClassName:null,duration:300,isOpen:false,isLoading:false,onClose:function onClose(){},onDidClose:function onDidClose(){},onDidOpen:function onDidOpen(){},onOpen:function onOpen(){},title:'',showSearch:false,allowClose:true});export default Sheet;

package/Sheet/style.js

@@ -1 +1,2 @@
-var _css2,_css3,_css4,_css5;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{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';var duration=300;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var section=css(_defineProperty({},responsiveMediaQuery('>sm',{webOnly:true}),{display:'flex',justifyContent:'center',alignItems:'center',width:'80%',position:'fixed',left:0,right:0,top:0,bottom:0,margin:'auto',zIndex:100})).toString();var container=css((_css2={bottom:0,background:themeConfig.colors.light,width:'100vw',color:"var(--color-text-high-emphasis, ".concat(themeConfig.colors.dark,")")},_defineProperty(_css2,responsiveMediaQuery('>sm',{webOnly:true}),{position:'initial'}),_defineProperty(_css2,responsiveMediaQuery('>md',{webOnly:true}),{width:'60%'}),_css2)).toString();var progressBarContainer=css({position:'relative'}).toString();var shadow=css({boxShadow:themeConfig.shadows.sheet}).toString();var content=css((_css3={maxHeight:["calc(var(--vh-100, 100vh) - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(var(--vh-100, 100vh) - ".concat(themeConfig.variables.navigator.height,"px - var(--safe-area-inset-top))")]},_defineProperty(_css3,responsiveMediaQuery('>sm',{webOnly:true}),{maxHeight:["calc(var(--vh-80, 80vh) - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(var(--vh-80, 80vh) - ".concat(themeConfig.variables.navigator.height,"px - var(--safe-area-inset-top))")]}),_defineProperty(_css3,"paddingBottom",['var(--safe-area-inset-bottom)']),_defineProperty(_css3,"overflowY",'scroll'),_defineProperty(_css3,"WebkitOverflowScrolling",'touch'),_css3)).toString();var slideInSheetDrawer=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var fadeInSheetDrawer=css.keyframes({'0%':{opacity:0},'100%':{opacity:1}});var slideOutSheetDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var fadeOutSheetDrawer=css.keyframes({'0%':{opacity:1},'100%':{opacity:0}});var drawerAnimation={"in":css((_css4={},_defineProperty(_css4,responsiveMediaQuery('<=sm',{appAlways:true}),{animation:"".concat(slideInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}),_defineProperty(_css4,responsiveMediaQuery('>sm',{webOnly:true}),{animation:"".concat(fadeInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}),_css4)).toString(),out:css((_css5={},_defineProperty(_css5,responsiveMediaQuery('<=sm',{appAlways:true}),{animation:"".concat(slideOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}),_defineProperty(_css5,responsiveMediaQuery('>sm',{webOnly:true}),{animation:"".concat(fadeOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}),_css5)).toString()};export default{section:section,container:container,progressBarContainer:progressBarContainer,shadow:shadow,content:content,drawerAnimation:drawerAnimation};
+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{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';var duration=300;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var section=css(_defineProperty({},responsiveMediaQuery('>sm',{webOnly:true}),{display:'flex',justifyContent:'center',alignItems:'center',width:'80%',position:'fixed',left:0,right:0,top:0,bottom:0,margin:'auto',zIndex:100})).toString();var container=css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({bottom:0,background:themeConfig.colors.light,width:'100vw'},responsiveMediaQuery('<xl',{appOnly:true}),{// Max width was introduced in PWA6 CCP-2496
+maxWidth:640}),"left",0),"right",0),"margin",'0 auto'),"color","var(--color-text-high-emphasis, ".concat(themeConfig.colors.dark,")")),responsiveMediaQuery('>sm',{webOnly:true}),{position:'initial'}),responsiveMediaQuery('>md',{webOnly:true}),{width:'60%'})).toString();var containerFullScreen=css({height:["calc(100vh - ".concat(themeConfig.variables.navigator.height,"px - 51px)"),"calc(100vh - ".concat(themeConfig.variables.navigator.height,"px - 51px - var(--safe-area-inset-top))")]});var searchBarWrapper=css({backgroundColor:'white',height:52,position:'sticky',width:'100%',top:0,zIndex:2});var progressBarContainer=css({position:'relative'}).toString();var shadow=css({boxShadow:themeConfig.shadows.sheet}).toString();var content=css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({maxHeight:["calc(var(--vh-100, 100vh) - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(var(--vh-100, 100vh) - ".concat(themeConfig.variables.navigator.height,"px - var(--safe-area-inset-top))")]},responsiveMediaQuery('>sm',{webOnly:true}),{maxHeight:["calc(var(--vh-80, 80vh) - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(var(--vh-80, 80vh) - ".concat(themeConfig.variables.navigator.height,"px - var(--safe-area-inset-top))")]}),"paddingBottom",['var(--safe-area-inset-bottom)']),"overflowY",'scroll'),"WebkitOverflowScrolling",'touch')).toString();var slideInSheetDrawer=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var fadeInSheetDrawer=css.keyframes({'0%':{opacity:0},'100%':{opacity:1}});var slideOutSheetDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var fadeOutSheetDrawer=css.keyframes({'0%':{opacity:1},'100%':{opacity:0}});var drawerAnimation={"in":css(_defineProperty(_defineProperty({},responsiveMediaQuery('<=sm',{appAlways:true}),{animation:"".concat(slideInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}),responsiveMediaQuery('>sm',{webOnly:true}),{animation:"".concat(fadeInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)})).toString(),out:css(_defineProperty(_defineProperty({},responsiveMediaQuery('<=sm',{appAlways:true}),{animation:"".concat(slideOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}),responsiveMediaQuery('>sm',{webOnly:true}),{animation:"".concat(fadeOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)})).toString()};export default{section:section,container:container,containerFullScreen:containerFullScreen,searchBarWrapper:searchBarWrapper,progressBarContainer:progressBarContainer,shadow:shadow,content:content,drawerAnimation:drawerAnimation};

package/TaxDisclaimer/index.js

@@ -1,4 +1,5 @@
-import React,{Fragment}from'react';import Portal from'@shopgate/pwa-common/components/Portal';import{PRODUCT_TAX_DISCLAIMER,PRODUCT_TAX_DISCLAIMER_AFTER,PRODUCT_TAX_DISCLAIMER_BEFORE}from'@shopgate/pwa-common-commerce/product/constants/Portals';import I18n from'@shopgate/pwa-common/components/I18n';import showTaxDisclaimer from'@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';import styles from"./style";/**
+import React from'react';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{PRODUCT_TAX_DISCLAIMER}from'@shopgate/pwa-common-commerce/product/constants/Portals';import I18n from'@shopgate/pwa-common/components/I18n';import showTaxDisclaimer from'@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';import{useWidgetSettings}from'@shopgate/engage/core/hooks/useWidgetSettings';import styles from"./style";/**
  * TaxDisclaimer component.
  * @returns {Function}
- */var TaxDisclaimer=function TaxDisclaimer(){return React.createElement(Fragment,null,React.createElement(Portal,{name:PRODUCT_TAX_DISCLAIMER_BEFORE}),React.createElement(Portal,{name:PRODUCT_TAX_DISCLAIMER},showTaxDisclaimer&&React.createElement("div",{"data-test-id":"taxDisclaimer","aria-hidden":true},React.createElement(I18n.Text,{className:styles,string:"product.tax_disclaimer"}))),React.createElement(Portal,{name:PRODUCT_TAX_DISCLAIMER_AFTER}));};export default TaxDisclaimer;
+ */var TaxDisclaimer=function TaxDisclaimer(){var _useWidgetSettings=useWidgetSettings('@shopgate/engage/components/TaxDisclaimer'),show=_useWidgetSettings.show,text=_useWidgetSettings.text;// use widget setting if set to true/false, otherwise use market logic
+var showDisclaimer=typeof show==='boolean'?show:showTaxDisclaimer;return React.createElement(SurroundPortals,{portalName:PRODUCT_TAX_DISCLAIMER,portalProps:{showTaxDisclaimer:showDisclaimer}},showDisclaimer&&React.createElement("div",{"data-test-id":"taxDisclaimer","aria-hidden":true,className:"ui-shared__tax-disclaimer"},React.createElement(I18n.Text,{className:styles,string:text||'product.tax_disclaimer'})));};export default TaxDisclaimer;

package/TaxDisclaimer/spec.js

@@ -1,3 +1,3 @@
-import React from'react';import{shallow}from'enzyme';import I18n from'@shopgate/pwa-common/components/I18n';describe('<TaxDisclaimer />',function(){afterEach(function(){jest.resetModules();});it('should display the component',function(){jest.mock('@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer',function(){return true;});// eslint-disable-next-line global-require
+import React from'react';import{shallow}from'enzyme';import I18n from'@shopgate/pwa-common/components/I18n';jest.mock('@shopgate/engage/core/hooks/useWidgetSettings',function(){return{useWidgetSettings:jest.fn().mockReturnValue({show:null,hint:'*',text:null})};});describe('<TaxDisclaimer />',function(){afterEach(function(){jest.resetModules();});it('should display the component',function(){jest.mock('@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer',function(){return true;});// eslint-disable-next-line global-require
 var TaxDisclaimer=require("./index")["default"];var wrapper=shallow(React.createElement(TaxDisclaimer,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(I18n.Text).exists()).toBe(true);});it('should display null',function(){jest.mock('@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer',function(){return false;});// eslint-disable-next-line global-require
 var TaxDisclaimer=require("./index")["default"];var wrapper=shallow(React.createElement(TaxDisclaimer,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(I18n.Text).exists()).toBe(false);});});

package/TextField/components/Label/style.js

@@ -17,4 +17,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {boolean} floating Whether the label is floating.
  * @param {boolean} error Whether the input field shows an error message.
  * @return {string} The style classes.
- */var labelStyles=function labelStyles(){var _classNames;var focused=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var floating=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var error=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;return classNames(label,(_classNames={},_defineProperty(_classNames,labelFloating,floating),_defineProperty(_classNames,labelRegular,!focused),_defineProperty(_classNames,labelFocus,!error&&focused),_defineProperty(_classNames,labelError,error&&focused),_classNames));};export default{labelStyles:labelStyles};
+ */var labelStyles=function labelStyles(){var focused=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;var floating=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var error=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;return classNames(label,_defineProperty(_defineProperty(_defineProperty(_defineProperty({},labelFloating,floating),labelRegular,!focused),labelFocus,!error&&focused),labelError,error&&focused));};export default{labelStyles:labelStyles};

package/TextField/index.js

@@ -1,27 +1,36 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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{hot}from'react-hot-loader/root';import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Label from"./components/Label";import Underline from"./components/Underline";import ErrorText from"./components/ErrorText";import Hint from"./components/Hint";import styles from"./style";import FormElement from"./components/FormElement/index";/**
+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{hot}from'react-hot-loader/root';import React,{Component}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Label from"./components/Label";import Underline from"./components/Underline";import ErrorText from"./components/ErrorText";import Hint from"./components/Hint";import styles from"./style";import FormElement from"./components/FormElement/index";/**
  * A component that provides a styled text field for user input in material design.
- */var TextField=/*#__PURE__*/function(_Component){_inherits(TextField,_Component);/**
+ */var TextField=/*#__PURE__*/function(_Component){/**
    * Creates a new text field component.
    * @param {Object} props The component properties.
-   */function TextField(props){var _this;_classCallCheck(this,TextField);_this=_possibleConstructorReturn(this,_getPrototypeOf(TextField).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleFocusChange",function(isFocused){_this.setState({isFocused:isFocused});_this.props.onFocusChange(isFocused);});_defineProperty(_assertThisInitialized(_this),"handleChange",function(value,event){_this.props.onChange(value,event);});_defineProperty(_assertThisInitialized(_this),"handleValidate",function(value,isInitial){var validationError=_this.props.onValidate(value);if(validationError!==true&&validationError){/**
+   */function TextField(props){var _this2;_classCallCheck(this,TextField);_this2=_callSuper(this,TextField,[props]);/**
+   * Internal focus event handler.
+   * @param {boolean} isFocused Whether the input component is focused.
+   */_defineProperty(_this2,"handleFocusChange",function(isFocused){_this2.setState({isFocused:isFocused});_this2.props.onFocusChange(isFocused);});/**
+   * Updates the state if the input value has been changed.
+   * @param {string} value The entered text.
+   * @param {Object} event The original event object.
+   */_defineProperty(_this2,"handleChange",function(value,event){_this2.props.onChange(value,event);});/**
+   * Updates the validation error text if required.
+   * @param {string} value The entered text.
+   * @param {boolean} isInitial Whether this is the initial value of the input field.
+   * @return {boolean} Whether the validation was successful.
+   */_defineProperty(_this2,"handleValidate",function(value,isInitial){var validationError=_this2.props.onValidate(value);if(validationError!==true&&validationError){/**
        * An error message was returned by the validation callback. Update the state.
        * Because the validation is performed when the component is constructed, we need to make
        * sure we're not calling setState() in this situation.
-       */if(!isInitial){_this.setState({validationError:validationError});}else{_this.state.validationError=validationError;}}else if(_this.state.validationError){// There was no error, clear the state variable.
-_this.setState({validationError:null});}// Forward the boolean result to the input field.
-return validationError===true;});_this.state={isFocused:false,validationError:null};return _this;}/**
+       */if(!isInitial){_this2.setState({validationError:validationError});}else{_this2.state.validationError=validationError;}}else if(_this2.state.validationError){// There was no error, clear the state variable.
+_this2.setState({validationError:null});}// Forward the boolean result to the input field.
+return validationError===true;});_this2.state={isFocused:false,validationError:null};return _this2;}/**
    * @returns {boolean} Whether the text field is currently focused.
-   */_createClass(TextField,[{key:"render",/**
-   * Renders the text field.
-   * @return {JSX}
-   */value:function render(){var styleType=this.props.multiLine?'multiLine':'input';var style=styles.container[styleType];return React.createElement("div",{className:classNames(style,this.props.className,'textField',{disabled:this.props.disabled})},React.createElement(Hint,{visible:this.isHintVisible,hintText:this.props.hintText}),React.createElement(Label,{name:this.props.name,label:this.props.label,isFocused:this.isFocused,isFloating:this.isLabelFloating,hasErrorMessage:this.hasErrorMessage}),React.createElement(FormElement,{id:this.props.name,multiLine:this.props.multiLine,name:this.props.name,setRef:this.props.setRef,onFocusChange:this.handleFocusChange,onChange:this.handleChange,onSanitize:this.props.onSanitize,onValidate:this.handleValidate,password:this.props.password,type:this.props.type,value:this.props.value,isControlled:this.props.isControlled,inputComponent:this.props.inputComponent,disabled:this.props.disabled}),React.createElement(Underline,{isFocused:this.isFocused,hasErrorMessage:this.hasErrorMessage}),this.props.showErrorText&&React.createElement(ErrorText,{validationError:this.state.validationError,errorText:this.props.errorText,translate:this.props.translateErrorText}));}},{key:"isFocused",get:function get(){return this.state.isFocused;}/**
+   */_inherits(TextField,_Component);return _createClass(TextField,[{key:"isFocused",get:function get(){return this.state.isFocused;}/**
    * @returns {boolean} Whether the label is currently floating.
    */},{key:"isLabelFloating",get:function get(){// On Firefox empty date inputs always show a placeholder with date pattern
 if(navigator.userAgent.includes('Firefox')&&this.props.type==='date'){return true;}return this.isFocused||!!this.props.value;}/**
    * @returns {boolean} Whether the hint text is currently visible.
    */},{key:"isHintVisible",get:function get(){return this.isFocused&&!this.props.value;}/**
    * @return {boolean} Whether the error message is set.
-   */},{key:"hasErrorMessage",get:function get(){return!!(this.state.validationError||this.props.errorText);}/**
-   * Internal focus event handler.
-   * @param {boolean} isFocused Whether the input component is focused.
-   */}]);return TextField;}(Component);_defineProperty(TextField,"defaultProps",{className:'',errorText:'',showErrorText:true,setRef:function setRef(){},hintText:'',isControlled:false,label:'',multiLine:false,onChange:function onChange(){},onFocusChange:function onFocusChange(){},onSanitize:function onSanitize(value){return value;},onValidate:function onValidate(){return true;},password:false,translateErrorText:true,type:'text',value:'',inputComponent:'input',disabled:false});export default hot(TextField);
+   */},{key:"hasErrorMessage",get:function get(){return!!(this.state.validationError||this.props.errorText);}},{key:"render",value:/**
+   * Renders the text field.
+   * @return {JSX}
+   */function render(){var styleType=this.props.multiLine?'multiLine':'input';var style=styles.container[styleType];return React.createElement("div",{className:classNames(style,this.props.className,'textField','ui-shared__text-field',{disabled:this.props.disabled})},React.createElement(Hint,{visible:this.isHintVisible,hintText:this.props.hintText}),React.createElement(Label,{name:this.props.name,label:this.props.label,isFocused:this.isFocused,isFloating:this.isLabelFloating,hasErrorMessage:this.hasErrorMessage}),React.createElement(FormElement,{id:this.props.name,multiLine:this.props.multiLine,name:this.props.name,setRef:this.props.setRef,onFocusChange:this.handleFocusChange,onChange:this.handleChange,onSanitize:this.props.onSanitize,onValidate:this.handleValidate,password:this.props.password,type:this.props.type,value:this.props.value,isControlled:this.props.isControlled,inputComponent:this.props.inputComponent,disabled:this.props.disabled}),React.createElement(Underline,{isFocused:this.isFocused,hasErrorMessage:this.hasErrorMessage}),this.props.showErrorText&&React.createElement(ErrorText,{validationError:this.state.validationError,errorText:this.props.errorText,translate:this.props.translateErrorText}));}}]);}(Component);_defineProperty(TextField,"defaultProps",{className:'',errorText:'',showErrorText:true,setRef:function setRef(){},hintText:'',isControlled:false,label:'',multiLine:false,onChange:function onChange(){},onFocusChange:function onFocusChange(){},onSanitize:function onSanitize(value){return value;},onValidate:function onValidate(){return true;},password:false,translateErrorText:true,type:'text',value:'',inputComponent:'input',disabled:false});export default hot(TextField);

package/ToggleIcon/index.js

@@ -1,14 +1,14 @@
-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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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';/**
+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,{Component}from'react';import PropTypes from'prop-types';/**
  * No operational default handler
  */var noop=function noop(){};/**
  * An toggle icon with toggle handlers.
- */var ToggleIcon=/*#__PURE__*/function(_Component){_inherits(ToggleIcon,_Component);/**
+ */var ToggleIcon=/*#__PURE__*/function(_Component){/**
    * @param {Object} props The component properties.
-   */function ToggleIcon(props){var _this;_classCallCheck(this,ToggleIcon);_this=_possibleConstructorReturn(this,_getPrototypeOf(ToggleIcon).call(this,props));_defineProperty(_assertThisInitialized(_this),"handleToggle",function(){_this.setState(function(_ref){var on=_ref.on;return{on:!on};},function(){return _this.props.toggleHandler(_this.state.on);});});_this.state={on:props.on};return _this;}/**
+   */function ToggleIcon(props){var _this2;_classCallCheck(this,ToggleIcon);_this2=_callSuper(this,ToggleIcon,[props]);/**
+   * Toggle icon
+   */_defineProperty(_this2,"handleToggle",function(){_this2.setState(function(_ref){var on=_ref.on;return{on:!on};},function(){return _this2.props.toggleHandler(_this2.state.on);});});_this2.state={on:props.on};return _this2;}/**
    * Reset state to received props
    * @param {Object} nextProps next props
-   */_createClass(ToggleIcon,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){this.setState({on:nextProps.on});}/**
-   * Toggle icon
-   */},{key:"render",/**
+   */_inherits(ToggleIcon,_Component);return _createClass(ToggleIcon,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){this.setState({on:nextProps.on});}},{key:"render",value:/**
    * @return {*}
-   */value:function render(){var _this$props=this.props,onIcon=_this$props.onIcon,offIcon=_this$props.offIcon;var on=this.state.on;return React.createElement("div",{onClick:this.handleToggle,"aria-hidden":true},on&&onIcon,!on&&offIcon);}}]);return ToggleIcon;}(Component);_defineProperty(ToggleIcon,"defaultProps",{on:true,toggleHandler:noop});export default ToggleIcon;
+   */function render(){var _this$props=this.props,onIcon=_this$props.onIcon,offIcon=_this$props.offIcon;var on=this.state.on;return React.createElement("div",{className:"ui-shared__toggle-icon",onClick:this.handleToggle,"aria-hidden":true},on&&onIcon,!on&&offIcon);}}]);}(Component);_defineProperty(ToggleIcon,"defaultProps",{on:true,toggleHandler:noop});export default ToggleIcon;

package/icons/ArrowIcon.js

@@ -1,6 +1,6 @@
-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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React from'react';import PropTypes from'prop-types';import Icon from'@shopgate/pwa-common/components/Icon';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+var _excluded=["shadow"];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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React from'react';import PropTypes from'prop-types';import Icon from'@shopgate/pwa-common/components/Icon';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
  * The arrow icon component.
  * @param {Object} props The icon component properties.
  * @param {boolean} props.shadow Whether to show a shadow under the arrow.
  * @returns {JSX}
- */var ArrowIcon=function ArrowIcon(_ref){var shadow=_ref.shadow,props=_objectWithoutProperties(_ref,["shadow"]);var content=shadow?themeConfig.icons.arrowShadowed:themeConfig.icons.arrow;return React.createElement(Icon,_extends({content:content},props));};ArrowIcon.defaultProps={shadow:false};export default ArrowIcon;
+ */var ArrowIcon=function ArrowIcon(_ref){var shadow=_ref.shadow,props=_objectWithoutProperties(_ref,_excluded);var content=shadow?themeConfig.icons.arrowShadowed:themeConfig.icons.arrow;return React.createElement(Icon,_extends({content:content},props));};ArrowIcon.defaultProps={shadow:false};export default ArrowIcon;

package/icons/CartCouponIcon.js

@@ -0,0 +1,5 @@
+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 Icon from'@shopgate/pwa-common/components/Icon';var content="\n  <defs>\n    <style>\n      .cls-1, .cls-3 {\n        fill: #81c6e5;\n      }\n\n      .cls-1 {\n        opacity: 0.19;\n      }\n\n      .cls-2 {\n        fill: none;\n        fill-rule: evenodd;\n      }\n\n      .cls-4 {\n        clip-path: url(#clip-path);\n      }\n\n      .cls-5, .cls-6 {\n        opacity: 0.09;\n      }\n\n      .cls-5 {\n        fill: url(#linear-gradient);\n      }\n\n      .cls-6 {\n        fill: url(#linear-gradient-2);\n      }\n\n      .cls-7 {\n        fill: #fff;\n      }\n    </style>\n    <clipPath id=\"clip-path\">\n      <path class=\"cls-1\" d=\"M39.407,6.8A23.038,23.038,0,0,0,6.6,39.15a23.007,23.007,0,0,0,32.552.2l.1-.1A23.078,23.078,0,0,0,39.407,6.8Z\" transform=\"translate(0 0)\"/>\n    </clipPath>\n    <linearGradient id=\"linear-gradient\" x1=\"0.273\" y1=\"0.267\" x2=\"0.705\" y2=\"0.641\" gradientUnits=\"objectBoundingBox\">\n      <stop offset=\"0\"/>\n      <stop offset=\"1\" stop-opacity=\"0.251\"/>\n    </linearGradient>\n    <linearGradient id=\"linear-gradient-2\" x1=\"0.5\" y1=\"0\" x2=\"0.5\" y2=\"1\" xlink:href=\"#linear-gradient\"/>\n  </defs>\n  <g transform=\"translate(283 -149)\">\n    <path class=\"cls-2\" d=\"M39.474-83.7a22.758,22.758,0,0,0-32.346-.1,23.309,23.309,0,0,0-.1,32.455A22.484,22.484,0,0,0,23.1-44.5a22.282,22.282,0,0,0,16.123-6.644l.1-.1A23.26,23.26,0,0,0,39.474-83.7Z\" transform=\"translate(3265.005 8065.5)\"/>\n    <path class=\"cls-3\" d=\"M39.407,6.8A23.038,23.038,0,0,0,6.6,39.15a23.007,23.007,0,0,0,32.552.2l.1-.1A23.078,23.078,0,0,0,39.407,6.8Z\" transform=\"translate(3265 7975)\"/>\n    <g class=\"cls-4\" transform=\"translate(3265 7975)\">\n      <path class=\"cls-5\" d=\"M3173.978,8072.545l-20.807,21.038,17.736,17.381,20.526-22.043Z\" transform=\"translate(-3140.448 -8060)\"/>\n    </g>\n    <path class=\"cls-6\" d=\"M3160.986,8075.234l-6.975,6.144,6.15,6.08,6.542-6.665Z\" transform=\"translate(124.137 -86.315)\"/>\n    <path class=\"cls-2\" d=\"M5.454-46.5a4.99,4.99,0,0,1,4.954,5.009,4.99,4.99,0,0,1-4.954,5.009A4.99,4.99,0,0,1,.5-41.491,4.99,4.99,0,0,1,5.454-46.5Z\" transform=\"translate(3275.621 8032.744)\"/>\n    <path class=\"cls-2\" d=\"M32.454-10.482A4.99,4.99,0,0,1,27.5-15.491,4.99,4.99,0,0,1,32.454-20.5a4.99,4.99,0,0,1,4.954,5.009A4.99,4.99,0,0,1,32.454-10.482Z\" transform=\"translate(3262.269 8020.033)\"/>\n    <g transform=\"translate(3276.244 7986.244)\">\n      <path class=\"cls-7\" d=\"M5.008,0a5.073,5.073,0,0,1,5.008,5.12,5.073,5.073,0,0,1-5.008,5.12A5.073,5.073,0,0,1,0,5.12,5.073,5.073,0,0,1,5.008,0Z\" transform=\"translate(0 0)\"/>\n      <path class=\"cls-7\" d=\"M2.553,23.044a1.533,1.533,0,0,1-1.067.467,1.448,1.448,0,0,1-1.067-.467,1.559,1.559,0,0,1,0-2.127L20.485.428a1.481,1.481,0,0,1,2.083,0,1.614,1.614,0,0,1,.051,2.127Z\" transform=\"translate(0.511 0)\"/>\n      <path class=\"cls-7\" d=\"M4.854,9.927A4.918,4.918,0,0,1,0,4.963,4.918,4.918,0,0,1,4.854,0,4.918,4.918,0,0,1,9.709,4.963,4.918,4.918,0,0,1,4.854,9.927Z\" transform=\"translate(13.802 13.584)\"/>\n    </g>\n  </g>\n";/**
+ * Cart discount default icon
+ * @param {Object} props .
+ * @returns {JSX}
+ */var CartCouponIcon=function CartCouponIcon(props){return React.createElement(Icon,_extends({content:content,viewBox:"3548 7826 45.999 46"},props));};export default CartCouponIcon;

package/icons/NotificationIcon.js

@@ -0,0 +1,6 @@
+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 Icon from'@shopgate/pwa-common/components/Icon';import{themeConfig}from'@shopgate/pwa-common/helpers/config';// SVG Content
+var content='<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>';/**
+ * The description icon component.
+ * @param {Object} props The icon component properties.
+ * @returns {JSX}
+ */var Notification=function Notification(props){return React.createElement(Icon,_extends({content:themeConfig.icons.notification||content},props));};export default Notification;

package/package.json

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