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

package/TextField/components/FormElement/index.js

@@ -1,19 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Input from '@shopgate/pwa-common/components/Input';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  input: {
+    position: 'relative',
+    padding: 0,
+    width: '100%',
+    marginTop: 24,
+    outline: 0,
+    fontSize: 16,
+    lineHeight: '19px'
+  },
+  multiLine: {
+    position: 'relative',
+    marginTop: 24,
+    marginBottom: 3,
+    padding: 0,
+    width: '100%',
+    outline: 0,
+    height: 19,
+    minHeight: 19,
+    lineHeight: '19px',
+    verticalAlign: 'top'
+  }
+});
 
 /**
  * Creates an input or a multiLine based on the type prop.
  * @param {Object} props The props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const FormElement = props => {
-  const styleType = props.multiLine ? 'multiLine' : 'input';
+  const {
+    classes
+  } = useStyles();
   return /*#__PURE__*/_jsx(Input, {
     ...props,
-    className: styles[styleType],
+    className: props.multiLine ? classes.multiLine : classes.input,
     validateOnBlur: true
   });
 };

package/TextField/components/Hint/index.js

@@ -1,8 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "./style";
+import { I18n } from '@shopgate/engage/components';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
+const ellipsisLine = {
+  overflow: 'hidden',
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+const useStyles = makeStyles()({
+  hint: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    bottom: 12,
+    color: themeConfig.colors.shade4,
+    willChange: 'transform',
+    transition: `opacity ${easing}`,
+    ...ellipsisLine
+  },
+  hintInactive: {
+    opacity: 0
+  }
+});
 
 /**
  * The form element hint component.
@@ -10,16 +32,23 @@ import styles from "./style";
  * @param {boolean} visible Sets the hint visibility.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Hint = ({
   hintText,
   visible
-}) => /*#__PURE__*/_jsx("div", {
-  className: classNames(styles.hintStyles(visible), 'hint'),
-  children: /*#__PURE__*/_jsx(I18n.Text, {
-    string: hintText
-  })
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.hint, {
+      [classes.hintInactive]: !visible
+    }, 'hint'),
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: hintText
+    })
+  });
+};
 Hint.defaultProps = {
   hintText: '',
   visible: false

package/TextField/components/Label/index.js

@@ -1,24 +1,61 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "./style";
+import { I18n } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
+const ellipsisLine = {
+  overflow: 'hidden',
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis'
+};
+const useStyles = makeStyles()(theme => ({
+  label: {
+    position: 'absolute',
+    left: 0,
+    top: 24,
+    lineHeight: '19px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    color: 'var(--color-text-medium-emphasis)',
+    transformOrigin: 'left top 0px',
+    willChange: 'transform, color',
+    transition: `transform ${easing}, color ${easing}`,
+    ...ellipsisLine
+  },
+  labelFloating: {
+    transform: 'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)'
+  },
+  labelRegular: {
+    color: 'var(--color-text-medium-emphasis)'
+  },
+  labelError: {
+    color: theme.palette.error.main
+  }
+}));
 
 /**
  * Renders the label element.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Label = props => {
-  const labelStyles = styles.labelStyles(props.isFocused, props.isFloating, props.hasErrorMessage);
+  const {
+    classes,
+    cx
+  } = useStyles();
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     _jsx("label", {
       htmlFor: props.name,
       "aria-hidden": true,
-      className: classNames(labelStyles, 'label', {
+      className: cx(classes.label, {
+        [classes.labelFloating]: props.isFloating,
+        [classes.labelRegular]: !props.isFocused,
+        [classes.labelError]: props.hasErrorMessage && props.isFocused
+      }, 'label', {
         floating: props.isFloating
       }),
       children: /*#__PURE__*/_jsx(I18n.Text, {

package/TextField/components/Underline/index.js

@@ -1,22 +1,73 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from "./style";
+import color from 'color';
+import { getCSSCustomProp, makeStyles, useTheme } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const easing = '450ms cubic-bezier(0.23, 1, 0.32, 1)';
+const useStyles = makeStyles()({
+  underlineWrapper: {
+    position: 'relative',
+    width: '100%',
+    borderBottom: `1px solid ${colors.shade12}`,
+    marginTop: 2,
+    marginBottom: 7
+  },
+  underline: {
+    position: 'relative',
+    width: '100%',
+    top: 1,
+    borderBottomWidth: 2,
+    borderBottomStyle: 'solid',
+    willChange: 'transform',
+    transition: `transform ${easing}`
+  }
+});
 
 /**
- *  Renders the label element.
- * @param {Object} props  The component props.
+ * Returns the underline inline style.
+ * @param {boolean} focused Is focused set or not.
+ * @param {boolean} hasError Has error set or not.
+ * @param {string} errorColor Theme error main color.
+ * @return {Object} style
+ */
+const getUnderlineStyle = (focused, hasError, errorColor) => {
+  const primaryColor = getCSSCustomProp('--color-primary') || colors.primary;
+  let focusColor = '--color-primary';
+  if (color(primaryColor).luminosity() >= 0.8) {
+    focusColor = '--color-secondary';
+  }
+  return {
+    borderBottomColor: hasError ? errorColor : `var(${focusColor}, ${colors.focus})`,
+    ...(!focused && !hasError && {
+      transform: 'scale3d(0,1,1)'
+    })
+  };
+};
+
+/**
+ * Renders the underline element.
+ * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-const Underline = props => /*#__PURE__*/_jsx("div", {
-  className: classNames(styles.underlineWrapper, 'underline'),
-  "aria-hidden": true,
-  children: /*#__PURE__*/_jsx("div", {
-    className: styles.underline,
-    style: styles.underlineStyle(props.isFocused, props.hasErrorMessage)
-  })
-});
+const Underline = props => {
+  const theme = useTheme();
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.underlineWrapper, 'underline'),
+    "aria-hidden": true,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.underline,
+      style: getUnderlineStyle(props.isFocused, props.hasErrorMessage, theme.palette.error.main)
+    })
+  });
+};
 Underline.defaultProps = {
   isFocused: false,
   hasErrorMessage: false

package/TextField/index.js

@@ -1,196 +1,182 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import "core-js/modules/es.array.includes.js";
+import React, { useState, useCallback, useMemo, useRef } 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 Hint from "./components/Hint";
-import styles from "./style";
 import FormElement from "./components/FormElement/index";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const bluredDateSelector = 'input[type="date"]:in-range:not(:focus)';
+const webkitDateFields = ['::-webkit-datetime-edit-year-field', '::-webkit-datetime-edit-month-field', '::-webkit-datetime-edit-day-field', '::-webkit-datetime-edit-text'].map(suffix => `${bluredDateSelector}${suffix}`).join(', ');
+const useStyles = makeStyles()(theme => ({
+  input: {
+    position: 'relative',
+    paddingBottom: theme.spacing(2),
+    width: '100%',
+    '& input[type="date"]': {
+      minHeight: '1.3rem',
+      appearance: 'none',
+      paddingLeft: 0,
+      marginLeft: 0
+    },
+    [`& ${webkitDateFields}`]: {
+      padding: 0,
+      color: 'transparent'
+    }
+  },
+  multiLine: {
+    position: 'relative',
+    width: '100%'
+  }
+}));
 
 /**
  * A component that provides a styled text field for user input in material design.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let TextField = /*#__PURE__*/function (_Component) {
+const TextField = ({
+  name,
+  className,
+  disabled,
+  errorText,
+  hintText,
+  inputComponent,
+  isControlled,
+  label,
+  multiLine,
+  onChange,
+  onFocusChange,
+  onSanitize,
+  onValidate,
+  password,
+  required,
+  setRef,
+  showErrorText,
+  translateErrorText,
+  type,
+  value
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [isFocused, setIsFocused] = useState(false);
+  const [validationError, setValidationError] = useState(null);
   /**
-   * Creates a new text field component.
-   * @param {Object} props The component properties.
+   * Mirrors validation errors set during initial validate (Input constructor) without setState,
+   * so Underline / ErrorText (rendered after FormElement) still see the message in the same pass.
    */
-  function TextField(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Internal focus event handler.
-     * @param {boolean} isFocused Whether the input component is focused.
-     */
-    _this.handleFocusChange = isFocused => {
-      _this.setState({
-        isFocused
-      });
-      _this.props.onFocusChange(isFocused);
-    };
-    /**
-     * Updates the state if the input value has been changed.
-     * @param {string} value The entered text.
-     * @param {Object} event The original event object.
-     */
-    _this.handleChange = (value, event) => {
-      _this.props.onChange(value, event);
-    };
-    /**
-     * Updates the validation error text if required.
-     * @param {string} value The entered text.
-     * @param {boolean} isInitial Whether this is the initial value of the input field.
-     * @return {boolean} Whether the validation was successful.
-     */
-    _this.handleValidate = (value, isInitial) => {
-      const validationError = _this.props.onValidate(value);
-      if (validationError !== true && validationError) {
-        /**
-         * An error message was returned by the validation callback. Update the state.
-         * Because the validation is performed when the component is constructed, we need to make
-         * sure we're not calling setState() in this situation.
-         */
-        if (!isInitial) {
-          _this.setState({
-            validationError
-          });
-        } else {
-          _this.state.validationError = validationError;
-        }
-      } else if (_this.state.validationError) {
-        // There was no error, clear the state variable.
-        _this.setState({
-          validationError: null
-        });
-      }
-
-      // Forward the boolean result to the input field.
-      return validationError === true;
-    };
-    _this.state = {
-      isFocused: false,
-      validationError: null
-    };
-    return _this;
-  }
+  const syncValidationErrorRef = useRef(null);
 
   /**
-   * @returns {boolean} Whether the text field is currently focused.
+   * Internal focus event handler.
+   * @param {boolean} focused Whether the input component is focused.
    */
-  _inheritsLoose(TextField, _Component);
-  var _proto = TextField.prototype;
+  const handleFocusChange = useCallback(focused => {
+    setIsFocused(focused);
+    onFocusChange(focused);
+  }, [onFocusChange]);
+
   /**
-   * Renders the text field.
-   * @return {JSX.Element}
+   * Updates the state if the input value has been changed.
+   * @param {string} v The entered text.
+   * @param {Object} event The original event object.
    */
-  _proto.render = function render() {
-    const styleType = this.props.multiLine ? 'multiLine' : 'input';
-    const style = styles.container[styleType];
-    const {
-      multiLine,
-      className,
-      disabled,
-      hintText,
-      name,
-      label,
-      setRef,
-      onSanitize,
-      password,
-      type,
-      value,
-      isControlled,
-      inputComponent,
-      showErrorText,
-      errorText,
-      translateErrorText,
-      required
-    } = this.props;
-    return /*#__PURE__*/_jsxs("div", {
-      className: classNames(style, className, 'textField', 'ui-shared__text-field', {
-        disabled
-      }),
-      children: [/*#__PURE__*/_jsx(Hint, {
-        visible: this.isHintVisible,
-        hintText: hintText
-      }), /*#__PURE__*/_jsx(Label, {
-        name: name,
-        label: label,
-        isFocused: this.isFocused,
-        isFloating: this.isLabelFloating,
-        hasErrorMessage: this.hasErrorMessage
-      }), /*#__PURE__*/_jsx(FormElement, {
-        id: name,
-        multiLine: multiLine,
-        name: name,
-        setRef: setRef,
-        onFocusChange: this.handleFocusChange,
-        onChange: this.handleChange,
-        onSanitize: onSanitize,
-        onValidate: this.handleValidate,
-        password: password,
-        type: type,
-        value: value,
-        isControlled: isControlled,
-        inputComponent: inputComponent,
-        disabled: disabled,
-        required: required,
-        attributes: {
-          'aria-invalid': !!errorText,
-          'aria-describedby': this.hasErrorMessage ? `ariaError-${name}` : null
-        }
-      }), /*#__PURE__*/_jsx(Underline, {
-        isFocused: this.isFocused,
-        hasErrorMessage: this.hasErrorMessage
-      }), showErrorText && /*#__PURE__*/_jsx(ErrorText, {
-        validationError: this.state.validationError,
-        errorText: errorText,
-        translate: translateErrorText,
-        elementName: name
-      })]
-    });
-  };
-  return _createClass(TextField, [{
-    key: "isFocused",
-    get: function () {
-      return this.state.isFocused;
-    }
+  const handleChange = useCallback((v, event) => {
+    onChange(v, event);
+  }, [onChange]);
 
-    /**
-     * @returns {boolean} Whether the label is currently floating.
-     */
-  }, {
-    key: "isLabelFloating",
-    get: function () {
-      // On Firefox empty date inputs always show a placeholder with date pattern
-      if (navigator.userAgent.includes('Firefox') && this.props.type === 'date') {
-        return true;
+  /**
+   * Updates the validation error text if required.
+   * @param {string} enteredValue The entered text.
+   * @param {boolean} isInitial Whether this is the initial value of the input field.
+   * @returns {boolean} Whether the validation was successful.
+   */
+  const handleValidate = useCallback((enteredValue, isInitial) => {
+    const validationErr = onValidate(enteredValue);
+    if (validationErr !== true && validationErr) {
+      syncValidationErrorRef.current = validationErr;
+      /**
+       * An error message was returned by the validation callback. Update the state.
+       * Because the validation is performed when the component is constructed, we need to make
+       * sure we're not calling setState() in this situation.
+       */
+      if (!isInitial) {
+        setValidationError(validationErr);
       }
-      return this.isFocused || !!this.props.value;
-    }
-
-    /**
-     * @returns {boolean} Whether the hint text is currently visible.
-     */
-  }, {
-    key: "isHintVisible",
-    get: function () {
-      return this.isFocused && !this.props.value;
+    } else {
+      // There was no error, clear the state variable.
+      setValidationError(prev => {
+        const hadSyncError = syncValidationErrorRef.current !== null;
+        if (prev !== null || hadSyncError) {
+          syncValidationErrorRef.current = null;
+          return null;
+        }
+        return prev;
+      });
     }
 
-    /**
-     * @return {boolean} Whether the error message is set.
-     */
-  }, {
-    key: "hasErrorMessage",
-    get: function () {
-      return !!(this.state.validationError || this.props.errorText);
+    // Forward the boolean result to the input field.
+    return validationErr === true;
+  }, [onValidate]);
+  const isLabelFloating = useMemo(() => {
+    // On Firefox empty date inputs always show a placeholder with date pattern
+    if (typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox') && type === 'date') {
+      return true;
     }
-  }]);
-}(Component);
+    return isFocused || !!value;
+  }, [isFocused, value, type]);
+  const isHintVisible = isFocused && !value;
+  const displayValidationError = validationError || syncValidationErrorRef.current;
+  const hasErrorMessage = !!(displayValidationError || errorText);
+  const containerClass = multiLine ? classes.multiLine : classes.input;
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(containerClass, className, 'textField', 'ui-shared__text-field', {
+      disabled
+    }),
+    children: [/*#__PURE__*/_jsx(Hint, {
+      visible: isHintVisible,
+      hintText: hintText
+    }), /*#__PURE__*/_jsx(Label, {
+      name: name,
+      label: label,
+      isFocused: isFocused,
+      isFloating: isLabelFloating,
+      hasErrorMessage: hasErrorMessage
+    }), /*#__PURE__*/_jsx(FormElement, {
+      id: name,
+      multiLine: multiLine,
+      name: name,
+      setRef: setRef,
+      onFocusChange: handleFocusChange,
+      onChange: handleChange,
+      onSanitize: onSanitize,
+      onValidate: handleValidate,
+      password: password,
+      type: type,
+      value: value,
+      isControlled: isControlled,
+      inputComponent: inputComponent,
+      disabled: disabled,
+      required: required,
+      attributes: {
+        'aria-invalid': !!errorText,
+        'aria-describedby': hasErrorMessage ? `ariaError-${name}` : null
+      }
+    }), /*#__PURE__*/_jsx(Underline, {
+      isFocused: isFocused,
+      hasErrorMessage: hasErrorMessage
+    }), showErrorText && /*#__PURE__*/_jsx(ErrorText, {
+      validationError: displayValidationError,
+      errorText: errorText,
+      translate: translateErrorText,
+      elementName: name
+    })]
+  });
+};
 TextField.defaultProps = {
   className: '',
   errorText: '',

package/TextField/spec.js

@@ -87,11 +87,13 @@ describe('<TextField />', () => {
     }));
     const input = wrapper.find('input');
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance().isFocused).toBe(false);
+    expect(onFocusMock).toHaveBeenCalledTimes(0);
     input.simulate('focus');
-    expect(wrapper.instance().isFocused).toBe(true);
+    expect(onFocusMock).toHaveBeenCalledTimes(1);
+    expect(onFocusMock).toHaveBeenCalledWith(true);
     input.simulate('blur');
-    expect(wrapper.instance().isFocused).toBe(false);
+    expect(onFocusMock).toHaveBeenCalledTimes(2);
+    expect(onFocusMock).toHaveBeenCalledWith(false);
   });
   it('should show the error message', () => {
     const errorText = 'This is an error here';

package/icons/AccountBoxIcon.d.ts

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

package/icons/AccountBoxIcon.d.ts.map

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

package/icons/AccountBoxIcon.js

@@ -1,11 +1,8 @@
-import React from 'react';
 import Icon from '@shopgate/pwa-common/components/Icon';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 
 /**
- * The description icon component.
- * @param {Object} props The icon component properties.
- * @returns {JSX}
+ * The account box icon component.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccountBox = props => /*#__PURE__*/_jsx(Icon, {

package/icons/AddMoreIcon.d.ts

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

package/icons/AddMoreIcon.d.ts.map

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