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

package/Form/TextField/index.js

@@ -1,97 +1,121 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Input from '@shopgate/pwa-common/components/Input';
 import Grid from '@shopgate/pwa-common/components/Grid';
 import FormElement from '@shopgate/pwa-ui-shared/FormElement';
-import style from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
 
 /**
- * No operational
+ * Default handler when an optional callback is omitted.
+ * @returns {void}
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const noop = () => {};
+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()({
+  container: {
+    '& input[type="date"]': {
+      minHeight: '1.3rem',
+      appearance: 'none',
+      paddingLeft: 0,
+      marginLeft: 0
+    },
+    [`& ${webkitDateFields}`]: {
+      padding: 0,
+      color: 'transparent'
+    }
+  },
+  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'
+  },
+  element: {
+    marginTop: 16,
+    display: 'flex',
+    alignItems: 'flex-end'
+  },
+  leftOffset: {
+    marginLeft: 2
+  }
+});
 
 /**
- * TextField component
+ * TextField component (form wrapper with leading/trailing elements).
+ * @param {Object} allProps Props.
+ * @returns {JSX.Element}
  */
-let TextField = /*#__PURE__*/function (_Component) {
-  /**
-   * Creates a new text field component.
-   * @param {Object} props The component properties.
-   */
-  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);
-    };
-    _this.state = {
-      isFocused: false
-    };
-    return _this;
-  }
-  _inheritsLoose(TextField, _Component);
-  var _proto = TextField.prototype;
-  /**
-   * Renders the text field.
-   * @return {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      className,
-      placeholder,
-      label,
-      errorText,
-      leftElement,
-      rightElement,
-      hasUnderline,
-      ...props
-    } = this.props;
-    return /*#__PURE__*/_jsx(FormElement, {
-      className: `${className} ui-shared__form__text-field`,
-      htmlFor: props.name,
-      placeholder: placeholder,
-      label: label,
-      errorText: errorText,
-      hasLeftElement: !!leftElement,
-      hasUnderline: hasUnderline,
-      hasValue: !!props.value,
-      isFocused: this.state.isFocused,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        children: [leftElement && /*#__PURE__*/_jsx(Grid.Item, {
-          grow: 0,
-          className: style.element,
-          children: leftElement
-        }), /*#__PURE__*/_jsx(Grid.Item, {
-          grow: 1,
-          className: style.container,
-          children: /*#__PURE__*/_jsx(Input, {
-            ...props,
-            onFocusChange: this.handleFocusChange,
-            className: `
-                ${style[props.multiLine ? 'multiLine' : 'input']} 
-                ${leftElement ? style.leftOffset : ''}
-              `,
-            validateOnBlur: true
-          })
-        }), rightElement && /*#__PURE__*/_jsx(Grid.Item, {
-          grow: 0,
-          className: style.element,
-          children: rightElement
-        })]
-      })
-    });
-  };
-  return TextField;
-}(Component);
+const TextField = allProps => {
+  const {
+    className,
+    placeholder,
+    label,
+    errorText,
+    leftElement,
+    rightElement,
+    hasUnderline,
+    onFocusChange,
+    ...props
+  } = allProps;
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [isFocused, setIsFocused] = useState(false);
+  const handleFocusChange = useCallback(focused => {
+    setIsFocused(focused);
+    onFocusChange(focused);
+  }, [onFocusChange]);
+  const inputTypeClass = props.multiLine ? classes.multiLine : classes.input;
+  return /*#__PURE__*/_jsx(FormElement, {
+    className: cx(className, 'ui-shared__form__text-field'),
+    htmlFor: props.name,
+    placeholder: placeholder,
+    label: label,
+    errorText: errorText,
+    hasLeftElement: !!leftElement,
+    hasUnderline: hasUnderline,
+    hasValue: !!props.value,
+    isFocused: isFocused,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      children: [leftElement && /*#__PURE__*/_jsx(Grid.Item, {
+        grow: 0,
+        className: classes.element,
+        children: leftElement
+      }), /*#__PURE__*/_jsx(Grid.Item, {
+        grow: 1,
+        className: classes.container,
+        children: /*#__PURE__*/_jsx(Input, {
+          ...props,
+          onFocusChange: handleFocusChange,
+          className: cx(inputTypeClass, leftElement && classes.leftOffset),
+          validateOnBlur: true
+        })
+      }), rightElement && /*#__PURE__*/_jsx(Grid.Item, {
+        grow: 0,
+        className: classes.element,
+        children: rightElement
+      })]
+    })
+  });
+};
 TextField.defaultProps = {
   attributes: null,
   className: '',

package/Form/TextField/spec.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const inputProps = {
   name: 'test-input'
 };
+jest.mock('@shopgate/engage/components');
 describe('<TextField>', () => {
   it('should render a simple text field', () => {
     const wrapper = mount(/*#__PURE__*/_jsx(TextField, {
@@ -100,7 +101,7 @@ describe('<TextField>', () => {
       errorText: errorText
     }));
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('ErrorText').find('Translate').at(0).props().string).toEqual(errorText);
+    expect(wrapper.find('ErrorText').find('Text').at(0).props().string).toEqual(errorText);
   });
   it('should show the label', () => {
     const label = 'This is the label';
@@ -109,7 +110,7 @@ describe('<TextField>', () => {
       label: label
     }));
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('Label').find('Translate').props().string).toEqual(label);
+    expect(wrapper.find('Label').find('Text').props().string).toEqual(label);
   });
   it('should show the placeholder text', () => {
     const placeholder = 'This is the placeholder text';
@@ -118,6 +119,6 @@ describe('<TextField>', () => {
       placeholder: placeholder
     }));
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('Placeholder').find('Translate').at(0).props().string).toEqual(placeholder);
+    expect(wrapper.find('Placeholder').find('Text').at(0).props().string).toEqual(placeholder);
   });
 });

