"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _storySettings = require("../test/storySettings");
var _ = _interopRequireDefault(require(".."));
var _default = exports["default"] = {
  category: _storySettings.storySettings.category,
  storyName: 'FunnelChart',
  component: _["default"],
  componentPath: '..',
  componentProps: {
    data: [{
      value: 1220,
      label: 'visits'
    }, {
      value: 800,
      label: 'product views'
    }, {
      value: 630,
      label: 'cart'
    }, {
      value: 410,
      label: 'checkout'
    }, {
      value: 200,
      label: 'ordered'
    }],
    differenceStepSkin: function differenceStepSkin(_ref) {
      var currentIndex = _ref.currentIndex;
      return currentIndex === 1 ? 'success' : 'standard';
    },
    differenceBadgeProps: function differenceBadgeProps(_ref2) {
      var currentIndex = _ref2.currentIndex;
      return {
        skin: currentIndex === 1 ? 'success' : 'general'
      };
    },
    differenceBadgeTooltipContent: function differenceBadgeTooltipContent(_ref3) {
      var currentIndex = _ref3.currentIndex,
        difference = _ref3.difference;
      return currentIndex === 1 ? "".concat(difference, " conversion is successful") : "".concat(difference, " conversion could be improved");
    },
    differenceBadgeTooltipProps: function differenceBadgeTooltipProps(_ref4) {
      var currentIndex = _ref4.currentIndex;
      return {
        size: currentIndex === 1 ? 'medium' : 'small'
      };
    }
  },
  exampleProps: {
    // Put here presets of props, for more info:
    // https://github.com/wix/wix-ui/blob/master/packages/wix-storybook-utils/docs/usage.md
  },
  sections: [(0, _Sections.header)({
    sourceUrl: "https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/".concat(_["default"].displayName, "/")
  }), (0, _Sections.tabs)([(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.description)({
      title: 'Description',
      text: 'FunnelChart displays values as progressively decreasing proportions. should contain at least 2 values'
    }), (0, _Sections.divider)(), (0, _Sections.title)('Examples'), (0, _Sections.example)({
      title: 'Simple Usage with mandatory props',
      text: '`data` prop is mandatory and should contain at least 2 items',
      source: "<Box direction=\"vertical\" backgroundColor=\"WHITE\" padding={2}>\n              <FunnelChart data={[\n                {\n                  value: 1220,\n                  label: 'visits',\n                },\n                {\n                  value: 800,\n                  label: 'product views',\n                },\n                {\n                  value: 630,\n                  label: 'cart',\n                },\n                {\n                  value: 410,\n                  label: 'checkout',\n                },\n                {\n                  value: 410,\n                  label: 'ordered',\n                },\n              ]}\n              />\n            </Box>"
    }), (0, _Sections.example)({
      title: "With badge's tooltips",
      text: "There are 2 available properties to control tooltip:<br/><br />\n               &emsp;- `differenceBadgeTooltipContent` - tooltips's content.<br/>\n               &emsp;- `differenceBadgeTooltipProps` - tooltips's properties.",
      source: "<Box direction=\"vertical\" backgroundColor=\"WHITE\" padding={2}>\n            <FunnelChart data={[\n              {\n                value: 1220,\n                label: 'visits',\n              },\n              {\n                value: 800,\n                label: 'product views',\n              },\n              {\n                value: 630,\n                label: 'cart',\n              },\n              {\n                value: 410,\n                label: 'checkout',\n              },\n              {\n                value: 200,\n                label: 'ordered',\n              },\n            ]}\n            differenceBadgeTooltipContent={({currentIndex, difference}) => `${difference} from data at index ${currentIndex} continued next`}\n            differenceBadgeTooltipProps={({ currentIndex }) => ({ size: currentIndex % 2 ? 'small' : 'medium' })}\n            />\n            </Box>"
    }), (0, _Sections.example)({
      title: 'Badge and step',
      text: "Control badge properties and step skin with:<br/><br />\n               &emsp;- `differenceBadgeProps` - user it to control properties of the badge.<br/>\n               &emsp;- `differenceStepSkin` - use it to change step skin.",
      source: "<Box direction=\"vertical\" backgroundColor=\"WHITE\" padding={2}>\n            <FunnelChart data={[\n              {\n                value: 1220,\n                label: 'visits',\n              },\n              {\n                value: 800,\n                label: 'product views',\n              },\n              {\n                value: 630,\n                label: 'cart',\n              },\n              {\n                value: 410,\n                label: 'checkout',\n              },\n              {\n                value: 200,\n                label: 'ordered',\n              },\n            ]}\n            differenceBadgeProps={({ currentIndex }) => ({\n              skin: currentIndex ? 'general' : 'success',\n              prefixIcon: currentIndex ? <Icons.BuildSmall /> : <Icons.ThumbsUpSmall />,\n            })}\n            differenceStepSkin={({ currentIndex }) => currentIndex ? 'standard' : 'success'}\n            />\n            </Box>"
    }), (0, _Sections.example)({
      title: 'With no badges',
      text: 'Use `hideDifferenceBadge` to control difference badges display',
      source: "<Box direction=\"vertical\" backgroundColor=\"WHITE\" padding={2}>\n            <FunnelChart data={[\n              {\n                value: 1220,\n                label: 'visits',\n              },\n              {\n                value: 800,\n                label: 'product views',\n              },\n              {\n                value: 630,\n                label: 'cart',\n              },\n              {\n                value: 410,\n                label: 'checkout',\n              },\n              {\n                value: 200,\n                label: 'ordered',\n              },\n            ]}\n            hideDifferenceBadge\n            />\n            </Box>"
    })]
  })].concat((0, _toConsumableArray2["default"])([{
    title: 'API',
    sections: [(0, _Sections.api)()]
  }, {
    title: 'Testkit',
    sections: [(0, _Sections.testkit)()]
  }, {
    title: 'Playground',
    sections: [(0, _Sections.playground)()]
  }].map(_Sections.tab))))]
};