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

package/FormElement/index.js

@@ -1,97 +1,74 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import Label from "./components/Label";
 import Underline from "./components/Underline";
 import ErrorText from "./components/ErrorText";
 import Placeholder from "./components/Placeholder";
-import style from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  formElement: {
+    position: 'relative',
+    paddingBottom: theme.spacing(2),
+    width: '100%'
+  }
+}));
 
 /**
  * A component that provides a styled form element in material design.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let FormElement = /*#__PURE__*/function (_Component) {
-  function FormElement() {
-    return _Component.apply(this, arguments) || this;
-  }
-  _inheritsLoose(FormElement, _Component);
-  var _proto = FormElement.prototype;
-  /**
-   * @return {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      isFocused,
-      errorText,
-      translateErrorText,
-      placeholder,
-      hasLeftElement,
-      hasPlaceholder,
-      htmlFor,
-      label,
-      className,
-      disabled,
-      labelStatic,
-      showErrorText
-    } = this.props;
-    return /*#__PURE__*/_jsxs("div", {
-      className: classNames(style.formElement, className, 'formElement', 'ui-shared__form-element', {
-        disabled
-      }),
-      children: [hasPlaceholder && (placeholder || label) && /*#__PURE__*/_jsx(Placeholder, {
-        visible: this.isPlaceholderVisible,
-        placeholder: placeholder || label,
-        hasLeftElement: hasLeftElement,
-        "aria-hidden": true
-      }), label && /*#__PURE__*/_jsx(Label, {
-        htmlFor: htmlFor,
-        label: label,
-        labelStatic: labelStatic,
-        isFocused: isFocused,
-        isFloating: this.isLabelFloating,
-        hasErrorMessage: this.hasErrorMessage
-      }), this.props.children, this.props.hasUnderline && /*#__PURE__*/_jsx(Underline, {
-        isFocused: isFocused,
-        hasErrorMessage: this.hasErrorMessage
-      }), errorText && showErrorText && /*#__PURE__*/_jsx(ErrorText, {
-        errorText: errorText,
-        translate: translateErrorText,
-        elementName: htmlFor
-      })]
-    });
-  };
-  return _createClass(FormElement, [{
-    key: "isLabelFloating",
-    get:
-    /**
-     * @returns {boolean} Whether the label is currently floating.
-     */
-    function () {
-      return !this.props.labelStatic && (this.props.isFocused || this.props.hasValue);
-    }
-
-    /**
-     * @returns {boolean} Whether the hint text is currently visible.
-     */
-  }, {
-    key: "isPlaceholderVisible",
-    get: function () {
-      return !this.props.isFocused && !this.props.hasValue;
-    }
-
-    /**
-     * @returns {boolean} Whether the hint text is currently visible.
-     */
-  }, {
-    key: "hasErrorMessage",
-    get: function () {
-      return !!this.props.errorText;
-    }
-  }]);
-}(Component);
+const FormElement = ({
+  children,
+  className,
+  disabled,
+  errorText,
+  hasLeftElement,
+  hasPlaceholder,
+  hasUnderline,
+  hasValue,
+  htmlFor,
+  isFocused,
+  label,
+  labelStatic,
+  placeholder,
+  showErrorText,
+  translateErrorText
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const isLabelFloating = !labelStatic && (isFocused || hasValue);
+  const isPlaceholderVisible = !isFocused && !hasValue;
+  const hasErrorMessage = !!errorText;
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(classes.formElement, className, 'formElement', 'ui-shared__form-element', {
+      disabled
+    }),
+    children: [hasPlaceholder && (placeholder || label) && /*#__PURE__*/_jsx(Placeholder, {
+      visible: isPlaceholderVisible,
+      placeholder: placeholder || label,
+      hasLeftElement: hasLeftElement,
+      "aria-hidden": true
+    }), label && /*#__PURE__*/_jsx(Label, {
+      htmlFor: htmlFor,
+      label: label,
+      labelStatic: labelStatic,
+      isFocused: isFocused,
+      isFloating: isLabelFloating,
+      hasErrorMessage: hasErrorMessage
+    }), children, hasUnderline && /*#__PURE__*/_jsx(Underline, {
+      isFocused: isFocused,
+      hasErrorMessage: hasErrorMessage
+    }), errorText && showErrorText && /*#__PURE__*/_jsx(ErrorText, {
+      errorText: errorText,
+      translate: translateErrorText,
+      elementName: htmlFor
+    })]
+  });
+};
 FormElement.defaultProps = {
   children: null,
   className: '',

package/Glow/index.js

@@ -1,95 +1,85 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { withForwardedRef } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    position: 'relative'
+  },
+  glow: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    background: 'transparent',
+    transition: 'background 100ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+    zIndex: 0
+  }
+});
 
 /**
  * Renders a glowing component that is visible when the user interacts with the element.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let Glow = /*#__PURE__*/function (_Component) {
-  /**
-   * The component constructor.
-   * @param {Object} props The component props.
-   */
-  function Glow(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    _this.handleTouchTap = () => {
-      if (_this.props.disabled) {
-        return;
-      }
-      _this.setState({
-        hover: true
-      });
-      _this.timeout = setTimeout(() => {
-        _this.setState({
-          hover: false
-        });
-      }, 250);
-    };
-    _this.timeout = null;
-    _this.state = {
-      hover: false
-    };
-    return _this;
-  }
-
-  /**
-   * Clears any previously set timeout.
-   */
-  _inheritsLoose(Glow, _Component);
-  var _proto = Glow.prototype;
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    clearTimeout(this.timeout);
-  };
-  /**
-   * Renders the component.
-   * @returns {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      children,
-      styles: propStyles,
-      forwardedRef,
-      className,
-      color,
-      ...rest
-    } = this.props;
-    let innerInlineStyles;
-    if (this.state.hover) {
-      innerInlineStyles = {
-        ...propStyles.glow,
-        ...propStyles.hover,
-        background: color
-      };
-    } else {
-      innerInlineStyles = {
-        ...propStyles.glow
-      };
+const Glow = ({
+  children,
+  className,
+  color,
+  disabled,
+  forwardedRef,
+  styles: propStyles = {
+    container: null,
+    glow: null,
+    hover: null
+  },
+  ...rest
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [hover, setHover] = useState(false);
+  const timeoutRef = useRef(null);
+  useEffect(() => () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
     }
-
-    /* eslint-disable jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events */
-    return /*#__PURE__*/_jsxs("div", {
-      ...rest,
-      className: classNames(styles.container, className, 'ui-shared__glow'),
-      onClick: this.handleTouchTap,
-      style: propStyles.container,
-      ref: forwardedRef,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: styles.glow,
-        style: innerInlineStyles
-      }), children]
-    });
-    /* eslint-enable jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events */
+  }, []);
+  const handleTouchTap = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    setHover(true);
+    timeoutRef.current = setTimeout(() => setHover(false), 250);
+  }, [disabled]);
+  const innerInlineStyles = hover ? {
+    ...propStyles.glow,
+    ...propStyles.hover,
+    background: color
+  } : {
+    ...propStyles.glow
   };
