@shopgate/pwa-ui-shared 7.30.4-beta.1 → 7.31.0-alpha.2

package/Button/index.js

@@ -1,94 +1,117 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import BaseButton from '@shopgate/pwa-common/components/Button';
-import styles from "./style";
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
 /**
- * The basic button component. This components applies Material Design styles and acts as
- * base to more feature-rich button components such as ActionButton and RippleButton, but can
- * also be used as standalone component or any other kind of new button.
+ * @param {string} text Text color.
+ * @param {string|null} background Fill color.
+ * @returns {Object} JSS for root button.
  */
-let Button = /*#__PURE__*/function (_Component) {
-  function Button() {
-    return _Component.apply(this, arguments) || this;
+const baseButton = (text, background) => ({
+  position: 'relative',
+  display: 'inline-block',
+  outline: 0,
+  color: text,
+  backgroundColor: background,
+  minWidth: 64,
+  overflow: 'hidden',
+  ':disabled': {
+    cursor: 'not-allowed'
+  },
+  ...themeConfig.variables.buttonBase
+});
+
+/**
+ * @param {string} textColor Text color.
+ * @param {string|null} fillColor Fill color.
+ * @param {Object} theme Theme with spacing().
+ * @returns {Object} Object with `button` and `content` style maps.
+ */
+const pairFromColors = (textColor, fillColor, theme) => ({
+  button: baseButton(textColor, fillColor),
+  content: {
+    padding: theme.spacing(0, 2, 0),
+    color: textColor
   }
-  _inheritsLoose(Button, _Component);
-  var _proto = Button.prototype;
-  /**
-   * Renders the component.
-   * @return {JSX}
-   */
-  _proto.render = function render() {
-    const {
-      style
-    } = this;
-    const content = this.props.wrapContent ? /*#__PURE__*/_jsx("div", {
-      className: style.content,
-      children: this.props.children
-    }) : this.props.children;
-    return /*#__PURE__*/_jsx(BaseButton, {
-      ...this.buttonProps,
-      className: `ui-shared__button ${style.button} ${this.props.className}`,
-      testId: this.props.testId,
-      children: content
-    });
-  };
-  return _createClass(Button, [{
-    key: "style",
-    get:
-    /**
-     * Getter for style depending on prop type.
-     * @returns {Object}
-     */
-    function () {
-      const {
-        flat,
-        disabled
-      } = this.props;
-      switch (this.props.type) {
-        case 'plain':
-          return styles.plain();
-        case 'regular':
-          return styles.regular(disabled);
-        case 'simple':
-          return styles.simple(disabled);
-        default:
-        case 'primary':
-          return styles.primary(disabled, flat);
-        case 'secondary':
-          return styles.secondary(disabled, flat);
+});
+const useStyles = makeStyles()((theme, {
+  type,
+  flat,
+  disabled
+}) => {
+  if (type === 'plain') {
+    return {
+      button: {
+        padding: 0,
+        outline: 0,
+        border: 0,
+        textAlign: 'left'
       }
+    };
+  }
+  if (type === 'simple') {
+    return disabled ? pairFromColors(themeConfig.colors.shade4, themeConfig.colors.shade7, theme) : pairFromColors(themeConfig.colors.dark, themeConfig.colors.shade7, theme);
+  }
+  if (type === 'regular') {
+    return disabled ? pairFromColors(colors.shade4, null, theme) : pairFromColors(colors.dark, null, theme);
+  }
+  if (type === 'secondary') {
+    if (!flat) {
+      return disabled ? pairFromColors(colors.shade4, colors.shade7, theme) : pairFromColors('var(--color-primary-contrast)', 'var(--color-primary)', theme);
     }
+    return disabled ? pairFromColors(colors.shade4, null, theme) : pairFromColors('var(--color-primary)', null, theme);
+  }
+  if (!flat) {
+    return disabled ? pairFromColors(colors.shade4, colors.shade7, theme) : pairFromColors('var(--color-secondary-contrast)', 'var(--color-secondary)', theme);
+  }
+  return disabled ? pairFromColors(colors.shade4, null, theme) : pairFromColors('var(--color-secondary)', null, theme);
+});
 
-    /**
-     * Getter for the calculated button props.
-     * @returns {Object}
-     */
-  }, {
-    key: "buttonProps",
-    get: function () {
-      const {
-        className,
-        disabled,
-        onClick,
-        testId,
-        type,
-        wrapContent,
-        flat,
-        ...rest
-      } = this.props;
-      const buttonProps = {
-        className,
-        disabled,
-        onClick,
-        ...rest
-      };
-      return buttonProps;
-    }
-  }]);
-}(Component);
+/**
+ * The basic button component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
+ */
+const Button = props => {
+  const {
+    className,
+    flat,
+    disabled,
+    testId,
+    type,
+    wrapContent,
+    children,
+    onClick,
+    ...rest
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles({
+    type,
+    flat,
+    disabled
+  });
+  const content = wrapContent ? /*#__PURE__*/_jsx("div", {
+    ...(classes.content ? {
+      className: classes.content
+    } : {}),
+    children: children
+  }) : children;
+  return /*#__PURE__*/_jsx(BaseButton, {
+    ...rest,
+    className: cx('ui-shared__button', classes.button, className),
+    disabled: disabled,
+    onClick: onClick,
+    testId: testId,
+    children: content
+  });
+};
 Button.defaultProps = {
   ...BaseButton.defaultProps,
   className: '',

package/Button/spec.js

@@ -2,7 +2,6 @@ import trim from 'lodash/trim';
 import React from 'react';
 import { shallow } from 'enzyme';
 import Button from "./index";
-import styles from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 describe('<Button />', () => {
   it('should render as a regular button if type is omitted', () => {
@@ -18,14 +17,14 @@ describe('<Button />', () => {
       children: "Press me"
     }));
     expect(wrapper).toMatchSnapshot();
-    expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.regular(false).button}`);
+    expect(trim(wrapper.prop('className'))).toMatch(/^ui-shared__button\s+/);
   });
   it('should render as a primary button', () => {
     const wrapper = shallow(/*#__PURE__*/_jsx(Button, {
       type: "primary",
       children: "Press me"
     }));
-    expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.primary(false, false).button}`);
+    expect(trim(wrapper.prop('className'))).toMatch(/^ui-shared__button\s+/);
     expect(wrapper).toMatchSnapshot();
   });
   it('should render as a secondary button', () => {
@@ -33,7 +32,7 @@ describe('<Button />', () => {
       type: "secondary",
       children: "Press me"
     }));
-    expect(trim(wrapper.prop('className'))).toEqual(`ui-shared__button ${styles.secondary(false, false).button}`);
+    expect(trim(wrapper.prop('className'))).toMatch(/^ui-shared__button\s+/);
     expect(wrapper).toMatchSnapshot();
   });
 });

package/Card/index.js

@@ -1,22 +1,41 @@
+import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { themeConfig, themeName } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const isIOS = themeName.includes('ios');
+const useStyles = makeStyles()({
+  root: {
+    boxShadow: themeConfig.shadows.productCard,
+    margin: '5px 5px 10px',
+    borderRadius: isIOS ? 10 : 2,
+    background: themeConfig.colors.light,
+    overflow: 'hidden',
+    position: 'relative'
+  }
+});
 
 /**
  * Renders the card component.
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Card = ({
   className,
   children,
   id
-}) => /*#__PURE__*/_jsx("div", {
-  className: `ui-shared__card ${styles} ${className}`,
-  id: id,
-  children: children
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx('ui-shared__card', classes.root, className),
+    id: id,
+    children: children
+  });
+};
 Card.defaultProps = {
   className: '',
   id: null

package/CardList/components/Item/index.js

@@ -1,24 +1,36 @@
 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
 import ListItem from '@shopgate/pwa-common/components/List/components/Item';
-import styles from "./style";
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    background: themeConfig.colors.light,
+    marginBottom: theme.spacing(0.5),
+    position: 'relative'
+  }
+}));
 
 /**
  * The Card List Item component implemented as class so that ref prop is available.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Item = ({
   children,
   className,
   isSelected
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!Children.count(children)) {
     return null;
   }
   return /*#__PURE__*/_jsx(ListItem, {
-    className: `${styles} ${className}`,
+    className: cx(classes.root, className),
     isSelected: isSelected,
     children: children
   });