package/FormElement/components/ErrorText/index.js

@@ -1,31 +1,49 @@
 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, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    bottom: 2,
+    color: theme.palette.error.main,
+    fontSize: 12,
+    lineHeight: '14px',
+    overflow: 'hidden',
+    position: 'absolute',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: '100%'
+  }
+}));
 
 /**
  * Error message component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ErrorText = ({
   className,
   errorText,
   translate,
   elementName,
   ariaHidden
-}) => /*#__PURE__*/_jsxs("div", {
-  id: `ariaError-${elementName}`,
-  className: classNames(className, styles, 'errorText'),
-  "aria-live": "assertive",
-  "aria-atomic": "true",
-  "aria-hidden": ariaHidden,
-  children: [translate && /*#__PURE__*/_jsx(I18n.Text, {
-    string: errorText
-  }), !translate && errorText]
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsxs("div", {
+    id: `ariaError-${elementName}`,
+    className: cx(classes.root, 'errorText', className),
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    "aria-hidden": ariaHidden,
+    children: [translate && /*#__PURE__*/_jsx(I18n.Text, {
+      string: errorText
+    }), !translate && errorText]
+  });
+};
 ErrorText.defaultProps = {
   className: null,
   errorText: null,

package/FormElement/components/Label/index.js

@@ -1,15 +1,54 @@
 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',
+    overflow: 'visible',
+    transition: `transform ${easing}, color ${easing}`,
+    ...ellipsisLine
+  },
+  labelStatic: {
+    opacity: 1,
+    lineHeight: '19px',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    color: 'var(--color-text-medium-emphasis)'
+  },
+  labelFloating: {
+    transform: 'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)',
+    opacity: 1
+  },
+  labelRegular: {
+    opacity: 0
+  },
+  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 = ({
   hasErrorMessage,
   htmlFor,
@@ -18,10 +57,21 @@ const Label = ({
   label,
   labelStatic
 }) => {
-  const labelStyles = styles.labelStyles(isFocused, isFloating, hasErrorMessage, labelStatic);
+  const {
+    classes,
+    cx
+  } = useStyles();
   return /*#__PURE__*/ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */_jsx("label", {
     htmlFor: htmlFor,
-    className: classNames(labelStyles, 'label', {
+    className: cx({
+      [classes.label]: !labelStatic,
+      [classes.labelStatic]: labelStatic,
+      [classes.labelFloating]: isFloating,
+      // Hide label only when placeholder is shown (empty + blurred). When floating or
+      // static, never apply opacity: 0 — JSS rule order differs from glamor injection order.
+      [classes.labelRegular]: !labelStatic && !isFloating && !isFocused,
+      [classes.labelError]: hasErrorMessage && isFocused
+    }, 'label', {
       floating: isFloating
     }),
     children: /*#__PURE__*/_jsx(I18n.Text, {

package/FormElement/components/Placeholder/index.js

@@ -1,8 +1,33 @@
 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()({
+  placeholder: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    top: 24,
+    color: 'var(--color-text-medium-emphasis)',
+    willChange: 'transform',
+    transition: `opacity ${easing}`,
+    ...ellipsisLine
+  },
+  placeholderInactive: {
+    opacity: 0
+  },
+  leftOffset: {
+    left: 'var(--form-element-left-offset, 26px)',
+    width: 'calc(100% - var(--form-element-left-offset, 26px))'
+  }
+});
 
 /**
  * The form element placeholder component.
@@ -12,19 +37,27 @@ import styles from "./style";
  * @param {boolean} hasLeftElement Whether a left element is present
  * @return {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Placeholder = ({
   placeholder,
   visible,
   'aria-hidden': ariaHidden,
   hasLeftElement
-}) => /*#__PURE__*/_jsx("div", {
-  className: classNames(styles.placeholderStyles(visible, hasLeftElement), 'placeholder'),
-  "aria-hidden": ariaHidden,
-  children: /*#__PURE__*/_jsx(I18n.Text, {
-    string: placeholder
-  })
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.placeholder, {
+      [classes.placeholderInactive]: !visible,
+      [classes.leftOffset]: hasLeftElement
+    }, 'placeholder'),
+    "aria-hidden": ariaHidden,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: placeholder
+    })
+  });
+};
 Placeholder.defaultProps = {
   'aria-hidden': null,
   hasLeftElement: false,

package/FormElement/components/Underline/index.js

@@ -1,21 +1,72 @@
 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 (border color + scale).
+ * @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'),
-  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'),
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.underline,
+      style: getUnderlineStyle(props.isFocused, props.hasErrorMessage, theme.palette.error.main)
+    })
+  });
+};
 Underline.defaultProps = {
   isFocused: false,
   hasErrorMessage: false