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

package/Accordion/components/AccordionContent/index.js

@@ -1,28 +1,41 @@
-import * as React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { useSpring, animated } from 'react-spring';
 import { useMeasure } from 'react-use';
-import * as styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  content: {
+    overflow: 'hidden',
+    willChange: 'height'
+  },
+  contentInner: {
+    padding: '0 16px 16px',
+    overflow: 'hidden'
+  }
+});
 
 /**
  * The accordion content component.
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-function AccordionContent(props) {
+const AccordionContent = props => {
   const {
     children,
     open,
     id,
     className
   } = props;
-  const [contentHeight, setContentHeight] = React.useState(0);
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [contentHeight, setContentHeight] = useState(0);
   const [ref, {
     height
   }] = useMeasure();
-  React.useEffect(() => {
+  useEffect(() => {
     setContentHeight(height);
     window.addEventListener('resize', setContentHeight(height));
     return () => {
@@ -38,19 +51,19 @@ function AccordionContent(props) {
     height: open ? contentHeight : 0
   });
   return /*#__PURE__*/_jsx(animated.div, {
-    className: classnames('ui-material__accordion-content', styles.content),
+    className: cx('ui-material__accordion-content', classes.content),
     style: expand,
     id: id,
     "aria-hidden": !open,
     children: /*#__PURE__*/_jsx("div", {
       ref: ref,
       children: /*#__PURE__*/_jsx("div", {
-        className: classnames(styles.contentInner, className),
+        className: cx(classes.contentInner, className),
         children: children
       })
     })
   });
