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

package/SnackBar/index.js

@@ -1,186 +1,196 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import Color from 'color';
 import { config } from 'react-spring';
 import { Spring } from 'react-spring/renderprops.cjs';
 import Ellipsis from '@shopgate/pwa-common/components/Ellipsis';
-import styles from "./style";
+import { i18n } from '@shopgate/engage/core/helpers';
+import { themeColors, themeShadows } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultToast = {};
+const backgroundColor = themeColors.lightDark;
+const buttonColor = themeColors.accent;
+const buttonColorContrast = Color(buttonColor).contrast(Color(backgroundColor));
+const safeButtonColor = buttonColorContrast > 4 ? buttonColor : themeColors.light;
+const useStyles = makeStyles()({
+  container: {
+    position: 'fixed',
+    height: 'var(--snack-bar-height, 80px)',
+    bottom: 'max(var(--footer-height), var(--safe-area-inset-bottom))',
+    transition: 'bottom 0.3s ease',
+    overflow: 'hidden',
+    zIndex: 6,
+    width: '100%'
+  },
+  wrapper: {
+    top: 'var(--snack-bar-height, 80px)',
+    display: 'flex',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    width: '100%',
+    zIndex: 6
+  },
+  box: {
+    alignItems: 'center',
+    background: backgroundColor,
+    borderRadius: 3,
+    boxShadow: themeShadows.toast,
+    color: themeColors.light,
+    display: 'flex',
+    fontSize: '0.875rem',
+    justifyContent: 'space-between',
+    letterSpacing: 0.5,
+    margin: 16,
+    maxWidth: 344,
+    minHeight: 48,
+    padding: '6px 16px',
+    width: '100%'
+  },
+  label: {
+    lineHeight: 1.4,
+    margin: '6px 0',
+    overflow: 'hidden'
+  },
+  actionButton: {
+    color: safeButtonColor,
+    fontWeight: 500,
+    height: 36,
+    letterSpacing: 'inherit',
+    margin: '0 -8px 0 8px',
+    outline: 0,
+    padding: '0 8px',
+    textTransform: 'uppercase'
+  }
+});
 
 /**
- * The SnackBar component.
+ * Calculates the required amount of rows for the snack bar.
+ * @param {string} message The snack bar message.
+ * @param {string} actionLabel The snack bar action label.
+ * @return {number}
  */
-let SnackBar = /*#__PURE__*/function (_Component) {
-  /**
-   * @param {Object} props The component props.
-   */
-  function SnackBar(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    _this.timer = null;
-    _this.handleAction = () => {
-      clearTimeout(_this.timer);
-      _this.props.toasts[0].action();
-      _this.hide();
-    };
-    _this.handleEntered = () => {
-      _this.timer = setTimeout(_this.hide, _this.props.toasts[0].duration || 2500);
-    };
-    _this.handleRest = () => {
-      if (_this.state.visible) {
-        _this.handleEntered();
-        return;
-      }
-      _this.props.removeToast();
-    };
-    _this.hide = () => {
-      _this.setState({
-        visible: false
-      });
-    };
-    /**
-     * Calculates the required amount of rows for the snack bar.
-     * @param {string} message The snack bar message.
-     * @param {string} actionLabel The snack bar action label.
-     * @return {number}
-     */
-    _this.calcRows = (message, actionLabel) => {
-      /**
-       * Calculates the amount of rows for a passed text.
-       * @param {string} text The input text.
-       * @return {number}
-       */
-      const calc = text => Math.max(2, Math.ceil(text.length / 40));
-      /**
-       * First calculate the required amount of rows for the message. Then append the action label
-       * once per line and calculate the rows again. Since the action label occupies an own column,
-       * we'll get an approximated number for the required rows.
-       */
-      return calc(`${message}${actionLabel.repeat(calc(message))}`);
-    };
-    _this.state = {
-      visible: true
-    };
-    return _this;
-  }
-
-  /**
-   * @param {Object} nextProps The next component props.
-   */
-  _inheritsLoose(SnackBar, _Component);
-  var _proto = SnackBar.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    const hasToast = nextProps.toasts.length > 0;
-    this.setState({
-      visible: hasToast
-    });
-  }
-
+const calcRows = (message, actionLabel) => {
   /**
-   * @param {Object} nextProps The next component props.
-   * @param {Object} nextState The next component state.
-   * @returns {boolean}
-   */;
-  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
-    return this.state.visible !== nextState.visible;
-  };
-  /**
-   * @returns {JSX}
+   * @param {string} text Input text.
+   * @returns {number} Row count for the text.
    */
