@shopgate/pwa-ui-shared 6.18.0-beta.3 → 6.18.0-beta.4

package/Sheet/components/Header/components/SearchBar/style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',flexDirection:'row',flexWrap:'nowrap',marginBottom:4,paddingLeft:16,paddingRight:16,paddingTop:5,paddingBottom:10}).toString();var inputWrapper=css({position:'relative',flexGrow:1}).toString();var input=css({borderRadius:10,width:'100%',padding:'4px 10px 4px 30px',lineHeight:'28px',outline:'none',background:themeColors.shade7,verticalAlign:'middle',WebkitAppearance:'none'}).toString();var label=css({alignItems:'center',color:themeColors.shade3,display:'flex',height:'36px',position:'absolute',pointerEvents:'none',width:'100%'}).toString();var icon=css({padding:'0 6px',color:themeColors.shade3,fontSize:'1.235rem'}).toString();export default{container:container,inputWrapper:inputWrapper,input:input,label:label,icon:icon};

package/Sheet/components/Header/index.js

@@ -1,4 +1,4 @@
-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 _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 _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";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.
@@ -9,4 +9,4 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    */value: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 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},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(Grid.Item,{className:styles.title,component:"div",grow:1,role:"heading"},this.props.title));}}]);return Header;}(Component);_defineProperty(Header,"defaultProps",{onToggleClose:function onToggleClose(){},shadow:false});_defineProperty(Header,"contextTypes",{i18n:PropTypes.func});export default Header;
+   */},{key:"render",value:function render(){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},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(Grid.Item,{className:styles.title,component:"div",grow:1,role:"heading"},this.props.title)),this.props.showSearch&&React.createElement(SearchBar,{handleChange:this.props.handleChange}));}}]);return Header;}(Component);_defineProperty(Header,"defaultProps",{onToggleClose:function onToggleClose(){},shadow:false,handleChange:function handleChange(){},showSearch:false});_defineProperty(Header,"contextTypes",{i18n:PropTypes.func});export default Header;

package/Sheet/index.js

@@ -1,4 +1,4 @@
-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 SearchBar from"./components/SearchBar";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 _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 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.
@@ -15,7 +15,7 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * Renders the component.
    * @returns {JSX}
    */value:function render(){var _this2=this;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,query:_this2.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:"ui-shared__sheet"},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}),React.createElement("div",{ref:this.content,onScroll:this.handleScroll,className:contentClassNames},this.props.showSearch&&React.createElement("div",{className:styles.searchBarWrapper},React.createElement(SearchBar,{handleChange:this.handleSearchInput})),children)),this.props.backdrop&&React.createElement(Backdrop,{isVisible:this.state.isOpen,level:4,onClick:this.handleClose,opacity:20}));}},{key:"animationProps",/**
+typeof child.type==='function'&&_this2.props.onClose!==null?{onClose:_this2.props.onClose,query:_this2.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:"ui-shared__sheet"},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}),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:this.handleClose,opacity:20}));}},{key:"animationProps",/**
    * Getter for the animation props of the Sheet.
    * @returns {Object}
    */get:function get(){return _extends({duration:this.props.duration},styles.drawerAnimation,{},this.props.animation);}/**

package/Sheet/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var duration=300;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var container=css({bottom:0,background:themeConfig.colors.light,color:themeConfig.colors.dark,width:'100vw',maxWidth:640,left:0,right:0,margin:'0 auto'}).toString();var containerFullScreen=css({height:'100vh'});var searchBarWrapper=css({backgroundColor:'white',position:'sticky',width:'100%',top:0,zIndex:2});var shadow=css({boxShadow:themeConfig.shadows.sheet}).toString();var content=css({position:'relative',maxHeight:["calc(100vh - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(100vh - ".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 slideOutSheetDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var drawerAnimation={"in":css({animation:"".concat(slideInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString(),out:css({animation:"".concat(slideOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString()};export default{container:container,containerFullScreen:containerFullScreen,searchBarWrapper:searchBarWrapper,shadow:shadow,content:content,drawerAnimation:drawerAnimation};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var duration=300;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var container=css({bottom:0,background:themeConfig.colors.light,color:themeConfig.colors.dark,width:'100vw',maxWidth:640,left:0,right:0,margin:'0 auto'}).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 shadow=css({boxShadow:themeConfig.shadows.sheet}).toString();var content=css({position:'relative',maxHeight:["calc(100vh - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(100vh - ".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 slideOutSheetDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var drawerAnimation={"in":css({animation:"".concat(slideInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString(),out:css({animation:"".concat(slideOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString()};export default{container:container,containerFullScreen:containerFullScreen,searchBarWrapper:searchBarWrapper,shadow:shadow,content:content,drawerAnimation:drawerAnimation};

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "6.18.0-beta.3",
+  "version": "6.18.0-beta.4",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "6.18.0-beta.3",
-    "@shopgate/pwa-ui-material": "6.18.0-beta.3"
+    "@shopgate/pwa-ui-ios": "6.18.0-beta.4",
+    "@shopgate/pwa-ui-material": "6.18.0-beta.4"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "6.18.0-beta.3",
-    "@shopgate/pwa-common-commerce": "6.18.0-beta.3",
+    "@shopgate/pwa-common": "6.18.0-beta.4",
+    "@shopgate/pwa-common-commerce": "6.18.0-beta.4",
     "classnames": "^2.2.5",
     "react": "~16.12.0"
   },

package/Sheet/components/SearchBar/style.js

@@ -1 +0,0 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',position:'relative',flexDirection:'row',flexWrap:'nowrap',marginBottom:4,paddingLeft:16,paddingRight:16}).toString();var inputWrapper=css({position:'relative',flexGrow:1}).toString();var input=css({borderRadius:10,width:'100%',padding:'4px 10px 4px 30px',lineHeight:'28px',outline:'none',background:themeColors.shade7,verticalAlign:'middle',WebkitAppearance:'none'}).toString();var label=css({alignItems:'center',color:themeColors.shade3,display:'flex',height:'36px',position:'absolute',pointerEvents:'none',width:'100%'}).toString();var icon=css({padding:'0 6px',color:themeColors.shade3,fontSize:'1.235rem'}).toString();export default{container:container,inputWrapper:inputWrapper,input:input,label:label,icon:icon};