@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/components/SheetDrawer/index.js

@@ -1,5 +1,20 @@
-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{createPortal}from'react-dom';import classNames from'classnames';import{useTrackModalState}from'@shopgate/engage/a11y/hooks';import{Sheet}from'@shopgate/engage/components';var node=document.getElementById('portals');/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { useTrackModalState } from '@shopgate/engage/a11y/hooks';
+import { Sheet } from '@shopgate/engage/components';
+const node = document.getElementById('portals');
+
+/**
  * @param {Object} props The props to be passed to the Sheet.
  * @returns {JSX.Element}
- */function SheetDrawer(props){// Track modal visibility for accessibility purposes.
-useTrackModalState(props.isOpen);return createPortal(React.createElement(Sheet,_extends({},props,{className:classNames(props.className,'engage__sheet-drawer')})),node);}export default SheetDrawer;
+ */
+function SheetDrawer(props) {
+  // Track modal visibility for accessibility purposes.
+  useTrackModalState(props.isOpen);
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Sheet, _extends({}, props, {
+    className: classNames(props.className, 'engage__sheet-drawer')
+  })), node);
+}
+export default SheetDrawer;

package/components/SheetList/components/Item/index.js

@@ -1,17 +1,145 @@
-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 classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core';import Grid from'@shopgate/pwa-common/components/Grid';import Link from'@shopgate/pwa-common/components/Link';import Glow from'@shopgate/pwa-ui-shared/Glow';import styles from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withForwardedRef } from '@shopgate/engage/core';
+import Grid from '@shopgate/pwa-common/components/Grid';
+import Link from '@shopgate/pwa-common/components/Link';
+import Glow from '@shopgate/pwa-ui-shared/Glow';
+import styles from "./style";
+
+/**
  * The list item component.
- */var Item=/*#__PURE__*/function(_Component){function Item(){_classCallCheck(this,Item);return _callSuper(this,Item,arguments);}_inherits(Item,_Component);return _createClass(Item,[{key:"shouldComponentUpdate",value:/**
+ */
+class Item extends Component {
+  /**
    * Should only update when the `selected` or `disabled` or 'leftComponent' props change.
    * @param {Object} nextProps The next set of component props.
    * @returns {boolean}
-   */function shouldComponentUpdate(nextProps){return this.props.isSelected!==nextProps.isSelected||this.props.isDisabled!==nextProps.isDisabled||this.props.leftComponent!==nextProps.leftComponent;}/**
+   */
+  shouldComponentUpdate(nextProps) {
+    return this.props.isSelected !== nextProps.isSelected || this.props.isDisabled !== nextProps.isDisabled || this.props.leftComponent !== nextProps.leftComponent;
+  }
+
+  /**
    * Renders the bulk of the content.
    * @param {boolean} [isNested=true] Tells if the content is rendered nested.
    * @returns {JSX.Element}
-   */},{key:"renderContent",value:function renderContent(){var isNested=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var _this$props=this.props,isDisabled=_this$props.isDisabled,isSelected=_this$props.isSelected,title=_this$props.title,image=_this$props.image,rightComponent=_this$props.rightComponent,leftComponent=_this$props.leftComponent,forwardedRef=_this$props.forwardedRef,description=_this$props.description;var gridStyles=_defineProperty(_defineProperty({},styles.grid,true),styles.selected,isSelected);var titleStyles=_defineProperty(_defineProperty({},styles.title,true),styles.disabled,isDisabled);var ref=isNested?null:forwardedRef;return React.createElement("div",{"data-test-id":this.props.testId,ref:ref,className:"engage__sheet-list__item"},React.createElement(Grid,{className:classNames(gridStyles),component:"div"},image!==null&&React.createElement("div",{className:styles.image},image),leftComponent!==null&&React.createElement(Grid.Item,{component:"div",grow:1},leftComponent),React.createElement(Grid.Item,{className:classNames(titleStyles),component:"div",grow:1},React.createElement("div",null,title),description&&React.createElement("div",{className:styles.description,dangerouslySetInnerHTML:{__html:description}})),rightComponent!==null&&React.createElement(Grid.Item,{component:"div",grow:1},rightComponent)));}/**
+   */
+  renderContent(isNested = true) {
+    const {
+      isDisabled,
+      isSelected,
+      title,
+      image,
+      rightComponent,
+      leftComponent,
+      forwardedRef,
+      description
+    } = this.props;
+    const gridStyles = {
+      [styles.grid]: true,
+      [styles.selected]: isSelected
+    };
+    const titleStyles = {
+      [styles.title]: true,
+      [styles.disabled]: isDisabled
+    };
+    const ref = isNested ? null : forwardedRef;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-test-id": this.props.testId,
+      ref: ref,
+      className: "engage__sheet-list__item"
+    }, /*#__PURE__*/React.createElement(Grid, {
+      className: classNames(gridStyles),
+      component: "div"
+    }, image !== null && /*#__PURE__*/React.createElement("div", {
+      className: styles.image
+    }, image), leftComponent !== null && /*#__PURE__*/React.createElement(Grid.Item, {
+      component: "div",
+      grow: 1
+    }, leftComponent), /*#__PURE__*/React.createElement(Grid.Item, {
+      className: classNames(titleStyles),
+      component: "div",
+      grow: 1
+    }, /*#__PURE__*/React.createElement("div", null, title), description && /*#__PURE__*/React.createElement("div", {
+      className: styles.description,
+      dangerouslySetInnerHTML: {
+        __html: description
+      }
+    })), rightComponent !== null && /*#__PURE__*/React.createElement(Grid.Item, {
+      component: "div",
+      grow: 1
+    }, rightComponent)));
+  }
+
+  /**
    * @returns {JSX.Element}
-   */},{key:"render",value:function render(){var _this$props2=this.props,link=_this$props2.link,linkState=_this$props2.linkState,LinkComponent=_this$props2.linkComponent,onClick=_this$props2.onClick,className=_this$props2.className,isDisabled=_this$props2.isDisabled,testId=_this$props2.testId,forwardedRef=_this$props2.forwardedRef,isSelected=_this$props2.isSelected;/**
+   */
+  render() {
+    const {
+      link,
+      linkState,
+      linkComponent: LinkComponent,
+      onClick,
+      className,
+      isDisabled,
+      testId,
+      forwardedRef,
+      isSelected
+    } = this.props;
+
+    /**
      * If this item is disabled, selected or doesn't have a valid
      * link or click handler then wrap the content with other components.
-     */if(isDisabled||!link&&!onClick){return this.renderContent(false);}// Wrap with a <Link> if the `link` prop is set.
-if(link){return React.createElement(Glow,{ref:forwardedRef,className:className,styles:{hover:styles.glowHover}},React.createElement(LinkComponent,{href:link,onClick:onClick,state:linkState,tabIndex:0},this.renderContent()));}return React.createElement("div",{onKeyPress:function onKeyPress(){},onClick:onClick,"data-test-id":testId,ref:forwardedRef,tabIndex:0,role:"option","aria-selected":isSelected},React.createElement(Glow,{className:className,styles:{hover:styles.glowHover}},this.renderContent()));}}]);}(Component);_defineProperty(Item,"defaultProps",{className:null,description:null,forwardedRef:null,image:null,isDisabled:false,isSelected:false,leftComponent:null,link:null,linkComponent:Link,linkState:null,onClick:null,rightComponent:null,testId:null});export default withForwardedRef(Item);
+     */
+    if (isDisabled || !link && !onClick) {
+      return this.renderContent(false);
+    }
+
+    // Wrap with a <Link> if the `link` prop is set.
+    if (link) {
+      return /*#__PURE__*/React.createElement(Glow, {
+        ref: forwardedRef,
+        className: className,
+        styles: {
+          hover: styles.glowHover
+        }
+      }, /*#__PURE__*/React.createElement(LinkComponent, {
+        href: link,
+        onClick: onClick,
+        state: linkState,
+        tabIndex: 0
+      }, this.renderContent()));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      onKeyPress: () => {},
+      onClick: onClick,
+      "data-test-id": testId,
+      ref: forwardedRef,
+      tabIndex: 0,
+      role: "option",
+      "aria-selected": isSelected
+    }, /*#__PURE__*/React.createElement(Glow, {
+      className: className,
+      styles: {
+        hover: styles.glowHover
+      }
+    }, this.renderContent()));
+  }
+}
+Item.defaultProps = {
+  className: null,
+  description: null,
+  forwardedRef: null,
+  image: null,
+  isDisabled: false,
+  isSelected: false,
+  leftComponent: null,
+  link: null,
+  linkComponent: Link,
+  linkState: null,
+  onClick: null,
+  rightComponent: null,
+  testId: null
+};
+export default withForwardedRef(Item);