-  _proto.render = function render() {
-    const {
-      visible
-    } = this.state;
-    const {
-      action = null,
-      actionLabel = null,
-      message = null
-    } = this.snack;
+  const rowsFor = text => Math.max(2, Math.ceil(text.length / 40));
+  return rowsFor(`${message}${actionLabel.repeat(rowsFor(message))}`);
+};
 
-    // Action exits without actionLabel. Handle the whole box
-    const boxProps = {
-      ...(action && !actionLabel && {
-        onClick: this.handleAction
-      })
+/**
+ * The SnackBar component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
+ */
+const SnackBar = ({
+  removeToast,
+  toasts: toastsProp
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const toasts = useMemo(() => toastsProp || [], [toastsProp]);
+  const [visible, setVisible] = useState(true);
+  const visibleRef = useRef(visible);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    visibleRef.current = visible;
+  }, [visible]);
+  useEffect(() => {
+    setVisible(toasts.length > 0);
+  }, [toasts.length]);
+  const snack = useMemo(() => {
+    const raw = toasts.length ? toasts[0] : defaultToast;
+    return {
+      ...raw,
+      message: i18n.text(raw.message || '', raw.messageParams || {}),
+      actionLabel: i18n.text(raw.actionLabel || '')
     };
-
-    // Calculate the required amount of rows and the height of the snack bar.
-    const rows = this.calcRows(message, actionLabel);
-    const snackBarHeight = 40 + rows * 20;
-    return /*#__PURE__*/_jsx("div", {
-      className: `${styles.container} ui-material__snack-bar`,
-      style: {
-        '--snack-bar-height': `${snackBarHeight}px`
+  }, [toasts]);
+  const hide = useCallback(() => {
+    clearTimeout(timerRef.current);
+    setVisible(false);
+  }, []);
+  const handleAction = useCallback(() => {
+    clearTimeout(timerRef.current);
+    if (toasts[0]) {
+      toasts[0].action();
+    }
+    hide();
+  }, [toasts, hide]);
+  const handleRest = useCallback(() => {
+    if (visibleRef.current) {
+      const duration = toasts[0]?.duration || 2500;
+      timerRef.current = setTimeout(hide, duration);
+    } else {
+      removeToast();
+    }
+  }, [toasts, hide, removeToast]);
+  const {
+    action = null,
+    actionLabel = null,
+    message = null
+  } = snack;
+  const boxProps = {
+    ...(action && !actionLabel && {
+      onClick: handleAction
+    })
+  };
+  const rows = calcRows(message, actionLabel);
+  const snackBarHeight = 40 + rows * 20;
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.container, 'ui-material__snack-bar'),
+    style: {
+      '--snack-bar-height': `${snackBarHeight}px`
+    },
+    children: /*#__PURE__*/_jsx(Spring, {
+      from: {
+        top: snackBarHeight
+      },
+      to: {
+        top: 0
       },
-      children: /*#__PURE__*/_jsx(Spring, {
-        from: {
-          top: snackBarHeight
-        },
-        to: {
-          top: 0
-        },
-        config: config.stiff,
-        reverse: !visible,
-        force: true,
-        onRest: this.handleRest,
-        children: props =>
-        /*#__PURE__*/
-        // eslint-disable-next-line max-len
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        _jsx("div", {
-          className: styles.wrapper,
-          style: props,
-          "data-footer-inset-update-ignore": "true",
-          onClick: this.hide,
-          children: /*#__PURE__*/_jsxs("div", {
-            className: styles.box,
-            ...boxProps,
-            children: [/*#__PURE__*/_jsx(Ellipsis, {
-              rows: rows,
-              children: /*#__PURE__*/_jsx("span", {
-                className: styles.label,
-                "aria-live": "assertive",
-                role: "status",
-                children: message
-              })
-            }), action && actionLabel && /*#__PURE__*/_jsx("button", {
-              className: styles.button,
-              onClick: this.handleAction,
-              type: "button",
-              "aria-hidden": true,
-              children: actionLabel
-            })]
-          })
+      config: config.stiff,
+      reverse: !visible,
+      force: true,
+      onRest: handleRest,
+      children: springProps =>
+      /*#__PURE__*/
+      // eslint-disable-next-line max-len
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      _jsx("div", {
+        className: classes.wrapper,
+        style: springProps,
+        "data-footer-inset-update-ignore": "true",
+        onClick: hide,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: classes.box,
+          ...boxProps,
+          children: [/*#__PURE__*/_jsx(Ellipsis, {
+            rows: rows,
+            children: /*#__PURE__*/_jsx("span", {
+              className: classes.label,
+              "aria-live": "assertive",
+              role: "status",
+              children: message
+            })
+          }), action && actionLabel && /*#__PURE__*/_jsx("button", {
+            className: classes.actionButton,
+            onClick: handleAction,
+            type: "button",
+            "aria-hidden": true,
+            children: actionLabel
+          })]
         })
       })
-    });
-  };
-  return _createClass(SnackBar, [{
-    key: "snack",
-    get:
-    /**
-     * Returns the first snack from the state.
-     * @returns {Object}
-     */
-    function () {
-      const {
-        __
-      } = this.context.i18n();
-      const snack = this.props.toasts.length ? this.props.toasts[0] : defaultToast;
-      return {
-        ...snack,
-        message: __(snack.message || '', snack.messageParams || {}),
-        actionLabel: __(snack.actionLabel || '')
-      };
-    }
-  }]);
-}(Component);
+    })
+  });
+};
 SnackBar.defaultProps = {
   toasts: null
 };
