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

package/ActionButton/spec.js

@@ -1,57 +1,54 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import IndicatorCircle from "../IndicatorCircle";
-import RippleButton from "../RippleButton";
+import { fireEvent, render, screen } from '@testing-library/react';
 import ActionButton from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<ActionButton />', () => {
-  let renderedElement;
-  let mockOnClick;
-  jest.useFakeTimers();
-
-  /**
-   * Renders the component.
-   * @param {Object} props The component props.
-   */
-  const renderComponent = (props = {}) => {
-    renderedElement = shallow(/*#__PURE__*/_jsx(ActionButton, {
-      ...props,
-      children: "Action Button"
-    }));
-  };
+  const renderComponent = (props = {}) => render(/*#__PURE__*/_jsx(ActionButton, {
+    ...props,
+    children: "Action Button"
+  }));
   describe('Given the component was mounted to the DOM', () => {
+    let renderedElement;
+    let mockOnClick;
     beforeEach(() => {
+      jest.useFakeTimers();
       mockOnClick = jest.fn();
-      renderComponent({
+      renderedElement = renderComponent({
         onClick: mockOnClick
       });
     });
+    afterEach(() => {
+      jest.clearAllTimers();
+      jest.useRealTimers();
+    });
     it('should match snapshot', () => {
-      expect(renderedElement).toMatchSnapshot();
+      expect(renderedElement.container.firstChild).toMatchSnapshot();
     });
     it('should not show the loading indicator by default', () => {
-      const indicator = renderedElement.find(IndicatorCircle);
-      expect(indicator.length).toBe(0);
+      const indicator = renderedElement.container.querySelector('[data-test-id="loadingIndicator"]');
+      expect(indicator).toBeNull();
     });
     describe('Given the loading prop is set to true', () => {
       beforeEach(() => {
-        renderedElement.setProps({
-          loading: true
-        });
+        renderedElement.rerender(/*#__PURE__*/_jsx(ActionButton, {
+          onClick: mockOnClick,
+          loading: true,
+          children: "Action Button"
+        }));
       });
       it('should match snapshot', () => {
-        expect(renderedElement).toMatchSnapshot();
+        expect(renderedElement.container.firstChild).toMatchSnapshot();
       });
       it('should show the loading indicator', () => {
-        const indicator = renderedElement.find(IndicatorCircle);
-        expect(indicator.length).toBe(1);
+        const indicator = renderedElement.container.querySelector('[data-test-id="loadingIndicator"]');
+        expect(indicator).toBeTruthy();
       });
     });
     describe('Given the component gets clicked', () => {
       let timeoutSpy;
       beforeEach(() => {
         timeoutSpy = jest.spyOn(global, 'setTimeout');
-        renderedElement.find(RippleButton).simulate('click');
+        fireEvent.click(screen.getByRole('button'));
       });
       afterEach(() => {
         timeoutSpy.mockRestore();

package/AddToCartButton/index.js

@@ -1,9 +1,8 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import spring from 'css-spring';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { withForwardedRef } from '@shopgate/engage/core';
-import { keyframes, makeStyles } from '@shopgate/engage/styles';
+import { keyframes, makeStyles, useTheme } from '@shopgate/engage/styles';
 import CartPlusIcon from "../icons/CartPlusIcon";
 import TickIcon from "../icons/TickIcon";
 import IndicatorCircle from "../IndicatorCircle";
@@ -34,7 +33,7 @@ const springToBottomKeyframes = keyframes(spring({
 }, {
   transform: 'translate3d(0, -300%, 0)'
 }, springOptions));
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   springFromBottom: {
     animation: `${springFromBottomKeyframes} 600ms`
   },
@@ -55,23 +54,23 @@ const useStyles = makeStyles()({
   spinnerIcon: {
     left: '50%',
     top: '50%',
-    marginTop: -themeConfig.variables.loadingIndicator.size / 2,
-    marginLeft: -themeConfig.variables.loadingIndicator.size / 2
+    marginTop: -32 / 2,
+    marginLeft: -32 / 2
   },
   buttonReady: {
-    background: `var(--color-button-cta, ${themeConfig.colors.cta})`,
-    color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`
+    background: theme.components.ctaButton.background,
+    color: theme.contrastColor(theme.components.ctaButton.background)
   },
   buttonSuccess: {
-    background: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
-    color: `var(--color-button-cta, ${themeConfig.colors.cta})`
+    background: theme.contrastColor(theme.components.ctaButton.background),
+    color: theme.components.ctaButton.background
   },
   buttonDisabled: {
-    background: themeConfig.colors.shade5,
-    color: `var(--color-button-cta-contrast, ${themeConfig.colors.ctaContrast})`,
-    boxShadow: themeConfig.shadows.buttons.disabled
+    background: theme.palette.action.disabledBackground,
+    color: theme.contrastColor(theme.palette.action.disabledBackground),
+    boxShadow: '0 3px 4px rgba(0, 0, 0, 0.13)'
   }
-});
+}));
 
 /**
  * @param {number} bSize .
@@ -114,6 +113,7 @@ const AddToCartButton = ({
     classes,
     cx
   } = useStyles();
+  const theme = useTheme();
   const [showCheckmark, setShowCheckmark] = useState(null);
 
   /**
@@ -216,7 +216,7 @@ const AddToCartButton = ({
       className: cx(classes.icon, classes.spinnerIcon),
       style: spinnerInlineStyle,
       children: /*#__PURE__*/_jsx(IndicatorCircle, {
-        color: themeConfig.colors.primaryContrast,
+        color: theme.contrastColor(theme.components.ctaButton.background),
         strokeWidth: 5,
         paused: !isLoading
       })

package/Availability/index.js

@@ -1,22 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AVAILABILITY_STATE_OK, AVAILABILITY_STATE_WARNING, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants';
-import { makeStyles } from '@shopgate/engage/styles';
+import { Typography } from '@shopgate/engage/components';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  base: {
-    fontSize: '0.875rem'
-  },
-  stateOk: {
-    color: theme.palette.success.main
-  },
-  stateWarning: {
-    color: theme.palette.warning.main
-  },
-  stateAlert: {
-    color: theme.palette.error.main
-  }
-}));
+const stateColorMap = {
+  [AVAILABILITY_STATE_OK]: 'success',
+  [AVAILABILITY_STATE_WARNING]: 'warning',
+  [AVAILABILITY_STATE_ALERT]: 'error'
+};
 
 /**
  * This component renders the availability text for a product
@@ -34,22 +25,14 @@ const Availability = ({
   showWhenAvailable = false,
   className = null
 }) => {
-  const {
-    classes,
-    cx
-  } = useStyles();
   if (!text || state === AVAILABILITY_STATE_OK && !showWhenAvailable) {
     return null;
   }
-  let stateClass = classes.stateOk;
-  if (state === AVAILABILITY_STATE_WARNING) {
-    stateClass = classes.stateWarning;
-  }
-  if (state === AVAILABILITY_STATE_ALERT) {
-    stateClass = classes.stateAlert;
-  }
-  return /*#__PURE__*/_jsx("div", {
-    className: cx('ui-shared__availability', classes.base, stateClass, className),
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body2",
+    component: "div",
+    color: stateColorMap[state],
+    className: `ui-shared__availability${className ? ` ${className}` : ''}`,
     "data-test-id": `availabilityText: ${text}`,
     children: text
   });

package/Availability/spec.js

@@ -1,42 +1,42 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { AVAILABILITY_STATE_OK, AVAILABILITY_STATE_WARNING, AVAILABILITY_STATE_ALERT } from '@shopgate/pwa-common-commerce/product/constants';
 import Availability from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Availability />', () => {
   it('should not render when text is empty', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
+    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
       text: ""
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should not render by default if state is "ok"', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
+    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
       state: AVAILABILITY_STATE_OK,
       text: "Available"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render if state is "ok" when "showWhenAvailable" is set', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
+    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
       state: AVAILABILITY_STATE_OK,
       text: "Available",
       showWhenAvailable: true
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render if state is "warning"', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
+    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
       state: AVAILABILITY_STATE_WARNING,
       text: "Only 5 left"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
   it('should render if state is "warning"', () => {
-    const wrapper = mount(/*#__PURE__*/_jsx(Availability, {
+    const wrapper = render(/*#__PURE__*/_jsx(Availability, {
       state: AVAILABILITY_STATE_ALERT,
       text: "Out of stock"
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/Button/index.js

@@ -4,9 +4,6 @@ import BaseButton from '@shopgate/pwa-common/components/Button';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 /**
  * @param {string} text Text color.
  * @param {string|null} background Fill color.
@@ -55,21 +52,21 @@ const useStyles = makeStyles()((theme, {
     };
   }
   if (type === 'simple') {
-    return disabled ? pairFromColors(themeConfig.colors.shade4, themeConfig.colors.shade7, theme) : pairFromColors(themeConfig.colors.dark, themeConfig.colors.shade7, theme);
+    return disabled ? pairFromColors(theme.palette.action.disabled, theme.palette.action.disabledBackground, theme) : pairFromColors(theme.palette.common.black, theme.palette.grey.light, theme);
   }
   if (type === 'regular') {
-    return disabled ? pairFromColors(colors.shade4, null, theme) : pairFromColors(colors.dark, null, theme);
+    return disabled ? pairFromColors(theme.palette.action.disabled, null, theme) : pairFromColors(theme.palette.common.black, null, theme);
   }
   if (type === 'secondary') {
     if (!flat) {
-      return disabled ? pairFromColors(colors.shade4, colors.shade7, theme) : pairFromColors('var(--color-primary-contrast)', 'var(--color-primary)', theme);
+      return disabled ? pairFromColors(theme.palette.action.disabled, theme.palette.action.disabledBackground, theme) : pairFromColors(theme.palette.primary.contrastText, theme.palette.primary.main, theme);
     }
-    return disabled ? pairFromColors(colors.shade4, null, theme) : pairFromColors('var(--color-primary)', null, theme);
+    return disabled ? pairFromColors(theme.palette.action.disabled, null, theme) : pairFromColors(theme.palette.primary.main, null, theme);
   }
   if (!flat) {
-    return disabled ? pairFromColors(colors.shade4, colors.shade7, theme) : pairFromColors('var(--color-secondary-contrast)', 'var(--color-secondary)', theme);
+    return disabled ? pairFromColors(theme.palette.action.disabled, theme.palette.action.disabledBackground, theme) : pairFromColors(theme.palette.secondary.contrastText, theme.palette.secondary.main, theme);
   }
-  return disabled ? pairFromColors(colors.shade4, null, theme) : pairFromColors('var(--color-secondary)', null, theme);
+  return disabled ? pairFromColors(theme.palette.action.disabled, null, theme) : pairFromColors(theme.palette.secondary.main, null, theme);
 });
 
 /**

package/ButtonLink/spec.js

@@ -1,23 +1,27 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import ActionButton from "../ActionButton";
+import { fireEvent, render } from '@testing-library/react';
 import { UnwrappedButtonLink as ButtonLink } from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<ButtonLink>', () => {
   describe('On click action', () => {
-    beforeAll(() => {
-      ActionButton.clickDelay = 0;
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+    afterEach(() => {
+      jest.runOnlyPendingTimers();
+      jest.useRealTimers();
     });
     it('should create component and open page on click', () => {
       const mockedNavigate = jest.fn();
       const link = 'https://example.com';
-      const component = shallow(/*#__PURE__*/_jsx(ButtonLink, {
+      const component = render(/*#__PURE__*/_jsx(ButtonLink, {
         href: link,
         navigate: mockedNavigate,
         children: "Text inside"
       }));
-      expect(component).toMatchSnapshot();
-      component.simulate('click');
+      expect(component.container.firstChild).toMatchSnapshot();
+      fireEvent.click(component.container.querySelector('button'));
+      jest.runOnlyPendingTimers();
       expect(mockedNavigate).toHaveBeenCalledTimes(1);
       expect(mockedNavigate).toHaveBeenCalledWith(link);
     });

package/Card/index.js

@@ -1,20 +1,17 @@
-import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig, themeName } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const isIOS = themeName.includes('ios');
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
-    boxShadow: themeConfig.shadows.productCard,
+    boxShadow: '0 4px 8px rgba(0,0,0,0.16)',
     margin: '5px 5px 10px',
-    borderRadius: isIOS ? 10 : 2,
-    background: themeConfig.colors.light,
+    borderRadius: 10,
+    background: theme.palette.background.surface,
     overflow: 'hidden',
     position: 'relative'
   }
-});
+}));
 
 /**
  * Renders the card component.

package/CardList/components/Item/index.js

@@ -1,12 +1,11 @@
 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
 import ListItem from '@shopgate/pwa-common/components/List/components/Item';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
-    background: themeConfig.colors.light,
+    background: theme.palette.background.surface,
     marginBottom: theme.spacing(0.5),
     position: 'relative'
   }

package/CartTotalLine/index.js

@@ -1,36 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import Label from "./components/Label";
 import Amount from "./components/Amount";
 import Hint from "./components/Hint";
 import Spacer from "./components/Spacer";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   line: {
     display: 'flex',
     justifyContent: 'space-between',
-    fontSize: '0.875rem',
+    fontSize: theme.typography.body2.fontSize,
     alignItems: 'baseline'
   },
   disabled: {
-    color: `${colors.shade4} !important`
+    color: `${theme.palette.action.disabled} !important`
   },
   base: {
-    color: colors.shade9
+    color: theme.palette.text.secondary
   },
   subTotal: {
-    color: `${colors.dark}`
+    color: theme.palette.text.primary
   },
   grandTotal: {
-    color: `${colors.dark}`,
-    fontSize: '1rem !important'
+    color: theme.palette.text.primary,
+    fontSize: `${theme.typography.body1.fontSize} !important`
   }
-});
+}));
 
 /**
  * @returns {JSX}

package/Checkbox/index.js

@@ -1,22 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import BaseCheckbox from '@shopgate/pwa-common/components/Checkbox';
 import CheckedIcon from "../icons/CheckedIcon";
 import UncheckedIcon from "../icons/UncheckedIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   icon: {
     width: 24,
     height: 24,
     flexShrink: 0
   },
   checkedIcon: {
-    color: 'var(--color-secondary)'
+    color: theme.palette.secondary.main
   },
   uncheckedIcon: {
-    color: themeConfig.colors.shade6
+    color: theme.palette.grey.dark
   }
 }));
 

package/Chip/index.js

@@ -32,12 +32,12 @@ const useStyles = makeStyles()((theme, {
   chip: {
     ...chipBase(removable, theme),
     ...(hasNewServices() ? {
-      backgroundColor: invert ? 'var(--color-primary)' : 'var(--color-primary-contrast)',
-      color: invert ? 'var(--color-primary-contrast)' : 'var(--color-primary)'
+      backgroundColor: invert ? theme.palette.primary.main : theme.palette.primary.contrastText,
+      color: invert ? theme.palette.primary.contrastText : theme.palette.primary.main
     } : {
-      backgroundColor: invert ? 'var(--color-secondary)' : 'var(--color-secondary-contrast)',
-      color: invert ? 'var(--color-secondary-contrast)' : 'var(--color-secondary)',
-      '--color-text-high-emphasis': invert ? 'var(--color-secondary-contrast)' : 'var(--color-secondary)'
+      backgroundColor: invert ? theme.palette.secondary.main : theme.palette.secondary.contrastText,
+      color: invert ? theme.palette.secondary.contrastText : theme.palette.secondary.main,
+      '--color-text-high-emphasis': invert ? theme.palette.secondary.contrastText : theme.palette.secondary.main
     })
   },
   removeButton: {
@@ -47,7 +47,7 @@ const useStyles = makeStyles()((theme, {
       webOnly: true
     })]: {
       padding: '0 5px',
-      fontSize: '1.125rem'
+      fontSize: theme.typography.h4.fontSize
     }
   },
   name: {
@@ -55,19 +55,18 @@ const useStyles = makeStyles()((theme, {
     paddingRight: theme.spacing(0.5),
     paddingTop: 3,
     paddingBottom: 3,
-    fontSize: 12,
-    fontWeight: 500,
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
     textOverflow: 'ellipsis',
     maxWidth: '100%',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     display: 'block',
-    lineHeight: '1',
     color: 'inherit',
     [responsiveMediaQuery('>xs', {
       webOnly: true
     })]: {
-      fontSize: '0.875rem',
+      fontSize: theme.typography.body2.fontSize,
       lineHeight: '1.25rem',
       padding: '6px 8px 6px 0'
     }

package/ContextMenu/components/Item/index.js

@@ -1,41 +1,31 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
-import Color from 'color';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import { getCSSCustomProp, makeStyles } from '@shopgate/engage/styles';
+import { makeStyles } from '@shopgate/engage/styles';
 import Glow from "../../../Glow";
 import { useContextMenu } from "../../ContextMenu.hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLOSE_DELAY = 250;
 const useStyles = makeStyles()((theme, {
   disabled
-}) => {
-  let background = themeConfig.colors.shade8;
-  const customPropColor = getCSSCustomProp('--color-primary');
-  if (customPropColor) {
-    background = Color(customPropColor).alpha(0.04).toString();
+}) => ({
+  root: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    marginBottom: 2,
+    padding: theme.spacing(1.25, 2.75),
+    zIndex: 1,
+    color: disabled ? theme.palette.text.secondary : 'inherit',
+    ...(!disabled ? {
+      cursor: 'pointer',
+      '&:hover': {
+        background: theme.alpha(theme.palette.primary.main, 0.04)
+      }
+    } : {
+      cursor: 'default'
+    })
   }
-  return {
-    root: {
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      marginBottom: 2,
-      padding: theme.spacing(1.75, 2.75),
-      lineHeight: 1,
-      zIndex: 1,
-      color: disabled ? theme.palette.text.secondary : 'inherits',
-      ...(!disabled ? {
-        cursor: 'pointer',
-        '&:hover': {
-          background
-        }
-      } : {
-        cursor: 'default'
-      })
-    }
-  };
-});
+}));
 
 /**
  * The Context Menu Item component.

package/ContextMenu/index.js

@@ -4,7 +4,6 @@ import { ConnectedReactPortal } from '@shopgate/engage/components';
 import Backdrop from '@shopgate/pwa-common/components/Backdrop';
 import { FocusTrap } from '@shopgate/engage/a11y/components';
 import { i18n } from '@shopgate/engage/core/helpers';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import MoreVertIcon from "../icons/MoreVertIcon";
 import Position from "./components/Position";
@@ -17,7 +16,7 @@ const useStyles = makeStyles()(theme => ({
   },
   button: {
     display: 'block',
-    fontSize: '1.5rem',
+    fontSize: theme.components.icon.medium,
     outline: 0,
     padding: 0,
     color: 'inherit'
@@ -39,9 +38,9 @@ const useStyles = makeStyles()(theme => ({
     left: 0,
     padding: theme.spacing(1, 0),
     minWidth: 130,
-    background: themeConfig.colors.light,
+    background: theme.palette.background.surface,
     borderRadius: 2,
-    boxShadow: themeConfig.shadows.contextMenu
+    boxShadow: '0 2px 6px rgba(0, 0, 0, .4)'
   },
   scrollable: {
     maxHeight: '30vh',

package/Dialog/components/HtmlContentDialog/spec.js

@@ -38,10 +38,16 @@ jest.mock('@shopgate/engage/components', () => {
       className
     }, children);
   }
+  function Typography({
+    children
+  }) {
+    return mockReact.createElement('span', null, children);
+  }
   return {
     I18n,
     Ellipsis,
-    Button
+    Button,
+    Typography
   };
 });
 describe('<HtmlContentDialog />', () => {