@shopgate/pwa-ui-shared 7.30.3 → 7.31.0-alpha.1

package/NoResults/components/Icon/index.js

@@ -1,15 +1,31 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import CryptoJs from 'crypto-js';
-import styles from "./style";
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  magnifier: {
+    fill: 'currentColor'
+  },
+  background: {
+    fill: themeColors.light
+  },
+  circle: {
+    fill: 'currentColor',
+    opacity: 0.065
+  }
+});
 
 /**
  * The no search results icon component.
  * @param {Object} props Props of the component
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const NoResultIcon = props => {
+  const {
+    classes
+  } = useStyles();
   const filterId = useMemo(() => {
     const prefix = 'no-search-results-shadow';
     const hash = CryptoJs.MD5(`${prefix}-${Date.now() + Math.random()}`).toString();
@@ -46,7 +62,7 @@ const NoResultIcon = props => {
       children: [/*#__PURE__*/_jsx("g", {
         transform: "translate(0 46)",
         children: /*#__PURE__*/_jsx("circle", {
-          className: styles.background,
+          className: classes.background,
           cx: "104",
           cy: "104",
           r: "104",
@@ -55,7 +71,7 @@ const NoResultIcon = props => {
       }), /*#__PURE__*/_jsx("g", {
         transform: "translate(-4 42)",
         children: /*#__PURE__*/_jsx("circle", {
-          className: styles.background,
+          className: classes.background,
           cx: "108",
           cy: "108",
           r: "108",
@@ -63,19 +79,19 @@ const NoResultIcon = props => {
         })
       }), /*#__PURE__*/_jsxs("g", {
         children: [/*#__PURE__*/_jsx("circle", {
-          className: styles.circle,
+          className: classes.circle,
           cx: "104",
           cy: "104",
           r: "104",
           transform: "translate(76 162)"
         }), /*#__PURE__*/_jsx("circle", {
-          className: styles.circle,
+          className: classes.circle,
           cx: "92",
           cy: "92",
           r: "92",
           transform: "translate(88 174)"
         }), /*#__PURE__*/_jsx("circle", {
-          className: styles.circle,
+          className: classes.circle,
           cx: "80",
           cy: "80",
           r: "80",
@@ -88,7 +104,7 @@ const NoResultIcon = props => {
         children: /*#__PURE__*/_jsx("g", {
           transform: "matrix(1, 0, 0, 1, 2686.4, -7054.12)",
           children: /*#__PURE__*/_jsx("path", {
-            className: styles.background,
+            className: classes.background,
             d: "M90.216,116.652a24.732,24.732,0,0,1-20.61-10.992,13.394,13.394,0,0,1-7.263-1.374,20,20,0,0,1-7.655,1.767,20.473,20.473,0,0,1-18.255-10.6,20.009,20.009,0,0,1-6.478.981A23.584,23.584,0,0,1,6.4,73.076c0-10.6,6.085-19.236,15.507-22.181V50.11A13.07,13.07,0,0,1,34.862,37.155a13.905,13.905,0,0,1,2.748.2A18.6,18.6,0,0,1,52.724,29.7,19.248,19.248,0,0,1,65.876,35,14.4,14.4,0,0,1,75.1,31.659a13.191,13.191,0,0,1,6.281,1.963,24.851,24.851,0,0,1,40.239,1.767,21.962,21.962,0,0,1,20.61,5.3c.393-.2.589-.393.981-.589a16.9,16.9,0,0,1,7.459-1.963,15.491,15.491,0,0,1,15.311,13.937A22.951,22.951,0,0,1,181.49,64.439c2.944,6.478,2.355,13.544-1.57,20.218a21.266,21.266,0,0,1-18.059,10.011h-.2c-4.122,0-7.459-.785-10.207-2.552a13.109,13.109,0,0,1-7.263.393,24.871,24.871,0,0,1-15.311,15.114,24.1,24.1,0,0,1-18.451-.981A25.762,25.762,0,0,1,90.216,116.652Z",
             transform: "translate(-2686.4 7054.12)"
           })
@@ -99,7 +115,7 @@ const NoResultIcon = props => {
         children: [/*#__PURE__*/_jsx("g", {
           transform: "matrix(1, 0, 0, 1, 2770, -6819)",
           children: /*#__PURE__*/_jsx("rect", {
-            className: styles.magnifier,
+            className: classes.magnifier,
             width: "13.003",
             height: "3.855",
             transform: "matrix(0.53, 0.85, -0.85, 0.53, -2613.92, 7029.38)"
@@ -107,7 +123,7 @@ const NoResultIcon = props => {
         }), /*#__PURE__*/_jsx("g", {
           transform: "matrix(1, 0, 0, 1, 2770, -6819)",
           children: /*#__PURE__*/_jsx("rect", {
-            className: styles.magnifier,
+            className: classes.magnifier,
             width: "3.855",
             height: "13.003",
             transform: "translate(-2566.07 7029.56) rotate(37.01)"
@@ -115,13 +131,13 @@ const NoResultIcon = props => {
         }), /*#__PURE__*/_jsx("g", {
           transform: "matrix(1, 0, 0, 1, 2770, -6819)",
           children: /*#__PURE__*/_jsx("rect", {
-            className: styles.magnifier,
+            className: classes.magnifier,
             width: "3.856",
             height: "13.002",
             transform: "translate(-2592.67 7023)"
           })
         }), /*#__PURE__*/_jsx("circle", {
-          className: styles.background,
+          className: classes.background,
           cx: "34",
           cy: "34",
           r: "34",
@@ -135,12 +151,12 @@ const NoResultIcon = props => {
               children: [/*#__PURE__*/_jsx("g", {
                 transform: "matrix(1, 0, 0, 1, 2623.3, -7041.94)",
                 children: /*#__PURE__*/_jsx("path", {
-                  className: styles.magnifier,
+                  className: classes.magnifier,
                   d: "M83.335,33.853a34.228,34.228,0,1,0-1.494,49.8l4.482,4.482L84.63,89.829a1.926,1.926,0,0,0,0,2.789l17.032,16.932a1.926,1.926,0,0,0,2.789,0l5.677-5.677a1.926,1.926,0,0,0,0-2.789L93.1,84.152a1.926,1.926,0,0,0-2.789,0l-1.1,1.1-4.482-4.482A34.352,34.352,0,0,0,83.335,33.853Zm22.51,68.625-2.789,2.789L88.912,91.124,91.7,88.335ZM37.718,79.47a30.214,30.214,0,1,1,42.729,0A30.3,30.3,0,0,1,37.718,79.47Z",
                   transform: "translate(-2648.22 7018.1)"
                 })
               }), /*#__PURE__*/_jsx("path", {
-                className: styles.magnifier,
+                className: classes.magnifier,
                 d: "M111.291,55.583a1.972,1.972,0,1,0,2.789-2.789,28.585,28.585,0,0,0-40.338-.1,1.972,1.972,0,0,0,2.789,2.789A24.557,24.557,0,0,1,111.291,55.583Z",
                 transform: "translate(-59.748 -38.701)"
               })]

package/NoResults/index.js

@@ -1,11 +1,10 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import I18n from '@shopgate/pwa-common/components/I18n';
+import { I18n } from '@shopgate/engage/components';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { svgToDataUrl } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import Icon from "./components/Icon";
-import styles from "./style";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   svgImages = {}
@@ -13,6 +12,31 @@ const {
 const {
   noResultsImage = ''
 } = svgImages || {};
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+    justifyContent: 'center',
+    textAlign: 'center',
+    background: 'var(--page-background-color)'
+  },
+  icon: {
+    width: 216,
+    color: 'var(--color-primary)'
+  },
+  headline: {
+    fontSize: '1.25rem',
+    fontWeight: 500,
+    marginTop: 30
+  },
+  text: {
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(0, 2)
+  }
+}));
 
 /**
  * The NoResults component.
@@ -20,12 +44,16 @@ const {
  * @returns {JSX.Element}
  */
 const NoResults = props => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const imageSRC = useMemo(() => svgToDataUrl(noResultsImage), []);
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames(styles.wrapper, props.className, ' ui-shared__no-results'),
+    className: cx(classes.wrapper, props.className, ' ui-shared__no-results'),
     "data-test-id": "noResults",
     children: [/*#__PURE__*/_jsx("div", {
-      className: classNames(styles.icon, 'no-results__image'),
+      className: cx(classes.icon, 'no-results__image'),
       children: noResultsImage ? /*#__PURE__*/_jsx("img", {
         src: imageSRC,
         alt: ""
@@ -34,13 +62,13 @@ const NoResults = props => {
       role: "alert",
       "aria-atomic": "true",
       children: [/*#__PURE__*/_jsx("div", {
-        className: styles.headline,
+        className: classes.headline,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: props.headlineText,
           params: props
         })
       }), /*#__PURE__*/_jsx("div", {
-        className: styles.text,
+        className: classes.text,
         children: /*#__PURE__*/_jsx(I18n.Text, {
           string: props.bodyText,
           params: props

package/Placeholder/index.js

@@ -1,35 +1,46 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  root: {
+    background: 'var(--color-background-accent)',
+    position: 'relative'
+  }
+}));
 
 /**
  * The placeholder component.
+ * @param {Object} props Props (also spread to style).
+ * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-let Placeholder = /*#__PURE__*/function (_PureComponent) {
-  function Placeholder() {
-    return _PureComponent.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Placeholder, _PureComponent);
-  var _proto = Placeholder.prototype;
-  /**
-   * @returns {JSX}
-   */
-  _proto.render = function render() {
-    return /*#__PURE__*/_jsx("div", {
-      className: `${styles} ui-shared__placeholder`,
-      style: this.props
-    });
+const Placeholder = ({
+  height,
+  left,
+  top,
+  width,
+  ...rest
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const style = {
+    height,
+    left,
+    top,
+    width,
+    ...rest
   };
-  return Placeholder;
-}(PureComponent);
-/* eslint-disable react/no-unused-prop-types */
-/* eslint-enable react/no-unused-prop-types */
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.root, 'ui-shared__placeholder'),
+    style: style
+  });
+};
 Placeholder.defaultProps = {
   height: 0,
   left: 0,
   top: 0,
   width: 0
 };
-export default Placeholder;
+export default /*#__PURE__*/memo(Placeholder);

package/PlaceholderLabel/index.js

@@ -1,23 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  label: {
+    background: themeConfig.colors.dark,
+    opacity: 0.1,
+    width: '100%',
+    height: 16,
+    marginBottom: 12
+  }
+}));
 
 /**
  * Placeholder for one line texts.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const PlaceholderLabel = ({
   children,
   className,
   ready,
   style
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!ready) {
     return /*#__PURE__*/_jsx("div", {
       style: style,
-      className: `${styles.label} ${className} ui-shared__placeholder-label`
+      className: cx(classes.label, className, 'ui-shared__placeholder-label')
     });
   }
   return children;

package/Price/index.js

@@ -1,11 +1,29 @@
 import "core-js/modules/es.string.replace.js";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { I18n } from '@shopgate/engage/components';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
 import showTaxDisclaimer from '@shopgate/pwa-common-commerce/market/helpers/showTaxDisclaimer';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks/useWidgetSettings';
-import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  container: {
+    display: 'flex',
+    position: 'relative',
+    whiteSpace: 'nowrap'
+  },
+  disclaimer: {
+    color: 'initial',
+    fontSize: 14,
+    position: 'absolute',
+    right: -10,
+    top: 0
+  },
+  discounted: {
+    color: 'var(--color-primary)'
+  }
+});
 
 /**
  * The Price component
@@ -15,11 +33,13 @@ import styles from "./style";
  * @param {number} props.unitPrice The price of the product
  * @param {number} props.unitPriceMin The minimum price of possible child products
  * @param {boolean} props.discounted Tells if the pice is discounted
- * @param {Object} context The component context.
  * @return {JSX.Element}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Price = (props, context) => {
+const Price = props => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   // Added with PWA 6 - CCP-2372
   const {
     show,
@@ -28,13 +48,9 @@ const Price = (props, context) => {
 
   // use widget setting if set to true/false, otherwise use market logic
   const showDisclaimer = typeof show === 'boolean' ? show : showTaxDisclaimer;
-  const containerClasses = classNames(styles.container, props.className, {
-    [styles.discounted]: props.discounted
+  const containerClasses = cx(classes.container, props.className, {
+    [classes.discounted]: props.discounted
   }, 'price', props.discounted ? 'ui-shared__price-discounted' : 'ui-shared__price');
-  const {
-    __,
-    _p
-  } = context.i18n();
   let ariaPrice;
   const showFromPrice = useMemo(() => {
     // unitPriceMin is falsy so we don't have a price range
@@ -43,11 +59,11 @@ const Price = (props, context) => {
     return props.unitPriceMin !== props.unitPriceMax;
   }, [props.unitPriceMax, props.unitPriceMin]);
   if (showFromPrice) {
-    ariaPrice = __('price.from', {
-      price: _p(props.unitPriceMin, props.currency, props.fractions)
+    ariaPrice = i18n.text('price.from', {
+      price: i18n.price(props.unitPriceMin, props.currency, props.fractions)
     });
   } else {
-    ariaPrice = _p(props.unitPrice, props.currency, props.fractions);
+    ariaPrice = i18n.price(props.unitPrice, props.currency, props.fractions);
   }
   ariaPrice = ariaPrice.replace('-', '\u2212');
 
@@ -86,19 +102,19 @@ const Price = (props, context) => {
     className: containerClasses,
     "data-test-id": `minPrice: ${props.unitPriceMin} price: ${props.unitPrice} currency: ${props.currency}`,
     children: [/*#__PURE__*/_jsx("span", {
-      "aria-label": __('price.label', {
+      "aria-label": i18n.text('price.label', {
         price: ariaPrice
       }),
       children: priceContent
     }), props.taxDisclaimer && showDisclaimer ? /*#__PURE__*/_jsxs("div", {
-      className: styles.disclaimer,
+      className: classes.disclaimer,
       children: [/*#__PURE__*/_jsx("span", {
         "aria-hidden": true,
         children: hint || '*'
       }), /*#__PURE__*/_jsx("span", {
         className: "sr-only",
-        "aria-label": hint || __('product.tax_disclaimer_aria'),
-        children: __('product.tax_disclaimer_aria')
+        "aria-label": hint || i18n.text('product.tax_disclaimer_aria'),
+        children: i18n.text('product.tax_disclaimer_aria')
       })]
     }) : null]
   });
@@ -112,7 +128,4 @@ Price.defaultProps = {
   taxDisclaimer: false,
   allowFree: false
 };
-Price.contextTypes = {
-  i18n: PropTypes.func
-};
 export default Price;

package/PriceInfo/index.js

@@ -1,6 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-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()({
+  root: {
+    color: themeConfig.colors.shade3
+  }
+});
 
 /**
  * The price info component
@@ -9,17 +16,24 @@ import styles from "./style";
  * @param {string} [props.className] CSS classes
  * @return {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const PriceInfo = ({
   className,
   text
-}) => /*#__PURE__*/_jsx("div", {
-  className: `${styles} ${className} ui-shared__price-info`,
-  dangerouslySetInnerHTML: {
-    __html: text
-  },
-  "data-test-id": `priceInfo: ${text}`
-});
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.root, className, 'ui-shared__price-info')
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: text
+    },
+    "data-test-id": `priceInfo: ${text}`
+  });
+};
 PriceInfo.defaultProps = {
   className: ''
 };

package/PriceStriked/index.js

@@ -1,8 +1,9 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useLayoutEffect, useRef, useState } 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 { i18n } from '@shopgate/engage/core/helpers';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
 
 /**
  * Calculates the angle for the strike-through line
@@ -20,10 +21,33 @@ const calcAngle = element => {
   const width = cloned.offsetWidth;
   const height = cloned.offsetHeight;
   document.body.removeChild(cloned);
-
-  // Calculate the correct angle for the strike-through line
   return Math.round(90 - Math.atan(width / height) * (180 / Math.PI));
 };
+const useStyles = makeStyles()({
+  root: {
+    whiteSpace: 'nowrap',
+    color: themeColors.shade11,
+    '& span': {
+      position: 'relative',
+      '&::before': {
+        borderColor: 'currentColor',
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: '50%'
+      }
+    }
+  },
+  strikeActive: {
+    '& span': {
+      '&::before': {
+        borderTop: '1px solid',
+        transform: 'rotate(calc(var(--price-strike-deg) * -1deg))'
+      }
+    }
+  }
+});
 
 /**
  * The price striked component
@@ -33,80 +57,46 @@ const calcAngle = element => {
  * @param {string} [props.className] CSS classes
  * @return {JSX}
  */
-let PriceStriked = /*#__PURE__*/function (_Component) {
-  /**
-   * Constructor
-   * @param {Object} props The component props
-   */
-  function PriceStriked(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    /**
-     * Sets the calculated angle for the DOM element
-     * and returns true if succeeded.
-     * @returns {boolean}
-     */
-    _this.setAngle = () => {
-      if (_this.element) {
-        _this.angle = calcAngle(_this.element);
-        return true;
-      }
-      return false;
-    };
-    _this.angle = null;
-    _this.element = null;
-    return _this;
-  }
-
-  /**
-   * Updates the component one more time with the calculated angle
-   * based on the DOM element.
-   */
-  _inheritsLoose(PriceStriked, _Component);
-  var _proto = PriceStriked.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    if (this.setAngle()) {
-      this.forceUpdate();
+const PriceStriked = ({
+  className,
+  currency,
+  value
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [angle, setAngle] = useState(null);
+  const elementRef = useRef(null);
+  useLayoutEffect(() => {
+    if (elementRef.current) {
+      setAngle(calcAngle(elementRef.current));
     }
-  };
-  /**
-   * Renders the component.
-   * @returns {JSX.Element}
-   */
-  _proto.render = function render() {
-    const {
-      __,
-      _p
-    } = this.context.i18n();
-    const angleStyle = this.angle ? styles.getAngleStyle(this.angle) : '';
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: `${styles.basic} ${this.props.className} ${angleStyle} price-striked ui-shared__price-striked`,
-        children: /*#__PURE__*/_jsx("span", {
-          "aria-hidden": true,
-          ref: ref => {
-            this.element = ref;
-          },
-          "data-test-id": `strikedPrice: ${this.props.value}`,
-          children: /*#__PURE__*/_jsx(I18n.Price, {
-            price: this.props.value,
-            currency: this.props.currency
-          })
-        })
-      }), /*#__PURE__*/_jsx("span", {
-        className: "sr-only",
-        children: __('price.label_old_price', {
-          price: _p(this.props.value, this.props.currency, true)
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: cx(classes.root, angle != null && classes.strikeActive, className, 'price-striked', 'ui-shared__price-striked'),
+      style: angle != null ? {
+        '--price-strike-deg': angle
+      } : undefined,
+      children: /*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        ref: elementRef,
+        "data-test-id": `strikedPrice: ${value}`,
+        children: /*#__PURE__*/_jsx(I18n.Price, {
+          price: value,
+          currency: currency
         })
-      })]
-    });
-  };
-  return PriceStriked;
-}(Component);
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      children: i18n.text('price.label_old_price', {
+        price: i18n.price(value, currency, true)
+      })
+    })]
+  });
+};
 PriceStriked.defaultProps = {
   className: ''
 };
-PriceStriked.contextTypes = {
-  i18n: PropTypes.func
-};
 export default PriceStriked;