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

package/NavDrawer/components/Item/index.js

@@ -1,12 +1,78 @@
-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';import{UIEvents}from'@shopgate/pwa-core';import{withForwardedRef}from'@shopgate/engage/core';import{I18n}from'@shopgate/engage/components';import styles from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { UIEvents } from '@shopgate/pwa-core';
+import { withForwardedRef } from '@shopgate/engage/core';
+import { I18n } from '@shopgate/engage/components';
+import styles from "./style";
+
+/**
  * The NavDrawerItem component.
- */var NavDrawerItem=/*#__PURE__*/function(_Component){function NavDrawerItem(){var _this2;_classCallCheck(this,NavDrawerItem);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,NavDrawerItem,[].concat(args));/**
-   * Handles an Item click by executing it's href.
-   */_defineProperty(_this2,"handleClick",function(){UIEvents.emit('navdrawer_close');setTimeout(_this2.props.onClick,300);});return _this2;}_inherits(NavDrawerItem,_Component);return _createClass(NavDrawerItem,[{key:"shouldComponentUpdate",value:/**
+ */
+class NavDrawerItem extends Component {
+  constructor(...args) {
+    super(...args);
+    /**
+     * Handles an Item click by executing it's href.
+     */
+    this.handleClick = () => {
+      UIEvents.emit('navdrawer_close');
+      setTimeout(this.props.onClick, 300);
+    };
+  }
+  /**
    * Only re-render when the label prop changes.
    * @param {Object} nextProps The next component props.
    * @returns {boolean}
-   */function shouldComponentUpdate(nextProps){return this.props.label!==nextProps.label||this.props['aria-label']!==nextProps['aria-label'];}},{key:"render",value:/**
+   */
+  shouldComponentUpdate(nextProps) {
+    return this.props.label !== nextProps.label || this.props['aria-label'] !== nextProps['aria-label'];
+  }
+  /**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this$props=this.props,ariaHidden=_this$props['aria-hidden'],ariaLabel=_this$props['aria-label'],Badge=_this$props.badge,forwardedRef=_this$props.forwardedRef,Icon=_this$props.icon,label=_this$props.label,srOnly=_this$props.srOnly,style=_this$props.style,testId=_this$props.testId;return React.createElement("button",{ref:forwardedRef,className:srOnly?styles.srOnly:styles.button,"data-test-id":testId,onClick:this.handleClick,style:style,type:"button","aria-hidden":ariaHidden,"aria-label":ariaLabel,tabIndex:"0"},React.createElement("div",{className:styles.iconWrapper},Icon&&React.createElement(Icon,{className:styles.icon,size:24})),React.createElement(I18n.Text,{className:styles.label,string:label}),Badge&&React.createElement(Badge,null));}}]);}(Component);_defineProperty(NavDrawerItem,"defaultProps",{'aria-hidden':null,'aria-label':null,badge:null,forwardedRef:null,icon:null,onClick:function onClick(){},srOnly:false,style:{},testId:null});export default withForwardedRef(NavDrawerItem);
+   */
+  render() {
+    const {
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      badge: Badge,
+      forwardedRef,
+      icon: Icon,
+      label,
+      srOnly,
+      style,
+      testId
+    } = this.props;
+    return /*#__PURE__*/React.createElement("button", {
+      ref: forwardedRef,
+      className: srOnly ? styles.srOnly : styles.button,
+      "data-test-id": testId,
+      onClick: this.handleClick,
+      style: style,
+      type: "button",
+      "aria-hidden": ariaHidden,
+      "aria-label": ariaLabel,
+      tabIndex: "0"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.iconWrapper
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
+      className: styles.icon,
+      size: 24
+    })), /*#__PURE__*/React.createElement(I18n.Text, {
+      className: styles.label,
+      string: label
+    }), Badge && /*#__PURE__*/React.createElement(Badge, null));
+  }
+}
+NavDrawerItem.defaultProps = {
+  'aria-hidden': null,
+  'aria-label': null,
+  badge: null,
+  forwardedRef: null,
+  icon: null,
+  onClick: () => {},
+  srOnly: false,
+  style: {},
+  testId: null
+};
+export default withForwardedRef(NavDrawerItem);

package/NavDrawer/components/Item/style.js

@@ -1 +1,49 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var srOnly=css({clip:'rect(1px, 1px, 1px, 1px)',height:'1px',margin:0,overflow:'hidden',padding:0,position:'absolute',whiteSpace:'nowrap',width:'1px',zIndex:-1000,':first-child':{marginTop:'calc(16px + var(--safe-area-inset-top))'}}).toString();var button=css({alignItems:'flex-start',color:'inherit',display:'flex',fontWeight:500,outline:0,padding:'16px 8px 16px 0',position:'relative',width:'100%',':first-child':{paddingTop:'calc(16px + var(--safe-area-inset-top))'}}).toString();var label=css({marginTop:2,textAlign:'left'}).toString();var iconWrapper=css({width:56,flexShrink:0}).toString();var icon=css({boxSizing:'content-box',color:themeColors.gray,padding:'0 32px 0 16px'}).toString();export default{srOnly:srOnly,button:button,label:label,iconWrapper:iconWrapper,icon:icon};
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+const srOnly = css({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  height: '1px',
+  margin: 0,
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  width: '1px',
+  zIndex: -1000,
+  ':first-child': {
+    marginTop: 'calc(16px + var(--safe-area-inset-top))'
+  }
+}).toString();
+const button = css({
+  alignItems: 'flex-start',
+  color: 'inherit',
+  display: 'flex',
+  fontWeight: 500,
+  outline: 0,
+  padding: '16px 8px 16px 0',
+  position: 'relative',
+  width: '100%',
+  ':first-child': {
+    paddingTop: 'calc(16px + var(--safe-area-inset-top))'
+  }
+}).toString();
+const label = css({
+  marginTop: 2,
+  textAlign: 'left'
+}).toString();
+const iconWrapper = css({
+  width: 56,
+  flexShrink: 0
+}).toString();
+const icon = css({
+  boxSizing: 'content-box',
+  color: themeColors.gray,
+  padding: '0 32px 0 16px'
+}).toString();
+export default {
+  srOnly,
+  button,
+  label,
+  iconWrapper,
+  icon
+};

package/NavDrawer/components/Section/index.js

@@ -1,5 +1,32 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import Title from"../Title";import Item from"../Item";import Divider from"../Divider";/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Title from "../Title";
+import Item from "../Item";
+import Divider from "../Divider";
+
+/**
  * The NavDrawerSectionComponent.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var NavDrawerSection=function NavDrawerSection(_ref){var children=_ref.children,title=_ref.title,dividerTop=_ref.dividerTop,dividerBottom=_ref.dividerBottom;if(!children){return null;}return React.createElement(Fragment,null,dividerTop&&React.createElement(Divider,null),React.createElement(Title,{text:title}),children,dividerBottom&&React.createElement(Divider,null));};NavDrawerSection.Item=Item;NavDrawerSection.defaultProps={children:null,dividerBottom:false,dividerTop:true,title:''};export default NavDrawerSection;
+ */
+const NavDrawerSection = ({
+  children,
+  title,
+  dividerTop,
+  dividerBottom
+}) => {
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Fragment, null, dividerTop && /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Title, {
+    text: title
+  }), children, dividerBottom && /*#__PURE__*/React.createElement(Divider, null));
+};
+NavDrawerSection.Item = Item;
+NavDrawerSection.defaultProps = {
+  children: null,
+  dividerBottom: false,
+  dividerTop: true,
+  title: ''
+};
+export default NavDrawerSection;

