@shopgate/pwa-ui-shared 7.30.3 → 7.31.0-alpha.1

package/Sheet/index.js

@@ -1,179 +1,317 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
-import classNames from 'classnames';
 import UIEvents from '@shopgate/pwa-core/emitters/ui';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
 import Drawer from '@shopgate/pwa-common/components/Drawer';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles, keyframes, responsiveMediaQuery } from '@shopgate/engage/styles';
 import ProgressBar from "../ProgressBar";
 import Header from "./components/Header";
-import styles from "./style";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SHEET_EVENTS = {
   OPEN: 'Sheet.open',
   CLOSE: 'Sheet.close'
 };
+const duration = 300;
+const easing = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
+const slideInSheetDrawer = keyframes({
+  '0%': {
+    transform: 'translateY(100%)'
+  },
+  '100%': {
+    transform: 'translateY(0)'
+  }
+});
+const fadeInSheetDrawer = keyframes({
+  '0%': {
+    opacity: 0
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+const slideOutSheetDrawer = keyframes({
+  '0%': {
+    transform: 'translateY(0)'
+  },
+  '100%': {
+    transform: 'translateY(100%)'
+  }
+});
+const fadeOutSheetDrawer = keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0
+  }
+});
+const useStyles = makeStyles()(theme => ({
+  section: {
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '80%',
+      position: 'fixed',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: 'auto',
+      zIndex: 100
+    }
+  },
+  container: {
+    bottom: 0,
+    background: themeConfig.colors.light,
+    width: '100vw',
+    [responsiveMediaQuery('<xl', {
+      appOnly: true
+    })]: {
+      maxWidth: 640
+    },
+    left: 0,
+    right: 0,
+    margin: '0 auto',
+    color: theme.palette.text.primary,
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      position: 'initial'
+    },
+    [responsiveMediaQuery('>md', {
+      webOnly: true
+    })]: {
+      width: '60%'
+    }
+  },
+  containerFullScreen: {
+    height: [`calc(100vh - ${themeConfig.variables.navigator.height}px - 51px)`, `calc(100vh - ${themeConfig.variables.navigator.height}px - 51px - var(--safe-area-inset-top))`]
+  },
+  progressBarContainer: {
+    position: 'relative'
+  },
+  sheetShadow: {
+    boxShadow: themeConfig.shadows.sheet
+  },
+  content: {
+    maxHeight: [`calc(var(--vh-100, 100vh) - ${themeConfig.variables.navigator.height}px)`, `calc(var(--vh-100, 100vh) - ${themeConfig.variables.navigator.height}px - var(--safe-area-inset-top))`],
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      maxHeight: [`calc(var(--vh-80, 80vh) - ${themeConfig.variables.navigator.height}px)`, `calc(var(--vh-80, 80vh) - ${themeConfig.variables.navigator.height}px - var(--safe-area-inset-top))`]
+    },
+    paddingBottom: ['var(--safe-area-inset-bottom)'],
+    overflowY: 'scroll',
+    WebkitOverflowScrolling: 'touch'
+  },
+  drawerAnimIn: {
+    [responsiveMediaQuery('<=sm', {
+      appAlways: true
+    })]: {
+      animation: `${slideInSheetDrawer} ${duration}ms 1 both ${easing}`
+    },
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      animation: `${fadeInSheetDrawer} ${duration}ms 1 both ${easing}`
+    }
+  },
+  drawerAnimOut: {
+    [responsiveMediaQuery('<=sm', {
+      appAlways: true
+    })]: {
+      animation: `${slideOutSheetDrawer} ${duration}ms 1 both ${easing}`
+    },
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      animation: `${fadeOutSheetDrawer} ${duration}ms 1 both ${easing}`
+    }
+  }
+}));
 
 /**
- * Sheet component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-let Sheet = /*#__PURE__*/function (_Component) {
-  /**
-   * The constructor.
-   * @param {Object} props The component props.
-   */
-  function Sheet(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Close the Sheet.
-     */
-    _this.handleScroll = throttle(() => {
-      const scrolled = _this.content.current.scrollTop !== 0;
-      if (_this.state.scrolled !== scrolled) {
-        _this.setState({
-          scrolled
-        });
-      }
-    }, 10);
-    /**
-     * Close the Sheet.
-     */
-    _this.handleClose = () => {
-      _this.props.onClose();
-      _this.setState({
-        isOpen: false,
-        scrolled: false
-      });
-    };
-    /** The Sheet is opened */
-    _this.handleDidOpen = () => {
-      UIEvents.emit(SHEET_EVENTS.OPEN);
-      _this.props.onDidOpen();
-    };
-    /** The Sheet is closed */
-    _this.handleDidClose = () => {
-      UIEvents.emit(SHEET_EVENTS.CLOSE);
-      _this.props.onDidClose();
-    };
-    /**
-     * New value from SearchBar
-     * @param {string} value .
-     */
-    _this.handleSearchInput = value => {
-      _this.setState({
-        query: value
-      });
-    };
-    _this.content = /*#__PURE__*/React.createRef();
-    _this.state = {
-      isOpen: props.isOpen,
-      scrolled: false,
-      query: ''
-    };
-    return _this;
-  }
+const SheetView = ({
+  allowClose,
+  animationFromParent,
+  backdrop,
+  children,
+  className,
+  contentClassName,
+  contentRef,
+  duration: durationProp,
+  isLoading,
+  isOpen,
+  onClose,
+  onDidClose,
+  onDidOpen,
+  onOpen,
+  onScroll,
+  scrolled,
+  showSearch,
+  title,
+  handleSearchInput
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const animation = useMemo(() => ({
+    duration: durationProp,
+    in: classes.drawerAnimIn,
+    out: classes.drawerAnimOut,
+    ...animationFromParent
+  }), [durationProp, classes.drawerAnimIn, classes.drawerAnimOut, animationFromParent]);
+  const drawerClassNames = cx(classes.container, {
+    [className]: className
+  });
+  const contentClassNames = cx(classes.content, {
+    [classes.containerFullScreen]: showSearch
+  }, {
+    [contentClassName]: contentClassName
+  }, {
+    [classes.sheetShadow]: !backdrop
+  });
+  return /*#__PURE__*/_jsxs("section", {
+    className: cx('ui-shared__sheet', {
+      [classes.section]: isOpen
+    }),
+    children: [/*#__PURE__*/_jsxs(Drawer, {
+      className: drawerClassNames,
+      isOpen: isOpen,
+      onDidOpen: onDidOpen,
+      onDidClose: onDidClose,
+      onOpen: onOpen,
+      onClose: onClose,
+      animation: animation,
+      children: [title && /*#__PURE__*/_jsx(Header, {
+        showSearch: showSearch,
+        handleChange: handleSearchInput,
+        onToggleClose: onClose,
+        shadow: scrolled,
+        title: title,
+        allowClose: allowClose
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.progressBarContainer,
+        children: /*#__PURE__*/_jsx(ProgressBar, {
+          isVisible: isLoading
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        ref: contentRef,
+        onScroll: onScroll,
+        className: contentClassNames,
+        children: children
+      })]
+    }), backdrop && /*#__PURE__*/_jsx(Backdrop, {
+      isVisible: isOpen,
+      level: 4,
+      onClick: allowClose ? onClose : () => {},
+      opacity: 20
+    })]
+  });
+};
+SheetView.defaultProps = {
+  children: null,
+  className: null,
+  contentClassName: null,
+  title: ''
+};
 
-  /**
-   * Change isOpen state for new incoming props.
-   * @param {Object} nextProps The next component props.
-   */
-  _inheritsLoose(Sheet, _Component);
-  var _proto = Sheet.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps({
-    isOpen
-  }) {
-    if (this.state.isOpen !== isOpen) {
-      this.setState({
-        isOpen
-      });
+/**
+ * Sheet component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
+ */
+const Sheet = ({
+  allowClose,
+  animation,
+  backdrop,
+  children: childrenProp,
+  className,
+  contentClassName,
+  duration: sheetDuration,
+  isLoading,
+  isOpen: isOpenFromProps,
+  onClose,
+  onDidClose,
+  onDidOpen,
+  onOpen,
+  showSearch,
+  title
+}) => {
+  const contentRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(isOpenFromProps);
+  const prevIsOpenPropRef = useRef(isOpenFromProps);
+  if (prevIsOpenPropRef.current !== isOpenFromProps) {
+    prevIsOpenPropRef.current = isOpenFromProps;
+    if (isOpen !== isOpenFromProps) {
+      setIsOpen(isOpenFromProps);
     }
-  };
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      allowClose
-    } = this.props;
-    const children = React.Children.map(this.props.children, child => (/*#__PURE__*/React.cloneElement(child,
-    // Only add onClose prop to other components
-    typeof child.type === 'function' && this.props.onClose !== null ? {
-      onClose: this.props.onClose,
-      query: this.state.query
-    } : {})));
-    const drawerClassNames = classNames(styles.container, {
-      [this.props.className]: this.props.className
-    });
-    const contentClassNames = classNames(styles.content, {
-      [styles.containerFullScreen]: this.props.showSearch
-    }, {
-      [this.props.contentClassName]: this.props.contentClassName
-    }, {
-      [styles.shadow]: !this.props.backdrop
-    });
-    return /*#__PURE__*/_jsxs("section", {
-      className: classNames('ui-shared__sheet', {
-        [styles.section]: this.state.isOpen
-      }),
-      children: [/*#__PURE__*/_jsxs(Drawer, {
-        className: drawerClassNames,
-        isOpen: this.state.isOpen,
-        onDidOpen: this.handleDidOpen,
-        onDidClose: this.handleDidClose,
-        onOpen: this.props.onOpen,
-        onClose: this.handleClose,
-        animation: this.animationProps,
-        children: [this.props.title && /*#__PURE__*/_jsx(Sheet.Header, {
-          showSearch: this.props.showSearch,
-          handleChange: this.handleSearchInput,
-          onToggleClose: this.handleClose,
-          shadow: this.state.scrolled,
-          title: this.props.title,
-          allowClose: allowClose
-        }), /*#__PURE__*/_jsx("div", {
-          className: styles.progressBarContainer,
-          children: /*#__PURE__*/_jsx(ProgressBar, {
-            isVisible: this.props.isLoading
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          ref: this.content,
-          onScroll: this.handleScroll,
-          className: contentClassNames,
-          children: children
-        })]
-      }), this.props.backdrop && /*#__PURE__*/_jsx(Backdrop, {
-        isVisible: this.state.isOpen,
-        level: 4,
-        onClick: allowClose ? this.handleClose : () => {},
-        opacity: 20
-      })]
-    });
-  };
-  return _createClass(Sheet, [{
-    key: "animationProps",
-    get:
-    /**
-     * Getter for the animation props of the Sheet.
-     * @returns {Object}
-     */
-    function () {
-      return {
-        duration: this.props.duration,
-        ...styles.drawerAnimation,
-        ...this.props.animation
-      };
+  }
+  const [scrolled, setScrolled] = useState(false);
+  const [query, setQuery] = useState('');
+  const handleScroll = useMemo(() => throttle(() => {
+    const node = contentRef.current;
+    if (!node) {
+      return;
     }
-  }]);
-}(Component);
+    const nextScrolled = node.scrollTop !== 0;
+    setScrolled(prev => prev === nextScrolled ? prev : nextScrolled);
+  }, 10), []);
+  useEffect(() => () => {
+    handleScroll.cancel();
+  }, [handleScroll]);
+  const handleClose = useCallback(() => {
+    onClose();
+    setIsOpen(false);
+    setScrolled(false);
+  }, [onClose]);
+  const handleDidOpen = useCallback(() => {
+    UIEvents.emit(SHEET_EVENTS.OPEN);
+    onDidOpen();
+  }, [onDidOpen]);
+  const handleDidClose = useCallback(() => {
+    UIEvents.emit(SHEET_EVENTS.CLOSE);
+    onDidClose();
+  }, [onDidClose]);
+  const handleSearchInput = useCallback(value => {
+    setQuery(value);
+  }, []);
+  const children = React.Children.map(childrenProp, child => (/*#__PURE__*/React.cloneElement(child, typeof child.type === 'function' && onClose !== null ? {
+    onClose,
+    query
+  } : {})));
+  return /*#__PURE__*/_jsx(SheetView, {
+    allowClose: allowClose,
+    animationFromParent: animation,
+    backdrop: backdrop,
+    className: className,
+    contentClassName: contentClassName,
+    contentRef: contentRef,
+    duration: sheetDuration,
+    handleSearchInput: handleSearchInput,
+    isLoading: isLoading,
+    isOpen: isOpen,
+    onClose: handleClose,
+    onDidClose: handleDidClose,
+    onDidOpen: handleDidOpen,
+    onOpen: onOpen,
+    onScroll: handleScroll,
+    scrolled: scrolled,
+    showSearch: showSearch,
+    title: title,
+    children: children
+  });
+};
 Sheet.Header = Header;
-/**
- * The component default props.
- * @type {Object}
- */
 Sheet.defaultProps = {
   animation: {},
   backdrop: true,

package/Sheet/spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import Drawer from '@shopgate/pwa-common/components/Drawer';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
 import UIEvents from '@shopgate/pwa-core/emitters/ui';
 import Sheet, { SHEET_EVENTS } from "./index";
@@ -46,8 +47,9 @@ describe('<Sheet />', () => {
     wrapper.setProps({
       isOpen: true
     });
+    wrapper.update();
     expect(onOpen).toHaveBeenCalled();
-    wrapper.find('Drawer').simulate('animationEnd');
+    wrapper.find(Drawer).simulate('animationEnd');
     expect(onDidOpen).toHaveBeenCalled();
     expect(UIEvents.emit).nthCalledWith(1, SHEET_EVENTS.OPEN);
   });
@@ -68,16 +70,16 @@ describe('<Sheet />', () => {
       // Wait until the drawer is closed and has updated it's state.
       setTimeout(() => {
         resolve();
-      }, wrapper.find('Drawer').prop('animation').duration);
+      }, wrapper.find(Drawer).prop('animation').duration);
     }).then(() => {
       // Check if onClose callback was called.
       expect(onCloseSpy).toHaveBeenCalled();
 
       // Check if the Drawer component was closed.
-      expect(wrapper.find('Drawer').prop('isOpen')).not.toBeTruthy();
+      expect(wrapper.find(Drawer).prop('isOpen')).not.toBeTruthy();
       expect(wrapper).toMatchSnapshot();
-      wrapper.find('Drawer').simulate('animationEnd');
-      expect(UIEvents.emit).nthCalledWith(2, SHEET_EVENTS.CLOSE);
+      wrapper.find(Drawer).simulate('animationEnd');
+      expect(UIEvents.emit).lastCalledWith(SHEET_EVENTS.CLOSE);
     });
   });
   it('should open', () => {
@@ -92,7 +94,7 @@ describe('<Sheet />', () => {
       isOpen: true
     });
     wrapper.update();
-    expect(wrapper.find('Drawer').prop('isOpen')).toBeTruthy();
+    expect(wrapper.find(Drawer).prop('isOpen')).toBeTruthy();
     expect(wrapper).toMatchSnapshot();
   });
 });

