@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

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

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -10,13 +11,19 @@ import styles from "./style";
 /**
  * The list item component.
  */
-class Item extends Component {
+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}
    */
-  shouldComponentUpdate(nextProps) {
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     return this.props.isSelected !== nextProps.isSelected || this.props.isDisabled !== nextProps.isDisabled || this.props.leftComponent !== nextProps.leftComponent;
   }
 
@@ -24,8 +31,8 @@ class Item extends Component {
    * Renders the bulk of the content.
    * @param {boolean} [isNested=true] Tells if the content is rendered nested.
    * @returns {JSX.Element}
-   */
-  renderContent(isNested = true) {
+   */;
+  _proto.renderContent = function renderContent(isNested = true) {
     const {
       isDisabled,
       isSelected,
@@ -45,37 +52,45 @@ class Item extends Component {
       [styles.disabled]: isDisabled
     };
     const ref = isNested ? null : forwardedRef;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("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)));
+      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}
-   */
-  render() {
+   */;
+  _proto.render = function render() {
     const {
       link,
       linkState,
@@ -98,35 +113,40 @@ class Item extends Component {
 
     // Wrap with a <Link> if the `link` prop is set.
     if (link) {
-      return /*#__PURE__*/React.createElement(Glow, {
+      return /*#__PURE__*/_jsx(Glow, {
         ref: forwardedRef,
         className: className,
         styles: {
           hover: styles.glowHover
-        }
-      }, /*#__PURE__*/React.createElement(LinkComponent, {
-        href: link,
-        onClick: onClick,
-        state: linkState,
-        tabIndex: 0
-      }, this.renderContent()));
+        },
+        children: /*#__PURE__*/_jsx(LinkComponent, {
+          href: link,
+          onClick: onClick,
+          state: linkState,
+          tabIndex: 0,
+          children: this.renderContent()
+        })
+      });
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsx("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()));
-  }
-}
+      "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,

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

@@ -2,29 +2,30 @@ 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}
    */
-  const Link = () => /*#__PURE__*/React.createElement("div", null);
+  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__*/React.createElement(Item, {
+    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__*/React.createElement("img", {
+    const image = /*#__PURE__*/_jsx("img", {
       src: "url/to/image",
       alt: "Alternative text"
     });
-    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
       title: title,
       image: image
     }));
@@ -32,16 +33,20 @@ describe('<SheetList.Item />', () => {
     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, {
+    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__*/React.createElement("span", null, "I`m a span."))).toEqual(true);
+    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__*/React.createElement(Item, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
       title: title,
       isSelected: true
     }));
@@ -49,7 +54,7 @@ describe('<SheetList.Item />', () => {
     expect(wrapper.find(Glow).exists()).toBeFalsy();
   });
   it('should render without a Glow when disabled', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
       title: title,
       isDisabled: true
     }));
@@ -57,7 +62,7 @@ describe('<SheetList.Item />', () => {
     expect(wrapper.find(Glow).exists()).toBeFalsy();
   });
   it('should render with a link', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
       title: title,
       link: "url/to/somewhere"
     }));
@@ -75,7 +80,7 @@ describe('<SheetList.Item />', () => {
        */
       spy();
     };
-    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
       title: title,
       onClick: clickHandler
     }));
@@ -84,7 +89,7 @@ describe('<SheetList.Item />', () => {
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should update the component when the isDisabled prop changed', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
       title: title,
       isDisabled: true
     }));
