@shopgate/pwa-ui-shared 7.31.4-beta.1 → 7.32.0-beta.1

package/DiscountBadge/index.js

@@ -1,36 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } from '@shopgate/engage/components';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx } from "react/jsx-runtime";
-const badgeBase = {
-  background: 'var(--color-primary)',
-  borderRadius: 2,
-  color: 'var(--color-primary-contrast)',
-  padding: 5,
-  width: '100%',
-  fontWeight: 700,
-  textAlign: 'center',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  lineHeight: 1,
-  whiteSpace: 'nowrap',
-  ...themeConfig.variables.discountBadgeBase
-};
-const useStyles = makeStyles()(() => ({
-  small: {
-    ...badgeBase
-  },
-  big: {
-    ...badgeBase,
-    paddingTop: 5,
-    paddingLeft: 5,
-    paddingRight: 5
-  }
-}));
+const useStyles = makeStyles()(theme => {
+  const badgeBase = {
+    background: theme.components.discountBadge.background,
+    borderRadius: 2,
+    color: theme.contrastColor(theme.components.discountBadge.background),
+    padding: 5,
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    lineHeight: 1,
+    whiteSpace: 'nowrap'
+  };
+  return {
+    small: {
+      ...badgeBase
+    },
+    big: {
+      ...badgeBase,
+      paddingTop: 5,
+      paddingLeft: 5,
+      paddingRight: 5
+    }
+  };
+});
 /**
  * The discount badge component.
  * @param {Object} props The component props
@@ -54,11 +52,16 @@ const DiscountBadge = ({
     className: "ui-shared__discount-badge",
     "aria-label": `${i18n.text('cart.discount')}: ${text}`,
     tabIndex: -1,
-    children: /*#__PURE__*/_jsx(I18n.Text, {
+    children: /*#__PURE__*/_jsx(Typography, {
+      variant: "caption",
+      align: "center",
+      fontWeight: "bold",
       className: cx(displayClass, className, 'theme__discount-badge'),
-      string: text,
-      params: [discount],
-      "aria-hidden": true
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: text,
+        params: [discount]
+      })
     })
   });
 };

package/DiscountBadge/spec.js

