@wix/design-system 1.146.1 → 1.147.0

package/dist/cjs/FunnelChart/FunnelBadge/FunnelBadge.js

@@ -3,14 +3,18 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.FunnelBadge = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
 var _Heading = _interopRequireDefault(require("../../Heading"));
 var _Badge = _interopRequireDefault(require("../../Badge"));
 var _Focusable = require("../../common/Focusable");
+var _TooltipCommon = require("../../common/PropTypes/TooltipCommon");
 var _FunnelBadgeSt = require("./FunnelBadge.st.css.js");
 var _constants = require("../constants");
+var _excluded = ["tooltipContent", "tooltipProps", "onTooltipShow", "value", "differenceBadgeSkin"];
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/FunnelChart/FunnelBadge/FunnelBadge.js";
 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; }
@@ -18,39 +22,46 @@ class StandardBadge extends _react.PureComponent {
   render() {
     var {
       value,
+      skin,
+      prefixIcon,
       className,
       focusableOnBlur,
       focusableOnFocus,
       dataHook
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _FunnelBadgeSt.st)(_FunnelBadgeSt.classes.badge, className),
+      className: (0, _FunnelBadgeSt.st)(_FunnelBadgeSt.classes.badge, {
+        skin
+      }, className),
       "data-hook": dataHook,
       tabIndex: 0,
       onBlur: focusableOnBlur,
       onFocus: focusableOnFocus,
+      "data-skin": skin,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 17,
+        lineNumber: 25,
         columnNumber: 7
       }
-    }, /*#__PURE__*/_react.default.createElement("span", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: _FunnelBadgeSt.classes.badgeContent,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 24,
+        lineNumber: 33,
         columnNumber: 9
       }
-    }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    }, !!prefixIcon && /*#__PURE__*/_react.default.cloneElement(prefixIcon, {
+      'data-prefix-icon': true
+    }), /*#__PURE__*/_react.default.createElement(_Heading.default, {
       className: _FunnelBadgeSt.classes.badgeText,
       size: "extraTiny",
       dataHook: _constants.dataHooks.badgeValue,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 25,
+        lineNumber: 38,
         columnNumber: 11
       }
     }, value)));
@@ -63,7 +74,8 @@ class DarkBadge extends _react.PureComponent {
       className,
       focusableOnBlur,
       focusableOnFocus,
-      dataHook
+      dataHook,
+      prefixIcon
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _FunnelBadgeSt.st)(_FunnelBadgeSt.classes.darkBadge, className),
@@ -71,19 +83,21 @@ class DarkBadge extends _react.PureComponent {
       tabIndex: 0,
       onBlur: focusableOnBlur,
       onFocus: focusableOnFocus,
+      "data-skin": "dark",
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 43,
+        lineNumber: 62,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_Badge.default, {
       type: "transparent",
       dataHook: _constants.dataHooks.badgeValue,
+      prefixIcon: prefixIcon,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 50,
+        lineNumber: 70,
         columnNumber: 9
       }
     }, value));
@@ -93,12 +107,14 @@ var FocusedStandardBadge = (0, _Focusable.withFocusable)(StandardBadge);
 var FocusedDarkBadge = (0, _Focusable.withFocusable)(DarkBadge);
 var FunnelBadge = props => {
   var {
-    tooltipContent,
-    onTooltipShow,
-    value,
-    differenceBadgeSkin
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      tooltipContent,
+      tooltipProps,
+      onTooltipShow,
+      value,
+      differenceBadgeSkin
+    } = props,
+    otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
     dataHook: _constants.dataHooks.badgeTooltip,
     disabled: !tooltipContent,
     content: tooltipContent,
@@ -107,32 +123,36 @@ var FunnelBadge = props => {
       y: 2
     },
     textAlign: "start",
-    size: "small",
+    size: "small"
+  }, tooltipProps, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 63,
+      lineNumber: 96,
       columnNumber: 5
     }