package/components/SheetList/components/Item/spec.js

@@ -1,8 +1,110 @@
-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{mount}from'enzyme';import Glow from'@shopgate/pwa-ui-shared/Glow';import Item from"./index";jest.mock('@shopgate/pwa-common/components/Link',function(){/**
+import React from 'react';
+import { mount } from 'enzyme';
+import Glow from '@shopgate/pwa-ui-shared/Glow';
+import Item from "./index";
+jest.mock('@shopgate/pwa-common/components/Link', () => {
+  /**
    * Mocked LinkComponent.
    * @return {JSX}
-   */var Link=function Link(){return React.createElement("div",null);};return Link;});describe('<SheetList.Item />',function(){var title='My Title';it('should render with a title but no image',function(){var wrapper=mount(React.createElement(Item,{title:title}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').exists()).toBeFalsy();});it('should render with an image',function(){var image=React.createElement("img",{src:"url/to/image",alt:"Alternative text"});var wrapper=mount(React.createElement(Item,{title:title,image:image}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').exists()).toBeTruthy();});it('should render with a right component',function(){var rightComponent=React.createElement("span",null,"I`m a span.");var wrapper=mount(React.createElement(Item,{title:title,rightComponent:rightComponent}));expect(wrapper).toMatchSnapshot();expect(wrapper.contains(React.createElement("span",null,"I`m a span."))).toEqual(true);});it('should render without a Glow when selected',function(){var wrapper=mount(React.createElement(Item,{title:title,isSelected:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Glow).exists()).toBeFalsy();});it('should render without a Glow when disabled',function(){var wrapper=mount(React.createElement(Item,{title:title,isDisabled:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Glow).exists()).toBeFalsy();});it('should render with a link',function(){var wrapper=mount(React.createElement(Item,{title:title,link:"url/to/somewhere"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('Link').exists()).toBeTruthy();});it('should render with an onClick element',function(){var spy=jest.fn();// eslint-disable-next-line require-jsdoc
-var clickHandler=function clickHandler(){/**
+   */
+  const Link = () => /*#__PURE__*/React.createElement("div", null);
+  return Link;
+});
+describe('<SheetList.Item />', () => {
+  const title = 'My Title';
+  it('should render with a title but no image', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('img').exists()).toBeFalsy();
+  });
+  it('should render with an image', () => {
+    const image = /*#__PURE__*/React.createElement("img", {
+      src: "url/to/image",
+      alt: "Alternative text"
+    });
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title,
+      image: image
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('img').exists()).toBeTruthy();
+  });
+  it('should render with a right component', () => {
+    const rightComponent = /*#__PURE__*/React.createElement("span", null, "I`m a span.");
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title,
+      rightComponent: rightComponent
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.contains(/*#__PURE__*/React.createElement("span", null, "I`m a span."))).toEqual(true);
+  });
+  it('should render without a Glow when selected', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title,
+      isSelected: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Glow).exists()).toBeFalsy();
+  });
+  it('should render without a Glow when disabled', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title,
+      isDisabled: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Glow).exists()).toBeFalsy();
+  });
+  it('should render with a link', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title,
+      link: "url/to/somewhere"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('Link').exists()).toBeTruthy();
+  });
+  it('should render with an onClick element', () => {
+    const spy = jest.fn();
+
+    // eslint-disable-next-line require-jsdoc
+    const clickHandler = () => {
+      /**
        * The spy can't be assigned directly to the event, since the snapshot gets too big
        * and the test execution is heavily slowed down.
-       */spy();};var wrapper=mount(React.createElement(Item,{title:title,onClick:clickHandler}));wrapper.simulate('click');expect(wrapper).toMatchSnapshot();expect(spy).toHaveBeenCalledTimes(1);});it('should update the component when the isDisabled prop changed',function(){var wrapper=mount(React.createElement(Item,{title:title,isDisabled:true}));var props=wrapper.props();var updated=wrapper.find('Item').instance().shouldComponentUpdate(_extends({},props,{isDisabled:false}));expect(updated).toBe(true);});it('should update the component when the isSelected prop changed',function(){var wrapper=mount(React.createElement(Item,{title:title,isSelected:true}));var props=wrapper.props();var updated=wrapper.find('Item').instance().shouldComponentUpdate(_extends({},props,{isSelected:false}));expect(updated).toBe(true);});});
+       */
+      spy();
+    };
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title,
+      onClick: clickHandler
+    }));
+    wrapper.simulate('click');
+    expect(wrapper).toMatchSnapshot();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should update the component when the isDisabled prop changed', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title,
+      isDisabled: true
+    }));
+    const props = wrapper.props();
+    const updated = wrapper.find('Item').instance().shouldComponentUpdate({
+      ...props,
+      isDisabled: false
+    });
+    expect(updated).toBe(true);
+  });
+  it('should update the component when the isSelected prop changed', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+      title: title,
+      isSelected: true
+    }));
+    const props = wrapper.props();
+    const updated = wrapper.find('Item').instance().shouldComponentUpdate({
+      ...props,
+      isSelected: false
+    });
+    expect(updated).toBe(true);
+  });
+});

