@shopgate/engage 7.31.3 → 7.32.0-beta.1

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

package/components/Typography/Typography.d.ts

@@ -1,132 +1,95 @@
 import * as React from 'react';
-import { Variant as ThemeVariant } from '../../styles/theme/createTheme/createTypography';
-
+import type { Variant as ThemeVariant } from '../../styles/theme/createTheme/createTypography';
 type Variant = ThemeVariant | 'srOnly';
-
-export type TypographyClassKey =
-  | 'root'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'subtitle1'
-  | 'subtitle2'
-  | 'body1'
-  | 'body2'
-  | 'caption'
-  | 'button'
-  | 'overline'
-  | 'srOnly'
-  | 'alignLeft'
-  | 'alignCenter'
-  | 'alignRight'
-  | 'alignJustify'
-  | 'noWrap'
-  | 'gutterBottom'
-  | 'paragraph'
-  | 'colorInherit'
-  | 'colorPrimary'
-  | 'colorSecondary'
-  | 'colorTextPrimary'
-  | 'colorTextSecondary'
-  | 'colorTextTertiary'
-  | 'colorError'
-  | 'colorWarning'
-  | 'colorSuccess'
-  | 'displayInline'
-  | 'displayBlock';
-
 /**
- * Props for the polymorphic Typography component.
+ * Named font weights mapped to the theme's `fontWeight*` tokens.
+ */
+export type FontWeight = 'light' | 'regular' | 'medium' | 'bold';
+declare const useStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "root" | "gutterBottom" | "noWrap" | "paragraph" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "fontWeightLight" | "fontWeightRegular" | "fontWeightMedium" | "fontWeightBold" | "srOnly" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "colorInherit" | "colorPrimary" | "colorSecondary" | "colorTextPrimary" | "colorTextSecondary" | "colorError" | "colorWarning" | "colorSuccess" | "displayInline" | "displayBlock", string>;
+    theme: import("@shopgate/engage/styles").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+/**
+ * Own props of the polymorphic Typography component.
  *
  * @template C - the element or component type to render (defaults to 'span')
  */
-export type TypographyProps<
-  C extends React.ElementType = 'span'
-> = {
-  /**
-   * Set the text-align on the component.
-   * @default "inherit"
-   */
-  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
-  color?:
-    | 'initial'
-    | 'inherit'
-    | 'primary'
-    | 'secondary'
-    | 'textPrimary'
-    | 'textSecondary'
-    | 'textTertiary'
-    | 'error'
-    | 'warning'
-    | 'success';
-  /**
-   * Controls the display type
-   * @default "initial"
-   */
-  display?: 'initial' | 'block' | 'inline';
-  /**
-   * If `true`, the text will have a bottom margin.
-   * @default false
-   */
-  gutterBottom?: boolean;
-  /**
-   * If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
-   * Note that text overflow can only happen with block or inline-block level elements
-   * (the element needs to have a width in order to overflow).
-   * @default false
-   */
-  noWrap?: boolean;
-  /**
-   * 	If true, the text will have a bottom margin.
-   * @default false
-   */
-  paragraph?: boolean;
-  /**
-   * Applies the theme typography styles.
-   * @default "body1"
-   */
-  variant?: Variant | 'inherit';
-  /**
-   * The component used for the root node. Either a string to use a HTML element or a component.
-   * Overrides the behavior of the variantMapping prop.
-   */
-  component?: C;
-  /**
-   * The component maps the variant prop to a range of different HTML element types.
-   * For instance, subtitle1 to <h6>. If you wish to change that mapping, you can provide your own.
-   * Alternatively, you can use the component prop.
-   */
-  variantMapping?: Partial<Record<Variant, string>>;
-  /**
-   * Additional CSS class names to apply to the root element.
-   */
-  className?: string;
-  /**
-   * Override specific variant styles
-   */
-  classes?: Partial<Record<TypographyClassKey, string>>;
-  /**
-   * Content to render inside the component
-   */
-  children?: React.ReactNode;
-  /**
-   * Element type or custom component to render
-   * @internal
-   */
-  as?: C;
-} & Omit<React.ComponentPropsWithRef<C>, 'children' | 'as' | 'component'>;
-
+export type TypographyOwnProps<C extends React.ElementType = 'span'> = {
+    /**
+     * Set the text-align on the component.
+     * @default "inherit"
+     */
+    align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+    color?: 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error' | 'warning' | 'success';
+    /**
+     * Controls the display type
+     * @default "initial"
+     */
+    display?: 'initial' | 'block' | 'inline';
+    /**
+     * Overrides the font weight defined by the variant, using the theme's font weight tokens.
+     */
+    fontWeight?: FontWeight;
+    /**
+     * If `true`, the text will have a bottom margin.
+     * @default false
+     */
+    gutterBottom?: boolean;
+    /**
+     * If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     * Note that text overflow can only happen with block or inline-block level elements
+     * (the element needs to have a width in order to overflow).
+     * @default false
+     */
+    noWrap?: boolean;
+    /**
+     * If true, the text will have a bottom margin.
+     * @default false
+     */
+    paragraph?: boolean;
+    /**
+     * Applies the theme typography styles.
+     * @default "body1"
+     */
+    variant?: Variant | 'inherit';
+    /**
+     * The component used for the root node. Either a string to use a HTML element or a component.
+     * Overrides the behavior of the variantMapping prop.
+     */
+    component?: C;
+    /**
+     * The component maps the variant prop to a range of different HTML element types.
+     * For instance, subtitle1 to <h6>. If you wish to change that mapping, you can provide your own.
+     * Alternatively, you can use the component prop.
+     */
+    variantMapping?: Partial<Record<Variant, React.ElementType>>;
+    /**
+     * Additional CSS class names to apply to the root element.
+     */
+    className?: string;
+    /**
+     * Override specific variant styles
+     */
+    classes?: Partial<ReturnType<typeof useStyles>['classes']>;
+    /**
+     * Content to render inside the component
+     */
+    children?: React.ReactNode;
+};
 /**
- * The Typography component is used to render text with various styles and alignments.
- * It uses the theme's typography styles and can be customized with props.
+ * Props for the polymorphic Typography component, merged with the props of the
+ * underlying element or component.
+ *
+ * @template C - the element or component type to render (defaults to 'span')
  */
-export declare const Typography: <
-  C extends React.ElementType = 'span'
->(
-  props: TypographyProps<C> & { ref?: React.ComponentPropsWithRef<C>['ref'] }
-) => React.ReactElement | null;
-
-export default Typography;
+export type TypographyProps<C extends React.ElementType = 'span'> = TypographyOwnProps<C> & Omit<React.ComponentPropsWithRef<C>, keyof TypographyOwnProps<C>>;
+declare const _default: <C extends React.ElementType = "span">(props: TypographyProps<C> & {
+    ref?: React.ComponentPropsWithRef<C>["ref"];
+}) => React.ReactElement | null;
+export default _default;
+//# sourceMappingURL=Typography.d.ts.map

package/components/Typography/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAE/F,KAAK,OAAO,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEvC;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAUjE,QAAA,MAAM,SAAS;;cA2ET,CAAC;;;;;;CAyDJ,CAAC;AAeJ;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI;IACrE;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5D,KAAK,CAAC,EACF,SAAS,GACT,SAAS,GACT,SAAS,GACT,WAAW,GACX,aAAa,GACb,eAAe,GACf,OAAO,GACP,SAAS,GACT,SAAS,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACzC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC7D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAC9D,kBAAkB,CAAC,CAAC,CAAC,GACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;wBAgErB,CAC7C,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAEpC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI;AAJ9B,wBAI+B"}