package/CartTotalLine/components/Amount/index.js

@@ -1,23 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "./style";
+import { I18n } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  amount: {
+    textAlign: 'right',
+    order: 4
+  }
+});
 
 /**
  * The Amount component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Amount = ({
   amount,
   currency
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (amount === null) {
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: styles.amount,
+    className: classes.amount,
     children: [typeof amount === 'string' && /*#__PURE__*/_jsx(I18n.Text, {
       string: amount
     }), typeof amount === 'number' && /*#__PURE__*/_jsx(I18n.Price, {

package/CartTotalLine/components/Hint/index.js

@@ -1,22 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "./style";
+import { I18n } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  hint: {
+    paddingLeft: theme.spacing(1),
+    order: 5
+  }
+}));
 
 /**
  * The Hint component.
  * @param {Object} props The component props.
  * @return {JSX|null}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Hint = ({
   hint
 }) => {
+  const {
+    classes
+  } = useStyles();
   if (hint === null) {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: styles.hint,
+    className: classes.hint,
     children: /*#__PURE__*/_jsx(I18n.Text, {
       string: hint
     })

package/CartTotalLine/components/Label/index.js

@@ -1,37 +1,50 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { I18n } from '@shopgate/engage/components';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  label: {
+    flexGrow: 1,
+    paddingRight: theme.spacing(1),
+    order: 3
+  },
+  labelWithSuffix: {
+    paddingRight: theme.spacing(1)
+  }
+}));
 
 /**
  * The ShippingCostsLabel component.
  * @param {Object} props The component props.
  * @return {JSX|null}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Label({
+const Label = ({
   label,
   showSeparator,
   labelParams,
   suffix
-}) {
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!label) {
     return /*#__PURE__*/_jsx("div", {
-      className: styles.label
+      className: classes.label
     });
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: styles.label,
+    className: classes.label,
     children: [/*#__PURE__*/_jsx(I18n.Text, {
       string: label,
       params: labelParams,
-      className: classNames({
-        [styles.labelWithSuffix]: !!suffix
+      className: cx({
+        [classes.labelWithSuffix]: !!suffix
       })
     }), suffix, `${showSeparator ? ':' : ''}`]
   });