package/NavDrawer/components/Title/index.js

@@ -1,4 +1,25 @@
-import React from'react';import PropTypes from'prop-types';import I18n from'@shopgate/pwa-common/components/I18n';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import I18n from '@shopgate/pwa-common/components/I18n';
+import styles from "./style";
+
+/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var NavDrawerTitle=function NavDrawerTitle(_ref){var text=_ref.text;if(!text.length){return null;}return React.createElement("div",{className:styles},React.createElement(I18n.Text,{string:text}));};NavDrawerTitle.defaultProps={text:''};export default NavDrawerTitle;
+ */
+const NavDrawerTitle = ({
+  text
+}) => {
+  if (!text.length) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: text
+  }));
+};
+NavDrawerTitle.defaultProps = {
+  text: ''
+};
+export default NavDrawerTitle;

package/NavDrawer/components/Title/style.js

@@ -1 +1,8 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export default css({color:themeColors.shade11,fontSize:'0.875rem',fontWeight:500,margin:'16px 0 0 16px'});
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+export default css({
+  color: themeColors.shade11,
+  fontSize: '0.875rem',
+  fontWeight: 500,
+  margin: '16px 0 0 16px'
+});

package/NavDrawer/index.js

@@ -1,16 +1,138 @@
-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,Fragment}from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import Transition from'react-transition-group/Transition';import{Backdrop}from'@shopgate/engage/components';import{ModalStateTracker}from'@shopgate/engage/a11y/components';import{UIEvents}from'@shopgate/pwa-core';import Divider from"./components/Divider";import Item from"./components/Item";import Section from"./components/Section";import Title from"./components/Title";import{contentStyle,drawerStyle}from"./style";import transition from"./transition";var OPEN='navdrawer_open';var CLOSE='navdrawer_close';/**
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
+import Transition from 'react-transition-group/Transition';
+import { Backdrop } from '@shopgate/engage/components';
+import { ModalStateTracker } from '@shopgate/engage/a11y/components';
+import { UIEvents } from '@shopgate/pwa-core';
+import Divider from "./components/Divider";
+import Item from "./components/Item";
+import Section from "./components/Section";
+import Title from "./components/Title";
+import { contentStyle, drawerStyle } from "./style";
+import transition from "./transition";
+const OPEN = 'navdrawer_open';
+const CLOSE = 'navdrawer_close';
+
+/**
  * The NavDrawer component
- */var NavDrawer=/*#__PURE__*/function(_Component){function NavDrawer(props){var _this2;_classCallCheck(this,NavDrawer);_this2=_callSuper(this,NavDrawer,[props]);_defineProperty(_this2,"onEntering",function(){_this2.props.onOpen();});_defineProperty(_this2,"onEntered",function(){if(_this2.a11yCloseRef.current){_this2.a11yCloseRef.current.focus();}});_defineProperty(_this2,"onExited",function(){_this2.contentRef.current.scrollTop=0;if(_this2.triggerElement&&typeof _this2.triggerElement.focus==='function'){// Focus the element that triggered the NavDrawer after it closes
-_this2.triggerElement.focus();}});_defineProperty(_this2,"onExiting",function(){_this2.props.onClose();});_defineProperty(_this2,"open",function(){// Save a reference to the element that triggered the NavDrawer
-_this2.triggerElement=document.activeElement;_this2.setState({open:true});});_defineProperty(_this2,"close",function(){_this2.setState({open:false});});_this2.contentRef=React.createRef();_this2.a11yCloseRef=React.createRef();_this2.state={open:false};// Save a reference to the element that triggered the NavDrawer
-_this2.triggerElement=null;UIEvents.addListener(OPEN,_this2.open);UIEvents.addListener(CLOSE,_this2.close);return _this2;}/**
+ */
+class NavDrawer extends Component {
+  /**
+   * @param {Object} props The component props.
+   */
+  constructor(props) {
+    super(props);
+    this.onEntering = () => {
+      this.props.onOpen();
+    };
+    this.onEntered = () => {
+      if (this.a11yCloseRef.current) {
+        this.a11yCloseRef.current.focus();
+      }
+    };
+    this.onExited = () => {
+      this.contentRef.current.scrollTop = 0;
+      if (this.triggerElement && typeof this.triggerElement.focus === 'function') {
+        // Focus the element that triggered the NavDrawer after it closes
+        this.triggerElement.focus();
+      }
+    };
+    this.onExiting = () => {
+      this.props.onClose();
+    };
+    this.open = () => {
+      // Save a reference to the element that triggered the NavDrawer
+      this.triggerElement = document.activeElement;
+      this.setState({
+        open: true
+      });
+    };
+    this.close = () => {
+      this.setState({
+        open: false
+      });
+    };
+    this.contentRef = /*#__PURE__*/React.createRef();
+    this.a11yCloseRef = /*#__PURE__*/React.createRef();
+    this.state = {
+      open: false
+    };
+
+    // Save a reference to the element that triggered the NavDrawer
+    this.triggerElement = null;
+    UIEvents.addListener(OPEN, this.open);
+    UIEvents.addListener(CLOSE, this.close);
+  }
+
+  /**
    * @param {Object} nextProps The next component props.
    * @param {Object} nextState The next component state.
    * @returns {JSX}
-   */_inherits(NavDrawer,_Component);return _createClass(NavDrawer,[{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps,nextState){return this.state.open!==nextState.open;}/**
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.open !== nextState.open;
+  }
+
+  /**
    * The unmount lifecycle hook
-   */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(OPEN,this.open);UIEvents.removeListener(CLOSE,this.close);}},{key:"render",value:/**
+   */
+  componentWillUnmount() {
+    UIEvents.removeListener(OPEN, this.open);
+    UIEvents.removeListener(CLOSE, this.close);
+  }
+  /**
    * @returns {JSX}
-   */function render(){var _this3=this;return React.createElement(Fragment,null,React.createElement(Transition,{onEntering:this.onEntering,onEntered:this.onEntered,onExited:this.onExited,onExiting:this.onExiting,"in":this.state.open,timeout:300},function(state){var ariaHidden=_this3.props['aria-hidden']||state==='exited';return React.createElement(ModalStateTracker,{isVisible:_this3.state.open},React.createElement("section",{className:"".concat(drawerStyle," ui-material__nav-drawer"),"data-test-id":"NavDrawer",style:transition[state],"aria-hidden":ariaHidden,tabIndex:"-1"},React.createElement(Item,{label:"common.close",ref:_this3.a11yCloseRef,srOnly:true}),React.createElement("nav",{className:contentStyle,ref:_this3.contentRef},_this3.props.children)));}),React.createElement(Backdrop,{isVisible:this.state.open,level:4,onClick:this.close,opacity:20}));}}]);}(Component);_defineProperty(NavDrawer,"close",function(){UIEvents.emit(CLOSE);});_defineProperty(NavDrawer,"open",function(){UIEvents.emit(OPEN);});_defineProperty(NavDrawer,"EVENT_OPEN",OPEN);_defineProperty(NavDrawer,"EVENT_CLOSE",CLOSE);_defineProperty(NavDrawer,"Divider",Divider);_defineProperty(NavDrawer,"Item",Item);_defineProperty(NavDrawer,"Section",Section);_defineProperty(NavDrawer,"Title",Title);_defineProperty(NavDrawer,"defaultProps",{'aria-hidden':false,onClose:noop,onOpen:noop/**
-   * @param {Object} props The component props.
-   */});export default NavDrawer;
+   */
+  render() {
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Transition, {
+      onEntering: this.onEntering,
+      onEntered: this.onEntered,
+      onExited: this.onExited,
+      onExiting: this.onExiting,
+      in: this.state.open,
+      timeout: 300
+    }, state => {
+      const ariaHidden = this.props['aria-hidden'] || state === 'exited';
+      return /*#__PURE__*/React.createElement(ModalStateTracker, {
+        isVisible: this.state.open
+      }, /*#__PURE__*/React.createElement("section", {
+        className: `${drawerStyle} ui-material__nav-drawer`,
+        "data-test-id": "NavDrawer",
+        style: transition[state],
+        "aria-hidden": ariaHidden,
+        tabIndex: "-1"
+      }, /*#__PURE__*/React.createElement(Item, {
+        label: "common.close",
+        ref: this.a11yCloseRef,
+        srOnly: true
+      }), /*#__PURE__*/React.createElement("nav", {
+        className: contentStyle,
+        ref: this.contentRef
+      }, this.props.children)));
+    }), /*#__PURE__*/React.createElement(Backdrop, {
+      isVisible: this.state.open,
+      level: 4,
+      onClick: this.close,
+      opacity: 20
+    }));
+  }
+}
+NavDrawer.close = () => {
+  UIEvents.emit(CLOSE);
+};
+NavDrawer.open = () => {
+  UIEvents.emit(OPEN);
+};
+NavDrawer.EVENT_OPEN = OPEN;
+NavDrawer.EVENT_CLOSE = CLOSE;
+NavDrawer.Divider = Divider;
+NavDrawer.Item = Item;
+NavDrawer.Section = Section;
+NavDrawer.Title = Title;
+NavDrawer.defaultProps = {
+  'aria-hidden': false,
+  onClose: noop,
+  onOpen: noop
+};
+export default NavDrawer;

