@wix/design-system 1.156.0 → 1.157.0

package/dist/cjs/AnalyticsSummaryCard/AnalyticsSummaryCard.js

@@ -2,11 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.AnalyticsSummaryCard = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _noop = _interopRequireDefault(require("lodash/noop"));
-var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _SparklineChart = _interopRequireDefault(require("../SparklineChart"));
@@ -14,343 +13,267 @@ var _TrendIndicator = _interopRequireDefault(require("../TrendIndicator"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _AnalyticsSummaryCardSt = require("./AnalyticsSummaryCard.st.css.js");
-var _constants = require("./constants");
+var _AnalyticsSummaryCard = require("./AnalyticsSummaryCard.constants");
 var _Focusable = require("../common/Focusable");
-var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/AnalyticsSummaryCard/AnalyticsSummaryCard.js";
+var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/AnalyticsSummaryCard/AnalyticsSummaryCard.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SPARKLINE_HEIGHT = 22;
 
-/** Analytics Summary Card */
-class AnalyticsSummaryCard extends _react.default.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      isHovered: false
-    };
-    this._handleMouseEnter = () => {
-      this.setState({
-        isHovered: true
-      });
-    };
-    this._handleMouseLeave = () => {
-      this.setState({
-        isHovered: false
-      });
-    };
-    this._handleClick = event => {
-      var {
-        onClick
-      } = this.props;
-      if ((0, _isFunction.default)(onClick)) {
-        onClick(event);
-      }
-    };
-    this._handleCTAClick = event => {
-      var {
-        onCTAClick
-      } = this.props;
-      event.stopPropagation();
-      if ((0, _isFunction.default)(onCTAClick)) {
-        onCTAClick(event);
-      }
-    };
-    this._shouldShowCTA = () => {
-      var {
-        isLoading,
-        ctaButton,
-        alwaysShowCTA
-      } = this.props;
-      var {
-        isHovered
-      } = this.state;
-      return !isLoading && ctaButton && (isHovered || alwaysShowCTA);
-    };
-    this._renderTitle = () => {
-      var {
-        title,
-        titleTooltip
-      } = this.props;
+// storybook utils can't unwrap HOC, hence the export
+var AnalyticsSummaryCard = _ref => {
+  var {
+    isLoading = false,
+    ctaButton = null,
+    footer = null,
+    onChartHover = _noop.default,
+    isTrendVisible = false,
+    alwaysShowCTA = false,
+    chartWidth = 69,
+    chartAnimationDuration = 300,
+    onClick,
+    onCTAClick,
+    title,
+    titleTooltip,
+    value,
+    valueTooltip,
+    dataHook,
+    className,
+    trend,
+    invertedTrend,
+    chartData,
+    chartColorHex,
+    chartHighlightedStartingIndex,
+    getChartTooltipContent,
+    focusableOnFocus,
+    focusableOnBlur
+  } = _ref;
+  var [isHovered, setIsHovered] = (0, _react.useState)(false);
+  var handleMouseEnter = (0, _react.useCallback)(() => setIsHovered(true), []);
+  var handleMouseLeave = (0, _react.useCallback)(() => setIsHovered(false), []);
+  var handleClick = (0, _react.useCallback)(event => onClick == null ? void 0 : onClick(event), [onClick]);
+  var handleCTAClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    onCTAClick == null || onCTAClick(event);
+  }, [onCTAClick]);
+  var shouldShowCTA = (0, _react.useMemo)(() => !isLoading && ctaButton && (isHovered || alwaysShowCTA), [alwaysShowCTA, ctaButton, isHovered, isLoading]);
+  var renderTitle = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    placement: "top",
+    content: titleTooltip,
+    disabled: !titleTooltip,
+    dataHook: _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardTitleTooltip,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 70,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "data-hook": _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardTitle,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 76,
+      columnNumber: 9
+    }
+  }, title)), [title, titleTooltip]);
+  var renderValue = (0, _react.useCallback)(() => {
+    if (valueTooltip) {
       return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
         placement: "top",
-        content: titleTooltip,
-        disabled: !titleTooltip,
-        dataHook: _constants.dataHooks.analyticsSummaryCardTitleTooltip,
-        __self: this,
+        content: valueTooltip,
+        dataHook: _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardValueTooltip,
+        __self: void 0,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 59,
-          columnNumber: 7
+          lineNumber: 85,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        tagName: "span",
+        weight: "bold",
+        dataHook: _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardValue,
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 90,
+          columnNumber: 11
         }
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        "data-hook": _constants.dataHooks.analyticsSummaryCardTitle,
-        __self: this,
+      }, value));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_Text.default, {
+        tagName: "span",
+        weight: "bold",
+        dataHook: _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardValue,
+        __self: void 0,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 65,
+          lineNumber: 101,
           columnNumber: 9
         }