-  return Glow;
-}(Component);
+
+  /* eslint-disable jsx-a11y/no-static-element-interactions,
+  jsx-a11y/click-events-have-key-events */
+  return /*#__PURE__*/_jsxs("div", {
+    ...rest,
+    className: cx(classes.container, className, 'ui-shared__glow'),
+    onClick: handleTouchTap,
+    style: propStyles.container,
+    ref: forwardedRef,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.glow,
+      style: innerInlineStyles
+    }), children]
+  });
+  /* eslint-enable jsx-a11y/no-static-element-interactions,
+  jsx-a11y/click-events-have-key-events */
+};
 Glow.defaultProps = {
   color: themeConfig.colors.shade8,
   className: null,

package/IndicatorCircle/index.js

@@ -1,7 +1,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import styles from "./style";
+import { makeStyles, keyframes } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const rotate = keyframes({
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+const dash = keyframes({
+  '0%': {
+    strokeDasharray: '1, 200',
+    strokeDashoffset: '0'
+  },
+  '50%': {
+    strokeDasharray: '89, 200',
+    strokeDashoffset: '-35px'
+  },
+  '100%': {
+    strokeDasharray: '89, 200',
+    strokeDashoffset: '-124px'
+  }
+});
+const useStyles = makeStyles()((_theme, {
+  paused,
+  color,
+  strokeWidth
+}) => ({
+  spinner: {
+    margin: 'auto',
+    transformOrigin: 'center center',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    ...(!paused ? {
+      animation: `${rotate} 1.6s linear infinite`
+    } : {})
+  },
+  circle: {
+    fill: 'none',
+    stroke: color,
+    strokeDasharray: '1, 200',
+    strokeDashoffset: 0,
+    strokeLinecap: 'round',
+    strokeMiterlimit: 10,
+    strokeWidth,
+    ...(!paused ? {
+      animation: `${dash} 1.2s ease-in-out infinite`
+    } : {})
+  }
+}));
 
 /**
  * The circle indicator component.
@@ -12,28 +59,37 @@ import styles from "./style";
  * @param {boolean} props.paused Animation should be paused.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const IndicatorCircle = ({
   size,
   color,
   strokeWidth,
   paused
-}) => /*#__PURE__*/_jsx("svg", {
-  className: `${styles.spinner(paused)} ui-shared__indicator-circle`,
-  viewBox: "25 25 50 50",
-  width: size,
-  height: size,
-  xmlns: "http://www.w3.org/2000/svg",
-  "data-test-id": "loadingIndicator",
-  children: /*#__PURE__*/_jsx("circle", {
-    className: styles.circle(color, strokeWidth, paused),
-    cx: "50",
-    cy: "50",
-    r: "20"
-  })
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    paused,
+    color,
+    strokeWidth
+  });
+  return /*#__PURE__*/_jsx("svg", {
+    className: cx(classes.spinner, 'ui-shared__indicator-circle'),
+    viewBox: "25 25 50 50",
+    width: size,
+    height: size,
+    xmlns: "http://www.w3.org/2000/svg",
+    "data-test-id": "loadingIndicator",
+    children: /*#__PURE__*/_jsx("circle", {
+      className: classes.circle,
+      cx: "50",
+      cy: "50",
+      r: "20"
+    })
+  });
+};
 IndicatorCircle.defaultProps = {
-  color: `var(--color-secondary, ${themeConfig.colors.accent})`,
+  color: 'var(--color-secondary)',
   paused: false,
   size: themeConfig.variables.loadingIndicator.size,
   strokeWidth: themeConfig.variables.loadingIndicator.strokeWidth

package/IndicatorCircle/spec.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import IndicatorCircle from "./index";
-import styles from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<IndicatorCircle />', () => {
   it('should apply the given size', () => {
@@ -20,10 +19,8 @@ describe('<IndicatorCircle />', () => {
       strokeWidth: 4
     }));
     expect(wrapper).toMatchSnapshot();
-    const correctCssClass = styles.circle('#fff', 4, false);
-    const wrongCssClass = styles.circle('#000', 0);
     const circleHtml = wrapper.find('circle');
-    expect(circleHtml.html().indexOf(correctCssClass)).toBeGreaterThanOrEqual(0);
-    expect(circleHtml.html().indexOf(wrongCssClass)).toBe(-1);
+    expect(circleHtml.html()).toMatch(/class="[^"]*"/);
+    expect(circleHtml.html()).not.toEqual('');
   });
 });

