@shopgate/pwa-ui-shared 7.30.4-beta.1 → 7.31.0-alpha.2

package/Chip/index.js

@@ -2,16 +2,84 @@ import React, { useRef, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Button from '@shopgate/pwa-common/components/Button';
 import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
+import { hasNewServices } from '@shopgate/engage/core/helpers';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import CrossIcon from "../icons/CrossIcon";
-import styles from "./style";
+
+/**
+ * @param {boolean} hasRemoveButton Whether this chip has a remove button.
+ * @param {Object} theme Theme with spacing().
+ * @returns {Object} Shared layout fields for the chip root.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const chipBase = (hasRemoveButton, theme) => ({
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: 26,
+  outline: 0,
+  height: 26,
+  paddingRight: theme.spacing(1),
+  paddingLeft: hasRemoveButton ? theme.spacing(0.5) : theme.spacing(1),
+  marginRight: 5,
+  marginTop: 4,
+  marginBottom: 4,
+  minWidth: 0
+});
+const useStyles = makeStyles()((theme, {
+  removable,
+  invert
+}) => ({
+  chip: {
+    ...chipBase(removable, theme),
+    ...(hasNewServices() ? {
+      backgroundColor: invert ? 'var(--color-primary)' : 'var(--color-primary-contrast)',
+      color: invert ? 'var(--color-primary-contrast)' : 'var(--color-primary)'
+    } : {
+      backgroundColor: invert ? 'var(--color-secondary)' : 'var(--color-secondary-contrast)',
+      color: invert ? 'var(--color-secondary-contrast)' : 'var(--color-secondary)',
+      '--color-text-high-emphasis': invert ? 'var(--color-secondary-contrast)' : 'var(--color-secondary)'
+    })
+  },
+  removeButton: {
+    flexShrink: 0,
+    padding: 0,
+    [responsiveMediaQuery('>xs', {
+      webOnly: true
+    })]: {
+      padding: '0 5px',
+      fontSize: '1.125rem'
+    }
+  },
+  name: {
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5),
+    paddingTop: 3,
+    paddingBottom: 3,
+    fontSize: 12,
+    fontWeight: 500,
+    textOverflow: 'ellipsis',
+    maxWidth: '100%',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    display: 'block',
+    lineHeight: '1',
+    color: 'inherit',
+    [responsiveMediaQuery('>xs', {
+      webOnly: true
+    })]: {
+      fontSize: '0.875rem',
+      lineHeight: '1.25rem',
+      padding: '6px 8px 6px 0'
+    }
+  }
+}));
 
 /**
  * The chip component.
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Chip(props) {
+const Chip = props => {
   const {
     removable,
     children,
@@ -22,6 +90,13 @@ function Chip(props) {
     removeLabel,
     editLabel
   } = props;
+  const {
+    classes,
+    cx
+  } = useStyles({
+    removable,
+    invert
+  });
   const ref = useRef(null);
   const handleRemove = useCallback(() => {
     onRemove(id);
@@ -31,10 +106,10 @@ function Chip(props) {
   });
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    className: `ui-shared__chip ${styles.chip(removable, invert)}`,
+    className: cx('ui-shared__chip', classes.chip),
     "data-test-id": id,
     children: [removable && /*#__PURE__*/_jsxs(Button, {
-      className: styles.removeButton,
+      className: classes.removeButton,
       onClick: handleRemove,
       testId: "removeFilter",
       "aria-label": removeLabel,
@@ -52,13 +127,13 @@ function Chip(props) {
         })
       })]
     }), /*#__PURE__*/_jsx(Button, {
-      className: styles.name,
+      className: classes.name,
       onClick: onClick,
       "aria-label": editLabel,
       children: children
     })]
   });