package/components/SheetList/components/Item/style.js

@@ -1 +1,76 @@
-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';import{IMAGE_SPACE}from"../../style";var colors=themeConfig.colors,variables=themeConfig.variables;var disabled=css({color:colors.shade5,cursor:'not-allowed'}).toString();var selected=css({background:"var(--color-background-accent, ".concat(colors.shade7,")"),boxShadow:"-16px 0 0 0 var(--color-background-accent, ".concat(colors.shade7,") !important")}).toString();var title=css(_defineProperty({width:'100%',marginTop:variables.gap.xsmall,paddingRight:variables.gap.big,hyphens:'auto',overflowWrap:'break-word',wordBreak:'break-word',color:'var(--color-text-high-emphasis)'},responsiveMediaQuery('>xs',{webOnly:true}),{padding:variables.gap.big,margin:0,fontSize:'1.25rem',lineHeight:'1.5rem'})).toString();var description=css(_defineProperty({display:'none'},responsiveMediaQuery('>xs',{webOnly:true}),{display:'block',color:'var(--color-text-medium-emphasis)',fontSize:'0.875rem',lineHeight:'1.25rem',fontWeight:'initial',paddingTop:variables.gap.small}));var grid=css(_defineProperty({alignItems:'center',minHeight:56,padding:"".concat(variables.gap.small,"px 0"),position:'relative',zIndex:2},responsiveMediaQuery('>xs',{webOnly:true}),{padding:0})).toString();var image=css({alignSelf:'flex-start',flexShrink:0,margin:"0 ".concat(variables.gap.big,"px 0 ").concat(-IMAGE_SPACE+variables.gap.big,"px"),width:40}).toString();var glowHover={boxShadow:"-".concat(variables.gap.bigger,"px 0 0 ").concat(colors.shade8,", ").concat(variables.gap.bigger,"px 0 0 ").concat(colors.shade8)};export default{disabled:disabled,selected:selected,title:title,description:description,grid:grid,image:image,glowHover:glowHover};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import { IMAGE_SPACE } from "../../style";
+const {
+  colors,
+  variables
+} = themeConfig;
+const disabled = css({
+  color: colors.shade5,
+  cursor: 'not-allowed'
+}).toString();
+const selected = css({
+  background: `var(--color-background-accent, ${colors.shade7})`,
+  boxShadow: `-16px 0 0 0 var(--color-background-accent, ${colors.shade7}) !important`
+}).toString();
+const title = css({
+  width: '100%',
+  marginTop: variables.gap.xsmall,
+  paddingRight: variables.gap.big,
+  hyphens: 'auto',
+  overflowWrap: 'break-word',
+  wordBreak: 'break-word',
+  color: 'var(--color-text-high-emphasis)',
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    padding: variables.gap.big,
+    margin: 0,
+    fontSize: '1.25rem',
+    lineHeight: '1.5rem'
+  }
+}).toString();
+const description = css({
+  display: 'none',
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    display: 'block',
+    color: 'var(--color-text-medium-emphasis)',
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+    fontWeight: 'initial',
+    paddingTop: variables.gap.small
+  }
+});
+const grid = css({
+  alignItems: 'center',
+  minHeight: 56,
+  padding: `${variables.gap.small}px 0`,
+  position: 'relative',
+  zIndex: 2,
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    padding: 0
+  }
+}).toString();
+const image = css({
+  alignSelf: 'flex-start',
+  flexShrink: 0,
+  margin: `0 ${variables.gap.big}px 0 ${-IMAGE_SPACE + variables.gap.big}px`,
+  width: 40
+}).toString();
+const glowHover = {
+  boxShadow: `-${variables.gap.bigger}px 0 0 ${colors.shade8}, ${variables.gap.bigger}px 0 0 ${colors.shade8}`
+};
+export default {
+  disabled,
+  selected,
+  title,
+  description,
+  grid,
+  image,
+  glowHover
+};