-  }, differenceBadgeSkin === 'dark' ? /*#__PURE__*/_react.default.createElement(FocusedDarkBadge, {
+  }), differenceBadgeSkin === 'dark' ? /*#__PURE__*/_react.default.createElement(FocusedDarkBadge, (0, _extends2.default)({
     value: value,
-    dataHook: _constants.dataHooks.badge,
+    dataHook: _constants.dataHooks.badge
+  }, otherProps, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 74,
+      lineNumber: 108,
       columnNumber: 13
     }
-  }) : /*#__PURE__*/_react.default.createElement(FocusedStandardBadge, {
+  })) : /*#__PURE__*/_react.default.createElement(FocusedStandardBadge, (0, _extends2.default)({
     value: value,
     dataHook: _constants.dataHooks.badge,
+    skin: differenceBadgeSkin
+  }, otherProps, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 75,
+      lineNumber: 109,
       columnNumber: 13
     }
-  }));
+  })));
 };
 exports.FunnelBadge = FunnelBadge;
 FunnelBadge.propTypes = {
@@ -140,8 +160,12 @@ FunnelBadge.propTypes = {
   value: _propTypes.default.string.isRequired,
   /** Tooltip content. Can be either string or renderable node */
   tooltipContent: _propTypes.default.node,
+  /** Tooltip properties */
+  tooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
+  /** Prefix icon. Can be React.ReactNode */
+  prefixIcon: _propTypes.default.node,
   /** When provided, changes badge skin */
-  differenceBadgeSkin: _propTypes.default.oneOf(['standard', 'dark']),
+  differenceBadgeSkin: _propTypes.default.oneOf(['standard', 'dark', 'success', 'general']),
   /** Callback on tooltip content show event */
   onTooltipShow: _propTypes.default.func
 };

package/dist/cjs/FunnelChart/FunnelBadge/FunnelBadge.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_Tooltip","_Heading","_Badge","_Focusable","_FunnelBadgeSt","_constants","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StandardBadge","PureComponent","render","value","className","focusableOnBlur","focusableOnFocus","dataHook","props","createElement","st","classes","badge","tabIndex","onBlur","onFocus","__self","__source","fileName","lineNumber","columnNumber","badgeContent","badgeText","size","dataHooks","badgeValue","DarkBadge","darkBadge","type","FocusedStandardBadge","withFocusable","FocusedDarkBadge","FunnelBadge","tooltipContent","onTooltipShow","differenceBadgeSkin","badgeTooltip","disabled","content","onShow","moveBy","y","textAlign","exports","propTypes","PropTypes","string","isRequired","node","oneOf","func"],"sources":["../../../../src/FunnelChart/FunnelBadge/FunnelBadge.js"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Tooltip from '../../Tooltip';\nimport Heading from '../../Heading';\nimport Badge from '../../Badge'\nimport { withFocusable } from '../../common/Focusable';\n\nimport { st, classes } from './FunnelBadge.st.css';\nimport { dataHooks } from '../constants';\n\nclass StandardBadge extends PureComponent {\n  render() {\n    const { value, className, focusableOnBlur, focusableOnFocus, dataHook } =\n      this.props;\n    return (\n      <div\n        className={st(classes.badge, className)}\n        data-hook={dataHook}\n        tabIndex={0}\n        onBlur={focusableOnBlur}\n        onFocus={focusableOnFocus}\n      >\n        <span className={classes.badgeContent}>\n          <Heading\n            className={classes.badgeText}\n            size=\"extraTiny\"\n            dataHook={dataHooks.badgeValue}\n          >\n            {value}\n          </Heading>\n        </span>\n      </div>\n    );\n  }\n}\n\nclass DarkBadge extends PureComponent {\n  render() {\n    const { value, className, focusableOnBlur, focusableOnFocus, dataHook } =\n      this.props;\n    return (\n      <div\n        className={st(classes.darkBadge, className)}\n        data-hook={dataHook}\n        tabIndex={0}\n        onBlur={focusableOnBlur}\n        onFocus={focusableOnFocus}\n      >\n        <Badge type=\"transparent\" dataHook={dataHooks.badgeValue}>{value}</Badge>\n      </div>\n    );\n  }\n}\n\nconst FocusedStandardBadge = withFocusable(StandardBadge);\nconst FocusedDarkBadge = withFocusable(DarkBadge);\n\nexport const FunnelBadge = props => {\n  const { tooltipContent, onTooltipShow, value, differenceBadgeSkin } = props;\n\n  return (\n    <Tooltip\n      dataHook={dataHooks.badgeTooltip}\n      disabled={!tooltipContent}\n      content={tooltipContent}\n      onShow={onTooltipShow}\n      moveBy={{ y: 2 }}\n      textAlign=\"start\"\n      size=\"small\"\n    >\n      {\n        differenceBadgeSkin === 'dark'\n          ? <FocusedDarkBadge value={value} dataHook={dataHooks.badge} />\n          : <FocusedStandardBadge value={value} dataHook={dataHooks.badge} />\n      }\n    </Tooltip>\n  );\n};\n\nFunnelBadge.propTypes = {\n  /** Badge's value */\n  value: PropTypes.string.isRequired,\n\n  /** Tooltip content. Can be either string or renderable node */\n  tooltipContent: PropTypes.node,\n\n  /** When provided, changes badge skin */\n  differenceBadgeSkin: PropTypes.oneOf(['standard', 'dark']),\n\n  /** Callback on tooltip content show event */\n  onTooltipShow: PropTypes.func,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_Tooltip","_Heading","_Badge","_Focusable","_TooltipCommon","_FunnelBadgeSt","_constants","_excluded","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StandardBadge","PureComponent","render","value","skin","prefixIcon","className","focusableOnBlur","focusableOnFocus","dataHook","props","createElement","st","classes","badge","tabIndex","onBlur","onFocus","__self","__source","fileName","lineNumber","columnNumber","badgeContent","React","cloneElement","badgeText","size","dataHooks","badgeValue","DarkBadge","darkBadge","type","FocusedStandardBadge","withFocusable","FocusedDarkBadge","FunnelBadge","tooltipContent","tooltipProps","onTooltipShow","differenceBadgeSkin","otherProps","_objectWithoutProperties2","_extends2","badgeTooltip","disabled","content","onShow","moveBy","y","textAlign","exports","propTypes","PropTypes","string","isRequired","node","shape","TooltipCommonProps","oneOf","func"],"sources":["../../../../src/FunnelChart/FunnelBadge/FunnelBadge.js"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Tooltip from '../../Tooltip';\nimport Heading from '../../Heading';\nimport Badge from '../../Badge';\nimport { withFocusable } from '../../common/Focusable';\nimport { TooltipCommonProps } from '../../common/PropTypes/TooltipCommon';\n\nimport { st, classes } from './FunnelBadge.st.css';\nimport { dataHooks } from '../constants';\n\nclass StandardBadge extends PureComponent {\n  render() {\n    const {\n      value,\n      skin,\n      prefixIcon,\n      className,\n      focusableOnBlur,\n      focusableOnFocus,\n      dataHook,\n    } = this.props;\n    return (\n      <div\n        className={st(classes.badge, { skin }, className)}\n        data-hook={dataHook}\n        tabIndex={0}\n        onBlur={focusableOnBlur}\n        onFocus={focusableOnFocus}\n        data-skin={skin}\n      >\n        <div className={classes.badgeContent}>\n          {!!prefixIcon &&\n            React.cloneElement(prefixIcon, {\n              'data-prefix-icon': true,\n            })}\n          <Heading\n            className={classes.badgeText}\n            size=\"extraTiny\"\n            dataHook={dataHooks.badgeValue}\n          >\n            {value}\n          </Heading>\n        </div>\n      </div>\n    );\n  }\n}\n\nclass DarkBadge extends PureComponent {\n  render() {\n    const {\n      value,\n      className,\n      focusableOnBlur,\n      focusableOnFocus,\n      dataHook,\n      prefixIcon,\n    } = this.props;\n    return (\n      <div\n        className={st(classes.darkBadge, className)}\n        data-hook={dataHook}\n        tabIndex={0}\n        onBlur={focusableOnBlur}\n        onFocus={focusableOnFocus}\n        data-skin=\"dark\"\n      >\n        <Badge\n          type=\"transparent\"\n          dataHook={dataHooks.badgeValue}\n          prefixIcon={prefixIcon}\n        >\n          {value}\n        </Badge>\n      </div>\n    );\n  }\n}\n\nconst FocusedStandardBadge = withFocusable(StandardBadge);\nconst FocusedDarkBadge = withFocusable(DarkBadge);\n\nexport const FunnelBadge = props => {\n  const {\n    tooltipContent,\n    tooltipProps,\n    onTooltipShow,\n    value,\n    differenceBadgeSkin,\n    ...otherProps\n  } = props;\n\n  return (\n    <Tooltip\n      dataHook={dataHooks.badgeTooltip}\n      disabled={!tooltipContent}\n      content={tooltipContent}\n      onShow={onTooltipShow}\n      moveBy={{ y: 2 }}\n      textAlign=\"start\"\n      size=\"small\"\n      {...tooltipProps}\n    >\n      {\n        differenceBadgeSkin === 'dark'\n          ? <FocusedDarkBadge value={value} dataHook={dataHooks.badge} {...otherProps} />\n          : <FocusedStandardBadge value={value} dataHook={dataHooks.badge} skin={differenceBadgeSkin} {...otherProps} />\n      }\n    </Tooltip>\n  );\n};\n\nFunnelBadge.propTypes = {\n  /** Badge's value */\n  value: PropTypes.string.isRequired,\n\n  /** Tooltip content. Can be either string or renderable node */\n  tooltipContent: PropTypes.node,\n\n  /** Tooltip properties */\n  tooltipProps: PropTypes.shape(TooltipCommonProps),\n\n  /** Prefix icon. Can be React.ReactNode */\n  prefixIcon: PropTypes.node,\n\n  /** When provided, changes badge skin */\n  differenceBadgeSkin: PropTypes.oneOf([\n    'standard',\n    'dark',\n    'success',\n    'general',\n  ]),\n\n  /** Callback on tooltip content show event */\n  onTooltipShow: PropTypes.func,\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/FunnelChart/FunnelBadge/FunnelBadge.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_146_1_FunnelBadge";
+var _namespace_ = "wds_1_147_0_FunnelBadge";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -14,7 +14,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_146_1_FunnelBadge__root","badge":"wds_1_146_1_FunnelBadge__badge","badgeContent":"wds_1_146_1_FunnelBadge__badgeContent","badgeText":"wds_1_146_1_FunnelBadge__badgeText","darkBadge":"wds_1_146_1_FunnelBadge__darkBadge"};
+module.exports.classes = {"root":"wds_1_147_0_FunnelBadge__root","badge":"wds_1_147_0_FunnelBadge__badge","badgeText":"wds_1_147_0_FunnelBadge__badgeText","badgeContent":"wds_1_147_0_FunnelBadge__badgeContent","darkBadge":"wds_1_147_0_FunnelBadge__darkBadge"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelBadge/index.d.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FunnelBadge","PureComponent","exports"],"sources":["../../../../src/FunnelChart/FunnelBadge/index.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface FunnelBadgeProps {\n  value: string;\n  tooltipContent?: React.ReactNode;\n  differenceBadgeSkin?: 'standard' | 'dark';\n  onTooltipShow?(): void;\n}\n\nexport default class FunnelBadge extends React.PureComponent<FunnelBadgeProps> {}\n"],"mappings":";;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA+B,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAShB,MAAMW,WAAW,SAASvB,KAAK,CAACwB,aAAa,CAAmB;AAAEC,OAAA,CAAAhB,OAAA,GAAAc,WAAA","ignoreList":[]}
+{"version":3,"names":["React","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","FunnelBadge","PureComponent","exports"],"sources":["../../../../src/FunnelChart/FunnelBadge/index.d.ts"],"sourcesContent":["import * as React from 'react';\nimport { TooltipCommonProps } from '../../common';\n\nexport interface FunnelBadgeProps {\n  value: string;\n  tooltipContent?: React.ReactNode;\n  tooltipProps?: TooltipCommonProps;\n  differenceBadgeSkin?: 'standard' | 'general' | 'success' | 'dark';\n  prefixIcon?: React.ReactNode;\n  onTooltipShow?(): void;\n}\n\nexport interface FunnelBadgeCommonProps {\n  skin?: FunnelBadgeProps['differenceBadgeSkin'];\n  prefixIcon?: React.ReactNode;\n}\n\nexport default class FunnelBadge extends React.PureComponent<FunnelBadgeProps> {}\n"],"mappings":";;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA+B,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAiBhB,MAAMW,WAAW,SAASvB,KAAK,CAACwB,aAAa,CAAmB;AAAEC,OAAA,CAAAhB,OAAA,GAAAc,WAAA","ignoreList":[]}

package/dist/cjs/FunnelChart/FunnelBar/FunnelBar.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_146_1_FunnelBar";
+var _namespace_ = "wds_1_147_0_FunnelBar";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_146_1_FunnelBar__root","filledBar":"wds_1_146_1_FunnelBar__filledBar"};
+module.exports.classes = {"root":"wds_1_147_0_FunnelBar__root","filledBar":"wds_1_147_0_FunnelBar__filledBar"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelChart.js

@@ -35,8 +35,11 @@ var FunnelChart = _ref2 => {
     hideDifferenceBadge,
     fullHeight,
     differenceBadgeSkin = 'standard',
+    differenceBadgeProps = () => ({}),
     differenceBadgeTooltipContent = () => '',
-    onDifferenceBadgeTooltipShow = () => {}
+    differenceBadgeTooltipProps = () => ({}),
+    onDifferenceBadgeTooltipShow = () => {},
+    differenceStepSkin = () => 'standard'
   } = _ref2;
   if (data.length < 2) {
     return null;
@@ -51,7 +54,7 @@ var FunnelChart = _ref2 => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 40,
+      lineNumber: 43,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("section", {
@@ -61,7 +64,7 @@ var FunnelChart = _ref2 => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 41,
+      lineNumber: 44,
       columnNumber: 7
     }
   }, data.map((item, index) => {
@@ -73,7 +76,7 @@ var FunnelChart = _ref2 => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 49,
+        lineNumber: 52,
         columnNumber: 13
       }
     }, /*#__PURE__*/_react.default.createElement(_FunnelBar.FunnelBar, {
@@ -82,14 +85,14 @@ var FunnelChart = _ref2 => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 50,
+        lineNumber: 53,
         columnNumber: 15
       }
     }), isLastItem || data[index + 1].value === 0 ? /*#__PURE__*/_react.default.createElement(_FunnelStep.EmptyFunnelStep, {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 55,
+        lineNumber: 58,
         columnNumber: 17
       }
     }) : /*#__PURE__*/_react.default.createElement(_FunnelStep.FunnelStep, {
@@ -99,13 +102,17 @@ var FunnelChart = _ref2 => {
       currentBarHeight: currentBarHeight,
       nextBarHeight: nextBarHeight,
       hideDifferenceBadge: hideDifferenceBadge,
-      differenceBadgeSkin: differenceBadgeSkin,
+      differenceBadgeSkin: differenceBadgeSkin // mark as deprecated
+      ,
+      getDifferenceBadgeProps: differenceBadgeProps,
+      getDifferenceStepSkin: differenceStepSkin,
       getTooltipContent: differenceBadgeTooltipContent,
+      getTooltipProps: differenceBadgeTooltipProps,
       onTooltipShow: onDifferenceBadgeTooltipShow,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 57,
+        lineNumber: 60,
         columnNumber: 17
       }
     }));
@@ -114,7 +121,7 @@ var FunnelChart = _ref2 => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 73,
+      lineNumber: 79,
       columnNumber: 7
     }
   }, data.map(item => {
@@ -124,7 +131,7 @@ var FunnelChart = _ref2 => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 76,
+        lineNumber: 82,
         columnNumber: 13
       }
     }, /*#__PURE__*/_react.default.createElement(_FunnelLabel.FunnelLabel, {
@@ -134,7 +141,7 @@ var FunnelChart = _ref2 => {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 77,
+        lineNumber: 83,
         columnNumber: 15
       }
     }));
@@ -164,16 +171,33 @@ FunnelChart.propTypes = {
   fullHeight: _propTypes.default.bool,
   /** A flag that controls the appearance of the calculated percentage badge */
   hideDifferenceBadge: _propTypes.default.bool,
-  /** When provided, changes badge skin */
+  /** When provided, changes badge skin
+   * @deprecated
+   */
   differenceBadgeSkin: _propTypes.default.oneOf(['standard', 'dark']),
-  /** Returns the tooltip content by current index and badge's value (in percentage)
+  /** Returns the step skin by current index, badge's percentage and raw values
+   * ##### Signature:
+   * `({currentIndex: number, difference: string, differenceValue: number}) => 'standard' | 'success'`
+   */
+  differenceStepSkin: _propTypes.default.func,
+  /** Returns the badge props by current index, badge's percentage and raw values
    * ##### Signature:
-   * `({currentIndex: number, difference: string}) => string`
+   * `({currentIndex: number, difference: string, differenceValue: number}) => FunnelBadgeCommonProps`
+   */
+  differenceBadgeProps: _propTypes.default.func,
+  /** Returns the tooltip props by current index, badge's percentage and raw values
+   * ##### Signature:
+   * `({currentIndex: number, difference: string, differenceValue: number}) => React.ReactNode`
    */
   differenceBadgeTooltipContent: _propTypes.default.func,
-  /** Callback on tooltip content show event by current index and badge's value (in percentage)
+  /** Returns the tooltip props by current index, badge's percentage and raw values
+   * ##### Signature:
+   * `({currentIndex: number, difference: string, differenceValue: number}) => TooltipCommonProps`
+   */
+  differenceBadgeTooltipProps: _propTypes.default.func,
+  /** Callback on tooltip content show event by current index, badge's percentage and raw values
    * ##### Signature:
-   * `({currentIndex: number, difference: string}) => void`
+   * `({currentIndex: number, difference: string, differenceValue: number}) => void`
    */
   onDifferenceBadgeTooltipShow: _propTypes.default.func
 };

package/dist/cjs/FunnelChart/FunnelChart.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_FunnelChartSt","_FunnelLabel","_FunnelBar","_FunnelStep","_numberFormatters","_constants","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","calculateBarsHeights","_ref","funnelChartData","startValue","map","percentage","countPercentageFromBase","value","FunnelChart","_ref2","dataHook","className","data","hideDifferenceBadge","fullHeight","differenceBadgeSkin","differenceBadgeTooltipContent","onDifferenceBadgeTooltipShow","length","barsHeights","createElement","st","classes","root","__self","__source","fileName","lineNumber","columnNumber","funnel","item","index","currentBarHeight","nextBarHeight","isLastItem","Fragment","key","label","FunnelBar","height","dataHooks","funnelChartItem","EmptyFunnelStep","FunnelStep","currentBarIndex","currentBarData","nextBarData","getTooltipContent","onTooltipShow","labels","labelWrapper","FunnelLabel","displayValue","displayName","propTypes","PropTypes","string","arrayOf","shape","number","isRequired","bool","oneOf","func","_default","exports"],"sources":["../../../src/FunnelChart/FunnelChart.js"],"sourcesContent":["import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { st, classes } from './FunnelChart.st.css';\n\nimport { FunnelLabel } from './FunnelLabel';\nimport { FunnelBar } from './FunnelBar';\nimport { FunnelStep, EmptyFunnelStep } from './FunnelStep';\nimport { countPercentageFromBase } from '../utils/numberFormatters';\nimport { dataHooks } from './constants';\n\n// TODO - this can be memoized\nconst calculateBarsHeights = ({ funnelChartData, startValue }) =>\n  funnelChartData.map(i => {\n    const percentage = countPercentageFromBase(startValue, i.value, 0);\n    return percentage > 100 ? 100 : percentage;\n  });\n\n/** FunnelChart */\nconst FunnelChart = ({\n  dataHook,\n  className,\n  data,\n  hideDifferenceBadge,\n  fullHeight,\n  differenceBadgeSkin = 'standard',\n  differenceBadgeTooltipContent = () => '',\n  onDifferenceBadgeTooltipShow = () => {},\n}) => {\n  if (data.length < 2) {\n    return null;\n  }\n\n  const barsHeights = calculateBarsHeights({\n    funnelChartData: data,\n    startValue: data[0].value,\n  });\n\n  return (\n    <div data-hook={dataHook} className={st(classes.root, className)}>\n      <section className={st(classes.funnel, { fullHeight })}>\n        {data.map((item, index) => {\n          const currentBarHeight = barsHeights[index];\n          const nextBarHeight = barsHeights[index + 1];\n\n          const isLastItem = index === data.length - 1;\n\n          return (\n            <Fragment key={item.label}>\n              <FunnelBar\n                height={currentBarHeight}\n                dataHook={dataHooks.funnelChartItem}\n              />\n              {isLastItem || data[index + 1].value === 0 ? (\n                <EmptyFunnelStep />\n              ) : (\n                <FunnelStep\n                  currentBarIndex={index}\n                  currentBarData={data[index]}\n                  nextBarData={data[index + 1]}\n                  currentBarHeight={currentBarHeight}\n                  nextBarHeight={nextBarHeight}\n                  hideDifferenceBadge={hideDifferenceBadge}\n                  differenceBadgeSkin={differenceBadgeSkin}\n                  getTooltipContent={differenceBadgeTooltipContent}\n                  onTooltipShow={onDifferenceBadgeTooltipShow}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n      </section>\n      <section className={classes.labels}>\n        {data.map(item => {\n          return (\n            <div key={item.label} className={classes.labelWrapper}>\n              <FunnelLabel\n                value={item.value}\n                label={item.label}\n                displayValue={item.displayValue}\n              />\n            </div>\n          );\n        })}\n      </section>\n    </div>\n  );\n};\n\nFunnelChart.displayName = 'FunnelChart';\n\nFunnelChart.propTypes = {\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n\n  /** Specifies a CSS class name to be appended to the component’s root element.\n   * @internal\n   */\n\n  className: PropTypes.string,\n\n  /**\n   * Array of Funnel Chart items\n   * * `value` - Item's value.\n   * * `label` - Short label under the value.\n   * * `displayValue` - Item's value send by the user.\n   */\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      value: PropTypes.number.isRequired,\n      label: PropTypes.string.isRequired,\n      displayValue: PropTypes.string,\n    }),\n  ).isRequired,\n\n  /** When provided, allows bars to take full height */\n  fullHeight: PropTypes.bool,\n\n  /** A flag that controls the appearance of the calculated percentage badge */\n  hideDifferenceBadge: PropTypes.bool,\n\n  /** When provided, changes badge skin */\n  differenceBadgeSkin: PropTypes.oneOf(['standard', 'dark']),\n\n  /** Returns the tooltip content by current index and badge's value (in percentage)\n   * ##### Signature:\n   * `({currentIndex: number, difference: string}) => string`\n   */\n  differenceBadgeTooltipContent: PropTypes.func,\n\n  /** Callback on tooltip content show event by current index and badge's value (in percentage)\n   * ##### Signature:\n   * `({currentIndex: number, difference: string}) => void`\n   */\n  onDifferenceBadgeTooltipShow: PropTypes.func,\n};\n\nexport default FunnelChart;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_FunnelChartSt","_FunnelLabel","_FunnelBar","_FunnelStep","_numberFormatters","_constants","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","calculateBarsHeights","_ref","funnelChartData","startValue","map","percentage","countPercentageFromBase","value","FunnelChart","_ref2","dataHook","className","data","hideDifferenceBadge","fullHeight","differenceBadgeSkin","differenceBadgeProps","differenceBadgeTooltipContent","differenceBadgeTooltipProps","onDifferenceBadgeTooltipShow","differenceStepSkin","length","barsHeights","createElement","st","classes","root","__self","__source","fileName","lineNumber","columnNumber","funnel","item","index","currentBarHeight","nextBarHeight","isLastItem","Fragment","key","label","FunnelBar","height","dataHooks","funnelChartItem","EmptyFunnelStep","FunnelStep","currentBarIndex","currentBarData","nextBarData","getDifferenceBadgeProps","getDifferenceStepSkin","getTooltipContent","getTooltipProps","onTooltipShow","labels","labelWrapper","FunnelLabel","displayValue","displayName","propTypes","PropTypes","string","arrayOf","shape","number","isRequired","bool","oneOf","func","_default","exports"],"sources":["../../../src/FunnelChart/FunnelChart.js"],"sourcesContent":["import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { st, classes } from './FunnelChart.st.css';\n\nimport { FunnelLabel } from './FunnelLabel';\nimport { FunnelBar } from './FunnelBar';\nimport { FunnelStep, EmptyFunnelStep } from './FunnelStep';\nimport { countPercentageFromBase } from '../utils/numberFormatters';\nimport { dataHooks } from './constants';\n\n// TODO - this can be memoized\nconst calculateBarsHeights = ({ funnelChartData, startValue }) =>\n  funnelChartData.map(i => {\n    const percentage = countPercentageFromBase(startValue, i.value, 0);\n    return percentage > 100 ? 100 : percentage;\n  });\n\n/** FunnelChart */\nconst FunnelChart = ({\n  dataHook,\n  className,\n  data,\n  hideDifferenceBadge,\n  fullHeight,\n  differenceBadgeSkin = 'standard',\n  differenceBadgeProps = () => ({}),\n  differenceBadgeTooltipContent = () => '',\n  differenceBadgeTooltipProps = () => ({}),\n  onDifferenceBadgeTooltipShow = () => {},\n  differenceStepSkin = () => 'standard',\n}) => {\n  if (data.length < 2) {\n    return null;\n  }\n\n  const barsHeights = calculateBarsHeights({\n    funnelChartData: data,\n    startValue: data[0].value,\n  });\n\n  return (\n    <div data-hook={dataHook} className={st(classes.root, className)}>\n      <section className={st(classes.funnel, { fullHeight })}>\n        {data.map((item, index) => {\n          const currentBarHeight = barsHeights[index];\n          const nextBarHeight = barsHeights[index + 1];\n\n          const isLastItem = index === data.length - 1;\n\n          return (\n            <Fragment key={item.label}>\n              <FunnelBar\n                height={currentBarHeight}\n                dataHook={dataHooks.funnelChartItem}\n              />\n              {isLastItem || data[index + 1].value === 0 ? (\n                <EmptyFunnelStep />\n              ) : (\n                <FunnelStep\n                  currentBarIndex={index}\n                  currentBarData={data[index]}\n                  nextBarData={data[index + 1]}\n                  currentBarHeight={currentBarHeight}\n                  nextBarHeight={nextBarHeight}\n                  hideDifferenceBadge={hideDifferenceBadge}\n                  differenceBadgeSkin={differenceBadgeSkin} // mark as deprecated\n                  getDifferenceBadgeProps={differenceBadgeProps}\n                  getDifferenceStepSkin={differenceStepSkin}\n                  getTooltipContent={differenceBadgeTooltipContent}\n                  getTooltipProps={differenceBadgeTooltipProps}\n                  onTooltipShow={onDifferenceBadgeTooltipShow}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n      </section>\n      <section className={classes.labels}>\n        {data.map(item => {\n          return (\n            <div key={item.label} className={classes.labelWrapper}>\n              <FunnelLabel\n                value={item.value}\n                label={item.label}\n                displayValue={item.displayValue}\n              />\n            </div>\n          );\n        })}\n      </section>\n    </div>\n  );\n};\n\nFunnelChart.displayName = 'FunnelChart';\n\nFunnelChart.propTypes = {\n  /** Applied as data-hook HTML attribute that can be used in the tests */\n  dataHook: PropTypes.string,\n\n  /** Specifies a CSS class name to be appended to the component’s root element.\n   * @internal\n   */\n\n  className: PropTypes.string,\n\n  /**\n   * Array of Funnel Chart items\n   * * `value` - Item's value.\n   * * `label` - Short label under the value.\n   * * `displayValue` - Item's value send by the user.\n   */\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      value: PropTypes.number.isRequired,\n      label: PropTypes.string.isRequired,\n      displayValue: PropTypes.string,\n    }),\n  ).isRequired,\n\n  /** When provided, allows bars to take full height */\n  fullHeight: PropTypes.bool,\n\n  /** A flag that controls the appearance of the calculated percentage badge */\n  hideDifferenceBadge: PropTypes.bool,\n\n  /** When provided, changes badge skin\n   * @deprecated\n   */\n  differenceBadgeSkin: PropTypes.oneOf(['standard', 'dark']),\n\n  /** Returns the step skin by current index, badge's percentage and raw values\n   * ##### Signature:\n   * `({currentIndex: number, difference: string, differenceValue: number}) => 'standard' | 'success'`\n   */\n  differenceStepSkin: PropTypes.func,\n\n  /** Returns the badge props by current index, badge's percentage and raw values\n   * ##### Signature:\n   * `({currentIndex: number, difference: string, differenceValue: number}) => FunnelBadgeCommonProps`\n   */\n  differenceBadgeProps: PropTypes.func,\n\n  /** Returns the tooltip props by current index, badge's percentage and raw values\n   * ##### Signature:\n   * `({currentIndex: number, difference: string, differenceValue: number}) => React.ReactNode`\n   */\n  differenceBadgeTooltipContent: PropTypes.func,\n\n  /** Returns the tooltip props by current index, badge's percentage and raw values\n   * ##### Signature:\n   * `({currentIndex: number, difference: string, differenceValue: number}) => TooltipCommonProps`\n   */\n  differenceBadgeTooltipProps: PropTypes.func,\n\n  /** Callback on tooltip content show event by current index, badge's percentage and raw values\n   * ##### Signature:\n   * `({currentIndex: number, difference: string, differenceValue: number}) => void`\n   */\n  onDifferenceBadgeTooltipShow: PropTypes.func,\n};\n\nexport default FunnelChart;\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/FunnelChart/FunnelChart.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_146_1_FunnelChart";
+var _namespace_ = "wds_1_147_0_FunnelChart";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_146_1_FunnelChart__root","funnel":"wds_1_146_1_FunnelChart__funnel","labels":"wds_1_146_1_FunnelChart__labels","labelWrapper":"wds_1_146_1_FunnelChart__labelWrapper"};
+module.exports.classes = {"root":"wds_1_147_0_FunnelChart__root","funnel":"wds_1_147_0_FunnelChart__funnel","labels":"wds_1_147_0_FunnelChart__labels","labelWrapper":"wds_1_147_0_FunnelChart__labelWrapper"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/FunnelChart/FunnelChart.uni.driver.d.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/FunnelChart/FunnelChart.uni.driver.d.ts"],"sourcesContent":["import { BaseUniDriver } from '@wix/wix-ui-test-utils/unidriver';\n\nexport interface FunnelChartUniDriver extends BaseUniDriver {\n  getItemsCount(): Promise<number>;\n  getValueAt(index: number): Promise<string>;\n  getLabelAt(index: number): Promise<string>;\n  getDifferenceFromDataAt(index: number): Promise<string>;\n  getDifferenceTooltipFromDataAt(index: number): Promise<string>;\n  isDisplayingBadges(): Promise<boolean>;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["../../../src/FunnelChart/FunnelChart.uni.driver.d.ts"],"sourcesContent":["import { BaseUniDriver } from '@wix/wix-ui-test-utils/unidriver';\n\nexport interface FunnelChartUniDriver extends BaseUniDriver {\n  getItemsCount(): Promise<number>;\n  getValueAt(index: number): Promise<string>;\n  getLabelAt(index: number): Promise<string>;\n  getDifferenceFromDataAt(index: number): Promise<string>;\n  getDifferenceTooltipFromDataAt(index: number): Promise<string>;\n  isDisplayingBadges(): Promise<boolean>;\n  getDifferenceTooltipSizeAt(index: number): Promise<string>;\n  getDifferenceStepSkinAt(index: number): Promise<string>;\n  getDifferenceBadgeSkinAt(index: number): Promise<string>;\n  differenceBadgeHasIconAt(index: number): Promise<boolean>;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/FunnelChart/FunnelChart.uni.driver.js

@@ -112,6 +112,78 @@ var funnelChartDriverFactory = (base, body) => {
         return _isDisplayingBadges.apply(this, arguments);
       }
       return isDisplayingBadges;
+    }(),
+    /**
+     * Get tooltip size from index
+     * @param {number} index Item index
+     * @return {Promise<string>}
+     */
+    getDifferenceTooltipSizeAt: function () {
+      var _getDifferenceTooltipSizeAt = (0, _asyncToGenerator2.default)(function* (index) {
+        var tooltip = yield getTooltipDriverAtIndex(_constants.dataHooks.badgeTooltip, index);
+        if (!(yield tooltip.exists())) {
+          return null;
+        }
+        return (yield tooltip.element()).getAttribute('data-size');
+      });
+      function getDifferenceTooltipSizeAt(_x9) {
+        return _getDifferenceTooltipSizeAt.apply(this, arguments);
+      }
+      return getDifferenceTooltipSizeAt;
+    }(),
+    /**
+     * Get step skin from index
+     * @param {number} index Item index
+     * @return {Promise<string>}
+     */
+    getDifferenceStepSkinAt: function () {
+      var _getDifferenceStepSkinAt = (0, _asyncToGenerator2.default)(function* (index) {
+        var step = yield (0, _unidriver.findByHookAtIndex)(base, _constants.dataHooks.step, index);
+        if (!(yield step.exists())) {
+          return null;
+        }
+        return step.attr('data-skin');
+      });
+      function getDifferenceStepSkinAt(_x10) {
+        return _getDifferenceStepSkinAt.apply(this, arguments);
+      }
+      return getDifferenceStepSkinAt;
+    }(),
+    /**
+     * Get badge skin from index
+     * @param {number} index Item index
+     * @return {Promise<string>}
+     */
+    getDifferenceBadgeSkinAt: function () {
+      var _getDifferenceBadgeSkinAt = (0, _asyncToGenerator2.default)(function* (index) {
+        var badge = yield (0, _unidriver.findByHookAtIndex)(base, _constants.dataHooks.badge, index);
+        if (!(yield badge.exists())) {
+          return null;
+        }
+        return badge.attr('data-skin');
+      });
+      function getDifferenceBadgeSkinAt(_x11) {
+        return _getDifferenceBadgeSkinAt.apply(this, arguments);
+      }
+      return getDifferenceBadgeSkinAt;
+    }(),
+    /**
+     * Checks whether badge from index has an icon
+     * @param {number} index Item index
+     * @return {Promise<boolean>}
+     */
+    differenceBadgeHasIconAt: function () {
+      var _differenceBadgeHasIconAt = (0, _asyncToGenerator2.default)(function* (index) {
+        var badge = yield (0, _unidriver.findByHookAtIndex)(base, _constants.dataHooks.badge, index);
+        if (!(yield badge.exists())) {
+          return null;
+        }
+        return badge.$('[data-prefix-icon]').exists();
+      });
+      function differenceBadgeHasIconAt(_x12) {
+        return _differenceBadgeHasIconAt.apply(this, arguments);
+      }
+      return differenceBadgeHasIconAt;
     }()
   });
 };