@shopgate/engage 7.30.0-alpha.1 → 7.30.0-alpha.11

package/components/SheetDrawer/index.js

@@ -1,5 +1,21 @@
-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 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';
+import { jsx as _jsx } from "react/jsx-runtime";
+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__*/_jsx(Sheet, {
+    ...props,
+    className: classNames(props.className, 'engage__sheet-drawer')
+  }), node);
+}
+export default SheetDrawer;

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

@@ -1,17 +1,165 @@
-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 _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+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:/**
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let Item = /*#__PURE__*/function (_Component) {
+  function Item() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(Item, _Component);
+  var _proto = Item.prototype;
+  /**
    * 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;}/**
+   */
+  _proto.shouldComponentUpdate = function 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)));}/**
+   */;
+  _proto.renderContent = function 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__*/_jsx("div", {
+      "data-test-id": this.props.testId,
+      ref: ref,
+      className: "engage__sheet-list__item",
+      children: /*#__PURE__*/_jsxs(Grid, {
+        className: classNames(gridStyles),
+        component: "div",
+        children: [image !== null && /*#__PURE__*/_jsx("div", {
+          className: styles.image,
+          children: image
+        }), leftComponent !== null && /*#__PURE__*/_jsx(Grid.Item, {
+          component: "div",
+          grow: 1,
+          children: leftComponent
+        }), /*#__PURE__*/_jsxs(Grid.Item, {
+          className: classNames(titleStyles),
+          component: "div",
+          grow: 1,
+          children: [/*#__PURE__*/_jsx("div", {
+            children: title
+          }), description && /*#__PURE__*/_jsx("div", {
+            className: styles.description,
+            dangerouslySetInnerHTML: {
+              __html: description
+            }
+          })]
+        }), rightComponent !== null && /*#__PURE__*/_jsx(Grid.Item, {
+          component: "div",
+          grow: 1,
+          children: 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;/**
+   */;
+  _proto.render = function 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__*/_jsx(Glow, {
+        ref: forwardedRef,
+        className: className,
+        styles: {
+          hover: styles.glowHover
+        },
+        children: /*#__PURE__*/_jsx(LinkComponent, {
+          href: link,
+          onClick: onClick,
+          state: linkState,
+          tabIndex: 0,
+          children: this.renderContent()
+        })
+      });
+    }
+    return /*#__PURE__*/_jsx("div", {
+      onKeyPress: () => {},
+      onClick: onClick,
+      "data-test-id": testId,
+      ref: forwardedRef,
+      tabIndex: 0,
+      role: "option",
+      "aria-selected": isSelected,
+      children: /*#__PURE__*/_jsx(Glow, {
+        className: className,
+        styles: {
+          hover: styles.glowHover
+        },
+        children: this.renderContent()
+      })
+    });
+  };
+  return Item;
+}(Component);
+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,115 @@
-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";
+import { jsx as _jsx } from "react/jsx-runtime";
+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__*/_jsx("div", {});
+  return Link;
+});
+describe('<SheetList.Item />', () => {
+  const title = 'My Title';
+  it('should render with a title but no image', () => {
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
+      title: title
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('img').exists()).toBeFalsy();
+  });
+  it('should render with an image', () => {
+    const image = /*#__PURE__*/_jsx("img", {
+      src: "url/to/image",
+      alt: "Alternative text"
+    });
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
+      title: title,
+      image: image
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('img').exists()).toBeTruthy();
+  });
+  it('should render with a right component', () => {
+    const rightComponent = /*#__PURE__*/_jsx("span", {
+      children: "I`m a span."
+    });
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
+      title: title,
+      rightComponent: rightComponent
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.contains(/*#__PURE__*/_jsx("span", {
+      children: "I`m a span."
+    }))).toEqual(true);
+  });
+  it('should render without a Glow when selected', () => {
+    const wrapper = mount(/*#__PURE__*/_jsx(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__*/_jsx(Item, {
+      title: title,
+      isDisabled: true
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(Glow).exists()).toBeFalsy();
+  });
+  it('should render with a link', () => {
+    const wrapper = mount(/*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(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,77 @@
-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 _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+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:/**
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+let SheetList = /*#__PURE__*/function (_Component) {
+  function SheetList() {
+    return _Component.apply(this, arguments) || this;
+  }
+  _inheritsLoose(SheetList, _Component);
+  var _proto = SheetList.prototype;
+  /**
    * 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;
+   */
+  _proto.render = function 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__*/_jsx(List, {
+      className: `${className} engage__sheet-list`,
+      role: "listbox",
+      children: 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__*/_jsx(List.Item, {
+          className: classNames(itemClasses, childClasses, isSelected ? 'engage__sheet-list__selected-item' : 'engage__sheet-list__item'),
+          isSelected: isSelected,
+          tabIndex: 0,
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.innerContainer,
+            "data-test-id": testId,
+            children: child
+          })
+        }, key);
+      })
+    });
+  };
+  return SheetList;
+}(Component);
+SheetList.Item = Item;
+SheetList.defaultProps = {
+  children: null,
+  className: null,
+  hasImages: false,
+  testId: null
+};
+export default SheetList;

package/components/SheetList/spec.js

@@ -1 +1,44 @@
-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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+describe('<SheetList />', () => {
+  it('should render with two children', () => {
+    const wrapper = mount(/*#__PURE__*/_jsxs(SheetList, {
+      children: [/*#__PURE__*/_jsx(SheetList.Item, {
+        title: "List Item"
+      }), /*#__PURE__*/_jsx(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__*/_jsx(SheetList, {
+      hasImages: true,
+      children: /*#__PURE__*/_jsx(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__*/_jsx(SheetList, {}));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SheetList).html()).toBe(null);
+  });
+  it('should not render invalid children', () => {
+    const wrapper = mount(/*#__PURE__*/_jsxs(SheetList, {
+      children: [/*#__PURE__*/_jsx(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/engage';
+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,31 @@
-import React from'react';import{hot}from'react-hot-loader/root';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 hot(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.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const SideNavigation = ({
+  maxCategoryNesting,
+  routePatternBlacklist,
+  classNames
+}) => /*#__PURE__*/_jsx(SideNavigationProvider, {
+  maxCategoryNesting: maxCategoryNesting,
+  routePatternBlacklist: routePatternBlacklist,
+  children: /*#__PURE__*/_jsx(SideNavigationContent, {
+    classNames: classNames
+  })
+});
+SideNavigation.defaultProps = {
+  maxCategoryNesting: 3,
+  routePatternBlacklist: [],
+  classNames: null
+};
+export default SideNavigation;