@shopgate/pwa-ui-ios 7.31.6 → 7.32.0-beta.10

package/AppBar/components/Icon/index.js

@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   root: {
     alignItems: 'center',
     color: 'inherit',
     display: 'flex',
     flexShrink: 0,
-    fontSize: 24,
+    fontSize: theme.components.icon.medium,
     height: 44,
     justifyContent: 'center',
     outline: 0,
@@ -17,7 +17,7 @@ const useStyles = makeStyles()({
     width: 44,
     zIndex: 1
   }
-});
+}));
 
 /**
  * The AppBarIcon component.

package/AppBar/components/Title/index.js

@@ -1,21 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
-    fontSize: 17,
-    fontWeight: 600,
     flexGrow: 1,
     lineHeight: '44px',
     left: 90,
-    overflow: 'hidden',
     position: 'absolute',
     right: 90,
-    textAlign: 'center',
-    textOverflow: 'ellipsis',
-    top: 0,
-    whiteSpace: 'nowrap'
+    top: 0
   }
 });
 
@@ -34,15 +29,18 @@ const AppBarTitle = ({
   if (!title) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "h4",
+    component: "div",
+    noWrap: true,
+    align: "center",
+    fontWeight: "bold",
     className: cx(classes.root, 'theme__app-bar__title'),
     role: "heading",
     "aria-level": "1",
     "aria-live": "polite",
     tabIndex: -1,
-    "data-test-id": `title: ${title}`
-    // eslint-disable-next-line react/no-danger
-    ,
+    "data-test-id": `title: ${title}`,
     dangerouslySetInnerHTML: {
       __html: title
     }

package/AppBar/index.js

@@ -1,7 +1,6 @@
 import React, { useMemo, useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import { getAbsoluteHeight } from '@shopgate/pwa-common/helpers/dom';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles, setCSSCustomProp } from '@shopgate/engage/styles';
 import { SurroundPortals } from '@shopgate/engage/components';
 import { APP_BAR_CONTENT } from '@shopgate/engage/core/constants';
@@ -13,19 +12,20 @@ import Center from "./components/Center";
 import Left from "./components/Left";
 import Below from "./components/Below";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   outer: {
     boxSizing: 'content-box',
     minHeight: 44,
-    paddingTop: 'var(--safe-area-inset-top)'
+    paddingTop: theme.layout.safeArea.top
   },
   inner: {
     display: 'flex',
+    alignItems: 'center',
     justifyContent: 'space-between',
     position: 'relative',
     zIndex: 1
   }
-});
+}));
 
 /**
  * Updates the --app-bar-height custom property
@@ -100,7 +100,7 @@ const AppBar = ({
 };
 AppBar.defaultProps = {
   'aria-hidden': null,
-  backgroundColor: themeColors.light,
+  backgroundColor: 'var(--sg-components-appBar-background)',
   below: null,
   center: null,
   classes: {
@@ -109,7 +109,7 @@ AppBar.defaultProps = {
   },
   left: null,
   right: null,
-  textColor: themeColors.dark
+  textColor: 'var(--sg-components-appBar-color)'
 };
 AppBar.Field = Field;
 AppBar.Icon = Icon;

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: 400,
-      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: 400
-    }
+    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/Content/index.js

@@ -1,17 +1,15 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   body: {
-    color: themeColors.dark,
+    color: theme.palette.common.black,
     flexGrow: 1,
-    fontSize: '13px',
-    textAlign: 'center',
     overflow: 'auto'
   }
-});
+}));
 
 /**
  * @param {Object} props The component props.
@@ -26,7 +24,10 @@ const Content = ({
   if (!content) {
     return null;
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Typography, {
+    variant: "body2",
+    component: "div",
+    align: "center",
     className: classes.body,
     id: "basicDialogDesc",
     children: content

package/BaseDialog/components/Title/index.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { I18n, Ellipsis } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
   title: {
     textAlign: 'center',
-    fontWeight: 600
+    fontWeight: theme.typography.fontWeightBold
   }
-});
+}));
 
 /**
  * @param {Object} props The component props.

package/BaseDialog/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FocusTrap } from '@shopgate/engage/a11y/components';
-import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { makeStyles } from '@shopgate/engage/styles';
 import Title from "./components/Title";
 import Content from "./components/Content";
@@ -18,7 +17,7 @@ const useStyles = makeStyles()({
     width: 270,
     maxHeight: `calc(100vh - ${outerGap * 2}px)`,
     borderRadius: 14,
-    background: themeColors.lightTransparent,
+    background: 'rgba(255, 255, 255, 0.82)',
     backdropFilter: 'blur(20px)'
   },
   content: {

package/icons/CartIcon.d.ts

@@ -2,6 +2,6 @@ import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The cart icon component.
  */
-declare const CartIcon: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const CartIcon: (props: Omit<IconProps, "content">) => import("react").JSX.Element;
 export default CartIcon;
 //# sourceMappingURL=CartIcon.d.ts.map

package/icons/CartIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartIcon.d.ts","sourceRoot":"","sources":["../../icons/CartIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACI,CAAC;AAExD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CartIcon.d.ts","sourceRoot":"","sources":["../../icons/CartIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,gCACI,CAAC;AAExD,eAAe,QAAQ,CAAC"}

package/icons/FilterIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The filter icon component.
  */
-declare const Filter: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const Filter: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default Filter;
 //# sourceMappingURL=FilterIcon.d.ts.map

package/icons/FilterIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterIcon.d.ts","sourceRoot":"","sources":["../../icons/FilterIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACQ,CAAC;AAE1D,eAAe,MAAM,CAAC"}
+{"version":3,"file":"FilterIcon.d.ts","sourceRoot":"","sources":["../../icons/FilterIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBACQ,CAAC;AAE1D,eAAe,MAAM,CAAC"}

package/icons/HomeIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The home icon component.
  */
-declare const Home: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const Home: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default Home;
 //# sourceMappingURL=HomeIcon.d.ts.map

package/icons/HomeIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomeIcon.d.ts","sourceRoot":"","sources":["../../icons/HomeIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGtE;;GAEG;AACH,QAAA,MAAM,IAAI,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CAE9C,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"HomeIcon.d.ts","sourceRoot":"","sources":["../../icons/HomeIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAGtE;;GAEG;AACH,QAAA,MAAM,IAAI,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBAE9C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/icons/ShareIcon.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { IconProps } from '@shopgate/pwa-common/components/Icon';
 /**
  * The Share icon component.
  */
-declare const ShareIcon: (props: Omit<IconProps, "content">) => import("react/jsx-runtime").JSX.Element;
+declare const ShareIcon: (props: Omit<IconProps, "content">) => React.JSX.Element;
 export default ShareIcon;
 //# sourceMappingURL=ShareIcon.d.ts.map

package/icons/ShareIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShareIcon.d.ts","sourceRoot":"","sources":["../../icons/ShareIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,4CACI,CAAC;AAEzD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ShareIcon.d.ts","sourceRoot":"","sources":["../../icons/ShareIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAItE;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,sBACI,CAAC;AAEzD,eAAe,SAAS,CAAC"}

package/package.json

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