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

package/components/PickerUtilize/components/Button/index.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 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 {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => {
   const buttonDefaults = {
     display: 'block',
@@ -15,7 +11,7 @@ const useStyles = makeStyles()(theme => {
     textAlign: 'left',
     lineHeight: 1.2,
     outline: 'none',
-    background: colors.shade8
+    background: theme.palette.grey.light
   };
   return {
     button: {
@@ -23,20 +19,20 @@ const useStyles = makeStyles()(theme => {
     },
     buttonDisabled: {
       ...buttonDefaults,
-      color: colors.shade4
+      color: theme.palette.grey.medium
     },
     label: {
       display: 'block',
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       ':not(:only-child)': {
-        fontWeight: 400,
-        fontSize: '0.75rem',
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.typography.caption.fontSize,
         marginBottom: 4
       }
     },
     value: {
       display: 'block',
-      fontWeight: 500
+      fontWeight: theme.typography.fontWeightMedium
     }
   };
 });

package/components/PickerUtilize/index.d.ts

@@ -1,3 +1,4 @@
-declare function _default(props: any): import("react/jsx-runtime").JSX.Element;
+declare function _default(props: any): React.JSX.Element;
 export default _default;
+import React from 'react';
 //# sourceMappingURL=index.d.ts.map

package/components/PickerUtilize/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/PickerUtilize/index.jsx"],"names":[],"mappings":"AAkHe,+EAMd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/PickerUtilize/index.jsx"],"names":[],"mappings":"AAkHe,yDAMd;;kBAxH0C,OAAO"}

package/components/PickerUtilize/spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Picker from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components/View');
@@ -13,6 +13,9 @@ jest.mock('@shopgate/engage/components', () => {
     return null;
   };
   return {
+    Typography: ({
+      children
+    }) => children,
     SheetList,
     Sheet: ({
       children
@@ -24,9 +27,9 @@ jest.mock('@shopgate/engage/components', () => {
 describe('<Picker />', () => {
   it('should render the picker', () => {
     const label = 'Picker label';
-    const wrapper = mount(/*#__PURE__*/_jsx(Picker, {
+    const wrapper = render(/*#__PURE__*/_jsx(Picker, {
       label: label
     }));
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.asFragment()).toMatchSnapshot();
   });
 });

package/components/Radio/Radio.js

@@ -6,7 +6,7 @@ import UncheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';
 import { Ripple } from '@shopgate/engage/components';
 import { useRadioGroup } from "../RadioGroup";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     display: 'inline-flex',
     alignItems: 'inherit',
@@ -36,7 +36,7 @@ const useStyles = makeStyles()({
     width: '100%'
   },
   radioChecked: {
-    color: 'var(--color-primary)'
+    color: theme.palette.primary.main
   },
   radioDisabled: {
     opacity: 0.5,
@@ -45,7 +45,7 @@ const useStyles = makeStyles()({
   ripple: {
     padding: 12
   }
-});
+}));
 
 /**
  * The Radio component
@@ -63,7 +63,8 @@ const Radio = ({
 }) => {
   const {
     classes,
-    cx
+    cx,
+    theme
   } = useStyles();
   const radioGroup = useRadioGroup();
   let name = nameProp;
@@ -88,7 +89,7 @@ const Radio = ({
     className: cx(classes.root, classNamesProp.root),
     children: /*#__PURE__*/_jsxs(Ripple, {
       className: classes.ripple,
-      color: "var(--color-primary)",
+      color: theme.palette.primary.main,
       children: [/*#__PURE__*/_jsx("input", {
         className: classes.input,
         type: "radio",

package/components/ResponsiveContainer/breakpoints.js

@@ -1,7 +1,7 @@
 // Ugly imports to avoid breaking tests due to circular dependencies
 import { isIOSTheme } from '@shopgate/engage/core/helpers/isIOSTheme';
 import { hasWebBridge } from '@shopgate/engage/core/helpers/bridge';
-import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
+import { isAdminPreviewActive } from '@shopgate/engage/admin-preview/helpers';
 const iosThemeActive = isIOSTheme();
 
 /* eslint-disable extra-rules/no-single-line-objects */
@@ -52,7 +52,7 @@ export const parser = (comparators, breakpoint, {
 
   // Web / App config.
   // Handle iOS theme as app for now so that media queries in shared components only work for app
-  const isWeb = hasWebBridge() && !iosThemeActive && !IS_PAGE_PREVIEW_ACTIVE;
+  const isWeb = hasWebBridge() && !iosThemeActive && !isAdminPreviewActive();
 
   // Always mode.
   if (webAlways && isWeb || appAlways && !isWeb) {

package/components/ScrollHeader/index.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { useScrollDirectionChange, useRoute } from '@shopgate/engage/core/hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     position: 'sticky',
     left: 0,
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.common.white,
     [responsiveMediaQuery('<=xs', {
       appAlways: true
     })]: {
@@ -27,7 +27,7 @@ const useStyles = makeStyles()({
   transition: {
     transition: 'transform 0.2s ease,transform 0.2s'
   }
-});
+}));
 
 /* eslint-disable react/prop-types */
 /**

package/components/SheetList/components/Item/index.js

@@ -1,24 +1,21 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { withForwardedRef } from '@shopgate/engage/core';
 import { makeStyles, responsiveMediaQuery, useTheme } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import Grid from '@shopgate/pwa-common/components/Grid';
 import Link from '@shopgate/pwa-common/components/Link';
 import Glow from '@shopgate/pwa-ui-shared/Glow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const IMAGE_SPACE = 72;
 const useStyles = makeStyles()(theme => ({
   disabled: {
-    color: colors.shade5,
+    color: theme.palette.grey.medium,
     cursor: 'not-allowed'
   },
   selected: {
-    background: 'var(--color-background-accent)',
-    boxShadow: '-16px 0 0 0 var(--color-background-accent) !important'
+    background: theme.palette.background.emphasized,
+    boxShadow: `-16px 0 0 0 ${theme.palette.background.emphasized} !important`
   },
   title: {
     width: '100%',
@@ -33,7 +30,7 @@ const useStyles = makeStyles()(theme => ({
     })]: {
       padding: theme.spacing(2),
       margin: 0,
-      fontSize: '1.25rem',
+      fontSize: theme.typography.h3.fontSize,
       lineHeight: '1.5rem'
     }
   },
@@ -43,10 +40,7 @@ const useStyles = makeStyles()(theme => ({
       webOnly: true
     })]: {
       display: 'block',
-      color: 'var(--color-text-medium-emphasis)',
-      fontSize: '0.875rem',
       lineHeight: '1.25rem',
-      fontWeight: 'initial',
       paddingTop: theme.spacing(1)
     }
   },
@@ -93,7 +87,7 @@ const Item = ({
 }) => {
   const theme = useTheme();
   const glowHover = useMemo(() => ({
-    boxShadow: `${theme.spacing(-2.5)}px 0 0 ${colors.shade8}, ${theme.spacing(2.5)}px 0 0 ${colors.shade8}`
+    boxShadow: `${theme.spacing(-2.5)}px 0 0 ${theme.palette.grey.light}, ${theme.spacing(2.5)}px 0 0 ${theme.palette.grey.light}`
   }), [theme]);
   const {
     classes,
@@ -129,10 +123,11 @@ const Item = ({
           grow: 1,
           children: [/*#__PURE__*/_jsx("div", {
             children: title
-          }), description && /*#__PURE__*/_jsx("div", {
-            className: classes.description
-            // eslint-disable-next-line react/no-danger
-            ,
+          }), description && /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            component: "div",
+            color: "textSecondary",
+            className: classes.description,
             dangerouslySetInnerHTML: {
               __html: description
             }

package/components/SheetList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SheetList/index.jsx"],"names":[],"mappings":";AAmCA;;;;;GAKG;AACH,wEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,GAAC,IAAI,CAgD5B;;;;;;;;;;;;;;;;;;;;iBAlFgB,mBAAmB;sBAJd,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/SheetList/index.jsx"],"names":[],"mappings":";AAiCA;;;;;GAKG;AACH,wEAHW,MAAM,GACJ,GAAG,CAAC,OAAO,GAAC,IAAI,CAgD5B;;;;;;;;;;;;;;;;;;;;iBAjFgB,mBAAmB;sBAHd,YAAY"}

package/components/SheetList/index.js

@@ -1,13 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/engage';
 import List from '@shopgate/pwa-common/components/List';
 import Item from "./components/Item";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const IMAGE_SPACE = 72;
 const useStyles = makeStyles()(theme => ({
   item: {
@@ -16,13 +12,13 @@ const useStyles = makeStyles()(theme => ({
   },
   itemNotLast: {
     '&:not(:last-child)': {
-      boxShadow: `0 1px 0 0 ${colors.darkGray}`,
+      boxShadow: `0 1px 0 0 ${theme.components.border.light}`,
       marginBottom: 1
     }
   },
   itemSelected: {
-    background: 'var(--color-background-accent)',
-    boxShadow: `${theme.spacing(-2.5)}px 0 0 var(--color-background-accent), ${theme.spacing(2.5)}px 0 0 var(--color-background-accent)`,
+    background: theme.palette.background.emphasized,
+    boxShadow: `${theme.spacing(-2.5)}px 0 0 ${theme.palette.background.emphasized}, ${theme.spacing(2.5)}px 0 0 ${theme.palette.background.emphasized}`,
     marginTop: -1
   },
   itemWithImage: {

package/components/SideNavigation/SideNavigationCategories.js

@@ -2,16 +2,12 @@ import React, { useEffect } from 'react';
 import { LoadingIndicator } from '@shopgate/pwa-ui-shared';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import SideNavigationCategoriesItemChildren from "./SideNavigationCategoriesItemChildren";
 import connect from "./SideNavigationCategories.connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  colors
-} = themeConfig;
 const useStyles = makeStyles()(theme => ({
   list: {
-    borderBottom: `1px solid ${colors.shade7}`
+    borderBottom: `1px solid ${theme.components.border.light}`
   },
   loadingIndicator: {
     padding: 0,
@@ -24,8 +20,7 @@ const useStyles = makeStyles()(theme => ({
     outline: 0,
     padding: theme.spacing(2),
     position: 'relative',
-    width: '100%',
-    lineHeight: '1.45em'
+    width: '100%'
   }
 }));
 

package/components/SideNavigation/SideNavigationCategoriesItem.js

@@ -16,8 +16,8 @@ const useStyles = makeStyles()(theme => ({
     flexShrink: 0,
     outline: 0,
     margin: theme.spacing(0, -2, 0, 1),
-    fontSize: '1.6em',
-    color: '#373D41',
+    fontSize: theme.components.icon.medium,
+    color: theme.palette.common.black,
     position: 'relative'
   },
   chevronDown: {

package/components/SideNavigation/SideNavigationContent.js

@@ -7,11 +7,11 @@ import SideNavigationLinks from "./SideNavigationLinks";
 import SideNavigationItem from "./SideNavigationItem";
 import { useSideNavigation } from "./SideNavigation.hooks";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
-    background: '#fff'
+    background: theme.palette.background.surface
   }
-});
+}));
 
 /**
  * SideNavigationContent component.

package/components/SideNavigation/SideNavigationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationItem.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationItem.jsx"],"names":[],"mappings":";qGAmDG;QAAgC,QAAQ,GAAhC,KAAK,CAAC,SAAS;QACA,KAAK;QACI,WAAW,GAAnC,KAAK,CAAC,SAAS;QACC,WAAW;QACX,aAAa;QACd,SAAS;QACP,OAAO;QACT,IAAI;QACL,KAAK,EAAnB,MAAM;KACd,GAAU,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;kBA5Da,OAAO;sBAItB,YAAY"}
+{"version":3,"file":"SideNavigationItem.d.ts","sourceRoot":"","sources":["../../../components/SideNavigation/SideNavigationItem.jsx"],"names":[],"mappings":";qGAkDG;QAAgC,QAAQ,GAAhC,KAAK,CAAC,SAAS;QACA,KAAK;QACI,WAAW,GAAnC,KAAK,CAAC,SAAS;QACC,WAAW;QACX,aAAa;QACd,SAAS;QACP,OAAO;QACT,IAAI;QACL,KAAK,EAAnB,MAAM;KACd,GAAU,GAAG,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;kBA3Da,OAAO;sBAItB,YAAY"}

package/components/SideNavigation/SideNavigationItem.js

@@ -28,8 +28,7 @@ const useStyles = makeStyles()((theme, {
     outline: 0,
     padding: theme.spacing(2),
     position: 'relative',
-    width: '100%',
-    lineHeight: '1.45em'
+    width: '100%'
   },
   itemActive: {
     background: 'var(--color-side-navigation-active-background)'
@@ -40,11 +39,11 @@ const useStyles = makeStyles()((theme, {
     outline: 0,
     color: theme.palette.text.primary,
     ':hover': {
-      color: 'var(--color-primary)'
+      color: theme.palette.primary.main
     }
   },
   linkActive: {
-    color: 'var(--color-primary) !important'
+    color: `${theme.palette.primary.main} !important`
   }
 }));
 

package/components/SideNavigation/SideNavigationNestedItem.js

@@ -9,8 +9,8 @@ const useStyles = makeStyles()(theme => ({
     flexShrink: 0,
     outline: 0,
     margin: theme.spacing(0, -2, 0, 1),
-    fontSize: '1.6em',
-    color: '#373D41',
+    fontSize: theme.components.icon.medium,
+    color: theme.palette.common.black,
     position: 'relative'
   },
   chevronDown: {

package/components/Switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Switch/index.jsx"],"names":[],"mappings":";AAkDA;;;;;;;;;;;GAWG;AACH,0FAVW,MAAM,GAQJ,GAAG,CAAC,OAAO,CAsCvB;;;;;;;;;;;;;;;;;;;;;;;;;sBAjGqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Switch/index.jsx"],"names":[],"mappings":";AAiDA;;;;;;;;;;;GAWG;AACH,0FAVW,MAAM,GAQJ,GAAG,CAAC,OAAO,CAsCvB;;;;;;;;;;;;;;;;;;;;;;;;;sBAhGqB,YAAY"}

package/components/Switch/index.js

@@ -2,9 +2,8 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { VisuallyHidden } from '@shopgate/engage/a11y/components';
-import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   container: {
     display: 'flex',
     flex: 1,
@@ -19,7 +18,7 @@ const useStyles = makeStyles()({
     appearance: 'none',
     width: '40px',
     height: '20px',
-    backgroundColor: '#ccc',
+    backgroundColor: theme.palette.grey.medium,
     borderRadius: '10px',
     position: 'relative',
     cursor: 'pointer',
@@ -30,22 +29,22 @@ const useStyles = makeStyles()({
       left: '2px',
       width: '16px',
       height: '16px',
-      backgroundColor: 'white',
+      backgroundColor: theme.palette.common.white,
       borderRadius: '50%',
       transition: 'transform 0.3s'
     },
     ':checked': {
-      backgroundColor: 'var(--color-secondary)'
+      backgroundColor: theme.palette.secondary.main
     },
     ':checked::before': {
       transform: 'translateX(20px)'
     },
     ':disabled': {
-      backgroundColor: themeConfig.colors.shade7,
+      backgroundColor: theme.palette.action.disabledBackground,
       cursor: 'not-allowed'
     }
   }
-});
+}));
 
 /**
  * The Switch component.

package/components/Tabs/components/TabIndicator.js

@@ -2,16 +2,16 @@ import * as 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: {
     position: 'absolute',
     height: 2,
     bottom: 0,
     width: '100%',
     transition: 'left .2s ease',
-    backgroundColor: 'var(--color-primary)'
+    backgroundColor: theme.palette.primary.main
   }
-});
+}));
 
 /**
  * Tab indicator component

package/components/TextLink/TextLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../components/TextLink/TextLink.jsx"],"names":[],"mappings":";AAiBA;;;;GAIG;AACH,iCAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAMvB;;;;;;;;;;sBAzBqB,YAAY"}
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../components/TextLink/TextLink.jsx"],"names":[],"mappings":";AAIA;;;;GAIG;AACH,iCAHW,MAAM,GACJ,GAAG,CAAC,OAAO,CAEkF;;;;;;;;;;sBARpF,YAAY"}

package/components/TextLink/TextLink.js

@@ -1,38 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@shopgate/engage/styles';
 import { Link } from '@shopgate/engage/components';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
-  link: {
-    color: 'var(--color-link, inherit)',
-    ':visited': {
-      color: 'var(--color-link-visited, var(--color-link, inherit))'
-    },
-    ':hover': {
-      color: 'var(--color-link-active , var(--color-link, inherit))'
-    }
-  }
-});
 
 /**
  * The TextLink component
  * @param {Object} props The component props
  * @returns {JSX.Element}
  */
-const TextLink = props => {
-  const {
-    classes,
-    cx
-  } = useStyles();
-  return /*#__PURE__*/_jsx(Link, {
-    ...props,
-    className: cx(classes.link, props.className),
-    tag: "a",
-    role: "link",
-    tabIndex: 0
-  });
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextLink = props => /*#__PURE__*/_jsx(Link, {
+  ...props,
+  className: props.className,
+  tag: "a",
+  role: "link",
+  tabIndex: 0
+});
 TextLink.defaultProps = {
   className: null
 };

package/components/Toggle/index.js

@@ -11,7 +11,7 @@ const useStyles = makeStyles()((theme, params, classes) => ({
     display: 'block',
     height: 20,
     width: 44,
-    background: '#898989',
+    background: theme.palette.grey.medium,
     borderRadius: 100,
     cursor: 'pointer',
     bottom: -4,
@@ -33,20 +33,20 @@ const useStyles = makeStyles()((theme, params, classes) => ({
   },
   checkbox: {
     [`&:checked ~ .${classes.label}`]: {
-      background: 'var(--color-primary)',
+      background: theme.palette.primary.main,
       opacity: 0.5
     },
     [`&:checked ~ .${classes.thumb}`]: {
       left: 20,
-      background: 'var(--color-primary)'
+      background: theme.palette.primary.main
     },
     [`&:disabled ~ .${classes.label}`]: {
-      background: '#D5D5D5',
+      background: theme.palette.action.disabledBackground,
       pointerEvents: 'none',
       filter: 'none'
     },
     [`&:disabled ~ .${classes.thumb}`]: {
-      background: '#BCBDBC',
+      background: theme.palette.action.disabled,
       filter: 'none'
     },
     // a11y configuration: hide visually but keep interactive