@shopgate/pwa-ui-ios 7.32.0-beta.6 → 7.32.0-beta.8

package/AppBar/index.js

@@ -20,6 +20,7 @@ const useStyles = makeStyles()(theme => ({
   },
   inner: {
     display: 'flex',
+    alignItems: 'center',
     justifyContent: 'space-between',
     position: 'relative',
     zIndex: 1

package/BaseDialog/components/Buttons/index.js

@@ -1,33 +1,44 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Button } from '@shopgate/engage/components';
+import { I18n } from '@shopgate/engage/components';
+import { Button } from '@shopgate/engage/components/v2';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const borderColor = 'rgba(0,0,0,0.2)';
+const pressedColor = 'rgba(0,0,0,0.08)';
+const hoverColor = 'rgba(0,0,0,0.04)';
 const useStyles = makeStyles()(theme => ({
   button: {
-    '&& > *': {
+    '& > *': {
       color: 'var(--color-button-dialog-ios, #1a73e8)'
     },
-    '&&': {
-      fontWeight: theme.typography.fontWeightRegular,
-      minWidth: '50%',
-      flexGrow: 1,
-      paddingTop: 10,
-      paddingBottom: 10
-    },
+    fontWeight: theme.typography.fontWeightRegular,
+    minWidth: '50%',
+    flexGrow: 1,
+    lineHeight: 1.2,
+    paddingTop: 11,
+    paddingBottom: 11,
     marginBottom: -1,
     marginRight: theme.spacing(-0.5),
+    '&:active': {
+      background: pressedColor
+    },
+    '&:focus-visible': {
+      background: pressedColor
+    },
+    '@media (hover: hover)': {
+      '&:hover': {
+        background: hoverColor
+      }
+    },
     '&:not(:last-child)': {
-      borderRadius: '0 !important',
+      borderRadius: 0,
       borderRight: `0.5px solid ${borderColor}`,
       borderBottom: `0.5px solid ${borderColor}`
     }
   },
   buttonPrimary: {
-    '&&': {
-      fontWeight: theme.typography.fontWeightRegular
-    }
+    fontWeight: theme.typography.fontWeightRegular
   },
   buttonText: {
     overflow: 'hidden',
@@ -54,10 +65,11 @@ const Buttons = ({
     disabled = false
   }) => /*#__PURE__*/_jsx(Button, {
     className: cx(classes.button, type === 'primary' && classes.buttonPrimary),
-    type: "primary",
+    variant: "link",
+    color: "secondary",
     onClick: action,
     disabled: disabled,
-    flat: true,
+    disableRipple: true,
     children: /*#__PURE__*/_jsx(I18n.Text, {
       className: classes.buttonText,
       string: label

package/BaseDialog/components/Buttons/spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@shopgate/pwa-ui-shared/Button';
+import { Button } from '@shopgate/engage/components/v2';
 import Buttons from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 const actions = [{

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-ios",
-  "version": "7.32.0-beta.6",
+  "version": "7.32.0-beta.8",
   "description": "Shopgate's iOS UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.32.0-beta.6",
+    "@shopgate/pwa-common": "7.32.0-beta.8",
     "react": "^17.0.2"
   },
   "peerDependencies": {