package/components/SheetList/index.js

@@ -1,9 +1,67 @@
-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 classNames from'classnames';import List from'@shopgate/pwa-common/components/List';import Item from"./components/Item";import styles from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import List from '@shopgate/pwa-common/components/List';
+import Item from "./components/Item";
+import styles from "./style";
+
+/**
  * The SheetList component.
  * Styled sheet for List component
- */var SheetList=/*#__PURE__*/function(_Component){function SheetList(){_classCallCheck(this,SheetList);return _callSuper(this,SheetList,arguments);}_inherits(SheetList,_Component);return _createClass(SheetList,[{key:"render",value:/**
+ */
+class SheetList extends Component {
+  /**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this$props=this.props,children=_this$props.children,className=_this$props.className,hasImages=_this$props.hasImages,testId=_this$props.testId;if(!React.Children.count(children)){return null;}var itemClasses=_defineProperty(_defineProperty({},styles.item,true),styles.itemWithImage,hasImages);return React.createElement(List,{className:"".concat(className," engage__sheet-list"),role:"listbox"},React.Children.map(children,function(child,index){if(!React.isValidElement(child)){return null;}// The key for each child.
-var key="child-".concat(index);// Selected state for the child.
-var isSelected=child.props.isSelected;var childClasses=_defineProperty(_defineProperty({},styles.itemSelected,isSelected),styles.itemNotLast,!isSelected);return React.createElement(List.Item,{className:classNames(itemClasses,childClasses),isSelected:isSelected,key:key,tabIndex:0},React.createElement("div",{className:styles.innerContainer,"data-test-id":testId},child));}));}}]);}(Component);_defineProperty(SheetList,"Item",Item);_defineProperty(SheetList,"defaultProps",{children:null,className:null,hasImages:false,testId:null});export default SheetList;
+   */
+  render() {
+    const {
+      children,
+      className,
+      hasImages,
+      testId
+    } = this.props;
+    if (!React.Children.count(children)) {
+      return null;
+    }
+    const itemClasses = {
+      [styles.item]: true,
+      [styles.itemWithImage]: hasImages
+    };
+    return /*#__PURE__*/React.createElement(List, {
+      className: `${className} engage__sheet-list`,
+      role: "listbox"
+    }, React.Children.map(children, (child, index) => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return null;
+      }
+      // The key for each child.
+      const key = `child-${index}`;
+      // Selected state for the child.
+      const {
+        isSelected
+      } = child.props;
+      const childClasses = {
+        [styles.itemSelected]: isSelected,
+        [styles.itemNotLast]: !isSelected
+      };
+      return /*#__PURE__*/React.createElement(List.Item, {
+        className: classNames(itemClasses, childClasses),
+        isSelected: isSelected,
+        key: key,
+        tabIndex: 0
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.innerContainer,
+        "data-test-id": testId
+      }, child));
+    }));
+  }
+}
+SheetList.Item = Item;
+SheetList.defaultProps = {
+  children: null,
+  className: null,
+  hasImages: false,
+  testId: null
+};
+export default SheetList;

package/components/SheetList/spec.js

@@ -1 +1,38 @@
-import React from'react';import{mount}from'enzyme';import BaseListItem from'@shopgate/pwa-common/components/List/components/Item';import SheetList from"./index";import styles from"./style";describe('<SheetList />',function(){it('should render with two children',function(){var wrapper=mount(React.createElement(SheetList,null,React.createElement(SheetList.Item,{title:"List Item"}),React.createElement(SheetList.Item,{title:"List Item"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(2);});it('should render a child and add styles for list items with images',function(){var wrapper=mount(React.createElement(SheetList,{hasImages:true},React.createElement(SheetList.Item,{title:"List Item"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(1);expect(wrapper.find(BaseListItem).first().hasClass(styles.itemWithImage)).toBeTruthy();});it('should not render without children',function(){var wrapper=mount(React.createElement(SheetList,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList).html()).toBe(null);});it('should not render invalid children',function(){var wrapper=mount(React.createElement(SheetList,null,React.createElement(SheetList.Item,{title:"List Item"}),"xxx"));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(1);});});
+import React from 'react';
+import { mount } from 'enzyme';
+import BaseListItem from '@shopgate/pwa-common/components/List/components/Item';
+import SheetList from "./index";
+import styles from "./style";
+describe('<SheetList />', () => {
+  it('should render with two children', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(SheetList, null, /*#__PURE__*/React.createElement(SheetList.Item, {
+      title: "List Item"
+    }), /*#__PURE__*/React.createElement(SheetList.Item, {
+      title: "List Item"
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SheetList.Item).length).toEqual(2);
+  });
+  it('should render a child and add styles for list items with images', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(SheetList, {
+      hasImages: true
+    }, /*#__PURE__*/React.createElement(SheetList.Item, {
+      title: "List Item"
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SheetList.Item).length).toEqual(1);
+    expect(wrapper.find(BaseListItem).first().hasClass(styles.itemWithImage)).toBeTruthy();
+  });
+  it('should not render without children', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(SheetList, null));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SheetList).html()).toBe(null);
+  });
+  it('should not render invalid children', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(SheetList, null, /*#__PURE__*/React.createElement(SheetList.Item, {
+      title: "List Item"
+    }), "xxx"));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SheetList.Item).length).toEqual(1);
+  });
+});

package/components/SheetList/style.js

@@ -1 +1,36 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables,colors=themeConfig.colors;export var IMAGE_SPACE=72;var item=css({margin:"0 ".concat(variables.gap.big,"px"),cursor:'pointer'}).toString();var itemNotLast=css({'&:not(:last-child)':{boxShadow:"0 1px 0 0 ".concat(colors.darkGray),marginBottom:1}}).toString();var itemSelected=css({background:"var(--color-background-accent, ".concat(colors.shade7,")"),boxShadow:"-".concat(variables.gap.bigger,"px 0 0 var(--color-background-accent, ").concat(colors.shade7,"), ").concat(variables.gap.bigger,"px 0 0 var(--color-background-accent, ").concat(colors.shade7,")"),marginTop:-1}).toString();var itemWithImage=css({marginLeft:IMAGE_SPACE}).toString();var innerContainer=css({minHeight:56,position:'relative'}).toString();export default{item:item,itemNotLast:itemNotLast,itemSelected:itemSelected,itemWithImage:itemWithImage,innerContainer:innerContainer};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables,
+  colors
+} = themeConfig;
+export const IMAGE_SPACE = 72;
+const item = css({
+  margin: `0 ${variables.gap.big}px`,
+  cursor: 'pointer'
+}).toString();
+const itemNotLast = css({
+  '&:not(:last-child)': {
+    boxShadow: `0 1px 0 0 ${colors.darkGray}`,
+    marginBottom: 1
+  }
+}).toString();
+const itemSelected = css({
+  background: `var(--color-background-accent, ${colors.shade7})`,
+  boxShadow: `-${variables.gap.bigger}px 0 0 var(--color-background-accent, ${colors.shade7}), ${variables.gap.bigger}px 0 0 var(--color-background-accent, ${colors.shade7})`,
+  marginTop: -1
+}).toString();
+const itemWithImage = css({
+  marginLeft: IMAGE_SPACE
+}).toString();
+const innerContainer = css({
+  minHeight: 56,
+  position: 'relative'
+}).toString();
+export default {
+  item,
+  itemNotLast,
+  itemSelected,
+  itemWithImage,
+  innerContainer
+};