package/TaxDisclaimer/index.js

@@ -1,17 +1,30 @@
 import React from 'react';
 import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
 import { PRODUCT_TAX_DISCLAIMER } from '@shopgate/pwa-common-commerce/product/constants/Portals';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import showTaxDisclaimer from '@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks/useWidgetSettings';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  text: {
+    background: theme.palette.background.default,
+    display: 'block',
+    fontSize: 12,
+    padding: theme.spacing(2.5, 2),
+    textAlign: 'left'
+  }
+}));
 
 /**
  * TaxDisclaimer component.
  * @returns {Function}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const TaxDisclaimer = () => {
+  const {
+    classes
+  } = useStyles();
+
   // Added with PWA 6 - CCP-2372
   const {
     show,
@@ -30,7 +43,7 @@ const TaxDisclaimer = () => {
       "aria-hidden": true,
       className: "ui-shared__tax-disclaimer",
       children: /*#__PURE__*/_jsx(I18n.Text, {
-        className: styles,
+        className: classes.text,
         string: text || 'product.tax_disclaimer'
       })
     })

package/TaxDisclaimer/spec.js

@@ -1,7 +1,20 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@shopgate/engage/components');
+jest.mock('@shopgate/engage/styles', () => ({
+  makeStyles: () => function mockUseStylesFactory() {
+    return function useStylesMock() {
+      return {
+        classes: {
+          text: 'mock-class-text'
+        }
+      };
+    };
+  },
+  keyframes: () => ({})
+}));
 jest.mock('@shopgate/engage/core/hooks/useWidgetSettings', () => ({
   useWidgetSettings: jest.fn().mockReturnValue({
     show: null,
@@ -15,16 +28,14 @@ describe('<TaxDisclaimer />', () => {
   });
   it('should display the component', () => {
     jest.mock('@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer', () => true);
-    // eslint-disable-next-line global-require
-    const TaxDisclaimer = require("./index").default;
+    const TaxDisclaimer = jest.requireActual("./index").default;
     const wrapper = shallow(/*#__PURE__*/_jsx(TaxDisclaimer, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(I18n.Text).exists()).toBe(true);
   });
   it('should display null', () => {
     jest.mock('@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer', () => false);
-    // eslint-disable-next-line global-require
-    const TaxDisclaimer = require("./index").default;
+    const TaxDisclaimer = jest.requireActual("./index").default;
     const wrapper = shallow(/*#__PURE__*/_jsx(TaxDisclaimer, {}));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(I18n.Text).exists()).toBe(false);

package/TextField/components/ErrorText/index.js

@@ -1,15 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "./style";
+import { I18n } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ellipsisLine = {
+  overflow: 'hidden',
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+const useStyles = makeStyles()(theme => ({
+  error: {
+    position: 'absolute',
+    bottom: 2,
+    fontSize: 12,
+    lineHeight: '14px',
+    color: theme.palette.error.main,
+    ...ellipsisLine
+  }
+}));
 
 /**
  * Error message component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ErrorText = ({
   elementName,
   validationError,
@@ -17,16 +32,22 @@ const ErrorText = ({
   ariaHidden,
   translate,
   className
-}) => /*#__PURE__*/_jsxs("div", {
-  id: `ariaError-${elementName}`,
-  className: classNames(className, styles.error, 'errorText'),
-  "aria-live": "assertive",
-  "aria-atomic": "true",
-  "aria-hidden": ariaHidden,
-  children: [translate && /*#__PURE__*/_jsx(I18n.Text, {
-    string: validationError || errorText
-  }), !translate && (validationError || errorText)]
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsxs("div", {
+    id: `ariaError-${elementName}`,
+    className: cx(classes.error, className, 'errorText'),
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    "aria-hidden": ariaHidden,
+    children: [translate && /*#__PURE__*/_jsx(I18n.Text, {
+      string: validationError || errorText
+    }), !translate && (validationError || errorText)]
+  });
+};
 ErrorText.defaultProps = {
   className: '',
   errorText: null,