package/NavDrawer/spec.js

@@ -1 +1,35 @@
-import React from'react';import{shallow,mount}from'enzyme';import NavDrawer from"./index";jest.unmock('@shopgate/pwa-core');jest.mock('@shopgate/engage/components');jest.mock('@shopgate/engage/a11y/components');describe('NavDrawer',function(){it('should match the snapshot',function(){var wrapper=shallow(React.createElement(NavDrawer,null,"Content"));expect(wrapper).toMatchSnapshot();});it('should open and close with an event',function(){var onOpen=jest.fn();var onClose=jest.fn();var wrapper=mount(React.createElement(NavDrawer,{onOpen:onOpen,onClose:onClose},"Content"));NavDrawer.open();expect(wrapper.state().open).toEqual(true);expect(onOpen).toHaveBeenCalled();expect(onClose).not.toHaveBeenCalled();NavDrawer.close();expect(wrapper.state().open).toEqual(false);expect(onClose).toHaveBeenCalled();});it('should close when Backdrop is clicked',function(){var wrapper=shallow(React.createElement(NavDrawer,null,"Content"));var backdrop=wrapper.find('Backdrop');NavDrawer.open();expect(wrapper.state().open).toEqual(true);backdrop.simulate('click');expect(wrapper.state().open).toEqual(false);});});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import NavDrawer from "./index";
+jest.unmock('@shopgate/pwa-core');
+jest.mock('@shopgate/engage/components');
+jest.mock('@shopgate/engage/a11y/components');
+describe('NavDrawer', () => {
+  it('should match the snapshot', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(NavDrawer, null, "Content"));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should open and close with an event', () => {
+    const onOpen = jest.fn();
+    const onClose = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(NavDrawer, {
+      onOpen: onOpen,
+      onClose: onClose
+    }, "Content"));
+    NavDrawer.open();
+    expect(wrapper.state().open).toEqual(true);
+    expect(onOpen).toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+    NavDrawer.close();
+    expect(wrapper.state().open).toEqual(false);
+    expect(onClose).toHaveBeenCalled();
+  });
+  it('should close when Backdrop is clicked', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(NavDrawer, null, "Content"));
+    const backdrop = wrapper.find('Backdrop');
+    NavDrawer.open();
+    expect(wrapper.state().open).toEqual(true);
+    backdrop.simulate('click');
+    expect(wrapper.state().open).toEqual(false);
+  });
+});