-SnackBar.contextTypes = {
-  i18n: PropTypes.func
-};
 export default SnackBar;

package/icons/ShareIcon.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from '@shopgate/pwa-common/components/Icon';
+/**
+ * The Share icon component.
+ */
+declare const ShareIcon: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+export default ShareIcon;
+//# sourceMappingURL=ShareIcon.d.ts.map

package/icons/ShareIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareIcon.d.ts","sourceRoot":"","sources":["../../icons/ShareIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACI,CAAC;AAEzD,eAAe,SAAS,CAAC"}

package/icons/ShareIcon.js

@@ -4,8 +4,6 @@ import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 
 /**
  * The Share icon component.
- * @param {Object} props The icon component properties.
- * @returns {JSX}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const ShareIcon = props => /*#__PURE__*/_jsx(Icon, {

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.30.3",
+  "version": "7.31.0-alpha.1",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.30.3",
+    "@shopgate/pwa-common": "7.31.0-alpha.1",
+    "@types/color": "^4.2.0",
+    "@types/react-transition-group": "^4.4.12",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "redux": "^5.0.1"
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "color": "^3.1.0",
+    "color": "^4.2.3",
     "glamor": "^2.20.40",
     "prop-types": "~15.8.1",
     "react-spring": "^8.0.27",
-    "react-transition-group": "^3.0.0",
+    "react-transition-group": "^4.4.5",
     "react-use": "^17.6.0"
   },
   "peerDependencies": {

package/tsconfig.build.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@shopgate/engage/tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "."
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "**/*.spec.*",
+    "**/__tests__/**",
+    "**/__snapshots__/**",
+    "coverage"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@shopgate/engage/tsconfig.json",
+}

package/Accordion/components/AccordionContent/style.js

@@ -1,9 +0,0 @@
-import { css } from 'glamor';
-export const content = css({
-  overflow: 'hidden',
-  willChange: 'height'
-}).toString();
-export const contentInner = css({
-  padding: '0 16px 16px',
-  overflow: 'hidden'
-}).toString();

package/Accordion/style.js

@@ -1,47 +0,0 @@
-import { css } from 'glamor';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-export const toggle = css({
-  padding: '12px 16px',
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: 12
-}).toString();
-export const clickable = css({
-  cursor: 'pointer'
-}).toString();
-export const toggleLeftAligned = css({
-  flexDirection: 'row-reverse'
-});
-export const chevronContainer = css({
-  display: 'flex',
-  flexShrink: 0,
-  fontSize: '1.5rem',
-  [responsiveMediaQuery('>sm', {
-    webOnly: true
-  })]: {
-    backgroundColor: 'rgba(0, 0, 0, 0.04)',
-    borderRadius: 32,
-    padding: 8
-  }
-}).toString();
-export const labelContainer = css({
-  marginRight: 'auto',
-  display: 'flex',
-  flex: 1,
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: 12
-});
-export const chevron = css({
-  transformOrigin: 'center center',
-  transition: 'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'
-});
-export const chevronClosed = css(chevron, {
-  transform: 'rotateZ(-90deg)'
-}).toString();
-export const chevronOpen = css(chevron, {
-  transform: 'rotateZ(90deg)'
-}).toString();

package/AppBar/components/Field/style.js

@@ -1,14 +0,0 @@
-import { css } from 'glamor';
-const form = css({
-  display: 'flex',
-  flexGrow: 1
-});
-const field = css({
-  outline: 0,
-  padding: '0 16px',
-  width: '100%'
-});
-export default {
-  form,
-  field
-};

package/AppBar/components/Icon/style.js

@@ -1,14 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  color: 'inherit',
-  display: 'flex',
-  flexShrink: 0,
-  fontSize: 24,
-  height: 56,
-  justifyContent: 'center',
-  alignItems: 'center',
-  outline: 0,
-  padding: 0,
-  position: 'relative',
-  width: 56
-});