-}
+};
 AccordionContent.defaultProps = {
   open: false,
   className: null

package/Accordion/index.js

@@ -1,12 +1,60 @@
 import "core-js/modules/es.string.replace.js";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import noop from 'lodash/noop';
 import { AccordionContainer, ChevronIcon } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import AccordionContent from "./components/AccordionContent";
-import * as styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+const useStyles = makeStyles()({
+  toggle: {
+    padding: '12px 16px',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12
+  },
+  clickable: {
+    cursor: 'pointer'
+  },
+  toggleLeftAligned: {
+    flexDirection: 'row-reverse'
+  },
+  chevronContainer: {
+    display: 'flex',
+    flexShrink: 0,
+    fontSize: '1.5rem',
+    [responsiveMediaQuery('>sm', {
+      webOnly: true
+    })]: {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)',
+      borderRadius: 32,
+      padding: 8
+    }
+  },
+  labelContainer: {
+    marginRight: 'auto',
+    display: 'flex',
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12
+  },
+  chevronClosed: {
+    transformOrigin: 'center center',
+    transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    transform: 'rotateZ(-90deg)'
+  },
+  chevronOpen: {
+    transformOrigin: 'center center',
+    transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    transform: 'rotateZ(90deg)'
+  }
+});
 
 /**
  * Accordion component
@@ -27,9 +75,7 @@ import * as styles from "./style";
  * for the accordion header
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-function Accordion(props) {
+const Accordion = props => {
   const {
     renderLabel,
     handleLabel,
@@ -44,6 +90,10 @@ function Accordion(props) {
     chevronPosition,
     renderAdditionalHeaderContent
   } = props;
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!renderLabel || !children) {
     return null;
   }
@@ -64,7 +114,7 @@ function Accordion(props) {
         };
         return /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsxs("div", {
-            className: classnames('ui-material__accordion-title', className, styles.toggle),
+            className: cx('ui-material__accordion-title', classes.toggle, className),
             "data-test-id": testId,
             children: [/*#__PURE__*/_createElement("div", {
               ...(openWithChevron ? {} : clickHandlers),
@@ -72,19 +122,19 @@ function Accordion(props) {
               "aria-expanded": open,
               "aria-controls": controlsId,
               "aria-label": handleLabel,
-              className: classnames(styles.labelContainer, {
-                [styles.toggleLeftAligned]: chevronPosition === 'left'
+              className: cx(classes.labelContainer, {
+                [classes.toggleLeftAligned]: chevronPosition === 'left'
               })
             }, renderLabel({
               open
             }), /*#__PURE__*/_jsx("div", {
-              className: classnames(styles.chevronContainer, chevronClassName, {
-                [styles.clickable]: openWithChevron
+              className: cx(classes.chevronContainer, chevronClassName, {
+                [classes.clickable]: openWithChevron
               }),
               ...(openWithChevron ? clickHandlers : {}),
               "aria-label": i18n.text(open ? 'favorites.close_list' : 'favorites.open_list'),
               children: /*#__PURE__*/_jsx(ChevronIcon, {
-                className: open ? styles.chevronOpen : styles.chevronClosed
+                className: open ? classes.chevronOpen : classes.chevronClosed
               })
             })), renderAdditionalHeaderContent && /*#__PURE__*/_jsx("div", {
               children: renderAdditionalHeaderContent()
@@ -99,7 +149,7 @@ function Accordion(props) {
       }
     })
   });
-}
+};
 Accordion.defaultProps = {
   children: null,
   renderAdditionalHeaderContent: null,

package/AppBar/components/Field/index.js

@@ -1,50 +1,48 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  form: {
+    display: 'flex',
+    flexGrow: 1
+  },
+  field: {
+    outline: 0,
+    padding: '0 16px',
+    width: '100%'
+  }
+});
 
 /**
  * The AppBarField component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let AppBarField = /*#__PURE__*/function (_PureComponent) {
-  function AppBarField() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-  _inheritsLoose(AppBarField, _PureComponent);
-  var _proto = AppBarField.prototype;
-  /**
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      fieldRef,
-      onChange,
-      onSubmit
-    } = this.props;
-    const {
-      __
-    } = this.context.i18n();
-    return /*#__PURE__*/_jsx("form", {
-      className: styles.form,
-      onSubmit: onSubmit,
-      children: /*#__PURE__*/_jsx("input", {
-        className: styles.field,
-        onChange: onChange,
-        placeholder: __('search.placeholder'),
-        ref: fieldRef,
-        "data-test-id": "searchInput"
-      })
-    });
-  };
-  return AppBarField;
-}(PureComponent);
+const AppBarField = ({
+  fieldRef,
+  onChange,
+  onSubmit
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("form", {
+    className: classes.form,
+    onSubmit: onSubmit,
+    children: /*#__PURE__*/_jsx("input", {
+      className: classes.field,
+      onChange: onChange,
+      placeholder: i18n.text('search.placeholder'),
+      ref: fieldRef,
+      "data-test-id": "searchInput"
+    })
+  });
+};
 AppBarField.defaultProps = {
   fieldRef: null,
   onChange: null,
   onSubmit: null
 };
-AppBarField.contextTypes = {
-  i18n: PropTypes.func
-};
 export default AppBarField;

package/AppBar/components/Icon/index.js

@@ -1,48 +1,56 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  root: {
+    color: 'inherit',
+    display: 'flex',
+    flexShrink: 0,
+    fontSize: 24,
+    height: 56,
+    justifyContent: 'center',
+    alignItems: 'center',
+    outline: 0,
+    padding: 0,
+    position: 'relative',
+    width: 56
+  }
+});
 
 /**
  * The AppBarIcon component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let AppBarIcon = /*#__PURE__*/function (_PureComponent) {
-  function AppBarIcon() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-  _inheritsLoose(AppBarIcon, _PureComponent);
-  var _proto = AppBarIcon.prototype;
-  /**
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    const {
+const AppBarIcon = props => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    background,
+    badge: Badge,
+    color,
+    icon: Icon,
+    onClick,
+    testId,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel
+  } = props;
+  return /*#__PURE__*/_jsxs("button", {
+    className: classes.root,
+    onClick: onClick,
+    style: {
       background,
-      badge: Badge,
-      color,
-      icon: Icon,
-      onClick,
-      testId,
-      'aria-hidden': ariaHidden,
-      'aria-label': ariaLabel
-    } = this.props;
-    return /*#__PURE__*/_jsxs("button", {
-      className: styles,
-      onClick: onClick,
-      style: {
-        background,
-        color
-      },
-      "data-test-id": testId,
-      "aria-hidden": ariaHidden,
-      "aria-label": ariaLabel,
-      type: "button",
-      children: [/*#__PURE__*/_jsx(Icon, {}), Badge && /*#__PURE__*/_jsx(Badge, {})]
-    });
-  };
-  return AppBarIcon;
-}(PureComponent);
+      color
+    },
+    "data-test-id": testId,
+    "aria-hidden": ariaHidden,
+    "aria-label": ariaLabel,
+    type: "button",
+    children: [/*#__PURE__*/_jsx(Icon, {}), Badge && /*#__PURE__*/_jsx(Badge, {})]
+  });
+};
 AppBarIcon.defaultProps = {
   'aria-hidden': null,
   'aria-label': null,

package/AppBar/components/Title/index.js

@@ -1,47 +1,53 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  root: {
+    fontSize: 20,
+    fontWeight: 500,
+    flexGrow: 1,
+    lineHeight: '56px',
+    overflow: 'hidden',
+    padding: '0 16px',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+});
 
 /**
  * The AppBarTitle component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element|null}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let AppBarTitle = /*#__PURE__*/function (_PureComponent) {
-  function AppBarTitle() {
-    return _PureComponent.apply(this, arguments) || this;
+const AppBarTitle = ({
+  onClick,
+  title
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  if (!title) {
+    return null;
   }
-  _inheritsLoose(AppBarTitle, _PureComponent);
-  var _proto = AppBarTitle.prototype;
-  /**
-   * @returns {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      onClick,
-      title
-    } = this.props;
-    if (!title) return null;
-    return /*#__PURE__*/_jsx("div", {
-      className: classNames(styles, 'theme__app-bar__title'),
-      role: "heading",
-      "aria-labelledby": "titleLabel",
-      "aria-level": "1",
-      "data-test-id": `title: ${title}`,
-      tabIndex: -1,
-      children: /*#__PURE__*/_jsx("span", {
-        role: "presentation",
-        onClick: onClick,
-        id: "titleLabel",
-        dangerouslySetInnerHTML: {
-          __html: title
-        }
-      })
-    });
-  };
-  return AppBarTitle;
-}(PureComponent);
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.root, 'theme__app-bar__title'),
+    role: "heading",
+    "aria-labelledby": "titleLabel",
+    "aria-level": "1",
+    "data-test-id": `title: ${title}`,
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx("span", {
+      role: "presentation",
+      onClick: onClick,
+      id: "titleLabel",
+      dangerouslySetInnerHTML: {
+        __html: title
+      }
+    })
+  });
+};
 AppBarTitle.defaultProps = {
   onClick: null
 };

