@shopgate/engage 7.31.4-beta.1 → 7.32.0-beta.2

package/product/components/ProductGrid/components/Item/components/ItemPrice/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import ItemPrice from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/product', () => ({
@@ -22,13 +22,13 @@ const display = {
 };
 describe('<ItemPrice />', () => {
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ItemPrice, {
+    const wrapper = render(/*#__PURE__*/_jsx(ItemPrice, {
       ...props
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should not render with display props set', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ItemPrice, {
+    const wrapper = render(/*#__PURE__*/_jsx(ItemPrice, {
       ...props,
       display: display
     }));

package/product/components/ProductGrid/components/Item/index.js

@@ -4,16 +4,12 @@ import { isBeta } from '@shopgate/engage/core';
 import { getProductRoute, FeaturedMedia, ProductBadges } from '@shopgate/engage/product';
 import { Link } from '@shopgate/engage/components';
 import { useProductListType } from '@shopgate/engage/product/hooks';
-import { themeConfig } from '@shopgate/engage';
 import { makeStyles } from '@shopgate/engage/styles';
 import ItemImage from "./components/ItemImage";
 import ItemDiscount from "./components/ItemDiscount";
 import ItemFavoritesButton from "./components/ItemFavoritesButton";
 import ItemDetails from "./components/ItemDetails";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()((theme, {
   display
 }) => ({
@@ -21,7 +17,7 @@ const useStyles = makeStyles()((theme, {
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    background: colors.light,
+    background: theme.palette.background.surface,
     height: '100%'
   },
   itemDetails: {

package/product/components/ProductGridPrice/index.js

@@ -1,28 +1,22 @@
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid, Price, PriceStriked } from '@shopgate/engage/components';
 import { PriceInfo } from '@shopgate/engage/product/components';
 import { withPriceCalculation } from '@shopgate/engage/product/hocs';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeName } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const isIOS = themeName.includes('ios');
-const useStyles = makeStyles()({
-  priceWrapper: isIOS ? {
-    lineHeight: 1.75,
-    marginTop: 2,
+const useStyles = makeStyles()(theme => ({
+  priceWrapper: {
+    marginTop: 4,
     alignItems: 'center'
-  } : {
-    lineHeight: 1.75
   },
-  basicPrice: {
-    fontSize: '0.875rem'
+  strikedPrice: {
+    fontSize: theme.typography.caption.fontSize
   },
-  strikedPrice: isIOS ? {
-    fontSize: '0.75rem'
-  } : {}
-});
+  basicPrice: {
+    fontSize: theme.typography.body2.fontSize
+  }
+}));
 
 /**
  * The ProductGridPrice component is supposed to be used to display prices at product grids. It

package/product/components/ProductImage/ProductImagePlaceholder.js

@@ -1,15 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
-import { themeConfig, themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { useLoadImage } from '@shopgate/engage/core';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const placeholderIconScale = 0.65;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   placeholderContent: {
     position: 'absolute',
     width: '100%',
@@ -23,7 +19,7 @@ const useStyles = makeStyles()({
     height: `${placeholderIconScale * 100}% !important`,
     top: `${(1.0 - placeholderIconScale) * 50}%`,
     left: `${(1.0 - placeholderIconScale) * 50}%`,
-    color: themeColors.placeholder
+    color: theme.palette.background.emphasized
   },
   innerShadow: {
     position: 'relative',
@@ -36,11 +32,11 @@ const useStyles = makeStyles()({
       right: 0,
       bottom: 0,
       left: 0,
-      boxShadow: themeShadows.productImage,
+      boxShadow: 'inset 0 0 20px rgba(0, 0, 0, .05)',
       pointerEvents: 'none'
     }
   }
-});
+}));
 
 /**
  * The ProductImagePlaceholder component.
@@ -56,6 +52,7 @@ const ProductImagePlaceholder = ({
     classes,
     cx
   } = useStyles();
+  const theme = useTheme();
   const [showPlaceholder, setShowPlaceholder] = useState(true);
   const srcLoaded = useLoadImage(src);
   useEffect(() => {
@@ -68,14 +65,14 @@ const ProductImagePlaceholder = ({
         backgroundSize: 'contain',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
-        backgroundColor: noBackground ? 'transparent' : colors.light,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface,
         position: 'absolute'
       };
     }
     return {
-      backgroundColor: noBackground ? 'transparent' : colors.light
+      backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface
     };
-  }, [src, noBackground, srcLoaded]);
+  }, [srcLoaded, noBackground, theme.palette.background.surface, src]);
   const contentClasses = cx(classes.placeholderContent, {
     [classes.innerShadow]: showInnerShadow
   });

package/product/components/ProductImage/index.js

@@ -1,19 +1,16 @@
 import React, { useState, useEffect, useLayoutEffect, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import { logger } from '@shopgate/pwa-core';
-import appConfig, { themeConfig, themeShadows, themeColors } from '@shopgate/pwa-common/helpers/config';
+import appConfig from '@shopgate/pwa-common/helpers/config';
 import Image from '@shopgate/pwa-common/components/Image';
 import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
 import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
-import { makeStyles } from '@shopgate/engage/styles';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import { withWidgetSettings } from "../../../core/hocs/withWidgetSettings";
 import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
 import ProductImagePlaceholder from "./ProductImagePlaceholder";
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const placeholderIconScale = 0.65;
 
 /**
@@ -68,7 +65,7 @@ const useStyles = makeStyles()((theme, {
     height: `${placeholderIconScale * 100}% !important`,
     top: `${(1.0 - placeholderIconScale) * 50}%`,
     left: `${(1.0 - placeholderIconScale) * 50}%`,
-    color: themeColors.placeholder
+    color: theme.palette.background.emphasized
   },
   innerShadow: {
     position: 'relative',
@@ -81,7 +78,7 @@ const useStyles = makeStyles()((theme, {
       right: 0,
       bottom: 0,
       left: 0,
-      boxShadow: themeShadows.productImage,
+      boxShadow: 'inset 0 0 20px rgba(0, 0, 0, .05)',
       pointerEvents: 'none'
     }
   }
@@ -117,6 +114,7 @@ const ProductImage = props => {
   } = useStyles({
     ratio: ratioValue
   });
+  const theme = useTheme();
   const [showPlaceholder, setShowPlaceholder] = useState(!src && (srcmap === null || srcmap.length === 0));
   const [imageLoadingFailed, setImageLoadingFailed] = useState(false);
   useLayoutEffect(() => {
@@ -171,7 +169,7 @@ const ProductImage = props => {
       children: /*#__PURE__*/_jsx(Image, {
         ...props,
         className: showInnerShadow ? classes.innerShadow : '',
-        backgroundColor: noBackground ? 'transparent' : colors.light,
+        backgroundColor: noBackground ? 'transparent' : theme.palette.background.surface,
         onError: imageLoadingFailedHandler,
         "aria-hidden": !alt
       })

package/product/components/ProductList/components/Item/index.js

@@ -12,15 +12,11 @@ import Manufacturer from '@shopgate/pwa-ui-shared/Manufacturer';
 import { PriceInfo, ProductName, ProductBadges } from '@shopgate/engage/product';
 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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   listItemContainer: {
     padding: theme.spacing(1),
-    background: colors.light
+    background: theme.palette.background.surface
   },
   imageContainer: {
     padding: theme.spacing(1),
@@ -43,19 +39,19 @@ const useStyles = makeStyles()(theme => ({
     width: 40
   },
   availability: {
-    fontSize: '0.75rem'
+    fontSize: theme.typography.caption.fontSize
   },
   manufacturer: {
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   },
   price: {
     justifyContent: 'flex-end'
   },
   priceStriked: {
-    fontSize: '0.875rem'
+    fontSize: theme.typography.body2.fontSize
   },
   priceInfo: {
-    fontSize: '0.75rem'
+    fontSize: theme.typography.caption.fontSize
   },
   discount: {
     minWidth: 40

package/product/components/ProductList/components/Layout/index.js

@@ -5,7 +5,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   list: {
-    background: theme.palette.background.default
+    background: theme.palette.background.surface
   }
 }));
 

package/product/components/ProductName/ProductName.d.ts

@@ -13,6 +13,6 @@ export interface ProductNameProps {
 /**
  * The ProductName component.
  */
-declare const ProductName: ({ name, className, testId, ellipsis, portalName, portalProps, itemProp, rows, style, }: ProductNameProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductName: ({ name, className, testId, ellipsis, portalName, portalProps, itemProp, rows, style, }: ProductNameProps) => React.JSX.Element;
 export default ProductName;
 //# sourceMappingURL=ProductName.d.ts.map

package/product/components/ProductName/ProductName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductName.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAWD;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,wFAUlB,gBAAgB,4CAuBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProductName.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAWD;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,wFAUlB,gBAAgB,sBAuBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/product/components/ProductName/ProductNameContent.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface ProductNameContentProps {
     name?: string | null;
     ellipsis?: boolean;
@@ -7,6 +8,6 @@ export interface ProductNameContentProps {
  * The ProductNameContent component.
  * @returns The ProductNameContent component.
  */
-declare const ProductNameContent: ({ name, ellipsis, rows, }: ProductNameContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductNameContent: ({ name, ellipsis, rows, }: ProductNameContentProps) => React.JSX.Element;
 export default ProductNameContent;
 //# sourceMappingURL=ProductNameContent.d.ts.map

package/product/components/ProductName/ProductNameContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductNameContent.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductNameContent.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,kBAAkB,GAAI,2BAIzB,uBAAuB,4CAczB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ProductNameContent.d.ts","sourceRoot":"","sources":["../../../../product/components/ProductName/ProductNameContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,kBAAkB,GAAI,2BAIzB,uBAAuB,sBAczB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/product/components/ProductProperties/Content.js

@@ -9,7 +9,7 @@ import Rows from "./Rows";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   groupsContainer: {
-    borderBottom: `3px solid ${theme.palette.background.default}`,
+    borderBottom: `3px solid ${theme.palette.background.surface}`,
     marginBottom: theme.spacing(1.5)
   }
 }));

package/product/components/ProductProperties/Group.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   subgroup: {
     paddingTop: theme.spacing(1),
-    fontWeight: 600,
-    textTransform: 'uppercase',
-    fontSize: '0.75rem'
+    textTransform: 'uppercase'
   }
 }));
 
@@ -26,7 +25,10 @@ const Group = ({
     children: /*#__PURE__*/_jsx("td", {
       colSpan: "2",
       className: classes.subgroup,
-      children: /*#__PURE__*/_jsx("span", {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "caption",
+        component: "span",
+        fontWeight: "bold",
         dangerouslySetInnerHTML: {
           __html: group
         }

package/product/components/ProductProperties/GroupedProperties.js

@@ -9,7 +9,7 @@ import Wrapper from "./Wrapper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   accordion: {
-    borderTop: `3px solid ${theme.palette.background.default}`
+    borderTop: `3px solid ${theme.palette.background.surface}`
   }
 }));
 

package/product/components/ProductProperties/Wrapper.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { 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 => ({
   container: {
-    fontSize: '0.875rem',
     padding: theme.spacing(0, 2, 2),
     marginBottom: theme.spacing(1.5)
   },
@@ -29,7 +29,9 @@ const Wrapper = ({
     classes,
     cx
   } = useStyles();
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body2",
+    component: "div",
     className: cx('engage__product__product-property-group', {
       [classes.container]: !dense,
       [classes.containerDense]: dense

package/product/components/ProductRatingStars/ProductRatingStars.d.ts

@@ -9,6 +9,6 @@ interface RatingProps {
      */
     size?: 'big' | 'small' | 'large';
 }
-declare const _default: import("react").MemoExoticComponent<({ productId, size, }: RatingProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const _default: import("react").MemoExoticComponent<({ productId, size, }: RatingProps) => import("react").JSX.Element | null>;
 export default _default;
 //# sourceMappingURL=ProductRatingStars.d.ts.map

package/product/components/ProductSlider/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import ProductSlider from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/core', () => ({
@@ -18,8 +18,8 @@ jest.mock('@shopgate/engage/components', () => {
   };
 });
 jest.mock('@shopgate/engage/core/hooks', () => {
-  const ProductCard = props => /*#__PURE__*/_jsx(ProductCard, {
-    ...props
+  const ProductCard = () => /*#__PURE__*/_jsx("div", {
+    "data-testid": "product-card"
   });
   return {
     useThemeComponents: () => ({
@@ -29,9 +29,9 @@ jest.mock('@shopgate/engage/core/hooks', () => {
 });
 describe('<ProductSlider />', () => {
   it('should match snapshot', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ProductSlider, {
+    const wrapper = render(/*#__PURE__*/_jsx(ProductSlider, {
       productIds: ['prod1']
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container.firstChild).toMatchSnapshot();
   });
 });

package/product/components/Rating/spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 import mockRenderOptions from '@shopgate/pwa-common/helpers/mocks/mockRenderOptions';
 import { setMocks, mockedStateWithTwoReviews, mockedStateWithoutReview } from '@shopgate/pwa-common-commerce/reviews/mock';
 import Rating from "./index";
@@ -17,7 +17,7 @@ describe('Rating (product header)', () => {
    * @param {Object} state State
    * @returns {Object}
    */
-  const getComponent = state => mount(/*#__PURE__*/_jsx(Provider, {
+  const getComponent = state => render(/*#__PURE__*/_jsx(Provider, {
     store: mockedStore(state),
     children: /*#__PURE__*/_jsx(Rating, {
       productId: "foo"
@@ -26,19 +26,19 @@ describe('Rating (product header)', () => {
   describe('Rendering', () => {
     it('should render rating when data is available', () => {
       const component = getComponent(mockedStateWithTwoReviews);
-      expect(component).toMatchSnapshot();
+      expect(component.container.firstChild).toMatchSnapshot();
     });
     it('should render nothing when data is not available', () => {
       const component = getComponent(mockedStateWithoutReview);
-      expect(component.isEmptyRender()).toBe(true);
+      expect(component.container.firstChild).toBeNull();
     });
   });
   describe('Scroll on click', () => {
-    const scrollSpy = jest.fn();
     it('should scroll to reviews when clicked', () => {
+      const scrollSpy = jest.fn();
       jest.spyOn(document, 'getElementById').mockImplementation(getElementById(scrollSpy));
       const component = getComponent(mockedStateWithTwoReviews);
-      component.simulate('click');
+      fireEvent.click(component.container.querySelector('[role="presentation"]'));
       expect(scrollSpy.mock.calls[0][0]).toBe(0);
       expect(scrollSpy.mock.calls[0][1]).toBe(70);
       expect(scrollSpy).toHaveBeenCalled();
@@ -46,10 +46,11 @@ describe('Rating (product header)', () => {
       document.getElementById.mockRestore();
     });
     it('should do nothing when clicked but no reviews excerpt element', () => {
+      const scrollSpy = jest.fn();
       jest.spyOn(document, 'getElementById').mockImplementation(() => null);
       const component = getComponent(mockedStateWithTwoReviews);
-      component.simulate('click');
-      expect(scrollSpy.mock.calls.length).toBe(1);
+      fireEvent.click(component.container.querySelector('[role="presentation"]'));
+      expect(scrollSpy).not.toHaveBeenCalled();
       document.getElementById.mockReset();
       document.getElementById.mockRestore();
     });

package/product/components/RelationsSlider/RelationsSheet.js

@@ -1,15 +1,11 @@
 import React, { useState, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { useWidgetSettings, useTheme } from "../../../core";
 import { SheetDrawer, I18n, Button } from "../../../components";
 import { WIDGET_ID } from "./constants";
 import connect from "./RelationsSheet.connector";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   showMore: {
     position: 'absolute !important',
@@ -18,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
     padding: `${theme.spacing(0.5, 0)} !important`
   },
   sheet: {
-    maxHeight: `calc(100vh - ${variables.navigator.height}px)`
+    maxHeight: `calc(100vh - ${theme.components.navigator.height})`
   }
 }));
 

package/product/components/RelationsSlider/RelationsSliderContent.js

@@ -1,6 +1,6 @@
 import React, { useEffect, memo } from 'react';
 import PropTypes from 'prop-types';
-import { Swiper, Card } from '@shopgate/engage/components';
+import { Swiper, Card, Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import ProductCard from "../ProductCard";
 import RelationsSheet from "./RelationsSheet";
@@ -13,8 +13,6 @@ const useStyles = makeStyles()(theme => ({
     position: 'relative'
   },
   headline: {
-    fontSize: '1rem',
-    fontWeight: 500,
     padding: theme.spacing(0, 2, 1),
     margin: 0
   },
@@ -67,7 +65,9 @@ const RelationsSliderContent = /*#__PURE__*/memo(({
   }
   return /*#__PURE__*/_jsxs("div", {
     className: classes.container,
-    children: [!!headline && /*#__PURE__*/_jsx("h3", {
+    children: [!!headline && /*#__PURE__*/_jsx(Typography, {
+      variant: "h5",
+      component: "h3",
       className: classes.headline,
       children: headline
     }), !!showMoreButton && productsCount > 10 && /*#__PURE__*/_jsx(RelationsSheet, {

package/product/components/Swatch/SwatchContent.js

@@ -3,13 +3,9 @@ import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
 import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_SWATCH } from '@shopgate/pwa-common-commerce/product/constants/Portals';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { SurroundPortals } from "../../../components";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   swatch: {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fill, minmax(12px, 1fr))',
@@ -26,11 +22,11 @@ const useStyles = makeStyles()(() => ({
     borderRadius: '50%',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: colors.shade4,
+    borderColor: theme.components.border.medium,
     backgroundSize: 'cover'
   },
   itemSelected: {
-    borderColor: 'var(--color-secondary)'
+    borderColor: theme.palette.secondary.main
   }
 }));
 

package/product/components/Swatches/Swatches.js

@@ -3,22 +3,18 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { PRODUCT_SWATCHES } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { SurroundPortals } from "../../../components";
 import { isBeta, useWidgetSettings } from "../../../core";
 import { Swatch } from "../Swatch";
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
 const WIDGET_ID = '@shopgate/engage/product/Swatches';
-const {
-  typography
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   swatches: {
     marginTop: '8px',
-    lineHeight: typography.lineHeight
+    lineHeight: theme.typography.body1.lineHeight
   }
-});
+}));
 
 /**
  * Renders only product swatches from a list of characteristics.

package/product/components/UnitQuantityPicker/ProductUnitQuantityPicker.js

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, SurroundPortals } from '@shopgate/engage/components';
+import { I18n, SurroundPortals, Typography } from '@shopgate/engage/components';
 import { PRODUCT_UNIT_QUANTITY_PICKER, ProductContext } from '@shopgate/engage/product';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { withCurrentProduct } from '@shopgate/engage/core/hocs';
@@ -14,8 +14,6 @@ const useStyles = makeStyles()(theme => ({
     padding: theme.spacing(2)
   },
   title: {
-    fontSize: '1rem',
-    fontWeight: 500,
     marginBottom: '0.5rem'
   },
   pickerSmall: {
@@ -83,7 +81,9 @@ const ProductUnitQuantityPicker = ({
     children: /*#__PURE__*/_jsxs("div", {
       className: cx(classes.root, className),
       children: [/*#__PURE__*/_jsxs("div", {
-        children: [!hideHeadline && /*#__PURE__*/_jsx("div", {
+        children: [!hideHeadline && /*#__PURE__*/_jsx(Typography, {
+          variant: "h5",
+          component: "div",
           className: classes.title,
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: "product.sections.quantity"

package/product/components/UnitQuantityPicker/UnitQuantityPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA6GA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAmNvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA/TqB,YAAY"}
+{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA0GA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAmNvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA5TqB,YAAY"}