@wix/design-system
Version:
@wix/design-system
92 lines (91 loc) • 6.99 kB
JavaScript
"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  - `differenceBadgeTooltipContent` - tooltips's content.<br/>\n  - `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  - `differenceBadgeProps` - user it to control properties of the badge.<br/>\n  - `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))))]
};