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

package/ProgressBar/index.js

@@ -1,10 +1,10 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-var _ProgressBar;
-import React, { Component } from 'react';
+import React, { useEffect, useState, memo } from 'react';
 import PropTypes from 'prop-types';
+import Color from 'color';
 import Transition from 'react-transition-group/Transition';
 import UIEvents from '@shopgate/pwa-core/emitters/ui';
-import styles from "./style";
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { getCSSCustomProp, makeStyles, keyframes } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 const duration = 150;
 const transitionStyles = {
@@ -21,102 +21,137 @@ const transitionStyles = {
     transform: 'scale(1, 0)'
   }
 };
+const {
+  colors
+} = themeConfig;
+const progressBarHeight = 4;
+const indeterminateLong = keyframes({
+  '0%': {
+    left: '-35%',
+    right: '100%'
+  },
+  '60%': {
+    left: '100%',
+    right: '-90%'
+  },
+  '100%': {
+    left: '100%',
+    right: '-90%'
+  }
+});
+const indeterminateShort = keyframes({
+  '0%': {
+    left: '-200%',
+    right: '100%'
+  },
+  '60%': {
+    left: '107%',
+    right: '-8%'
+  },
+  '100%': {
+    left: '107%',
+    right: '-8%'
+  }
+});
+const useStyles = makeStyles()({
+  innerElement: {
+    ':before': {
+      content: '""',
+      position: 'absolute',
+      background: 'var(--color-secondary)',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      willChange: 'left, right'
+    },
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      background: 'var(--color-secondary)',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      willChange: 'left, right'
+    }
+  },
+  animating: {
+    ':before': {
+      animation: `${indeterminateLong} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
+    },
+    ':after': {
+      animation: `${indeterminateShort} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite`,
+      animationDelay: '1.15s'
+    }
+  }
+});
 
 /**
  * A component for visualizing any kind of progress.
  * This component will show the current progress in a linear bar.
  */
-let ProgressBar = /*#__PURE__*/function (_Component) {
-  /**
-   * The constructor
-   * @param {Object} props The component props.
-   */
-  function ProgressBar(props) {
-    var _this;
-    _this = _Component.call(this, props) || this;
-    _this.state = {
-      isAnimating: props.isVisible,
-      isVisible: props.isVisible
-    };
-    return _this;
-  }
-
-  /**
-   * Update the state based on props.
-   * @param {Object} nextProps The next set of props.
-   */
-  _inheritsLoose(ProgressBar, _Component);
-  var _proto = ProgressBar.prototype;
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.isVisible === nextProps.isVisible) {
-      return;
-    }
-    this.setState({
-      ...(nextProps.isVisible && {
-        isAnimating: true
-      }),
-      isVisible: nextProps.isVisible
-    });
-  }
-
-  /**
-   * Only update when certain state changes are made.
-   * @param {Object} nextProps The next set of props.
-   * @param {Object} nextState The next component state.
-   * @returns {boolean}
-   */;
-  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
-    return this.state.isAnimating !== nextState.isAnimating || this.state.isVisible !== nextState.isVisible;
-  }
-
-  /**
-   * Renders the component.
-   * @return {JSX}
-   */;
-  _proto.render = function render() {
-    const animationClasses = [styles.innerElement];
-
-    // Add the animation if we need it.
-    if (this.state.isAnimating) {
-      animationClasses.push(styles.animating);
+const ProgressBar = /*#__PURE__*/memo(({
+  isVisible
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [isAnimating, setIsAnimating] = useState(isVisible);
+  const [visible, setVisible] = useState(isVisible);
+  useEffect(() => {
+    if (isVisible) {
+      setIsAnimating(true);
+      setVisible(true);
+    } else {
+      setVisible(false);
     }
-    return /*#__PURE__*/_jsx(Transition, {
-      in: this.state.isVisible,
-      timeout: duration,
-      onExited: () => {
-        this.setState({
-          isAnimating: false
-        });
+  }, [isVisible]);
+  const wrapperBackground = Color(getCSSCustomProp('--color-secondary') || colors.accent).fade(0.6);
+  return /*#__PURE__*/_jsx(Transition, {
+    in: visible,
+    timeout: duration,
+    onExited: () => {
+      setIsAnimating(false);
+    },
+    children: state => /*#__PURE__*/_jsx("div", {
+      className: "ui-shared__progress-bar",
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        background: wrapperBackground,
+        width: '100%',
+        height: progressBarHeight,
+        overflow: 'hidden',
+        transition: 'transform 150ms cubic-bezier(0.25, 0.1, 0.25, 1)',
+        zIndex: 10,
+        ...transitionStyles[state]
       },
-      children: state => /*#__PURE__*/_jsx("div", {
-        className: `${styles.wrapper()} ui-shared__progress-bar`,
-        style: transitionStyles[state],
-        children: /*#__PURE__*/_jsx("div", {
-          className: animationClasses.join(' ')
-        })
+      children: /*#__PURE__*/_jsx("div", {
+        className: cx(classes.innerElement, isAnimating && classes.animating)
       })
-    });
-  };
-  return ProgressBar;
-}(Component);
-_ProgressBar = ProgressBar;
+    })
+  });
+});
 ProgressBar.PROGRESS_BAR_SHOW = 'PROGRESS_BAR_SHOW';
 ProgressBar.PROGRESS_BAR_HIDE = 'PROGRESS_BAR_HIDE';
+
 /**
  * Shows the progress bar.
  * @param {string} pattern The router pattern to show the bar for.
  */
 ProgressBar.show = pattern => {
-  UIEvents.emit(_ProgressBar.PROGRESS_BAR_SHOW, pattern);
+  UIEvents.emit(ProgressBar.PROGRESS_BAR_SHOW, pattern);
 };
+
 /**
  * Hides the progress bar.
  * @param {string} pattern The router pattern to hide the bar from.
  */
 ProgressBar.hide = pattern => {
-  UIEvents.emit(_ProgressBar.PROGRESS_BAR_HIDE, pattern);
+  UIEvents.emit(ProgressBar.PROGRESS_BAR_HIDE, pattern);
 };
 ProgressBar.defaultProps = {
   isVisible: true
 };
+ProgressBar.displayName = 'ProgressBar';
 export default ProgressBar;

package/RadioButton/index.js

@@ -1,22 +1,40 @@
 import React from 'react';
+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/RadioCheckedIcon";
 import UncheckedIcon from "../icons/RadioUncheckedIcon";
-import styles from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  checkedIcon: {
+    width: 24,
+    height: 24,
+    color: 'var(--color-secondary)'
+  },
+  uncheckedIcon: {
+    width: 24,
+    height: 24,
+    color: themeConfig.colors.shade6
+  }
+}));
 
 /**
  * The RadioButton template component.
  * @param {Object} props The component properties.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-const RadioButton = props => /*#__PURE__*/_jsx(BaseCheckbox, {
-  ...props,
-  checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {
-    className: styles.checkedIcon
-  }),
-  uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {
-    className: styles.uncheckedIcon
-  })
-});
+const RadioButton = props => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx(BaseCheckbox, {
+    ...props,
+    checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {
+      className: classes.checkedIcon
+    }),
+    uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {
+      className: classes.uncheckedIcon
+    })
+  });
+};
 export default RadioButton;

package/RatingStars/index.js

@@ -1,16 +1,55 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import times from 'lodash/times';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import StarIcon from "../icons/StarIcon";
 import StarHalfIcon from "../icons/StarHalfIcon";
-import styles from "./style";
 import { RATING_SCALE_DIVISOR } from "./constants";
-
-/**
- * The available style keys for the rating stars.
- */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ICON_SIZES = {
+  small: '1em',
+  big: '1.24em',
+  large: '2.3em'
+};
+const useStyles = makeStyles()({
+  container: {
+    position: 'relative',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    maxWidth: '100%'
+  },
+  icon: {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    outline: 0
+  },
+  iconGapSmall: {
+    marginRight: '0.1em'
+  },
+  iconGapBig: {
+    marginRight: '0.12em'
+  },
+  iconGapLarge: {
+    marginRight: '0.23em'
+  },
+  emptyStars: {
+    color: themeConfig.colors.shade7,
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexWrap: 'nowrap'
+  },
+  filledStars: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    color: 'var(--color-primary)',
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexWrap: 'nowrap'
+  }
+});
 const numStars = 5;
 
 /**
@@ -18,142 +57,88 @@ const numStars = 5;
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-let RatingStars = /*#__PURE__*/function (_Component) {
-  function RatingStars() {
-    return _Component.apply(this, arguments) || this;
-  }
-  _inheritsLoose(RatingStars, _Component);
-  var _proto = RatingStars.prototype;
-  /**
-   * Only update the component if the star rating changed.
-   * @param {Object} nextProps The next component props.
-   * @returns {boolean}
-   */
-  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
-    return nextProps.value !== this.props.value;
-  }
-
-  /**
-   * Returns textual version of stars for screen readers.
-   * @param {number} stars Number of stars.
-   * @returns {string}
-   */;
-  _proto.getTextualFinal = function getTextualFinal(stars) {
-    const {
-      __
-    } = this.context.i18n();
-    return __('reviews.rating_stars', {
-      rate: stars,
-      maxRate: numStars
-    });
-  }
-
-  /**
-   * Returns text for call to a
-   * @param {number} stars Number of stars.
-   * @returns {string}
-   */;
-  _proto.getTextualCTA = function getTextualCTA(stars) {
-    const {
-      __
-    } = this.context.i18n();
-    return __('reviews.press_to_rate_with_x_stars', {
-      rate: stars
-    });
-  }
-
-  /**
-   * Handles click on RatingStars.
-   * @param {Object} e SyntheticEvent.
-   * @param {number} pos Position/Index of clicked RatingStar.
-   */;
-  _proto.handleSelection = function handleSelection(e, pos) {
-    const {
-      onSelection
-    } = this.props;
+const RatingStars = ({
+  value,
+  className,
+  display,
+  isSelectable,
+  onSelection
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const ratedStars = value / RATING_SCALE_DIVISOR;
+  const numFullStars = Math.floor(ratedStars);
+  const numHalfStars = Math.ceil(ratedStars - numFullStars);
+  const size = ICON_SIZES[display];
+  const getTextualFinal = useCallback(stars => i18n.text('reviews.rating_stars', {
+    rate: stars,
+    maxRate: numStars
+  }), []);
+  const getTextualCTA = useCallback(stars => i18n.text('reviews.press_to_rate_with_x_stars', {
+    rate: stars
+  }), []);
+  const handleSelection = useCallback((e, pos) => {
     e.target.value = pos * RATING_SCALE_DIVISOR;
     onSelection(e);
-  }
-
-  /**
-   * Renders the component.
-   * @returns {JSX.Element}
-   */;
-  _proto.render = function render() {
-    const {
-      value,
-      isSelectable
-    } = this.props;
-    const ratedStars = value / RATING_SCALE_DIVISOR;
-    const numFullStars = Math.floor(ratedStars);
-    const numHalfStars = Math.ceil(ratedStars - numFullStars);
-    const size = styles.iconStyles[this.props.display].iconSize;
-    const className = [styles.container, this.props.className, 'ui-shared__rating-stars'].join(' ');
-    const iconClassName = [styles.iconStyles[this.props.display].iconStyle, styles.icon].join(' ');
-    const emptyStars = [].concat(times(numStars, i => {
-      const pos = i + 1;
-      const starProps = {
-        className: iconClassName,
-        key: pos,
-        ...(isSelectable && {
-          'aria-label': this.getTextualCTA(pos),
-          role: 'button',
-          onClick: e => this.handleSelection(e, pos)
-        })
-      };
-      return /*#__PURE__*/_jsx("div", {
-        ...starProps,
-        children: /*#__PURE__*/_jsx(StarIcon, {
-          size: size
-        })
-      });
-    }));
-    const filledStars = [].concat(times(numFullStars, i => {
-      const pos = i + 1;
-      const starProps = {
-        className: iconClassName,
-        key: numStars + pos,
-        ...(isSelectable && {
-          'aria-hidden': true,
-          // Aria hidden since it's basically a duplicate for a screen reader.
-          role: 'button',
-          onClick: e => this.handleSelection(e, pos)
-        })
-      };
-      return /*#__PURE__*/_jsx("div", {
-        ...starProps,
-        children: /*#__PURE__*/_jsx(StarIcon, {
-          size: size
-        })
-      });
-    }), times(numHalfStars, i => /*#__PURE__*/_jsx("div", {
+  }, [onSelection]);
+  const iconClassName = cx(classes.icon, display === 'small' && classes.iconGapSmall, display === 'big' && classes.iconGapBig, display === 'large' && classes.iconGapLarge);
+  const rootClassName = cx(classes.container, className, 'ui-shared__rating-stars');
+  const emptyStars = [].concat(times(numStars, i => {
+    const pos = i + 1;
+    const starProps = {
       className: iconClassName,
-      children: /*#__PURE__*/_jsx(StarHalfIcon, {
+      key: pos,
+      ...(isSelectable && {
+        'aria-label': getTextualCTA(pos),
+        role: 'button',
+        onClick: e => handleSelection(e, pos)
+      })
+    };
+    return /*#__PURE__*/_jsx("div", {
+      ...starProps,
+      children: /*#__PURE__*/_jsx(StarIcon, {
         size: size
       })
-    }, i + numFullStars)));
-    return /*#__PURE__*/_jsxs("div", {
-      role: isSelectable ? undefined : 'img',
-      className: className,
-      "aria-label": this.getTextualFinal(ratedStars),
-      "data-test-id": `ratedStars: ${ratedStars}`,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: `${styles.emptyStars} rating-stars-empty`,
-        children: emptyStars
-      }), /*#__PURE__*/_jsx("div", {
-        className: `${styles.filledStars} rating-stars-filled`,
-        children: filledStars
-      })]
     });
-  };
-  return RatingStars;
-}(Component);
-/**
- * Context types definition.
- * @type {{i18n: function}}
- */
-RatingStars.contextTypes = {
-  i18n: PropTypes.func
+  }));
+  const filledStars = [].concat(times(numFullStars, i => {
+    const pos = i + 1;
+    const starProps = {
+      className: iconClassName,
+      key: numStars + pos,
+      ...(isSelectable && {
+        'aria-hidden': true,
+        role: 'button',
+        onClick: e => handleSelection(e, pos)
+      })
+    };
+    return /*#__PURE__*/_jsx("div", {
+      ...starProps,
+      children: /*#__PURE__*/_jsx(StarIcon, {
+        size: size
+      })
+    });
+  }), times(numHalfStars, i => /*#__PURE__*/_jsx("div", {
+    className: iconClassName,
+    children: /*#__PURE__*/_jsx(StarHalfIcon, {
+      size: size
+    })
+  }, i + numFullStars)));
+  return /*#__PURE__*/_jsxs("div", {
+    role: isSelectable ? undefined : 'img',
+    className: rootClassName,
+    "aria-label": getTextualFinal(ratedStars),
+    "data-test-id": `ratedStars: ${ratedStars}`,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: cx(classes.emptyStars, 'rating-stars-empty'),
+      children: emptyStars
+    }), /*#__PURE__*/_jsx("div", {
+      className: cx(classes.filledStars, 'rating-stars-filled'),
+      children: filledStars
+    })]
+  });
 };
 RatingStars.defaultProps = {
   className: '',

package/Ripple/components/RippleAnimation/index.js

@@ -2,7 +2,15 @@ import React, { memo, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import style from "../../style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(() => ({
+  ripple: {
+    position: 'absolute',
+    borderRadius: '50%',
+    transformOrigin: '50% 50% 0'
+  }
+}));
 
 /**
  * The RippleAnimation component
@@ -17,7 +25,6 @@ import style from "../../style";
  * @param {number} props.y The y coordinate of the ripple center.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function RippleAnimation({
   color,
   duration,
@@ -26,6 +33,9 @@ function RippleAnimation({
   x,
   y
 }) {
+  const {
+    classes
+  } = useStyles();
   const nodeRef = useRef(null);
   const baseStyle = useMemo(() => ({
     backgroundColor: color,
@@ -81,7 +91,7 @@ function RippleAnimation({
     onEntered: onComplete,
     children: state => /*#__PURE__*/_jsx("div", {
       ref: nodeRef,
-      className: style.ripple,
+      className: classes.ripple,
       style: getStyleForState(state)
     })
   });