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

package/ScannerOverlay/components/ScannerBar/components/FlashlightButton/index.js

@@ -2,39 +2,65 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { SurroundPortals, ToggleIcon, FlashEnabledIcon, FlashDisabledIcon } from '@shopgate/engage/components';
 import { SCANNER_FLASH } from '@shopgate/engage/scanner/constants';
-import { i18n } from '@shopgate/engage/core';
-import styles from "./style";
+import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  button: {
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'flex',
+    flexShrink: 0,
+    fontSize: 24,
+    height: 44,
+    justifyContent: 'center',
+    outline: 0,
+    padding: 0,
+    position: 'relative',
+    width: 44,
+    zIndex: 1
+  },
+  icon: {
+    boxSizing: 'content-box',
+    color: 'var(--color-secondary)'
+  }
+});
 
 /**
- * The FlashlightButton component.
+ * Renders the flashlight button for the scanner bar.
+ * @param {Object} props Props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FlashlightButton = ({
   flashlightState,
   onToggle
-}) => /*#__PURE__*/_jsxs(SurroundPortals, {
-  portalName: SCANNER_FLASH,
-  children: [/*#__PURE__*/_jsx("button", {
-    className: styles.button,
-    onClick: onToggle,
-    role: "link",
-    type: "button",
-    "aria-label": i18n.text(flashlightState ? 'scanner.flashlight.switchOff' : 'scanner.flashlight.switchOn'),
-    children: /*#__PURE__*/_jsx(ToggleIcon, {
-      on: flashlightState,
-      onIcon: /*#__PURE__*/_jsx(FlashEnabledIcon, {
-        className: styles.icon
-      }),
-      offIcon: /*#__PURE__*/_jsx(FlashDisabledIcon, {
-        className: styles.icon
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsxs(SurroundPortals, {
+    portalName: SCANNER_FLASH,
+    children: [/*#__PURE__*/_jsx("button", {
+      className: classes.button,
+      onClick: onToggle,
+      role: "link",
+      type: "button",
+      "aria-label": i18n.text(flashlightState ? 'scanner.flashlight.switchOff' : 'scanner.flashlight.switchOn'),
+      children: /*#__PURE__*/_jsx(ToggleIcon, {
+        on: flashlightState,
+        onIcon: /*#__PURE__*/_jsx(FlashEnabledIcon, {
+          className: classes.icon
+        }),
+        offIcon: /*#__PURE__*/_jsx(FlashDisabledIcon, {
+          className: classes.icon
+        })
       })
-    })
-  }), /*#__PURE__*/_jsx("div", {
-    className: "sr-only",
-    role: "status",
-    "aria-live": "polite",
-    children: i18n.text(flashlightState ? 'scanner.flashlight.on' : 'scanner.flashlight.off')
-  })]
-});
+    }), /*#__PURE__*/_jsx("div", {
+      className: "sr-only",
+      role: "status",
+      "aria-live": "polite",
+      children: i18n.text(flashlightState ? 'scanner.flashlight.on' : 'scanner.flashlight.off')
+    })]
+  });
+};
 export default FlashlightButton;

package/ScannerOverlay/components/ScannerBar/index.js

@@ -3,38 +3,62 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { Grid, SurroundPortals } from '@shopgate/engage/components';
 import { SCANNER_BAR } from '@shopgate/engage/scanner/constants';
+import { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import FlashlightButton from "./components/FlashlightButton";
 import ScannerInstructions from "./components/ScannerInstructions";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    bottom: 0,
+    backgroundColor: themeColors.overlay,
+    boxShadow: themeShadows.scannerBar,
+    fontSize: 14,
+    alignItems: 'center',
+    paddingBottom: 'var(--safe-area-inset-bottom)'
+  },
+  column: {
+    margin: theme.spacing(2),
+    ':not(:first-of-type)': {
+      marginLeft: 0
+    }
+  }
+}));
 
 /**
- * @param {Object} props The component props.
- * @param {boolean} props.flashlightState The on/off state of the flashlight.
- * @param {Function} props.onToggleFlashlight The toggle event triggered by the user.
- * @returns {React.ReactPortal} A React portal that renders the scanner bar in the AppFooter.
+ * Renders the scanner bar into `#AppFooter` via a portal.
+ * @param {Object} props Props.
+ * @param {boolean} props.flashlightState Flashlight on/off.
+ * @param {Function} props.onToggleFlashlight Toggle handler.
+ * @returns {React.ReactPortal}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ScannerBar = ({
   flashlightState,
   onToggleFlashlight
-}) => /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(SurroundPortals, {
-  portalName: SCANNER_BAR,
-  portalProps: {
-    flashlightState,
-    onToggleFlashlight
-  },
-  children: /*#__PURE__*/_jsxs(Grid, {
-    className: `${styles.container} ui-shared__scanner-bar`,
-    children: [/*#__PURE__*/_jsx(Grid.Item, {
-      className: styles.column,
-      children: /*#__PURE__*/_jsx(FlashlightButton, {
-        onToggle: onToggleFlashlight,
-        flashlightState: flashlightState
-      })
-    }), /*#__PURE__*/_jsx(Grid.Item, {
-      className: styles.column,
-      children: /*#__PURE__*/_jsx(ScannerInstructions, {})
-    })]
-  })
-}), document.getElementById('AppFooter'));
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: SCANNER_BAR,
+    portalProps: {
+      flashlightState,
+      onToggleFlashlight
+    },
+    children: /*#__PURE__*/_jsxs(Grid, {
+      className: cx(classes.container, 'ui-shared__scanner-bar'),
+      children: [/*#__PURE__*/_jsx(Grid.Item, {
+        className: classes.column,
+        children: /*#__PURE__*/_jsx(FlashlightButton, {
+          onToggle: onToggleFlashlight,
+          flashlightState: flashlightState
+        })
+      }), /*#__PURE__*/_jsx(Grid.Item, {
+        className: classes.column,
+        children: /*#__PURE__*/_jsx(ScannerInstructions, {})
+      })]
+    })
+  }), document.getElementById('AppFooter'));
+};
 export default ScannerBar;

