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

package/BaseDialog/index.js

@@ -1,10 +1,50 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FocusTrap } from '@shopgate/engage/a11y/components';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import Title from "./components/Title";
 import Content from "./components/Content";
 import Buttons from "./components/Buttons";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const outerGap = 40;
+const useStyles = makeStyles()(theme => ({
+  container: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    width: `calc(100vw - ${outerGap * 2}px)`,
+    maxHeight: `calc(100vh - ${outerGap * 2}px)`,
+    borderRadius: 2,
+    boxShadow: themeConfig.shadows.dialog,
+    background: themeConfig.colors.light,
+    [responsiveMediaQuery('>xs', {
+      webOnly: true
+    })]: {
+      width: `calc(80vh - ${outerGap * 2}px)`,
+      maxHeight: `calc(80vh - ${outerGap * 2}px)`
+    },
+    [responsiveMediaQuery('>md', {
+      webOnly: true
+    })]: {
+      width: `calc(var(--page-content-width) * 0.5 - ${outerGap * 2}px)`,
+      maxHeight: `calc(var(--page-content-width) * 0.5 - ${outerGap * 2}px)`
+    }
+  },
+  content: {
+    padding: theme.spacing(3),
+    overflowY: 'auto'
+  },
+  actions: {
+    alignSelf: 'flex-end',
+    padding: theme.spacing(1)
+  },
+  innerActions: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
+  }
+}));
 
 /**
  * This component renders a basic dialog in Google Material Design.
@@ -15,36 +55,41 @@ import styles from "./style";
  * @param {string | ReactNode} props.title The title of the dialog.
  * @return {JSX.Element} The rendered dialog.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicDialog = ({
   children,
   actions,
   title
-}) => /*#__PURE__*/_jsx(FocusTrap, {
-  children: /*#__PURE__*/_jsxs("div", {
-    className: `${styles.container} ui-material__base-dialog`,
-    "data-test-id": "basicDialog",
-    role: "alertdialog",
-    "aria-modal": true,
-    "aria-labelledby": "basicDialogTitle basicDialogDesc",
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: styles.content,
-      children: [/*#__PURE__*/_jsx(Title, {
-        title: title
-      }), /*#__PURE__*/_jsx(Content, {
-        content: children
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      className: styles.actions,
-      children: /*#__PURE__*/_jsx("div", {
-        className: styles.innerActions,
-        children: /*#__PURE__*/_jsx(Buttons, {
-          actions: actions
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx(FocusTrap, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: cx(classes.container, 'ui-material__base-dialog'),
+      "data-test-id": "basicDialog",
+      role: "alertdialog",
+      "aria-modal": true,
+      "aria-labelledby": "basicDialogTitle basicDialogDesc",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classes.content,
+        children: [/*#__PURE__*/_jsx(Title, {
+          title: title
+        }), /*#__PURE__*/_jsx(Content, {
+          content: children
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: classes.actions,
+        children: /*#__PURE__*/_jsx("div", {
+          className: classes.innerActions,
+          children: /*#__PURE__*/_jsx(Buttons, {
+            actions: actions
+          })
         })
-      })
-    })]
-  })
-});
+      })]
+    })
+  });
+};
 BasicDialog.defaultProps = {
   children: null,
   actions: [],

package/FloatingActionButton/index.js

@@ -1,17 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import colors from "../colors";
-import styles from "./style";
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SIZE_BIG = 'big';
 const SIZE_SMALL = 'small';
+const useStyles = makeStyles()({
+  button: {
+    borderRadius: '50%',
+    outline: 0,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'relative',
+    zIndex: 1,
+    ':disabled': {
+      cursor: 'not-allowed'
+    }
+  },
+  buttonSmall: {
+    height: 40,
+    width: 40
+  },
+  buttonLarge: {
+    height: 56,
+    width: 56
+  },
+  buttonShadow: {
+    boxShadow: themeConfig.shadows.buttons.elevated
+  }
+});
+
 /**
  * The FloatingActionButton component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
 const FloatingActionButton = props => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     background,
     children,
@@ -21,17 +49,17 @@ const FloatingActionButton = props => {
     raised,
     ref,
     size,
-    type
+    type,
+    testId
   } = props;
-  const classes = classNames('floating-action-button', 'ui-material__floating-action-button', styles.button, {
+  const rootClass = cx('floating-action-button', 'ui-material__floating-action-button', classes.button, {
     [className]: className,
-    [styles.buttonSmall]: size === SIZE_SMALL,
-    [styles.buttonSmall]: size === SIZE_SMALL,
-    [styles.buttonLarge]: size === SIZE_BIG,
-    [styles.buttonShadow]: raised
+    [classes.buttonSmall]: size === SIZE_SMALL,
+    [classes.buttonLarge]: size === SIZE_BIG,
+    [classes.buttonShadow]: raised
   });
   return /*#__PURE__*/_jsx("button", {
-    className: classes,
+    className: rootClass,
     disabled: disabled,
     onClick: onClick,
     ref: ref,
@@ -41,12 +69,12 @@ const FloatingActionButton = props => {
     // eslint-disable-next-line react/button-has-type
     ,
     type: type,
-    "data-test-id": props.testId,
+    "data-test-id": testId,
     children: children
   });
 };
 FloatingActionButton.defaultProps = {
-  background: `var(--color-primary, ${colors.primary})`,
+  background: 'var(--color-primary)',
   className: null,
   disabled: false,
   onClick: () => {},

package/NavDrawer/components/Divider/index.js

@@ -1,12 +1,30 @@
 import React from 'react';
-import styles from "./style";
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  root: {
+    // prevent two consecutive dividers
+    '& + hr': {
+      display: 'none'
+    },
+    background: themeColors.darkGray,
+    border: 0,
+    height: 1,
+    margin: '16px 0'
+  }
+});
 
 /**
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-const NavDrawerDivider = () => /*#__PURE__*/_jsx("hr", {
-  "aria-hidden": true,
-  className: styles
-});
+const NavDrawerDivider = () => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("hr", {
+    "aria-hidden": true,
+    className: classes.root
+  });
+};
 export default NavDrawerDivider;

