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

package/Sheet/index.js

@@ -1,26 +1,179 @@
-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'};/**
+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 const SHEET_EVENTS = {
+  OPEN: 'Sheet.open',
+  CLOSE: 'Sheet.close'
+};
+
+/**
  * Sheet component.
- */var Sheet=/*#__PURE__*/function(_Component){/**
+ */
+class Sheet extends Component {
+  /**
    * The constructor.
    * @param {Object} props The component props.
-   */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;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Close the Sheet.
+     */
+    this.handleScroll = throttle(() => {
+      const scrolled = this.content.current.scrollTop !== 0;
+      if (this.state.scrolled !== scrolled) {
+        this.setState({
+          scrolled
+        });
+      }
+    }, 10);
+    /**
+     * Close the Sheet.
+     */
+    this.handleClose = () => {
+      this.props.onClose();
+      this.setState({
+        isOpen: false,
+        scrolled: false
+      });
+    };
+    /** The Sheet is opened */
+    this.handleDidOpen = () => {
+      UIEvents.emit(SHEET_EVENTS.OPEN);
+      this.props.onDidOpen();
+    };
+    /** The Sheet is closed */
+    this.handleDidClose = () => {
+      UIEvents.emit(SHEET_EVENTS.CLOSE);
+      this.props.onDidClose();
+    };
+    /**
+     * New value from SearchBar
+     * @param {string} value .
+     */
+    this.handleSearchInput = value => {
+      this.setState({
+        query: value
+      });
+    };
+    this.content = /*#__PURE__*/React.createRef();
+    this.state = {
+      isOpen: props.isOpen,
+      scrolled: false,
+      query: ''
+    };
+  }
+
+  /**
    * Change isOpen state for new incoming props.
    * @param {Object} nextProps The next component props.
-   */_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:/**
+   */
+  UNSAFE_componentWillReceiveProps({
+    isOpen
+  }) {
+    if (this.state.isOpen !== isOpen) {
+      this.setState({
+        isOpen
+      });
+    }
+  }
+  /**
    * Getter for the animation props of the Sheet.
    * @returns {Object}
-   */function get(){return _extends({duration:this.props.duration},styles.drawerAnimation,{},this.props.animation);}},{key:"render",value:/**
+   */
+  get animationProps() {
+    return {
+      duration: this.props.duration,
+      ...styles.drawerAnimation,
+      ...this.props.animation
+    };
+  }
+  /**
    * 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;
+   */
+  render() {
+    const {
+      allowClose
+    } = this.props;
+    const children = React.Children.map(this.props.children, child => (/*#__PURE__*/React.cloneElement(child,
+    // Only add onClose prop to other components
+    typeof child.type === 'function' && this.props.onClose !== null ? {
+      onClose: this.props.onClose,
+      query: this.state.query
+    } : {})));
+    const drawerClassNames = classNames(styles.container, {
+      [this.props.className]: this.props.className
+    });
+    const contentClassNames = classNames(styles.content, {
+      [styles.containerFullScreen]: this.props.showSearch
+    }, {
+      [this.props.contentClassName]: this.props.contentClassName
+    }, {
+      [styles.shadow]: !this.props.backdrop
+    });
+    return /*#__PURE__*/React.createElement("section", {
+      className: classNames('ui-shared__sheet', {
+        [styles.section]: this.state.isOpen
+      })
+    }, /*#__PURE__*/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 && /*#__PURE__*/React.createElement(Sheet.Header, {
+      showSearch: this.props.showSearch,
+      handleChange: this.handleSearchInput,
+      onToggleClose: this.handleClose,
+      shadow: this.state.scrolled,
+      title: this.props.title,
+      allowClose: allowClose
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.progressBarContainer
+    }, /*#__PURE__*/React.createElement(ProgressBar, {
+      isVisible: this.props.isLoading
+    })), /*#__PURE__*/React.createElement("div", {
+      ref: this.content,
+      onScroll: this.handleScroll,
+      className: contentClassNames
+    }, children)), this.props.backdrop && /*#__PURE__*/React.createElement(Backdrop, {
+      isVisible: this.state.isOpen,
+      level: 4,
+      onClick: allowClose ? this.handleClose : () => {},
+      opacity: 20
+    }));
+  }
+}
+Sheet.Header = Header;
+/**
+ * The component default props.
+ * @type {Object}
+ */
+Sheet.defaultProps = {
+  animation: {},
+  backdrop: true,
+  children: null,
+  className: null,
+  contentClassName: null,
+  duration: 300,
+  isOpen: false,
+  isLoading: false,
+  onClose: () => {},
+  onDidClose: () => {},
+  onDidOpen: () => {},
+  onOpen: () => {},
+  title: '',
+  showSearch: false,
+  allowClose: true
+};
+export default Sheet;