package/AppBar/index.js

@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
 import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
-import { setCSSCustomProp } from '@shopgate/engage/styles';
+import { makeStyles, setCSSCustomProp } from '@shopgate/engage/styles';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { APP_BAR_CONTENT } from '@shopgate/engage/core/constants';
 import Field from "./components/Field";
@@ -12,13 +12,30 @@ import Right from "./components/Right";
 import Center from "./components/Center";
 import Left from "./components/Left";
 import Below from "./components/Below";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  outer: {
+    boxSizing: 'content-box',
+    left: 0,
+    paddingTop: 'var(--safe-area-inset-top)',
+    position: 'sticky',
+    top: 0,
+    width: '100%',
+    zIndex: 15
+  },
+  inner: {
+    background: 'inherit',
+    display: 'flex',
+    justifyContent: 'space-between',
+    position: 'relative',
+    zIndex: 14
+  }
+});
 
 /**
  * Updates the --app-bar-height custom property
  * @param {Object} ref The app bar ref.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const updateAppBarHeight = ref => {
   if (!ref.current) {
     return;
@@ -40,6 +57,10 @@ const AppBar = ({
   textColor,
   shadow
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const contentRef = useRef(null);
   const style = useMemo(() => ({
     background: backgroundColor,
@@ -60,14 +81,14 @@ const AppBar = ({
   }, [contentRef, observer]);
   return /*#__PURE__*/_jsxs("header", {
     ref: contentRef,
-    className: `${styles.outer} ui-material__app-bar`,
+    className: cx(classes.outer, 'ui-material__app-bar'),
     "data-test-id": "Navigator",
     role: "banner",
     style: style,
     children: [/*#__PURE__*/_jsx(SurroundPortals, {
       portalName: APP_BAR_CONTENT,
       children: /*#__PURE__*/_jsxs("div", {
-        className: styles.inner,
+        className: classes.inner,
         children: [/*#__PURE__*/_jsx(Left, {
           elements: left
         }), /*#__PURE__*/_jsx(Center, {

package/BaseDialog/components/Buttons/index.js

@@ -1,30 +1,41 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import Button from '@shopgate/pwa-ui-shared/Button';
-import styles from "../../style";
+import { I18n, Button } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  button: {
+    marginRight: theme.spacing(-0.5),
+    textAlign: 'right'
+  }
+}));
 
 /**
+ * Buttons component.
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Buttons = ({
   actions
-}) => actions.map(({
-  label,
-  action,
-  disabled = false
-}) => /*#__PURE__*/_jsx(Button, {
-  className: styles.button,
-  flat: true,
-  type: "primary",
-  onClick: action,
-  disabled: disabled,
-  children: /*#__PURE__*/_jsx(I18n.Text, {
-    string: label
-  })
-}, label));
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return actions.map(({
+    label,
+    action,
+    disabled = false
+  }) => /*#__PURE__*/_jsx(Button, {
+    className: classes.button,
+    flat: true,
+    type: "primary",
+    onClick: action,
+    disabled: disabled,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: label
+    })
+  }, label));
+};
 Buttons.defaultProps = {
   actions: []
 };

package/BaseDialog/components/Content/index.js

@@ -1,20 +1,31 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-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 useStyles = makeStyles()({
+  body: {
+    color: themeConfig.colors.shade6,
+    flexGrow: 1,
+    overflow: 'auto'
+  }
+});
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Content = ({
   content
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (!content) {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles.body,
+    className: classes.body,
     id: "basicDialogDesc",
     children: content
   });

package/BaseDialog/components/Title/index.js

@@ -1,22 +1,34 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "../../style";
+import { I18n, Ellipsis } from '@shopgate/engage/components';
+import { themeConfig } from '@shopgate/engage';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  title: {
+    fontSize: '1.25em',
+    lineHeight: themeConfig.typography.lineHeight,
+    fontWeight: 500,
+    paddingBottom: theme.spacing(1),
+    marginTop: '-.25em'
+  }
+}));
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Title = ({
   title
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (!title) {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles.title,
+    className: classes.title,
     id: "basicDialogTitle",
     role: "heading",
     "aria-level": "2",