package/AppBar/components/Title/style.js

@@ -1,11 +0,0 @@
-import { css } from 'glamor';
-export default css({
-  fontSize: 20,
-  fontWeight: 500,
-  flexGrow: 1,
-  lineHeight: '56px',
-  overflow: 'hidden',
-  padding: '0 16px',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});

package/AppBar/style.js

@@ -1,21 +0,0 @@
-import { css } from 'glamor';
-const outer = css({
-  boxSizing: 'content-box',
-  left: 0,
-  paddingTop: 'var(--safe-area-inset-top)',
-  position: 'sticky',
-  top: 0,
-  width: '100%',
-  zIndex: 15
-});
-const inner = css({
-  background: 'inherit',
-  display: 'flex',
-  justifyContent: 'space-between',
-  position: 'relative',
-  zIndex: 14
-});
-export default {
-  outer,
-  inner
-};

package/BaseDialog/style.js

@@ -1,64 +0,0 @@
-import { css } from 'glamor';
-import { responsiveMediaQuery } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const outerGap = 40;
-const container = css({
-  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)`
-  }
-}).toString();
-const content = css({
-  padding: themeConfig.variables.gap.small * 3,
-  overflowY: 'auto'
-}).toString();
-const title = css({
-  fontSize: '1.25em',
-  lineHeight: themeConfig.typography.lineHeight,
-  fontWeight: 500,
-  paddingBottom: themeConfig.variables.gap.small,
-  marginTop: '-.25em'
-}).toString();
-const body = css({
-  color: themeConfig.colors.shade6,
-  flexGrow: 1,
-  overflow: 'auto'
-}).toString();
-const actions = css({
-  alignSelf: 'flex-end',
-  padding: themeConfig.variables.gap.small
-}).toString();
-const innerActions = css({
-  display: 'flex',
-  flexWrap: 'wrap',
-  justifyContent: 'flex-end'
-}).toString();
-const button = css({
-  marginRight: `-${themeConfig.variables.gap.small / 2}px`,
-  textAlign: 'right'
-}).toString();
-export default {
-  container,
-  content,
-  title,
-  body,
-  actions,
-  innerActions,
-  button
-};

package/FloatingActionButton/style.js

@@ -1,33 +0,0 @@
-import { css } from 'glamor';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-const {
-  shadows
-} = themeConfig;
-const button = css({
-  borderRadius: '50%',
-  outline: 0,
-  overflow: 'hidden',
-  padding: 0,
-  position: 'relative',
-  zIndex: 1,
-  ':disabled': {
-    cursor: 'not-allowed'
-  }
-}).toString();
-const buttonSmall = css({
-  height: 40,
-  width: 40
-});
-const buttonLarge = css({
-  height: 56,
-  width: 56
-});
-const buttonShadow = css({
-  boxShadow: shadows.buttons.elevated
-});
-export default {
-  button,
-  buttonSmall,
-  buttonLarge,
-  buttonShadow
-};

package/NavDrawer/components/Divider/style.js

@@ -1,12 +0,0 @@
-import { css } from 'glamor';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
-export default css({
-  // prevent two consecutive dividers
-  ' + hr': {
-    display: 'none'
-  },
-  background: themeColors.darkGray,
-  border: 0,
-  height: 1,
-  margin: '16px 0'
-});