package/NavDrawer/style.js

@@ -1 +1,26 @@
-import{css}from'glamor';import{themeShadows,themeColors}from'@shopgate/pwa-common/helpers/config';export var contentStyle=css({fontSize:14,height:'100%',overflowY:'scroll',paddingBottom:'var(--safe-area-inset-bottom)',WebkitOverflowScrolling:'touch'});export var drawerStyle=css({background:themeColors.light,boxShadow:themeShadows.navDrawer,color:themeColors.dark,height:'100vh',left:0,maxWidth:'300px',position:'fixed',top:0,transition:'transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',width:'100%',willChange:'transform',zIndex:50,'@media(max-width: 480px)':{maxWidth:'67vw'}});
+import { css } from 'glamor';
+import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+export const contentStyle = css({
+  fontSize: 14,
+  height: '100%',
+  overflowY: 'scroll',
+  paddingBottom: 'var(--safe-area-inset-bottom)',
+  WebkitOverflowScrolling: 'touch'
+});
+export const drawerStyle = css({
+  background: themeColors.light,
+  boxShadow: themeShadows.navDrawer,
+  color: themeColors.dark,
+  height: '100vh',
+  left: 0,
+  maxWidth: '300px',
+  position: 'fixed',
+  top: 0,
+  transition: 'transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+  width: '100%',
+  willChange: 'transform',
+  zIndex: 50,
+  '@media(max-width: 480px)': {
+    maxWidth: '67vw'
+  }
+});

package/NavDrawer/transition.js

@@ -1 +1,20 @@
-export default{entering:{transform:'translate3d(0, 0, 0)',visibility:'visible'},entered:{transform:'translate3d(0, 0, 0)',visibility:'visible'},exiting:{boxShadow:'none',transform:'translate3d(-100%, 0, 0)',visibility:'visible'},exited:{boxShadow:'none',transform:'translate3d(-100%, 0, 0)',visibility:'hidden'}};
+export default {
+  entering: {
+    transform: 'translate3d(0, 0, 0)',
+    visibility: 'visible'
+  },
+  entered: {
+    transform: 'translate3d(0, 0, 0)',
+    visibility: 'visible'
+  },
+  exiting: {
+    boxShadow: 'none',
+    transform: 'translate3d(-100%, 0, 0)',
+    visibility: 'visible'
+  },
+  exited: {
+    boxShadow: 'none',
+    transform: 'translate3d(-100%, 0, 0)',
+    visibility: 'hidden'
+  }
+};