@@ -1,20 +1,20 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import DiscountBadge from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 describe('<DiscountBadge />', () => {
   it('should render the text', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(DiscountBadge, {
+    const wrapper = render(/*#__PURE__*/_jsx(DiscountBadge, {
       text: "foo"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render the text and discount', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(DiscountBadge, {
+    const wrapper = render(/*#__PURE__*/_jsx(DiscountBadge, {
       text: "SAVE {0}%",
       discount: 20
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/FavoritesButton/connector.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { toggleFavoriteWithListChooser } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
-import { getLoadWishlistOnAppStartEnabled, getWishlistItemQuantityEnabled } from '@shopgate/engage/core/selectors/shopSettings';
+import { getLoadWishlistOnAppStartEnabled, getWishlistItemQuantityEnabled } from '@shopgate/engage/settings/selectors/shopSettings';
 
 /**
  * Creates the mapStateToProps connector function.

package/FavoritesButton/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
-import appConfig, { themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+import appConfig from '@shopgate/pwa-common/helpers/config';
 import { i18n } from '@shopgate/engage/core/helpers';
 import { makeStyles } from '@shopgate/engage/styles';
 import HeartIcon from "../icons/HeartIcon";
@@ -10,28 +10,31 @@ import HeartPlus from "../icons/HeartPlusIcon";
 import Ripple from "../Ripple";
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const buttonProto = {
-  display: 'block',
-  position: 'relative',
-  background: themeColors.light,
-  borderRadius: '50%',
-  padding: 0,
-  fontSize: 20,
-  lineHeight: 1,
-  color: 'var(--color-secondary)',
-  outline: 0
-};
-const useStyles = makeStyles()({
-  buttonFlat: {
-    ...buttonProto
-  },
-  button: {
-    ...buttonProto,
-    boxShadow: themeShadows.buttons.elevated
-  },
-  ripple: {
-    padding: 6
-  }
+const useStyles = makeStyles()(theme => {
+  const buttonProto = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    background: theme.palette.common.white,
+    borderRadius: '50%',
+    padding: 0,
+    fontSize: theme.components.icon.small,
+    color: theme.palette.secondary.main,
+    outline: 0
+  };
+  return {
+    buttonFlat: {
+      ...buttonProto
+    },
+    button: {
+      ...buttonProto,
+      boxShadow: '0 8px 13px rgba(0, 0, 0, 0.25)'
+    },
+    ripple: {
+      padding: 6
+    }
+  };
 });
 
 /**

package/Form/Checkbox/index.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
     marginLeft: theme.spacing(4)
   },
   checked: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   }
 }));
 

package/Form/InfoField/spec.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import InfoField from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<InfoField>', () => {
   it('should render info field', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(InfoField, {
+    const wrapper = render(/*#__PURE__*/_jsx(InfoField, {
       children: "Some info text"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/Form/Password/index.js

@@ -1,19 +1,15 @@
 import React, { useState, useCallback } from 'react';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import ToggleIcon from "../../ToggleIcon";
 import VisibilityIcon from "../../icons/VisibilityIcon";
 import VisibilityOffIcon from "../../icons/VisibilityOffIcon";
 import TextField from "../TextField";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   visOff: {
-    color: colors.shade4
+    color: theme.palette.grey.medium
   }
-});
+}));
 
 /**
  * A component that provides a password field with visibility toggle.

package/Form/RadioGroup/components/Item/index.js

@@ -20,13 +20,11 @@ const useStyles = makeStyles()(theme => ({
   },
   label: {
     flex: 1,
-    fontSize: '1rem',
-    lineHeight: 1.5,
     marginLeft: theme.spacing(1),
     marginBottom: theme.spacing(1)
   },
   active: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   }
 }));
 

package/Form/Select/index.js

@@ -4,7 +4,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import Chevron from "../../icons/ChevronIcon";
 import FormElement from "../../FormElement";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   select: {
     appearance: 'none',
     position: 'relative',
@@ -15,8 +15,7 @@ const useStyles = makeStyles()({
     width: '100%',
     margin: '24px 0 0 0',
     outline: 0,
-    fontSize: 16,
-    lineHeight: '19px',
+    fontSize: theme.typography.body1.fontSize,
     zIndex: 10
   },
   chevron: {
@@ -24,10 +23,10 @@ const useStyles = makeStyles()({
     top: '50%',
     right: 0,
     transform: 'translateY(-50%) rotateZ(-90deg)',
-    fontSize: '1.3em !important',
+    fontSize: `${theme.components.icon.medium} !important`,
     marginTop: -3
   }
-});
+}));
 
 /**
  * Styled select for material-style forms (native select + chevron).

package/Form/Select/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Select from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 const inputProps = {
@@ -29,11 +29,11 @@ describe('<Select />', () => {
     it(test, () => {
       const testFixtures = tests[test];
       // eslint-disable-next-line extra-rules/no-single-line-objects
-      const wrapper = mount(/*#__PURE__*/_jsx(Select, {
+      const wrapper = render(/*#__PURE__*/_jsx(Select, {
         ...inputProps,
         ...testFixtures
       }));
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.asFragment()).toMatchSnapshot();
     });
   });
 });

package/Form/SelectContextChoices/index.js

@@ -3,30 +3,29 @@ import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import Chevron from "../../icons/ChevronIcon";
 import InfoField from "../InfoField";
 import ContextMenu from "../../ContextMenu";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   chevron: {
     position: 'absolute',
     top: '50%',
     right: 0,
     transform: 'translateY(-50%) rotateZ(-90deg)',
-    fontSize: '1.3em !important',
+    fontSize: `${theme.components.icon.medium} !important`,
     marginTop: -3
   },
   toggle: {
-    fontSize: '1rem',
     paddingRight: '2rem'
   },
   itemSelected: {
-    backgroundColor: themeConfig.colors.shade8,
-    fontWeight: 500
+    backgroundColor: theme.palette.grey.light,
+    fontWeight: theme.typography.fontWeightMedium
   }
-});
+}));
 
 /**
  * @param {Object} props Props.
@@ -71,7 +70,8 @@ const SelectContextChoices = ({
     rightElement: /*#__PURE__*/_jsx(Chevron, {
       className: classes.chevron
     }),
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Typography, {
+      component: "div",
       role: "button",
       onClick: () => setOpened(true),
       "aria-hidden": true,

package/Form/SelectContextChoices/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import SelectContextChoices from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/a11y/components');
@@ -27,10 +27,10 @@ describe('<SelectContextChoices />', () => {
   Object.keys(tests).forEach(test => {
     it(test, () => {
       const testFixtures = tests[test];
-      const wrapper = shallow(/*#__PURE__*/_jsx(SelectContextChoices, {
+      const wrapper = render(/*#__PURE__*/_jsx(SelectContextChoices, {
         ...testFixtures
       }));
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.asFragment()).toMatchSnapshot();
     });
   });
 });

package/Form/TextField/index.js

@@ -13,7 +13,7 @@ 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()({
+const useStyles = makeStyles()(theme => ({
   container: {
     '& input[type="date"]': {
       minHeight: '1.3rem',
@@ -32,8 +32,7 @@ const useStyles = makeStyles()({
     width: '100%',
     marginTop: 24,
     outline: 0,
-    fontSize: 16,
-    lineHeight: '19px'
+    fontSize: theme.typography.body1.fontSize
   },
   multiLine: {
     position: 'relative',
@@ -44,7 +43,6 @@ const useStyles = makeStyles()({
     outline: 0,
     height: 19,
     minHeight: 19,
-    lineHeight: '19px',
     verticalAlign: 'top'
   },
   element: {
@@ -55,7 +53,7 @@ const useStyles = makeStyles()({
   leftOffset: {
     marginLeft: 2
   }
-});
+}));
 
 /**
  * TextField component (form wrapper with leading/trailing elements).

package/FormElement/components/ErrorText/index.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from '@shopgate/engage/components';
+import { I18n, Typography } 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 => ({
+const useStyles = makeStyles()({
   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.
@@ -33,7 +29,10 @@ const ErrorText = ({
     classes,
     cx
   } = useStyles();
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(Typography, {
+    variant: "caption",
+    component: "div",
+    color: "error",
     id: `ariaError-${elementName}`,
     className: cx(classes.root, 'errorText', className),
     "aria-live": "assertive",

package/FormElement/components/Label/index.js

@@ -18,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
     lineHeight: '19px',
     pointerEvents: 'none',
     userSelect: 'none',
-    color: 'var(--color-text-medium-emphasis)',
+    color: theme.palette.text.secondary,
     transformOrigin: 'left top 0px',
     willChange: 'transform, color',
     overflow: 'visible',
@@ -30,7 +30,7 @@ const useStyles = makeStyles()(theme => ({
     lineHeight: '19px',
     pointerEvents: 'none',
     userSelect: 'none',
-    color: 'var(--color-text-medium-emphasis)'
+    color: theme.palette.text.secondary
   },
   labelFloating: {
     transform: 'translate3d(0, -22px, 0) scale3d(0.75, 0.75, 0.75)',

package/FormElement/components/Placeholder/index.js

@@ -10,12 +10,12 @@ const ellipsisLine = {
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis'
 };
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   placeholder: {
     position: 'absolute',
     pointerEvents: 'none',
     top: 24,
-    color: 'var(--color-text-medium-emphasis)',
+    color: theme.palette.text.secondary,
     willChange: 'transform',
     transition: `opacity ${easing}`,
     ...ellipsisLine
@@ -27,7 +27,7 @@ const useStyles = makeStyles()({
     left: 'var(--form-element-left-offset, 26px)',
     width: 'calc(100% - var(--form-element-left-offset, 26px))'
   }
-});
+}));
 
 /**
  * The form element placeholder component.

package/FormElement/components/Underline/index.js

@@ -1,18 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import color from 'color';
-import { getCSSCustomProp, makeStyles, useTheme } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 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()({
+const useStyles = makeStyles()(theme => ({
   underlineWrapper: {
     position: 'relative',
     width: '100%',
-    borderBottom: `1px solid ${colors.shade12}`,
+    borderBottom: `1px solid ${theme.components.border.medium}`,
     marginTop: 2,
     marginBottom: 7
   },
@@ -25,23 +20,20 @@ const useStyles = makeStyles()({
     willChange: 'transform',
     transition: `transform ${easing}`
   }
-});
+}));
 
 /**
  * Returns the underline inline style (border color + scale).
+ * @param {Object} theme The theme object.
  * @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';
-  }
+const getUnderlineStyle = (theme, focused, hasError, errorColor) => {
+  const focusColor = theme.palette.primary.main;
   return {
-    borderBottomColor: hasError ? errorColor : `var(${focusColor}, ${colors.focus})`,
+    borderBottomColor: hasError ? errorColor : focusColor,
     ...(!focused && !hasError && {
       transform: 'scale3d(0,1,1)'
     })
@@ -63,7 +55,7 @@ const Underline = props => {
     className: cx(classes.underlineWrapper, 'underline'),
     children: /*#__PURE__*/_jsx("div", {
       className: classes.underline,
-      style: getUnderlineStyle(props.isFocused, props.hasErrorMessage, theme.palette.error.main)
+      style: getUnderlineStyle(theme, props.isFocused, props.hasErrorMessage, theme.palette.error.main)
     })
   });
 };

package/Glow/index.js

@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { withForwardedRef } from '@shopgate/engage/core';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   container: {
@@ -81,7 +80,7 @@ const Glow = ({
   jsx-a11y/click-events-have-key-events */
 };
 Glow.defaultProps = {
-  color: themeConfig.colors.shade8,
+  color: 'var(--sg-palette-grey-light)',
   className: null,
   forwardedRef: null,
   disabled: false,

package/Glow/spec.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Glow from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Glow />', () => {
   it('should render with a smile', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Glow, {
+    const wrapper = render(/*#__PURE__*/_jsx(Glow, {
       children: /*#__PURE__*/_jsx("p", {
         children: "Glowing!"
       })
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/IndicatorCircle/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, keyframes } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const rotate = keyframes({
@@ -89,9 +88,9 @@ const IndicatorCircle = ({
   });
 };
 IndicatorCircle.defaultProps = {
-  color: 'var(--color-secondary)',
+  color: 'var(--sg-palette-secondary-main)',
   paused: false,
-  size: themeConfig.variables.loadingIndicator.size,
-  strokeWidth: themeConfig.variables.loadingIndicator.strokeWidth
+  size: 32,
+  strokeWidth: 3
 };
 export default IndicatorCircle;

package/LoadingIndicator/index.js

@@ -9,13 +9,13 @@ const {
     imgSrc: loadingImageSrc
   } = {}
 } = themeConfig.variables;
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   container: {
     display: 'block',
     padding: '1em',
     textAlign: 'center',
-    fontSize: '1.5em',
-    color: 'var(--color-secondary)'
+    fontSize: theme.components.icon.medium,
+    color: theme.palette.secondary.main
   },
   imgContainer: {
     display: 'flex',

package/Manufacturer/index.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   root: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   }
 }));
 

package/NoResults/components/Icon/index.js

@@ -1,21 +1,20 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import CryptoJs from 'crypto-js';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   magnifier: {
     fill: 'currentColor'
   },
   background: {
-    fill: themeColors.light
+    fill: theme.palette.background.surface
   },
   circle: {
     fill: 'currentColor',
     opacity: 0.065
   }
-});
+}));
 
 /**
  * The no search results icon component.