@wix/design-system
Version:
@wix/design-system
87 lines • 6.6 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import { header, tabs, tab, description, title, divider, example, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from '../test/storySettings';
import FunnelChart from '..';
export default {
category: storySettings.category,
storyName: 'FunnelChart',
component: FunnelChart,
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: [header({
sourceUrl: "https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/".concat(FunnelChart.displayName, "/")
}), tabs([tab({
title: 'Description',
sections: [description({
title: 'Description',
text: 'FunnelChart displays values as progressively decreasing proportions. should contain at least 2 values'
}), divider(), title('Examples'), 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>"
}), 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>"
}), 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>"
}), 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(_toConsumableArray([{
title: 'API',
sections: [api()]
}, {
title: 'Testkit',
sections: [testkit()]
}, {
title: 'Playground',
sections: [playground()]
}].map(tab))))]
};