@shopgate/engage 7.31.6 → 7.32.0-beta.10

package/components/v2/Button/Button.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * The Button component is a versatile UI element that can be used to trigger actions or navigate users.
  * It supports multiple variants, colors, and sizes, making it suitable for a wide range of use cases.
  */
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
+function Button(props, ref) {
   const {
     variant = 'contained',
     color = 'inherit',
@@ -17,10 +17,13 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     loadingPosition = 'center',
     loadingIndicator: loadingIndicatorProp,
     size = 'medium',
+    dense = false,
     disabled = false,
+    disableRipple = variant === 'link',
     fullWidth = false,
-    disableElevation = false,
+    enableElevation = false,
     className,
+    classes: classesProp,
     children,
     ...other
   } = props;
@@ -36,9 +39,10 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     fullWidth
   }, {
     props: {
-      classes: props.classes
+      classes: classesProp
     }
   });
+  const staticClassNames = ['engage__button', 'common__button', 'ui-shared__button', !disableRipple && 'ui-shared__ripple-button'].filter(Boolean).join(' ');
   const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/_jsx(CircularProgress, {
     color: "inherit",
     size: 16
@@ -70,16 +74,29 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
   }) : null;
   return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
-    className: cx(classes.root, className, {
+    className: cx(classes.root, {
       [classes.text]: variant === 'text',
       [classes.outlined]: variant === 'outlined',
       [classes.contained]: variant === 'contained',
       [classes.small]: size === 'small',
       [classes.large]: size === 'large',
+      [classes.dense]: dense && size === 'medium',
+      [classes.denseSmall]: dense && size === 'small',
+      [classes.denseLarge]: dense && size === 'large',
+      [classes.link]: variant === 'link',
       [classes.disabled]: disabled || loading,
       [classes.fullWidth]: fullWidth,
-      [classes.disableElevation]: disableElevation
-    }),
+      [classes.enableElevation]: enableElevation
+    }, staticClassNames, className),
+    disableRipple: disableRipple,
+    disableBaseClassName: true,
+    "data-variant": variant,
+    "data-color": color,
+    "data-size": size,
+    "data-dense": dense || undefined,
+    "data-full-width": fullWidth || undefined,
+    "data-enable-elevation": enableElevation || undefined,
+    "data-loading": loading || undefined,
     disabled: disabled || loading,
     ...other,
     children: /*#__PURE__*/_jsxs("span", {
@@ -87,7 +104,23 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
     })
   });
