@shopgate/pwa-ui-shared 7.32.0-beta.7 → 7.32.0-beta.8

package/ActionButton/index.js

@@ -21,6 +21,10 @@ const CLICK_DELAY = 300;
 
 /**
  * The action button component.
+ * @deprecated Use `Button` from `@shopgate/engage/components/v2` instead. It defaults to
+ * `variant="contained"`, so pass `variant="text"` to match this component's `flat` default. Map
+ * `type="secondary"` to `color="primary"`, and `type="primary"` or the default to
+ * `color="secondary"`.
  * @param {Object} props Props.
  * @returns {JSX.Element}
  */

package/AddToCartButton/index.js

@@ -49,7 +49,10 @@ const useStyles = makeStyles()(theme => ({
   icon: {
     transition: 'opacity 450ms cubic-bezier(0.4, 0.0, 0.2, 1)',
     opacity: 1,
-    position: 'absolute'
+    position: 'absolute',
+    display: 'flex',
+    left: '50%',
+    marginLeft: '-0.5em'
   },
   spinnerIcon: {
     left: '50%',

package/Button/index.js

@@ -7,9 +7,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @param {string} text Text color.
  * @param {string|null} background Fill color.
+ * @param {Object} theme Theme with button border radius.
  * @returns {Object} JSS for root button.
  */
-const baseButton = (text, background) => ({
+const baseButton = (text, background, theme) => ({
   position: 'relative',
   display: 'inline-block',
   outline: 0,
@@ -20,7 +21,9 @@ const baseButton = (text, background) => ({
   ':disabled': {
     cursor: 'not-allowed'
   },
-  ...themeConfig.variables.buttonBase
+  ...themeConfig.variables.buttonBase,
+  borderRadius: theme.components.button.borderRadius,
+  ...theme.typography.button
 });
 
 /**
@@ -30,7 +33,7 @@ const baseButton = (text, background) => ({
  * @returns {Object} Object with `button` and `content` style maps.
  */
 const pairFromColors = (textColor, fillColor, theme) => ({
-  button: baseButton(textColor, fillColor),
+  button: baseButton(textColor, fillColor, theme),
   content: {
     padding: theme.spacing(0, 2, 0),
     color: textColor
@@ -71,6 +74,10 @@ const useStyles = makeStyles()((theme, {
 
 /**
  * The basic button component.
+ * @deprecated Use `Button` from `@shopgate/engage/components/v2` instead. Map `flat` to
+ * `variant="text"` and omit it for `variant="contained"`. The colors are named differently:
+ * `type="secondary"` becomes `color="primary"`, while `type="primary"` and the default become
+ * `color="secondary"`. `type="plain"` is unstyled — use `ButtonBase` for it.
  * @param {Object} props Props.
  * @returns {JSX.Element}
  */

package/ButtonLink/index.js

@@ -44,6 +44,10 @@ let ButtonLink = /*#__PURE__*/function (_Component) {
   };
   return ButtonLink;
 }(Component);
+/**
+ * @deprecated Use `Button` from `@shopgate/engage/components/v2` with `variant="link"` and
+ * `color="primary"` instead. It takes the same `href` and routes through the app router itself.
+ */
 ButtonLink.defaultProps = {
   disabled: false,
   className: '',

package/CardList/index.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component, Children, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import List from '@shopgate/pwa-common/components/List';
+import { cx } from '@shopgate/engage/styles';
 import Item from "./components/Item";
 
 /**
@@ -27,7 +28,7 @@ let CardList = /*#__PURE__*/function (_Component) {
       return null;
     }
     return /*#__PURE__*/_jsx(List, {
-      className: `ui-shared__card-list ${className}`,
+      className: cx('ui-shared__card-list', className),
       children: Children.map(children, child => {
         if (! /*#__PURE__*/isValidElement(child)) {
           return null;

package/CartTotalLine/index.js

@@ -24,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
   },
   grandTotal: {
     color: theme.palette.text.primary,
-    fontSize: `${theme.typography.body1.fontSize} !important`
+    fontSize: theme.typography.body1.fontSize
   }
 }));
 

package/NoResults/index.js

@@ -48,7 +48,7 @@ const NoResults = props => {
   } = useStyles();
   const imageSRC = useMemo(() => svgToDataUrl(noResultsImage), []);
   return /*#__PURE__*/_jsxs("div", {
-    className: cx(classes.wrapper, props.className, ' ui-shared__no-results'),
+    className: cx(classes.wrapper, props.className, 'ui-shared__no-results'),
     "data-test-id": "noResults",
     children: [/*#__PURE__*/_jsx("div", {
       className: cx(classes.icon, 'no-results__image'),

package/RippleButton/index.js

@@ -14,6 +14,10 @@ const useStyles = makeStyles()(theme => ({
 /**
  * The ripple button component is a special derivation of the basic button component
  * that adds a ripple effect when clicked.
+ * @deprecated Use `Button` from `@shopgate/engage/components/v2` instead — it ripples by default,
+ * so `rippleClassName` and `rippleSize` are gone and `disableRipple` turns the effect off. Map
+ * `flat` to `variant="text"`, `type="secondary"` to `color="primary"`, and `type="primary"` or the
+ * default to `color="secondary"`.
  * @param {Object} props Props.
  * @returns {JSX.Element}
  */
@@ -34,7 +38,7 @@ const RippleButton = ({
     classes
   } = useStyles();
   const buttonProps = {
-    className: `${className} ui-shared__ripple-button`,
+    className: cx(className, 'ui-shared__ripple-button'),
     disabled,
     onClick,
     flat,

package/Sheet/index.js

@@ -106,7 +106,17 @@ const useStyles = makeStyles()(theme => ({
     },
     paddingBottom: [theme.layout.safeArea.bottom],
     overflowY: 'scroll',
-    WebkitOverflowScrolling: 'touch'
+    WebkitOverflowScrolling: 'touch',
+    '@media (hover: hover) and (pointer: fine)': {
+      '::-webkit-scrollbar': {
+        width: 6,
+        background: 'transparent'
+      },
+      '::-webkit-scrollbar-thumb': {
+        background: theme.components.border.medium,
+        borderRadius: 4
+      }
+    }
   },
   drawerAnimIn: {
     [responsiveMediaQuery('<=sm', {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "7.32.0-beta.7",
+  "version": "7.32.0-beta.8",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.7",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.7"
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.8",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.8"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "7.32.0-beta.7",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.7",
+    "@shopgate/pwa-common": "7.32.0-beta.8",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.8",
     "classnames": "2.5.1",
     "react": "^17.0.2"
   },