package/Sheet/spec.js

@@ -1,5 +1,85 @@
-import React from'react';import{shallow,mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import UIEvents from'@shopgate/pwa-core/emitters/ui';import Sheet,{SHEET_EVENTS}from"./index";window.requestAnimationFrame=function(){};jest.mock('@shopgate/pwa-core/emitters/ui',function(){return{emit:jest.fn()};});jest.mock('@shopgate/engage/a11y/components');describe('<Sheet />',function(){it('should render closed without content',function(){var wrapper=shallow(React.createElement(Sheet,null));expect(wrapper).toMatchSnapshot();});it('should render opened without content',function(){var wrapper=shallow(React.createElement(Sheet,{isOpen:true}));expect(wrapper).toMatchSnapshot();});it('should render with content and title',function(){var wrapper=shallow(React.createElement(Sheet,{isOpen:true,title:"Test-Title"},React.createElement("div",null,"Test")));expect(wrapper).toMatchSnapshot();});it('should call onDidOpen callback when the Sheet was opened',function(){var onOpen=jest.fn();var onDidOpen=jest.fn();var wrapper=mount(React.createElement(Sheet,{isOpen:false,onOpen:onOpen,onDidOpen:onDidOpen},React.createElement("div",null,"Test")),mockRenderOptions);expect(onOpen).not.toHaveBeenCalled();expect(onDidOpen).not.toHaveBeenCalled();wrapper.setProps({isOpen:true});expect(onOpen).toHaveBeenCalled();wrapper.find('Drawer').simulate('animationEnd');expect(onDidOpen).toHaveBeenCalled();expect(UIEvents.emit).nthCalledWith(1,SHEET_EVENTS.OPEN);});it('should trigger onClose callback and close the Sheet',function(){var onCloseSpy=jest.fn();var wrapper=mount(React.createElement(Sheet,{isOpen:true,title:"Test-Title",onClose:onCloseSpy},React.createElement("div",null,"Test")),mockRenderOptions);// Trigger a click on the close button of the Sheet.
-wrapper.find('button').first().simulate('click');return new Promise(function(resolve){// Wait until the drawer is closed and has updated it's state.
-setTimeout(function(){resolve();},wrapper.find('Drawer').prop('animation').duration);}).then(function(){// Check if onClose callback was called.
-expect(onCloseSpy).toHaveBeenCalled();// Check if the Drawer component was closed.
-expect(wrapper.find('Drawer').prop('isOpen')).not.toBeTruthy();expect(wrapper).toMatchSnapshot();wrapper.find('Drawer').simulate('animationEnd');expect(UIEvents.emit).nthCalledWith(2,SHEET_EVENTS.CLOSE);});});it('should open',function(){var wrapper=mount(React.createElement(Sheet,{isOpen:false,title:"Test-Title"},React.createElement("div",null,"Test")),mockRenderOptions);wrapper.setProps({isOpen:true});wrapper.update();expect(wrapper.find('Drawer').prop('isOpen')).toBeTruthy();expect(wrapper).toMatchSnapshot();});});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
+import UIEvents from '@shopgate/pwa-core/emitters/ui';
+import Sheet, { SHEET_EVENTS } from "./index";
+window.requestAnimationFrame = () => {};
+jest.mock('@shopgate/pwa-core/emitters/ui', () => ({
+  emit: jest.fn()
+}));
+jest.mock('@shopgate/engage/a11y/components');
+describe('<Sheet />', () => {
+  it('should render closed without content', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Sheet, null));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render opened without content', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Sheet, {
+      isOpen: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render with content and title', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Sheet, {
+      isOpen: true,
+      title: "Test-Title"
+    }, /*#__PURE__*/React.createElement("div", null, "Test")));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should call onDidOpen callback when the Sheet was opened', () => {
+    const onOpen = jest.fn();
+    const onDidOpen = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(Sheet, {
+      isOpen: false,
+      onOpen: onOpen,
+      onDidOpen: onDidOpen
+    }, /*#__PURE__*/React.createElement("div", null, "Test")), mockRenderOptions);
+    expect(onOpen).not.toHaveBeenCalled();
+    expect(onDidOpen).not.toHaveBeenCalled();
+    wrapper.setProps({
+      isOpen: true
+    });
+    expect(onOpen).toHaveBeenCalled();
+    wrapper.find('Drawer').simulate('animationEnd');
+    expect(onDidOpen).toHaveBeenCalled();
+    expect(UIEvents.emit).nthCalledWith(1, SHEET_EVENTS.OPEN);
+  });
+  it('should trigger onClose callback and close the Sheet', () => {
+    const onCloseSpy = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(Sheet, {
+      isOpen: true,
+      title: "Test-Title",
+      onClose: onCloseSpy
+    }, /*#__PURE__*/React.createElement("div", null, "Test")), mockRenderOptions);
+
+    // Trigger a click on the close button of the Sheet.
+    wrapper.find('button').first().simulate('click');
+    return new Promise(resolve => {
+      // Wait until the drawer is closed and has updated it's state.
+      setTimeout(() => {
+        resolve();
+      }, wrapper.find('Drawer').prop('animation').duration);
+    }).then(() => {
+      // Check if onClose callback was called.
+      expect(onCloseSpy).toHaveBeenCalled();
+
+      // Check if the Drawer component was closed.
+      expect(wrapper.find('Drawer').prop('isOpen')).not.toBeTruthy();
+      expect(wrapper).toMatchSnapshot();
+      wrapper.find('Drawer').simulate('animationEnd');
+      expect(UIEvents.emit).nthCalledWith(2, SHEET_EVENTS.CLOSE);
+    });
+  });
+  it('should open', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Sheet, {
+      isOpen: false,
+      title: "Test-Title"
+    }, /*#__PURE__*/React.createElement("div", null, "Test")), mockRenderOptions);
+    wrapper.setProps({
+      isOpen: true
+    });
+    wrapper.update();
+    expect(wrapper.find('Drawer').prop('isOpen')).toBeTruthy();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/Sheet/style.js