package/components/SideNavigation/SideNavigation.hooks.js

@@ -1,4 +1,8 @@
-import{useContext}from'react';import SideNavigationContext from"./SideNavigationProvider.context";/**
+import { useContext } from 'react';
+import SideNavigationContext from "./SideNavigationProvider.context";
+
+/**
  * Returns the value of the side navigation provider state.
  * @returns {Object}
- */export var useSideNavigation=function useSideNavigation(){return useContext(SideNavigationContext);};
+ */
+export const useSideNavigation = () => useContext(SideNavigationContext);

package/components/SideNavigation/SideNavigation.js

@@ -1,4 +1,29 @@
-import React from'react';import SideNavigationProvider from"./SideNavigationProvider";import SideNavigationContent from"./SideNavigationContent";/**
- * The SideNavigation component
- * @returns {JSX}
- */var SideNavigation=function SideNavigation(_ref){var maxCategoryNesting=_ref.maxCategoryNesting,routePatternBlacklist=_ref.routePatternBlacklist,classNames=_ref.classNames;return React.createElement(SideNavigationProvider,{maxCategoryNesting:maxCategoryNesting,routePatternBlacklist:routePatternBlacklist},React.createElement(SideNavigationContent,{classNames:classNames}));};SideNavigation.defaultProps={maxCategoryNesting:3,routePatternBlacklist:[],classNames:null};export default SideNavigation;
+import React from 'react';
+import PropTypes from 'prop-types';
+import SideNavigationProvider from "./SideNavigationProvider";
+import SideNavigationContent from "./SideNavigationContent";
+
+/**
+ * The SideNavigation component.
+ * @param {Object} props The component props.
+ * @param {Object} [props.classNames=null] Custom class names for the component.
+ * @param {number} [props.maxCategoryNesting=3] Maximum category nesting level.
+ * @param {Array} [props.routePatternBlacklist=[]] List of route patterns to blacklist.
+ * @returns {JSX.Element} The rendered component.
+ */
+const SideNavigation = ({
+  maxCategoryNesting,
+  routePatternBlacklist,
+  classNames
+}) => /*#__PURE__*/React.createElement(SideNavigationProvider, {
+  maxCategoryNesting: maxCategoryNesting,
+  routePatternBlacklist: routePatternBlacklist
+}, /*#__PURE__*/React.createElement(SideNavigationContent, {
+  classNames: classNames
+}));
+SideNavigation.defaultProps = {
+  maxCategoryNesting: 3,
+  routePatternBlacklist: [],
+  classNames: null
+};
+export default SideNavigation;