-      }, title));
-    };
-    this._renderValue = () => {
-      var {
-        value,
-        valueTooltip
-      } = this.props;
-      if (valueTooltip) {
-        return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-          placement: "top",
-          content: valueTooltip,
-          dataHook: _constants.dataHooks.analyticsSummaryCardValueTooltip,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 75,
-            columnNumber: 9
-          }
-        }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-          tagName: "span",
-          weight: "bold",
-          dataHook: _constants.dataHooks.analyticsSummaryCardValue,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 80,
-            columnNumber: 11
-          }
-        }, value));
-      } else {
-        return /*#__PURE__*/_react.default.createElement(_Text.default, {
-          tagName: "span",
-          weight: "bold",
-          dataHook: _constants.dataHooks.analyticsSummaryCardValue,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 91,
-            columnNumber: 9
-          }
-        }, value);
-      }
-    };
-  }
-  render() {
-    var {
-      dataHook,
-      className,
-      trend,
-      isTrendVisible,
-      invertedTrend,
-      chartData,
-      chartColorHex,
-      chartWidth,
-      isLoading,
-      ctaButton,
-      onClick,
-      onChartHover,
-      chartHighlightedStartingIndex,
-      getChartTooltipContent,
-      chartAnimationDuration,
-      footer,
-      focusableOnFocus,
-      focusableOnBlur
-    } = this.props;
-    var {
-      isHovered
-    } = this.state;
-    var isClickable = (0, _isFunction.default)(onClick);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.root, {
-        hovered: isHovered,
-        clickable: isClickable
-      }, className),
-      "data-hook": dataHook,
-      onClick: this._handleClick,
-      onMouseEnter: this._handleMouseEnter,
-      onMouseLeave: this._handleMouseLeave,
-      onFocus: focusableOnFocus,
-      onBlur: focusableOnBlur,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 128,
-        columnNumber: 7
-      }
-    }, isLoading && /*#__PURE__*/_react.default.createElement("div", {
-      className: _AnalyticsSummaryCardSt.classes.loader,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 146,
-        columnNumber: 11
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
-      dataHook: _constants.dataHooks.analyticsSummaryCardLoader,
-      size: "tiny",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 147,
-        columnNumber: 13
-      }
-    })), this._shouldShowCTA() && /*#__PURE__*/_react.default.createElement("div", {
-      "data-hook": _constants.dataHooks.analyticsSummaryCardCTA,
-      className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.ctaButton),
-      onClick: this._handleCTAClick,
-      onFocus: focusableOnFocus,
-      onBlur: focusableOnBlur,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 156,
-        columnNumber: 11
-      }
-    }, ctaButton), /*#__PURE__*/_react.default.createElement("div", {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 167,
-        columnNumber: 9
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.title),
-      onFocus: focusableOnFocus,
-      onBlur: focusableOnBlur,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 169,
-        columnNumber: 11
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
-      size: "extraTiny",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 174,
-        columnNumber: 13
-      }
-    }, this._renderTitle())), /*#__PURE__*/_react.default.createElement("div", {
-      className: _AnalyticsSummaryCardSt.classes.valueLineContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 178,
-        columnNumber: 11
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _AnalyticsSummaryCardSt.classes.valueAndTrend,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 179,
-        columnNumber: 13
-      }
-    }, this._renderValue(), isTrendVisible && /*#__PURE__*/_react.default.createElement(_TrendIndicator.default, {
-      dataHook: _constants.dataHooks.analyticsSummaryCardTrend,
-      className: _AnalyticsSummaryCardSt.classes.trend,
-      value: trend,
-      inverted: invertedTrend,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 182,
-        columnNumber: 17
-      }
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.sparkline),
-      onFocus: focusableOnFocus,
-      onBlur: focusableOnBlur,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 192,
-        columnNumber: 13
-      }
-    }, /*#__PURE__*/_react.default.createElement(_SparklineChart.default, {
-      dataHook: _constants.dataHooks.analyticsSummaryCardChart,
-      onHover: onChartHover,
-      data: chartData,
-      color: chartColorHex,
-      width: chartWidth,
-      height: SPARKLINE_HEIGHT,
-      highlightedStartingIndex: chartHighlightedStartingIndex,
-      getTooltipContent: getChartTooltipContent,
-      animationDuration: chartAnimationDuration,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 197,
-        columnNumber: 15
-      }
-    }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.footer),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 210,
-        columnNumber: 11
-      }
-    }, " ", footer)));
-  }
-}
+      }, value);
+    }
+  }, [value, valueTooltip]);
+  var isClickable = (0, _react.useMemo)(() => onClick !== undefined, [onClick]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.root, {
+      hovered: isHovered,
+      clickable: isClickable
+    }, className),
+    "data-hook": dataHook,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: focusableOnFocus,
+    onBlur: focusableOnBlur,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 115,
+      columnNumber: 5
+    }
+  }, isLoading && /*#__PURE__*/_react.default.createElement("div", {
+    className: _AnalyticsSummaryCardSt.classes.loader,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 133,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
+    dataHook: _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardLoader,
+    size: "tiny",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 134,
+      columnNumber: 11
+    }
+  })), shouldShowCTA && /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardCTA,
+    className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.ctaButton),
+    onClick: handleCTAClick,
+    onFocus: focusableOnFocus,
+    onBlur: focusableOnBlur,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 140,
+      columnNumber: 9
+    }
+  }, ctaButton), /*#__PURE__*/_react.default.createElement("div", {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 151,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.title),
+    onFocus: focusableOnFocus,
+    onBlur: focusableOnBlur,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 153,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    size: "extraTiny",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 158,
+      columnNumber: 11
+    }
+  }, renderTitle())), /*#__PURE__*/_react.default.createElement("div", {
+    className: _AnalyticsSummaryCardSt.classes.valueLineContainer,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 162,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _AnalyticsSummaryCardSt.classes.valueAndTrend,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 163,
+      columnNumber: 11
+    }
+  }, renderValue(), isTrendVisible && trend !== undefined && /*#__PURE__*/_react.default.createElement(_TrendIndicator.default, {
+    dataHook: _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardTrend,
+    className: _AnalyticsSummaryCardSt.classes.trend,
+    value: trend,
+    inverted: invertedTrend,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 166,
+      columnNumber: 15
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.sparkline),
+    onFocus: focusableOnFocus,
+    onBlur: focusableOnBlur,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 176,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SparklineChart.default, {
+    dataHook: _AnalyticsSummaryCard.dataHooks.analyticsSummaryCardChart,
+    onHover: onChartHover,
+    data: chartData,
+    color: chartColorHex,
+    width: chartWidth,
+    height: SPARKLINE_HEIGHT,
+    highlightedStartingIndex: chartHighlightedStartingIndex,
+    getTooltipContent: getChartTooltipContent,
+    animationDuration: chartAnimationDuration,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 181,
+      columnNumber: 13
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _AnalyticsSummaryCardSt.st)(_AnalyticsSummaryCardSt.classes.footer),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 194,
+      columnNumber: 9
+    }
+  }, " ", footer)));
+};
+exports.AnalyticsSummaryCard = AnalyticsSummaryCard;
 AnalyticsSummaryCard.displayName = 'AnalyticsSummaryCard';
 AnalyticsSummaryCard.propTypes = {
-  /** Applied as data-hook HTML attribute that can be used in the tests */
   dataHook: _propTypes.default.string,
-  /** Specifies a CSS class name to be appended to the component’s root element.
-   * @internal
-   */
-
   className: _propTypes.default.string,
-  /** Text for the title */
   title: _propTypes.default.string,
-  /** Text for title tooltip */
   titleTooltip: _propTypes.default.string,
-  /** Text Value */
-  value: _propTypes.default.string,
-  /** Text for value tooltip*/
+  value: _propTypes.default.string.isRequired,
   valueTooltip: _propTypes.default.string,
-  /** A number to be displayed as the trend, a positive number will be green with an arrow facing up and a negative number will be red with an arrow facing down */
   trend: _propTypes.default.number,
-  /** Invert color and arrow direction of Trend. */
   invertedTrend: _propTypes.default.bool,
-  /** Show/Hide Trend */
   isTrendVisible: _propTypes.default.bool,
-  /** whether component is loading */
   isLoading: _propTypes.default.bool,
-  /** CTA button React Node */
-  ctaButton: _propTypes.default.node,
-  /** fires when CTA button is clicked */
+  ctaButton: _propTypes.default.any,
   onCTAClick: _propTypes.default.func,
-  /** always show CTA button */
   alwaysShowCTA: _propTypes.default.bool,
-  /**  Card would be clickable */
   onClick: _propTypes.default.func,
-  /** fires when chart is hovered */
   onChartHover: _propTypes.default.func,
-  /** Indicates the starting index of the highlighted area of the chart  */
   chartHighlightedStartingIndex: _propTypes.default.number,
-  /** Chart width */
   chartWidth: _propTypes.default.number,
-  /** Chart data */
-  chartData: _propTypes.default.array,
-  /** Chart tooltip content */
+  chartData: _propTypes.default.any,
   getChartTooltipContent: _propTypes.default.func,
-  /** Sets the color of the chart  */
   chartColorHex: _propTypes.default.string,
-  /** Chart animation duration  */
   chartAnimationDuration: _propTypes.default.number,
-  /** Footer - Node  */
-  footer: _propTypes.default.node
-};
-AnalyticsSummaryCard.defaultProps = {
-  isLoading: false,
-  ctaButton: null,
-  footer: null,
-  onChartHover: _noop.default,
-  isTrendVisible: false,
-  alwaysShowCTA: false,
-  chartWidth: 69,
-  chartAnimationDuration: 300
+  footer: _propTypes.default.any
 };
 var _default = exports.default = (0, _Focusable.withFocusable)(AnalyticsSummaryCard);
 //# sourceMappingURL=AnalyticsSummaryCard.js.map