@@ -96,7 +101,7 @@ describe('<SheetList.Item />', () => {
     expect(updated).toBe(true);
   });
   it('should update the component when the isSelected prop changed', () => {
-    const wrapper = mount(/*#__PURE__*/React.createElement(Item, {
+    const wrapper = mount(/*#__PURE__*/_jsx(Item, {
       title: title,
       isSelected: true
     }));

package/components/SheetList/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,12 +10,18 @@ import styles from "./style";
  * The SheetList component.
  * Styled sheet for List component
  */
-class SheetList extends Component {
+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}
    */
-  render() {
+  _proto.render = function render() {
     const {
       children,
       className,
@@ -28,35 +35,38 @@ class SheetList extends Component {
       [styles.item]: true,
       [styles.itemWithImage]: hasImages
     };
-    return /*#__PURE__*/React.createElement(List, {
+    return /*#__PURE__*/_jsx(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));
-    }));
-  }
-}
+      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,

package/components/SheetList/spec.js

@@ -3,35 +3,41 @@ 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__*/React.createElement(SheetList, null, /*#__PURE__*/React.createElement(SheetList.Item, {
-      title: "List Item"
-    }), /*#__PURE__*/React.createElement(SheetList.Item, {
-      title: "List Item"
-    })));
+    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__*/React.createElement(SheetList, {
-      hasImages: true
-    }, /*#__PURE__*/React.createElement(SheetList.Item, {
-      title: "List Item"
-    })));
+    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__*/React.createElement(SheetList, null));
+    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__*/React.createElement(SheetList, null, /*#__PURE__*/React.createElement(SheetList.Item, {
-      title: "List Item"
-    }), "xxx"));
+    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,5 +1,5 @@
 import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { themeConfig } from '@shopgate/engage';
 const {
   variables,
   colors

package/components/SideNavigation/SideNavigation.js

@@ -11,16 +11,18 @@ import SideNavigationContent from "./SideNavigationContent";
  * @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__*/React.createElement(SideNavigationProvider, {
+}) => /*#__PURE__*/_jsx(SideNavigationProvider, {
   maxCategoryNesting: maxCategoryNesting,
-  routePatternBlacklist: routePatternBlacklist
-}, /*#__PURE__*/React.createElement(SideNavigationContent, {
-  classNames: classNames
-}));
+  routePatternBlacklist: routePatternBlacklist,
+  children: /*#__PURE__*/_jsx(SideNavigationContent, {
+    classNames: classNames
+  })
+});
 SideNavigation.defaultProps = {
   maxCategoryNesting: 3,
   routePatternBlacklist: [],

package/components/SideNavigation/SideNavigationCategories.js

@@ -15,6 +15,7 @@ import { item } from "./SideNavigationItem.style";
  * @property {Function} props.fetchCategory - Function to fetch the category data.
  * @returns {JSX.Element|null} The rendered component or null.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SideNavigationCategories = ({
   categoryId,
   subcategories,
@@ -27,21 +28,23 @@ const SideNavigationCategories = ({
     }
   }, [categoryId, fetchCategory, subcategories]);
   if (!subcategories && rootCategoriesFetching) {
-    return /*#__PURE__*/React.createElement("li", {
-      className: item
-    }, /*#__PURE__*/React.createElement(LoadingIndicator, {
-      className: loadingIndicator
-    }));
+    return /*#__PURE__*/_jsx("li", {
+      className: item,
+      children: /*#__PURE__*/_jsx(LoadingIndicator, {
+        className: loadingIndicator
+      })
+    });
   }
   if (!subcategories || Array.isArray(subcategories) && subcategories.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("li", {
-    className: list
-  }, /*#__PURE__*/React.createElement(SideNavigationCategoriesItemChildren, {
-    level: 0,
-    subcategories: subcategories
-  }));
+  return /*#__PURE__*/_jsx("li", {
+    className: list,
+    children: /*#__PURE__*/_jsx(SideNavigationCategoriesItemChildren, {
+      level: 0,
+      subcategories: subcategories
+    })
+  });
 };
 SideNavigationCategories.defaultProps = {
   categoryId: null,

package/components/SideNavigation/SideNavigationCategoriesItem.js

@@ -22,6 +22,7 @@ import { useSideNavigation } from "./SideNavigation.hooks";
  * @param {number} [props.level=0] The current nesting level.
  * @returns {JSX.Element|null} The rendered component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavigationCategoriesItem = ({
   categoryId,
   category,
@@ -52,32 +53,35 @@ const SideNavigationCategoriesItem = ({
   }, [isLoading, subcategories, subcategoriesFetching]);
   const buttonRight = useMemo(() => {
     if (!maxNestingReached && hasSubcategories) {
-      return /*#__PURE__*/React.createElement("button", {
+      return /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: handleClick,
-        className: chevronButton
-      }, /*#__PURE__*/React.createElement(ArrowDrop, {
-        className: (isOpen && subcategories ? chevronUp : chevronDown).toString()
-      }));
+        className: chevronButton,
+        children: /*#__PURE__*/_jsx(ArrowDrop, {
+          className: (isOpen && subcategories ? chevronUp : chevronDown).toString()
+        })
+      });
     }
     return null;
   }, [handleClick, hasSubcategories, isOpen, maxNestingReached, subcategories]);
   if (!category) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(SideNavigationItem, {
+  return /*#__PURE__*/_jsxs(SideNavigationItem, {
     href: `${CATEGORY_PATH}/${bin2hex(categoryId)}`,
     label: category.name,
     level: level,
     buttonRight: buttonRight,
     forceActive: activeCategoryId === categoryId,
-    className: level === 0 && isOpen ? open : null
-  }, isLoading && /*#__PURE__*/React.createElement("div", {
-    className: progressBar
-  }, /*#__PURE__*/React.createElement(ProgressBar, null)), !maxNestingReached && isOpen && hasSubcategories && subcategories && /*#__PURE__*/React.createElement(SideNavigationCategoriesItemChildren, {
-    subcategories: subcategories,
-    level: level + 1
-  }));
+    className: level === 0 && isOpen ? open : null,
+    children: [isLoading && /*#__PURE__*/_jsx("div", {
+      className: progressBar,
+      children: /*#__PURE__*/_jsx(ProgressBar, {})
+    }), !maxNestingReached && isOpen && hasSubcategories && subcategories && /*#__PURE__*/_jsx(SideNavigationCategoriesItemChildren, {
+      subcategories: subcategories,
+      level: level + 1
+    })]
+  });
 };
 SideNavigationCategoriesItem.defaultProps = {
   subcategories: null,

package/components/SideNavigation/SideNavigationCategoriesItemChildren.js

@@ -10,12 +10,14 @@ import SideNavigationCategoriesItem from "./SideNavigationCategoriesItem";
  * @param {number} props.level The current nesting level.
  * @returns {JSX.Element} The rendered component.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SideNavigationCategoriesItemChildren = ({
   subcategories,
   level
-}) => /*#__PURE__*/React.createElement("ul", null, subcategories.map(category => /*#__PURE__*/React.createElement(SideNavigationCategoriesItem, {
-  key: category.id,
-  level: level,
-  categoryId: category.id
-})));
+}) => /*#__PURE__*/_jsx("ul", {
+  children: subcategories.map(category => /*#__PURE__*/_jsx(SideNavigationCategoriesItem, {
+    level: level,
+    categoryId: category.id
+  }, category.id))
+});
 export default SideNavigationCategoriesItemChildren;

package/components/SideNavigation/SideNavigationContent.js

@@ -13,6 +13,7 @@ import { container } from "./SideNavigationContent.style";
  * @param {Object} [props.classNames] - The class names for the navigation visibility.
  * @returns {JSX.Element} The rendered component.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavigationContent = ({
   classNames
 }) => {
@@ -29,14 +30,18 @@ const SideNavigationContent = ({
     } = classNames;
     return isVisible ? visible : hidden;
   }, [classNames, isVisible]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: wrapperClass
-  }, isVisible && /*#__PURE__*/React.createElement("nav", {
-    className: container
-  }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement(SideNavigationItem, {
-    href: INDEX_PATH,
-    label: "navigation.home"
-  }), /*#__PURE__*/React.createElement(SideNavigationCategories, null), /*#__PURE__*/React.createElement(SideNavigationLinks, null))));
+  return /*#__PURE__*/_jsx("div", {
+    className: wrapperClass,
+    children: isVisible && /*#__PURE__*/_jsx("nav", {
+      className: container,
+      children: /*#__PURE__*/_jsxs("ul", {
+        children: [/*#__PURE__*/_jsx(SideNavigationItem, {
+          href: INDEX_PATH,
+          label: "navigation.home"
+        }), /*#__PURE__*/_jsx(SideNavigationCategories, {}), /*#__PURE__*/_jsx(SideNavigationLinks, {})]
+      })
+    })
+  });
 };
 SideNavigationContent.defaultProps = {
   classNames: null