package/components/SideNavigation/SideNavigationCategories.connector.js

@@ -1,8 +1,30 @@
-import{connect}from'react-redux';import{fetchCategoryOrRootCategories}from'@shopgate/engage/category';import{makeGetAreRootCategoriesFetching,makeGetSubcategoriesByCategoryId}from"./selectors";/**
+import { connect } from 'react-redux';
+import { fetchCategoryOrRootCategories } from '@shopgate/engage/category';
+import { makeGetAreRootCategoriesFetching, makeGetSubcategoriesByCategoryId } from "./selectors";
+
+/**
  * Creates the mapStateToProps connector function.
  * @returns {Function}
- */var makeMapStateToProps=function makeMapStateToProps(){var getAreRootCategoriesFetching=makeGetAreRootCategoriesFetching();var getSubcategoriesByCategoryId=makeGetSubcategoriesByCategoryId();return function(state,_ref){var categoryId=_ref.categoryId;return{rootCategoriesFetching:getAreRootCategoriesFetching(state),subcategories:getSubcategoriesByCategoryId(state,{categoryId:categoryId})};};};/**
+ */
+const makeMapStateToProps = () => {
+  const getAreRootCategoriesFetching = makeGetAreRootCategoriesFetching();
+  const getSubcategoriesByCategoryId = makeGetSubcategoriesByCategoryId();
+  return (state, {
+    categoryId
+  }) => ({
+    rootCategoriesFetching: getAreRootCategoriesFetching(state),
+    subcategories: getSubcategoriesByCategoryId(state, {
+      categoryId
+    })
+  });
+};
+
+/**
  * Maps the contents of the state to the component props.
  * @param  {Function} dispatch The redux dispatch function.
  * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchCategory:function fetchCategory(id){return dispatch(fetchCategoryOrRootCategories(id));}};};export default connect(makeMapStateToProps,mapDispatchToProps);
+ */
+const mapDispatchToProps = dispatch => ({
+  fetchCategory: id => dispatch(fetchCategoryOrRootCategories(id))
+});
+export default connect(makeMapStateToProps, mapDispatchToProps);