@shopgate/pwa-ui-ios 7.31.3 → 7.32.0-beta.1

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';
@@ -100,7 +99,7 @@ const AppBar = ({
 };
 AppBar.defaultProps = {
   'aria-hidden': null,
-  backgroundColor: themeColors.light,
+  backgroundColor: 'var(--sg-palette-background-default)',
   below: null,
   center: null,
   classes: {
@@ -109,7 +108,7 @@ AppBar.defaultProps = {
   },
   left: null,
   right: null,
-  textColor: themeColors.dark
+  textColor: 'var(--sg-palette-text-primary)'
 };
 AppBar.Field = Field;
 AppBar.Icon = Icon;

package/BaseDialog/components/Buttons/index.js

@@ -10,7 +10,7 @@ const useStyles = makeStyles()(theme => ({
       color: 'var(--color-button-dialog-ios, #1a73e8)'
     },
     '&&': {
-      fontWeight: 400,
+      fontWeight: theme.typography.fontWeightRegular,
       minWidth: '50%',
       flexGrow: 1,
       paddingTop: 10,
@@ -26,7 +26,7 @@ const useStyles = makeStyles()(theme => ({
   },
   buttonPrimary: {
     '&&': {
-      fontWeight: 400
+      fontWeight: theme.typography.fontWeightRegular
     }
   },
   buttonText: {

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/package.json

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