package/LoadingIndicator/index.js

@@ -1,15 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { themeConfig } from '@shopgate/engage';
+import { makeStyles } from '@shopgate/engage/styles';
 import IndicatorCircle from "../IndicatorCircle";
-import { container, imgContainer } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   loadingIndicator: {
     imgSrc: loadingImageSrc
   } = {}
 } = themeConfig.variables;
+const useStyles = makeStyles()(() => ({
+  container: {
+    display: 'block',
+    padding: '1em',
+    textAlign: 'center',
+    fontSize: '1.5em',
+    color: 'var(--color-secondary)'
+  },
+  imgContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    '& img': {
+      maxWidth: '50vw',
+      maxHeight: '50vh'
+    }
+  }
+}));
 
 /**
  * Renders a loading indicator.
@@ -17,16 +33,22 @@ const {
  */
 const LoadingIndicator = ({
   className
-}) => /*#__PURE__*/_jsx("div", {
-  className: classNames(className, {
-    [container]: !loadingImageSrc,
-    [imgContainer]: !!loadingImageSrc
-  }, 'loading-indicator', 'ui-shared__loading-indicator'),
-  children: loadingImageSrc ? /*#__PURE__*/_jsx("img", {
-    src: loadingImageSrc,
-    alt: ""
-  }) : /*#__PURE__*/_jsx(IndicatorCircle, {})
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(className, {
+      [classes.container]: !loadingImageSrc,
+      [classes.imgContainer]: !!loadingImageSrc
+    }, 'loading-indicator', 'ui-shared__loading-indicator'),
+    children: loadingImageSrc ? /*#__PURE__*/_jsx("img", {
+      src: loadingImageSrc,
+      alt: ""
+    }) : /*#__PURE__*/_jsx(IndicatorCircle, {})
+  });
+};
 LoadingIndicator.defaultProps = {
   className: null
 };