-});
+}
+
+/**
+ * Opacity of the overlay that the text and outlined variants tint themselves with on hover. The
+ * dark scheme needs more of it: the overlay takes the color of the label, and a light tint over a
+ * dark surface reads as a far smaller change than a dark tint over a light one.
+ */
+const HOVER_OVERLAY_OPACITY = 0.1;
+const HOVER_OVERLAY_OPACITY_DARK = 0.28;
+
+/**
+ * Opacity the outlined border rests at, leaving it somewhere to go on hover where it returns to the
+ * full color. The dark scheme keeps more of it: fading toward a dark backdrop cuts the brightness
+ * of the border, where fading toward a light one mostly cuts its saturation.
+ */
+const OUTLINED_BORDER_OPACITY = 0.5;
+const OUTLINED_BORDER_OPACITY_DARK = 0.7;
 const useStyles = makeStyles({
   name: 'Button'
 })((theme, props) => {
@@ -101,113 +134,174 @@ const useStyles = makeStyles({
   } = props;
   let cssColor = '';
   let contrastText = '';
-  if (color !== 'inherit') {
+  let darkCssColor = '';
+  if (color === 'cta') {
+    // The call to action color is not part of the palette. It's a component token so that merchants
+    // can configure it separately from the primary color via `--color-button-cta`.
+    cssColor = theme.components.ctaButton.background;
+    contrastText = theme.components.ctaButton.color;
+  } else if (color !== 'inherit') {
     cssColor = color && theme.palette?.[color]?.main ? theme.palette[color].main : theme.palette.primary.main;
     contrastText = color && theme.palette?.[color]?.contrastText ? theme.palette[color].contrastText : theme.palette.primary.contrastText;
   } else if (variant === 'contained') {
+    // The numeric grey scale is absolute rather than per scheme, so it stays light in both. The
+    // light value is kept as it is and only the dark scheme swaps in a surface that its inherited
+    // text color can be read on.
     // eslint-disable-next-line prefer-destructuring
     cssColor = theme.palette.grey[200];
+    darkCssColor = theme.palette.background.emphasized;
     contrastText = 'inherit';
   } else {
     cssColor = 'currentColor';
   }
   return {
     root: {
+      // The `components.button` vars are override hooks for CSS injection and are intentionally
+      // left unseeded, so these fallbacks are what render by default. Don't "fix" the empty values
+      // by skipping their generation - that would also drop them from `theme.vars`, which would
+      // turn these into `var(undefined, ...)`.
       '--button-color': `var(${theme.vars.components.button.color}, ${cssColor})`,
       '--text-color': `var(${theme.vars.components.button.textColor}, ${contrastText})`,
-      '--border-radius': `var(${theme.vars.components.button.borderRadius}, ${theme.shape.borderRadius})`,
+      // A single `applyStyles` call for the whole scheme. A second one would land on the same
+      // object key and quietly replace this one.
+      ...theme.applyStyles('dark', {
+        ...(darkCssColor ? {
+          '--button-color': `var(${theme.vars.components.button.color}, ${darkCssColor})`
+        } : {}),
+        '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY_DARK)
+      }),
+      '--border-radius': theme.components.button.borderRadius,
       '--font-size': theme.typography.button.fontSize,
       '--variant-textColor': 'var(--button-color)',
       '--variant-textDisabledColor': theme.palette.action.disabled,
       '--variant-outlinedColor': 'var(--button-color)',
-      '--variant-outlinedBorder': 'var(--button-color)',
+      '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY),
       '--variant-outlinedDisabledColor': theme.palette.action.disabled,
       '--variant-outlinedDisabledBorder': theme.palette.action.disabled,
       '--variant-containedColor': 'var(--text-color)',
       '--variant-containedBg': 'var(--button-color)',
       '--variant-containedDisabledColor': theme.palette.action.disabled,
       '--variant-containedDisabledBg': theme.palette.action.disabledBackground,
-      '--icon-size': theme.vars.typography.button.fontSize,
       ...theme.typography.button,
       fontSize: 'var(--font-size)',
       boxSizing: 'border-box',
       minWidth: 64,
-      padding: '6px 16px',
+      // Every variant reserves the same 1px border box, so that an outlined button doesn't render
+      // 2px larger than a contained one. The paddings are 1px smaller than they look because of it.
+      border: '1px solid transparent',
+      padding: '5px 15px',
       transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
         duration: theme.transitions.duration.short
       }),
       borderRadius: 'var(--border-radius)',
       '&:hover': {
-        '--variant-textBg': theme.alpha(cssColor, 0.1),
-        '--variant-outlinedBg': theme.alpha(cssColor, 0.1),
         textDecoration: 'none',
-        '&:disabled': {
-          backgroundColor: 'transparent'
-        },
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
       },
-      ...(loading && loadingPosition === 'center' && {})
+      // A disabled button keeps taking pointer events so that it can show a not-allowed cursor,
+      // which leaves it matching `:hover`. Its hover backgrounds stay unset instead, so the colors
+      // the variants give it while disabled are what remains visible.
+      '&:hover:not(:disabled):not([aria-disabled="true"])': {
+        '--variant-textBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY),
+        '--variant-outlinedBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY),
+        // The resting border sits at a fraction of the color, so hover brings it back to the full
+        // one. The root transition covers `border`, which carries the change over.
+        '--variant-outlinedBorder': 'var(--button-color)',
+        ...theme.applyStyles('dark', {
+          '--variant-textBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY_DARK),
+          '--variant-outlinedBg': theme.alpha(cssColor, HOVER_OVERLAY_OPACITY_DARK)
+        }),
+        '@media (hover: none)': {
+          '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY),
+          ...theme.applyStyles('dark', {
+            '--variant-outlinedBorder': theme.alpha('var(--button-color)', OUTLINED_BORDER_OPACITY_DARK)
+          })
+        }
+      }
     },
     small: {
       '--font-size': `calc(${theme.typography.button.fontSize} * 0.875)`,
-      padding: '4px 10px'
+      padding: '4px 9px'
     },
     large: {
       '--font-size': `calc(${theme.typography.button.fontSize} * 1.125)`,
-      padding: '8px 22px'
+      padding: '7px 21px'
+    },
+    // The dense paddings roughly halve the regular ones. They are applied after the size classes,
+    // so they win by declaration order without needing extra specificity.
+    dense: {
+      padding: '2px 7px'
+    },
+    denseSmall: {
+      padding: '2px 4px'
+    },
+    denseLarge: {
+      padding: '3px 10px'
+    },
+    link: {
+      padding: 0,
+      minWidth: 0,
+      border: 0,
+      textTransform: 'none',
+      color: 'var(--variant-textColor)',
+      // Scoped like the hover backgrounds are: a disabled button stays hit testable for its
+      // not-allowed cursor, so it would otherwise dim on press like an operable one.
+      '&:active:not(:disabled):not([aria-disabled="true"])': {
+        opacity: 0.5
+      },
+      '&:disabled, &[aria-disabled="true"]': {
+        color: 'var(--variant-textDisabledColor)'
+      }
     },
     disabled: {},
     text: {
       color: 'var(--variant-textColor)',
       background: 'var(--variant-textBg)',
-      '&:disabled': {
+      '&:disabled, &[aria-disabled="true"]': {
         color: 'var(--variant-textDisabledColor)'
       }
     },
     outlined: {
       color: 'var(--variant-outlinedColor)',
-      border: '1px solid var(--variant-outlinedBorder)',
+      borderColor: 'var(--variant-outlinedBorder)',
       background: 'var(--variant-outlinedBg)',
-      '&:disabled': {
-        border: '1px solid var(--variant-outlinedDisabledBorder)',
+      '&:disabled, &[aria-disabled="true"]': {
+        borderColor: 'var(--variant-outlinedDisabledBorder)',
         color: 'var(--variant-outlinedDisabledColor)'
       }
     },
     contained: {
       color: 'var(--variant-containedColor)',
       background: 'var(--variant-containedBg)',
-      boxShadow: theme.shadows[2],
       '&:hover': {
         background: theme.darken('var(--variant-containedBg)'),
-        boxShadow: theme.shadows[4],
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          background: 'var(--variant-containedBg)',
-          boxShadow: theme.shadows[2]
+          background: 'var(--variant-containedBg)'
         }
       },
-      '&:active': {
-        boxShadow: theme.shadows[6]
-      },
-      '&:disabled': {
+      '&:disabled, &[aria-disabled="true"]': {
         color: 'var(--variant-containedDisabledColor)',
-        backgroundColor: 'var(--variant-containedDisabledBg)',
-        boxShadow: theme.shadows[0]
+        backgroundColor: 'var(--variant-containedDisabledBg)'
       }
     },
-    disableElevation: {
-      boxShadow: 'none',
+    enableElevation: {
+      boxShadow: theme.shadows[2],
       '&:hover': {
-        boxShadow: 'none'
+        boxShadow: theme.shadows[4],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          boxShadow: theme.shadows[2]
+        }
       },
       '&:active': {
-        boxShadow: 'none'
+        boxShadow: theme.shadows[6]
       },
-      '&$disabled': {
-        boxShadow: 'none'
+      '&:disabled, &[aria-disabled="true"]': {
+        boxShadow: theme.shadows[0]
       }
     },
     label: {
@@ -311,4 +405,8 @@ const useStyles = makeStyles({
     }
   };
 });
-export default Button;
+const ButtonWithRef = /*#__PURE__*/forwardRef(Button);
+ButtonWithRef.displayName = 'Button';
+
+// `forwardRef` erases the generic, so the call signature is restored with a cast.
+export default ButtonWithRef;

package/components/v2/ButtonBase/ButtonBase.d.ts

@@ -1,10 +1,5 @@
 import React from 'react';
-/**
- * The ButtonBase component serves as a foundational button element that can be extended with
- * additional styles and functionality. It handles basic button behavior, including disabled
- * state and type validation.
- */
-declare const ButtonBase: React.ForwardRefExoticComponent<ButtonBaseOwnProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+import type { NavigationState } from '@shopgate/engage/core/router/helpers';
 declare const useStyles: (params: void, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
@@ -14,9 +9,41 @@ declare const useStyles: (params: void, muiStyleOverridesParams?: {
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
 };
-export interface ButtonBaseOwnProps {
+export interface LinkOptions {
     /**
-     * If true, the button will be disabled and not respond to user interactions.
+     * Meta state to attach to the target route.
+     */
+    state?: NavigationState;
+    /**
+     * Where to open the target, e.g. `_blank`. Read by the router when the target is an external
+     * or a native link.
+     */
+    target?: string;
+    /**
+     * If true, the current route is replaced instead of a new one being pushed.
+     * @default false
+     */
+    replace?: boolean;
+}
+export interface ButtonBaseOwnProps<C extends React.ElementType = 'button'> {
+    /**
+     * The element or component rendered as the root node. Defaults to `button`, or to `a` on web
+     * builds when `href` is set. Note that a non focusable element (e.g. `div`) needs its own
+     * `tabIndex` to stay keyboard operable.
+     */
+    component?: C;
+    /**
+     * Renders the button as a link to this path. Navigation goes through the app router rather than
+     * the browser, so external and native URLs are handled as well.
+     */
+    href?: string;
+    /**
+     * Navigation options. Only meaningful together with `href`.
+     */
+    linkOptions?: LinkOptions;
+    /**
+     * If true, the button will be disabled and not respond to user interactions. Rendered as the
+     * native attribute on a button, and as `aria-disabled` on any other element.
      * @default false
      */
     disabled?: boolean;
@@ -25,16 +52,29 @@ export interface ButtonBaseOwnProps {
      * @default false
      */
     disableRipple?: boolean;
+    /**
+     * If true, the `engage__button-base` css hook is not rendered. Set by wrappers that provide a
+     * hook of their own, such as `Button`.
+     * @default false
+     */
+    disableBaseClassName?: boolean;
     /**
      * Custom class name for the button.
      */
     className?: string;
+    /**
+     * Value for the `data-test-id` attribute of the button.
+     */
+    testId?: string;
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<ReturnType<typeof useStyles>['classes']>;
     children: React.ReactNode;
 }
-export type ButtonBaseProps = ButtonBaseOwnProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export default ButtonBase;
+export type ButtonBaseProps<C extends React.ElementType = 'button'> = ButtonBaseOwnProps<C> & Omit<React.ComponentPropsWithRef<C>, keyof ButtonBaseOwnProps<C>>;
+declare const _default: <C extends React.ElementType = "button">(props: ButtonBaseProps<C> & {
+    ref?: React.ComponentPropsWithRef<C>["ref"];
+}) => React.ReactElement | null;
+export default _default;
 //# sourceMappingURL=ButtonBase.d.ts.map

package/components/v2/ButtonBase/ButtonBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAQ1C;;;;GAIG;AACH,QAAA,MAAM,UAAU,8IAsEd,CAAC;AAEH,QAAA,MAAM,SAAS;;cAyCP,CAAC;;;;;;CAVP,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;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,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjG,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../../components/v2/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAOrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AA0Q5E,QAAA,MAAM,SAAS;;cArLJ,CAAC;;;;;;CAuNV,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ;IACxE;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAChE,kBAAkB,CAAC,CAAC,CAAC,GACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;wBAQhC,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACzE,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;AAF9B,wBAE+B"}