package/NavDrawer/components/Item/index.js

@@ -1,78 +1,104 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { UIEvents } from '@shopgate/pwa-core';
 import { withForwardedRef } from '@shopgate/engage/core';
 import { I18n } from '@shopgate/engage/components';
-import styles from "./style";
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  srOnly: {
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    margin: 0,
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px',
+    zIndex: -1000,
+    '&:first-of-type': {
+      marginTop: 'calc(16px + var(--safe-area-inset-top))'
+    }
+  },
+  button: {
+    alignItems: 'flex-start',
+    color: 'inherit',
+    display: 'flex',
+    fontWeight: 500,
+    outline: 0,
+    padding: '16px 8px 16px 0',
+    position: 'relative',
+    width: '100%',
+    '&:first-of-type': {
+      paddingTop: 'calc(16px + var(--safe-area-inset-top))'
+    }
+  },
+  label: {
+    marginTop: 2,
+    textAlign: 'left'
+  },
+  iconWrapper: {
+    width: 56,
+    flexShrink: 0
+  },
+  icon: {
+    boxSizing: 'content-box',
+    color: themeColors.gray,
+    padding: '0 32px 0 16px'
+  }
+});
 
 /**
  * The NavDrawerItem component.
+ * @param {Object} props The component props.
+ * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let NavDrawerItem = /*#__PURE__*/function (_Component) {
-  function NavDrawerItem(...args) {
-    var _this;
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    /**
-     * Handles an Item click by executing it's href.
-     */
-    _this.handleClick = () => {
-      UIEvents.emit('navdrawer_close');
-      setTimeout(_this.props.onClick, 300);
-    };
-    return _this;
-  }
-  _inheritsLoose(NavDrawerItem, _Component);
-  var _proto = NavDrawerItem.prototype;
-  /**
-   * Only re-render when the label prop changes.
-   * @param {Object} nextProps The next component props.
-   * @returns {boolean}
-   */
-  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
-    return this.props.label !== nextProps.label || this.props['aria-label'] !== nextProps['aria-label'];
-  };
+const NavDrawerItem = ({
+  'aria-hidden': ariaHidden,
+  'aria-label': ariaLabel,
+  badge: Badge,
+  forwardedRef,
+  icon: Icon,
+  label,
+  srOnly,
+  style,
+  testId,
+  onClick
+}) => {
+  const {
+    classes
+  } = useStyles();
+
   /**
-   * Renders the component.
-   * @returns {JSX}
+   * Handles the click event for the NavDrawerItem component.
    */
-  _proto.render = function render() {
-    const {
-      'aria-hidden': ariaHidden,
-      'aria-label': ariaLabel,
-      badge: Badge,
-      forwardedRef,
-      icon: Icon,
-      label,
-      srOnly,
-      style,
-      testId
-    } = this.props;
-    return /*#__PURE__*/_jsxs("button", {
-      ref: forwardedRef,
-      className: srOnly ? styles.srOnly : styles.button,
-      "data-test-id": testId,
-      onClick: this.handleClick,
-      style: style,
-      type: "button",
-      "aria-hidden": ariaHidden,
-      "aria-label": ariaLabel,
-      tabIndex: "0",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: styles.iconWrapper,
-        children: Icon && /*#__PURE__*/_jsx(Icon, {
-          className: styles.icon,
-          size: 24
-        })
-      }), /*#__PURE__*/_jsx(I18n.Text, {
-        className: styles.label,
-        string: label
-      }), Badge && /*#__PURE__*/_jsx(Badge, {})]
-    });
+  const handleClick = () => {
+    UIEvents.emit('navdrawer_close');
+    setTimeout(onClick, 300);
   };
-  return NavDrawerItem;
-}(Component);
+  return /*#__PURE__*/_jsxs("button", {
+    ref: forwardedRef,
+    className: srOnly ? classes.srOnly : classes.button,
+    "data-test-id": testId,
+    onClick: handleClick,
+    style: style,
+    type: "button",
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    tabIndex: "0",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.iconWrapper,
+      children: Icon && /*#__PURE__*/_jsx(Icon, {
+        className: classes.icon,
+        size: 24
+      })
+    }), /*#__PURE__*/_jsx(I18n.Text, {
+      className: classes.label,
+      string: label
+    }), Badge && /*#__PURE__*/_jsx(Badge, {})]
+  });
+};
 NavDrawerItem.defaultProps = {
   'aria-hidden': null,
   'aria-label': null,
@@ -84,4 +110,4 @@ NavDrawerItem.defaultProps = {
   style: {},
   testId: null
 };
-export default withForwardedRef(NavDrawerItem);
+export default withForwardedRef(/*#__PURE__*/memo(NavDrawerItem));

package/NavDrawer/components/Title/index.js

@@ -1,21 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "./style";
+import { I18n } from '@shopgate/engage/components';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  root: {
+    color: themeColors.shade11,
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    margin: '16px 0 0 16px'
+  }
+});
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const NavDrawerTitle = ({
   text
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (!text.length) {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles,
+    className: classes.root,
     children: /*#__PURE__*/_jsx(I18n.Text, {
       string: text
     })