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

package/product/components/ProductDiscountBadge/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks/useWidgetSettings';
@@ -30,7 +30,7 @@ describe('<ProductDiscountBadge />', () => {
    */
   const createComponent = mockedState => {
     const store = mockedStore(mockedState);
-    return mount(/*#__PURE__*/_jsx(Provider, {
+    return render(/*#__PURE__*/_jsx(Provider, {
       store: store,
       children: /*#__PURE__*/_jsx(ProductDiscountBadge, {
         productId: mockedProduct1.productId
@@ -39,11 +39,11 @@ describe('<ProductDiscountBadge />', () => {
   };
   it('should render without discount', () => {
     const wrapper = createComponent(mockedStateWithoutDiscount);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render with discount', () => {
     const wrapper = createComponent(mockedStateWithDiscount);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should not render with discount if widgetSetting is false', () => {
     useWidgetSettings.mockReturnValue({
@@ -53,6 +53,6 @@ describe('<ProductDiscountBadge />', () => {
       }
     });
     const wrapper = createComponent(mockedStateWithDiscount);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

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

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { SurroundPortals, FavoritesButton } from '@shopgate/engage/components';
 import { PRODUCT_ITEM_FAVORITES_BUTTON } from '@shopgate/engage/category';
 import { isRelativeProductOnList } from '@shopgate/engage/favorites';
-import { getLoadWishlistOnAppStartEnabled } from '@shopgate/engage/core';
+import { getLoadWishlistOnAppStartEnabled } from '@shopgate/engage/settings/selectors/shopSettings';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import { combineReducers } from 'redux';
 import { Provider } from 'react-redux';
 import { createMockStore } from '@shopgate/pwa-common/store';
@@ -11,23 +11,23 @@ const store = createMockStore(combineReducers({
   favorites
 }));
 describe('<ItemFavoritesButton />', () => {
-  it('should not render when its not a favorite', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Provider, {
+  it('should not render when it\'s not a favorite', () => {
+    const wrapper = render(/*#__PURE__*/_jsx(Provider, {
       store: store,
       children: /*#__PURE__*/_jsx(ItemFavoritesButton, {
         productId: "1234"
       })
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container.firstChild).toMatchSnapshot();
   });
-  it('should render if its a favorite', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Provider, {
+  it('should render if it\'s a favorite', () => {
+    const wrapper = render(/*#__PURE__*/_jsx(Provider, {
       store: store,
       children: /*#__PURE__*/_jsx(ItemFavoritesButton, {
         productId: "1234",
         isFavorite: true
       })
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container.firstChild).toMatchSnapshot();
   });
 });

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

@@ -1,16 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import ItemImage from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/product');
 describe('<ItemImage />', () => {
   it('should render', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(ItemImage, {
+    const wrapper = render(/*#__PURE__*/_jsx(ItemImage, {
       productId: "1234",
       imageUrl: "http://www.google.com",
       name: "FooBar"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

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

@@ -5,15 +5,14 @@ import { Portal } from '@shopgate/engage/components';
 import { ProductName, ProductRatingStars } from '@shopgate/engage/product';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    fontWeight: '500',
-    lineHeight: 1.15,
+    fontWeight: theme.typography.fontWeightMedium,
     marginTop: 1,
     wordBreak: ['keep-all', 'break-word'],
     hyphens: 'auto'
   }
-});
+}));
 
 /**
  * The item name component.

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

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

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/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/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/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.