@@ -1,2 +1,143 @@
-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};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+const duration = 300;
+const easing = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
+const section = css({
+  [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();
+const container = css({
+  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, ${themeConfig.colors.dark})`,
+  [responsiveMediaQuery('>sm', {
+    webOnly: true
+  })]: {
+    position: 'initial'
+  },
+  [responsiveMediaQuery('>md', {
+    webOnly: true
+  })]: {
+    width: '60%'
+  }
+}).toString();
+const containerFullScreen = css({
+  height: [`calc(100vh - ${themeConfig.variables.navigator.height}px - 51px)`, `calc(100vh - ${themeConfig.variables.navigator.height}px - 51px - var(--safe-area-inset-top))`]
+});
+const searchBarWrapper = css({
+  backgroundColor: 'white',
+  height: 52,
+  position: 'sticky',
+  width: '100%',
+  top: 0,
+  zIndex: 2
+});
+const progressBarContainer = css({
+  position: 'relative'
+}).toString();
+const shadow = css({
+  boxShadow: themeConfig.shadows.sheet
+}).toString();
+const content = css({
+  maxHeight: [`calc(var(--vh-100, 100vh) - ${themeConfig.variables.navigator.height}px)`, `calc(var(--vh-100, 100vh) - ${themeConfig.variables.navigator.height}px - var(--safe-area-inset-top))`],
+  [responsiveMediaQuery('>sm', {
+    webOnly: true
+  })]: {
+    maxHeight: [`calc(var(--vh-80, 80vh) - ${themeConfig.variables.navigator.height}px)`, `calc(var(--vh-80, 80vh) - ${themeConfig.variables.navigator.height}px - var(--safe-area-inset-top))`]
+  },
+  paddingBottom: ['var(--safe-area-inset-bottom)'],
+  overflowY: 'scroll',
+  WebkitOverflowScrolling: 'touch'
+}).toString();
+const slideInSheetDrawer = css.keyframes({
+  '0%': {
+    transform: 'translateY(100%)'
+  },
+  '100%': {
+    transform: 'translateY(0)'
+  }
+});
+const fadeInSheetDrawer = css.keyframes({
+  '0%': {
+    opacity: 0
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+const slideOutSheetDrawer = css.keyframes({
+  '0%': {
+    transform: 'translateY(0)'
+  },
+  '100%': {
+    transform: 'translateY(100%)'
+  }
+});
+const fadeOutSheetDrawer = css.keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0
+  }
+});
+const drawerAnimation = {
+  in: css({
+    [responsiveMediaQuery('<=sm', {
+      appAlways: true
+    })]: {
+      animation: `${slideInSheetDrawer} ${duration}ms 1 both ${easing}`
+    },
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      animation: `${fadeInSheetDrawer} ${duration}ms 1 both ${easing}`
+    }
+  }).toString(),
+  out: css({
+    [responsiveMediaQuery('<=sm', {
+      appAlways: true
+    })]: {
+      animation: `${slideOutSheetDrawer} ${duration}ms 1 both ${easing}`
+    },
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      animation: `${fadeOutSheetDrawer} ${duration}ms 1 both ${easing}`
+    }
+  }).toString()
+};
+export default {
+  section,
+  container,
+  containerFullScreen,
+  searchBarWrapper,
+  progressBarContainer,
+  shadow,
+  content,
+  drawerAnimation
+};

package/TaxDisclaimer/index.js

@@ -1,6 +1,36 @@
-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";/**
+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(){// Added with PWA 6 - CCP-2372
-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;
+ */
+const TaxDisclaimer = () => {
+  // Added with PWA 6 - CCP-2372
+  const {
+    show,
+    text
+  } = useWidgetSettings('@shopgate/engage/components/TaxDisclaimer');
+
+  // use widget setting if set to true/false, otherwise use market logic
+  const showDisclaimer = typeof show === 'boolean' ? show : showTaxDisclaimer;
+  return /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: PRODUCT_TAX_DISCLAIMER,
+    portalProps: {
+      showTaxDisclaimer: showDisclaimer
+    }
+  }, showDisclaimer && /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "taxDisclaimer",
+    "aria-hidden": true,
+    className: "ui-shared__tax-disclaimer"
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    className: styles,
+    string: text || 'product.tax_disclaimer'
+  })));
+};
+export default TaxDisclaimer;

package/TaxDisclaimer/spec.js

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

package/TaxDisclaimer/style.js

@@ -1 +1,9 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';export default css({background:themeConfig.colors.background,display:'block',fontSize:12,padding:"20px ".concat(themeConfig.variables.gap.big,"px"),textAlign:'left'}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+export default css({
+  background: themeConfig.colors.background,
+  display: 'block',
+  fontSize: 12,
+  padding: `20px ${themeConfig.variables.gap.big}px`,
+  textAlign: 'left'
+}).toString();

package/TextField/components/ErrorText/index.js

@@ -1,5 +1,36 @@
-import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import styles from "./style";
+
+/**
  * Error message component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var ErrorText=function ErrorText(_ref){var elementName=_ref.elementName,validationError=_ref.validationError,errorText=_ref.errorText,ariaHidden=_ref.ariaHidden,translate=_ref.translate,className=_ref.className;return React.createElement("div",{id:"ariaError-".concat(elementName),className:classNames(className,styles.error,'errorText'),"aria-live":"assertive","aria-atomic":"true","aria-hidden":ariaHidden},translate&&React.createElement(I18n.Text,{string:validationError||errorText}),!translate&&(validationError||errorText));};ErrorText.defaultProps={className:'',errorText:null,elementName:null,translate:true,ariaHidden:false,validationError:null};export default ErrorText;
+ */
+const ErrorText = ({
+  elementName,
+  validationError,
+  errorText,
+  ariaHidden,
+  translate,
+  className
+}) => /*#__PURE__*/React.createElement("div", {
+  id: `ariaError-${elementName}`,
+  className: classNames(className, styles.error, 'errorText'),
+  "aria-live": "assertive",
+  "aria-atomic": "true",
+  "aria-hidden": ariaHidden
+}, translate && /*#__PURE__*/React.createElement(I18n.Text, {
+  string: validationError || errorText
+}), !translate && (validationError || errorText));
+ErrorText.defaultProps = {
+  className: '',
+  errorText: null,
+  elementName: null,
+  translate: true,
+  ariaHidden: false,
+  validationError: null
+};
+export default ErrorText;

package/TextField/components/ErrorText/style.js

@@ -1,5 +1,27 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * The style object for a one line text element with an ellipsis on overflow.
- */var ellipsisLine={overflow:'hidden',width:'100%',whiteSpace:'nowrap',textOverflow:'ellipsis'};/**
+ */
+const ellipsisLine = {
+  overflow: 'hidden',
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+
+/**
  * The styles for the error message.
- */var error=css(_extends({position:'absolute',bottom:2,fontSize:12,lineHeight:'14px',color:"var(--color-state-alert, ".concat(themeConfig.colors.error,")")},ellipsisLine)).toString();export default{error:error};
+ */
+const error = css({
+  position: 'absolute',
+  bottom: 2,
+  fontSize: 12,
+  lineHeight: '14px',
+  color: `var(--color-state-alert, ${themeConfig.colors.error})`,
+  ...ellipsisLine
+}).toString();
+export default {
+  error
+};

package/TextField/components/FormElement/index.js

@@ -1,5 +1,22 @@
-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 PropTypes from'prop-types';import Input from'@shopgate/pwa-common/components/Input';import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import Input from '@shopgate/pwa-common/components/Input';
+import styles from "./style";
+
+/**
  * Creates an input or a multiLine based on the type prop.
  * @param {Object} props The props.
  * @returns {JSX.Element}
- */var FormElement=function FormElement(props){var styleType=props.multiLine?'multiLine':'input';return React.createElement(Input,_extends({},props,{className:styles[styleType],validateOnBlur:true}));};FormElement.defaultProps={multiLine:false};export default FormElement;
+ */
+const FormElement = props => {
+  const styleType = props.multiLine ? 'multiLine' : 'input';
+  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+    className: styles[styleType],
+    validateOnBlur: true
+  }));
+};
+FormElement.defaultProps = {
+  multiLine: false
+};
+export default FormElement;