-}
+};
 Label.defaultProps = {
   label: null,
   suffix: null,

package/CartTotalLine/index.js

@@ -1,30 +1,64 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import Label from "./components/Label";
 import Amount from "./components/Amount";
 import Hint from "./components/Hint";
 import Spacer from "./components/Spacer";
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()({
+  line: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: '0.875rem',
+    alignItems: 'baseline'
+  },
+  disabled: {
+    color: `${colors.shade4} !important`
+  },
+  base: {
+    color: colors.shade9
+  },
+  subTotal: {
+    color: `${colors.dark}`
+  },
+  grandTotal: {
+    color: `${colors.dark}`,
+    fontSize: '1rem !important'
+  }
+});
 
 /**
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const CartTotalLine = ({
   children,
   type,
   isDisabled,
   className
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!children) {
     return null;
   }
+  let typeClass = classes.base;
+  if (type === 'subTotal') {
+    typeClass = classes.subTotal;
+  } else if (type === 'grandTotal') {
+    typeClass = classes.grandTotal;
+  }
   return /*#__PURE__*/_jsx("div", {
-    className: classNames(className, `ui-shared__cart-total-line ui-shared__cart-${type}-line`, styles.line, {
-      [styles.disabled]: isDisabled,
-      [styles[type] || styles.base]: true
-    }),
+    className: cx(`ui-shared__cart-total-line ui-shared__cart-${type}-line`, classes.line, {
+      [classes.disabled]: isDisabled,
+      [typeClass]: true
+    }, className),
     "data-test-id": `${type}CartTotal`,
     children: children
   });

package/Checkbox/index.js

@@ -1,38 +1,62 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import BaseCheckbox from '@shopgate/pwa-common/components/Checkbox';
 import CheckedIcon from "../icons/CheckedIcon";
 import UncheckedIcon from "../icons/UncheckedIcon";
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  icon: {
+    width: 24,
+    height: 24,
+    flexShrink: 0
+  },
+  checkedIcon: {
+    color: 'var(--color-secondary)'
+  },
+  uncheckedIcon: {
+    color: themeConfig.colors.shade6
+  }
+}));
 
 /**
  * The checkbox template component.
  * @param {Object} props The component props
  * @param {string} props.className Class for the underlying Checkbox component
- * @param {string} props.checkedClassName Class for checked icon.
- * @param {string} props.unCheckedClassName Class for unchecked icon.
+ * @param {string} [props.checkedClassName] Extra class for checked icon; default: secondary color.
+ * @param {string} [props.unCheckedClassName] Extra class for unchecked icon; default: shade6.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Checkbox = ({
   checkedClassName,
   unCheckedClassName,
   className,
   ...props
-}) => /*#__PURE__*/_jsx(BaseCheckbox, {
-  ...props,
-  className: `ui-shared__checkbox ${className}`,
-  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {
-    className: classNames(styles.icon, checkedClassName, 'checkedIcon')
-  }),
-  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {
-    className: classNames(styles.icon, unCheckedClassName, 'uncheckedIcon')
-  })
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+
+  // Legacy default: theme classes for checked/unchecked unless props are passed.
+  // `??` keeps an explicit '' from restoring defaults (like old cx(icon, '', …)).
+  const checkedCls = checkedClassName ?? classes.checkedIcon;
+  const uncheckedCls = unCheckedClassName ?? classes.uncheckedIcon;
+  return /*#__PURE__*/_jsx(BaseCheckbox, {
+    ...props,
+    className: cx('ui-shared__checkbox', className),
+    checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {
+      className: cx(classes.icon, checkedCls, 'checkedIcon')
+    }),
+    uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {
+      className: cx(classes.icon, uncheckedCls, 'uncheckedIcon')
+    })
+  });
+};
 Checkbox.defaultProps = {
-  checkedClassName: styles.checkedIcon,
   className: '',
-  unCheckedClassName: styles.uncheckedIcon
+  checkedClassName: undefined,
+  unCheckedClassName: undefined
 };
 export default Checkbox;