-}
+};
 Chip.defaultProps = {
   invert: false,
   onClick: () => {},

package/ContextMenu/components/Item/index.js

@@ -1,17 +1,41 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
-import classNames from 'classnames';
+import Color from 'color';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { getCSSCustomProp, makeStyles } from '@shopgate/engage/styles';
 import Glow from "../../../Glow";
-import { getItemClass } from "./style";
 import { useContextMenu } from "../../ContextMenu.hooks";
-
-/**
- * A delay in ms after that the closeMenu callback gets triggered.
- * @type {number}
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLOSE_DELAY = 250;
+const useStyles = makeStyles()((theme, {
+  disabled
+}) => {
+  let background = themeConfig.colors.shade8;
+  const customPropColor = getCSSCustomProp('--color-primary');
+  if (customPropColor) {
+    background = Color(customPropColor).alpha(0.04).toString();
+  }
+  return {
+    root: {
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      marginBottom: 2,
+      padding: theme.spacing(1.75, 2.75),
+      lineHeight: 1,
+      zIndex: 1,
+      color: disabled ? theme.palette.text.secondary : 'inherits',
+      ...(!disabled ? {
+        cursor: 'pointer',
+        '&:hover': {
+          background
+        }
+      } : {
+        cursor: 'default'
+      })
+    }
+  };
+});
 
 /**
  * The Context Menu Item component.
@@ -25,15 +49,15 @@ const Item = ({
   autoClose,
   className
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    disabled
+  });
   const {
     handleMenuToggle
   } = useContextMenu();
-
-  /**
-    * Handles the click event.
-    * @param {Event} event The click event.
-    * @returns {void}
-    */
   const handleClick = useCallback(event => {
     event.persist();
     setTimeout(() => {
@@ -45,12 +69,6 @@ const Item = ({
       }, 0);
     }, autoClose ? CLOSE_DELAY : 0);
   }, [autoClose, handleMenuToggle, onClick]);
-
-  /**
-   * Handles the keypress event for screen readers.
-   * @param {Event} event The click event.
-   * @returns {void}
-   */
   const handleKeyPress = useCallback(event => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
@@ -60,7 +78,7 @@ const Item = ({
   return /*#__PURE__*/_jsx(Glow, {
     disabled: disabled,
     children: /*#__PURE__*/_jsx("div", {
-      className: classNames(getItemClass(disabled), className),
+      className: cx(classes.root, className),
       onClick: disabled ? noop : handleClick,
       "data-test-id": "contextMenuButton",
       "aria-disabled": disabled,

package/ContextMenu/components/Position/index.js

@@ -1,70 +1,52 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash/clamp';
-import styles from "./style";
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    position: 'absolute',
+    margin: theme.spacing(1)
+  }
+}));
 
 /**
  * The Context Menu Position component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Position = /*#__PURE__*/function (_Component) {
-  /**
-   * The Constructor.
-   * @param {Object} props The component props.
-   */
-  function Position(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    _this.elementRef = null;
-    return _this;
-  }
-
-  /**
-   * Calculate and apply the correct menu position after mounting.
-   */
-  _inheritsLoose(Position, _Component);
-  var _proto = Position.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    const {
-      offset
-    } = this.props;
-
-    // Get ref to the actual child DOM element and calculate bounding rect.
-    const [child] = this.elementRef.childNodes;
+const Position = ({
+  children,
+  offset
+}) => {
+  const theme = useTheme();
+  const gap = theme.spacing(1);
+  const {
+    classes
+  } = useStyles();
+  const elementRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!elementRef.current) {
+      return;
+    }
+    const [child] = elementRef.current.childNodes;
+    if (!child) {
+      return;
+    }
     const bounds = child.getBoundingClientRect();
-
-    // Get window dimensions
     const width = window.innerWidth;
     const height = window.innerHeight;
-
-    // Get the outer gap from styles
-    const gap = styles.outerGap;
-
-    // Calculate clamped menu position
     const left = clamp(offset.left, 0, width - bounds.width - gap * 2);
     const top = clamp(offset.top - gap, 0, height - bounds.height - gap * 2);
-
-    // Assign position directly w/o re-rendering the component
-    this.elementRef.style.left = `${left}px`;
-    this.elementRef.style.top = `${top}px`;
-  }
-
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */;
-  _proto.render = function render() {
-    return /*#__PURE__*/_jsx("div", {
-      ref: ref => {
-        this.elementRef = ref;
-      },
-      className: styles.container,
-      children: this.props.children
-    });
-  };
-  return Position;
-}(Component);
+    elementRef.current.style.left = `${left}px`;
+    elementRef.current.style.top = `${top}px`;
+  }, [offset, gap]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: elementRef,
+    className: classes.container,
+    children: children
+  });
+};
 Position.defaultProps = {
   children: null,
   offset: {

package/ContextMenu/index.js

@@ -1,41 +1,82 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ConnectedReactPortal } from '@shopgate/engage/components';
-import classNames from 'classnames';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
 import { FocusTrap } from '@shopgate/engage/a11y/components';
-import { i18n } from '@shopgate/engage/core';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import MoreVertIcon from "../icons/MoreVertIcon";
 import Position from "./components/Position";
 import Item from "./components/Item";
-import styles from "./style";
 import ContextMenuProvider from "./ContextMenuProvider";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    position: 'relative'
+  },
+  button: {
+    display: 'block',
+    fontSize: '1.5rem',
+    outline: 0,
+    padding: 0,
+    color: 'inherit'
+  },
+  disabled: {
+    cursor: 'not-allowed'
+  },
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 10
+  },
+  menu: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    padding: theme.spacing(1, 0),
+    minWidth: 130,
+    background: themeConfig.colors.light,
+    borderRadius: 2,
+    boxShadow: themeConfig.shadows.contextMenu
+  },
+  scrollable: {
+    maxHeight: '30vh',
+    overflowY: 'auto'
+  }
+}));
 
 /**
  * The Context Menu component.
-  * @param {Object} props The component props.
-  * @param {Object} props.children The menu items.
-  * @param {Object} props.classes The classes for the container and button.
-  * @param {string} props.classes.container The class name for the container.
-  * @param {string} props.classes.button The class name for the button.
-  * @param {boolean} props.disabled Whether the menu is disabled.
-  * @param {boolean} props.isOpened Whether the menu is opened.
-  * @param {Function} props.onStateChange A callback that is called when the menu state changes.
-  * @param {boolean} props.scroll Whether the menu should be scrollable.
-  * @param {boolean} props.showToggle Whether the toggle button should be shown.
-  * @returns {JSX}
-  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+ * @param {Object} props The component props.
+ * @param {Object} props.children The menu items.
+ * @param {Object} props.classes The classes for the container and button.
+ * @param {string} props.classes.container The class name for the container.
+ * @param {string} props.classes.button The class name for the button.
+ * @param {boolean} props.disabled Whether the menu is disabled.
+ * @param {boolean} props.isOpened Whether the menu is opened.
+ * @param {Function} props.onStateChange A callback that is called when the menu state changes.
+ * @param {boolean} props.scroll Whether the menu should be scrollable.
+ * @param {boolean} props.showToggle Whether the toggle button should be shown.
+ * @returns {JSX.Element}
+ */
 const ContextMenu = props => {
   const {
     children,
-    classes,
+    classes: parentClasses,
     disabled,
     showToggle,
     scroll,
     isOpened,
     onStateChange
   } = props;
+  const {
+    classes,
+    cx
+  } = useStyles();
   const [active, setActive] = useState(isOpened);
   const elementRef = useRef(null);
   const menuRef = useRef(null);
@@ -49,11 +90,6 @@ const ContextMenu = props => {
       menuRef.current.focus();
     }
   }, [active]);