package/Manufacturer/index.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  root: {
+    color: 'var(--color-primary)'
+  }
+}));
 
 /**
  * The manufacturer component.
@@ -9,18 +15,23 @@ import styles from "./style";
  * @param {string} [props.className] CSS classes.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Manufacturer = ({
   className,
   text
-}) => /*#__PURE__*/_jsx("div", {
-  className: `${styles} ${className} ui-shared__manufacturer`,
-  children: /*#__PURE__*/_jsx("span", {
-    dangerouslySetInnerHTML: {
-      __html: text
-    }
-  })
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.root, className, 'ui-shared__manufacturer'),
+    children: /*#__PURE__*/_jsx("span", {
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    })
+  });
+};
 Manufacturer.defaultProps = {
   className: ''
 };

package/MessageBar/index.js

@@ -1,45 +1,19 @@
-import React, { memo } from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import { i18n } from '@shopgate/engage/core';
-import styles from "./style";
+import React, { useEffect } from 'react';
+import { logger } from '@shopgate/engage/core/helpers';
+import { MessageBar } from '@shopgate/engage/components';
 
 /**
- * The MessageBar component.
+ * @deprecated Use `import { MessageBar } from '@shopgate/engage/components'` instead.
  * @param {Object} props The component props.
- * @param {Array} props.messages The message content.
- * @param {Object} props.classNames Styling.
  * @returns {JSX}
- * @deprecated Please import from `@shopgate/engage/components` instead.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const MessageBar = /*#__PURE__*/memo(({
-  messages,
-  classNames
-}) => /*#__PURE__*/_jsx("div", {
-  className: classnames(styles.container, classNames.container, 'ui-shared__message-bar'),
-  role: messages.length > 0 ? 'alert' : null,
-  children: messages.map(item => {
-    const {
-      type = 'info',
-      message,
-      messageParams = null,
-      translated
-    } = item;
-    const messageOutput = !translated ? i18n.text(message, messageParams) : message;
-    return /*#__PURE__*/_jsx("div", {
-      className: classnames(classNames.message, styles[type]),
-      children: /*#__PURE__*/_jsx("span", {
-        "aria-hidden": true,
-        children: messageOutput
-      })
-    }, `${type}-${message}`);
-  })
-}));
-MessageBar.defaultProps = {
-  classNames: {
-    container: null,
-    message: null
-  }
+const DeprecatedMessageBar = props => {
+  useEffect(() => {
+    logger.warn('===== MessageBar deprecated =====\n' + 'The MessageBar component ' + '(@shopgate/pwa-ui-shared/MessageBar) is deprecated.\n' + 'Please use: import { MessageBar } from \'@shopgate/engage/components\'.\n' + '===================================');
+  }, []);
+  return /*#__PURE__*/_jsx(MessageBar, {
+    ...props
+  });
 };
-export default MessageBar;
+export default DeprecatedMessageBar;