package/Sheet/components/Header/components/SearchBar/index.js

@@ -1,36 +1,80 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import Input from '@shopgate/pwa-common/components/Input';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import MagnifierIcon from "../../../../../icons/MagnifierIcon";
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    marginBottom: 4,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 5,
+    paddingBottom: 10
+  },
+  inputWrapper: {
+    position: 'relative',
+    flexGrow: 1
+  },
+  input: {
+    borderRadius: 10,
+    width: '100%',
+    padding: '4px 10px 4px 30px',
+    lineHeight: '28px',
+    outline: 'none',
+    background: themeColors.shade7,
+    verticalAlign: 'middle',
+    WebkitAppearance: 'none'
+  },
+  label: {
+    alignItems: 'center',
+    color: themeColors.shade3,
+    display: 'flex',
+    height: '36px',
+    position: 'absolute',
+    pointerEvents: 'none',
+    width: '100%'
+  },
+  icon: {
+    padding: '0 6px',
+    color: themeColors.shade3,
+    fontSize: '1.235rem'
+  }
+});
 
 /**
- * @return {JSX}
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SearchBar = ({
   handleChange
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [query, setQuery] = useState('');
   const name = 'search';
   return /*#__PURE__*/_jsx("div", {
     className: "ui-shared__sheet__search-field",
     "data-test-id": "SearchField",
     children: /*#__PURE__*/_jsx("div", {
-      className: styles.container,
+      className: classes.container,
       children: /*#__PURE__*/_jsx("div", {
-        className: styles.inputWrapper,
+        className: classes.inputWrapper,
         children: /*#__PURE__*/_jsxs("form", {
           onSubmit: e => {
             e.preventDefault();
           },
           children: [/*#__PURE__*/_jsxs("label", {
             htmlFor: name,
-            className: styles.label,
+            className: classes.label,
             children: [/*#__PURE__*/_jsx("div", {
-              className: styles.icon,
+              className: classes.icon,
               children: /*#__PURE__*/_jsx(MagnifierIcon, {})
             }), !query.length && /*#__PURE__*/_jsx(I18n.Text, {
               string: "search.placeholder"
@@ -38,7 +82,7 @@ const SearchBar = ({
           }), /*#__PURE__*/_jsx(Input, {
             name: name,
             autoComplete: false,
-            className: classNames(styles.input),
+            className: classes.input,
             onChange: value => {
               handleChange(value);
               setQuery(value);

package/Sheet/components/Header/index.js

@@ -1,85 +1,108 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import Grid from '@shopgate/pwa-common/components/Grid';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import Ripple from "../../../Ripple";
 import CrossIcon from "../../../icons/CrossIcon";
-import styles from "./style";
 import SearchBar from "./components/SearchBar";
-
-/**
- * Header component.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let Header = /*#__PURE__*/function (_Component) {
-  function Header() {
-    return _Component.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Header, _Component);
-  var _proto = Header.prototype;
-  /**
-   * @param {Object} nextProps Next Props
-   * @returns {boolean}
-   */
-  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
-    return this.props.shadow !== nextProps.shadow || this.props.title !== nextProps.title;
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    position: 'relative',
+    zIndex: 2
+  },
+  closePlaceholder: {
+    height: themeConfig.variables.navigator.height,
+    padding: 0,
+    lineHeight: 1
+  },
+  closeButton: {
+    lineHeight: 1,
+    outline: 0,
+    padding: 0,
+    minWidth: themeConfig.variables.navigator.height,
+    height: themeConfig.variables.navigator.height,
+    position: 'relative',
+    zIndex: 2,
+    color: theme.palette.text.primary
+  },
+  closeIcon: {
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  title: {
+    fontSize: '1.25rem',
+    fontWeight: 500,
+    position: 'relative',
+    alignItems: 'center',
+    padding: theme.spacing(0, 2),
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    alignSelf: 'center'
+  },
+  headerShadow: {
+    boxShadow: themeConfig.shadows.material
   }
+}));
 
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */;
-  _proto.render = function render() {
-    const {
-      allowClose
-    } = this.props;
-    const classes = classNames(styles.wrapper);
-    const {
-      __
-    } = this.context.i18n();
-    return /*#__PURE__*/_jsxs("div", {
-      className: classNames({
-        [styles.shadow]: this.props.shadow
-      }),
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        className: classes,
-        component: "div",
-        wrap: false,
-        children: [allowClose ? /*#__PURE__*/_jsx("button", {
-          className: styles.closeButton,
-          onClick: this.props.onToggleClose,
-          "aria-label": __('common.close'),
-          type: "button",
-          children: /*#__PURE__*/_jsx(Ripple, {
-            className: styles.closeIcon,
-            children: /*#__PURE__*/_jsx(CrossIcon, {
-              size: 24
-            })
-          })
-        }) : /*#__PURE__*/_jsx("div", {
-          className: styles.closePlaceholder
-        }), /*#__PURE__*/_jsx(Grid.Item, {
-          className: styles.title,
-          component: "div",
-          grow: 1,
-          role: "heading",
-          ...(allowClose ? {
-            tabIndex: 0
-          } : null),
-          children: this.props.title
-        })]
-      }), this.props.showSearch && /*#__PURE__*/_jsx(SearchBar, {
-        handleChange: this.props.handleChange
-      })]
-    });
-  };
-  return Header;
-}(Component);
 /**
- * The component's default props.
- * @type {Object}
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
+const Header = ({
+  title,
+  allowClose,
+  handleChange,
+  onToggleClose,
+  shadow,
+  showSearch
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx({
+      [classes.headerShadow]: shadow
+    }),
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      className: classes.wrapper,
+      component: "div",
+      wrap: false,
+      children: [allowClose ? /*#__PURE__*/_jsx("button", {
+        className: classes.closeButton,
+        onClick: onToggleClose,
+        "aria-label": i18n.text('common.close'),
+        type: "button",
+        children: /*#__PURE__*/_jsx(Ripple, {
+          className: classes.closeIcon,
+          children: /*#__PURE__*/_jsx(CrossIcon, {
+            size: 24
+          })
+        })
+      }) : /*#__PURE__*/_jsx("div", {
+        className: classes.closePlaceholder
+      }), /*#__PURE__*/_jsx(Grid.Item, {
+        className: classes.title,
+        component: "div",
+        grow: 1,
+        role: "heading",
+        ...(allowClose ? {
+          tabIndex: 0
+        } : null),
+        children: title
+      })]
+    }), showSearch && /*#__PURE__*/_jsx(SearchBar, {
+      handleChange: handleChange
+    })]
+  });
+};
 Header.defaultProps = {
   onToggleClose: () => {},
   shadow: false,
@@ -87,7 +110,4 @@ Header.defaultProps = {
   handleChange: () => {},
   showSearch: false
 };
-Header.contextTypes = {
-  i18n: PropTypes.func
-};
-export default Header;
+export default /*#__PURE__*/memo(Header);