-
-  /**
-   * Handles the menu toggle.
-   * @param {Object} e The event object.
-  */
   const handleMenuToggle = useCallback(e => {
     if (e) {
       e.preventDefault();
@@ -79,10 +115,10 @@ const ContextMenu = props => {
   return /*#__PURE__*/_jsxs("div", {
     "data-test-id": "contextMenu",
     ref: elementRef,
-    className: classNames(styles.container, classes.container, 'ui-shared__context-menu'),
+    className: cx(classes.container, parentClasses.container, 'ui-shared__context-menu'),
     children: [showToggle && /*#__PURE__*/_jsx("button", {
-      className: classNames(styles.button, classes.button, {
-        [styles.disabled]: disabled
+      className: cx(classes.button, parentClasses.button, {
+        [classes.disabled]: disabled
       }),
       onClick: handleMenuToggle,
       disabled: disabled,
@@ -99,7 +135,7 @@ const ContextMenu = props => {
       children: /*#__PURE__*/_jsx(FocusTrap, {
         active: active,
         children: /*#__PURE__*/_jsxs("div", {
-          className: styles.overlay,
+          className: classes.overlay,
           children: [/*#__PURE__*/_jsx(Backdrop, {
             isVisible: true,
             level: 0,
@@ -110,8 +146,8 @@ const ContextMenu = props => {
             children: /*#__PURE__*/_jsx(ContextMenuProvider, {
               handleMenuToggle: handleMenuToggle,
               children: /*#__PURE__*/_jsxs("div", {
-                className: classNames(styles.menu, {
-                  [styles.scrollable]: useScroll
+                className: cx(classes.menu, {
+                  [classes.scrollable]: useScroll
                 }),
                 ref: menuRef,
                 tabIndex: "-1",

package/Dialog/components/BasicDialog/index.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 // TODO: Move to ThemeContext
 import BaseDialogGMD from '@shopgate/pwa-ui-material/BaseDialog';
 import BaseDialogIOS from '@shopgate/pwa-ui-ios/BaseDialog';

package/Dialog/components/HtmlContentDialog/spec.js

@@ -5,6 +5,45 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const message = '<p><i>This is a html message.</i></p>';
 const title = 'This is the title.';
 jest.mock('@shopgate/engage/a11y/components');
+jest.mock('@shopgate/engage/components', () => {
+  const mockReact = jest.requireActual('react');
+  function Text({
+    string
+  }) {
+    return mockReact.createElement('span', null, string);
+  }
+  Text.propTypes = {
+    params: () => null
+  };
+  Text.defaultProps = {
+    params: {}
+  };
+  const I18n = {
+    Text
+  };
+  function Ellipsis({
+    children
+  }) {
+    return mockReact.createElement('span', null, children);
+  }
+  function Button({
+    children,
+    onClick,
+    disabled,
+    className
+  }) {
+    return mockReact.createElement('button', {
+      onClick,
+      disabled,
+      className
+    }, children);
+  }
+  return {
+    I18n,
+    Ellipsis,
+    Button
+  };
+});
 describe('<HtmlContentDialog />', () => {
   it('should render with minimal props', () => {
     const wrapper = shallow(/*#__PURE__*/_jsx(HtmlContentDialog, {