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

package/AppBar/index.js

@@ -12,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
@@ -99,7 +100,7 @@ const AppBar = ({
 };
 AppBar.defaultProps = {
   'aria-hidden': null,
-  backgroundColor: 'var(--sg-palette-background-default)',
+  backgroundColor: 'var(--sg-components-appBar-background)',
   below: null,
   center: null,
   classes: {
@@ -108,7 +109,7 @@ AppBar.defaultProps = {
   },
   left: null,
   right: null,
-  textColor: 'var(--sg-palette-text-primary)'
+  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: 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/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.32.0-beta.1",
+  "version": "7.32.0-beta.11",
   "description": "Shopgate's iOS UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.32.0-beta.1",
+    "@shopgate/pwa-common": "7.32.0-beta.11",
     "react": "^17.0.2"
   },
   "peerDependencies": {

package/BaseDialog/components/Buttons/spec.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Button from '@shopgate/pwa-ui-shared/Button';
-import Buttons from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const actions = [{
-  label: 'action0',
-  action: jest.fn()
-}, {
-  label: 'action1',
-  action: jest.fn()
-}, {
-  label: 'action2',
-  action: jest.fn()
-}];
-describe('<Buttons />', () => {
-  it('should not render if no actions are passed', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render buttons', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Buttons, {
-      actions: actions
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Button).length).toBe(actions.length);
-  });
-});

package/BaseDialog/components/Content/spec.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Content from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Content />', () => {
-  it('should not render if no content is passed', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render content components', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Content, {
-      content: "Hello World"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('[id="basicDialogDesc"]').length).toBe(1);
-  });
-});

package/BaseDialog/components/Title/spec.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Title from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-describe('<Title />', () => {
-  it('should not render without a title', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {}));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.instance()).toEqual(null);
-  });
-  it('should render with a title', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(Title, {
-      title: "Some test title"
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find('[id="basicDialogTitle"]').length).toBe(1);
-  });
-});

package/BaseDialog/spec.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import Title from "./components/Title";
-import Content from "./components/Content";
-import Buttons from "./components/Buttons";
-import BasicDialog from "./index";
-import { jsx as _jsx } from "react/jsx-runtime";
-const props = {
-  title: 'Hello World',
-  children: /*#__PURE__*/_jsx("div", {
-    children: "Hello World"
-  }),
-  actions: [{
-    label: 'action0',
-    action: jest.fn()
-  }, {
-    label: 'action1',
-    action: jest.fn()
-  }, {
-    label: 'action2',
-    action: jest.fn()
-  }]
-};
-jest.mock('@shopgate/engage/a11y/components');
-describe('<BasicDialog />', () => {
-  it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
-      actions: []
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should render as expected', () => {
-    const wrapper = shallow(/*#__PURE__*/_jsx(BasicDialog, {
-      ...props
-    }));
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.find(Title).length).toBe(1);
-    expect(wrapper.find(Title).props().title).toEqual(props.title);
-    expect(wrapper.find(Content).length).toBe(1);
-    expect(wrapper.find(Content).props().content).toEqual(props.children);
-    expect(wrapper.find(Buttons).length).toBe(1);
-    expect(wrapper.find(Buttons).props().actions).toEqual(props.actions);
-  });
-});

package/tsconfig.build.json

@@ -1,16 +0,0 @@
-{
-  "extends": "@shopgate/engage/tsconfig.build.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "."
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "**/*.spec.*",
-    "**/__tests__/**",
-    "**/__snapshots__/**",
-    "coverage"
-  ]
-}

package/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@shopgate/engage/tsconfig.json",
-}