@wix/design-system/dist/esm/AreaChart/docs/index.story.js

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/AreaChart/docs/index.story.jsx";
import React from 'react';
import { header, tabs, tab, description, title, divider, example, code, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from '../test/storySettings';
import { simpleUsage, collapsedLabelsUsage, combinedData, standardData } from './examples';
import AreaChart from '..';
export default {
  category: storySettings.category,
  storyName: 'AreaChart',
  component: AreaChart,
  componentPath: '..',
  componentProps: {
    data: combinedData,
    tooltipContent: function tooltipContent(item, index) {
      return ["".concat(item.label), "".concat(item.value, "$ from your orders")];
    }
  },
  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(AreaChart.displayName, "/"),
    component: /*#__PURE__*/React.createElement(AreaChart, {
      data: standardData,
      tooltipContent: function tooltipContent(item, index) {
        return ["".concat(item.label), "".concat(item.value, "$ from your orders")];
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 51,
        columnNumber: 9
      }
    })
  }), tabs([tab({
    title: 'Description',
    sections: [description({
      title: 'Description',
      text: 'An area chart is a way of plotting data points on a line. Often, it is used to show trend data.'
    }), divider(), title('Examples'), example({
      title: 'Simple Usage',
      text: 'A simple example with compact preview',
      source: simpleUsage
    }), example({
      title: 'Collapsed values',
      text: 'A simple example of collapsed values (hover on a point between some x labels)',
      source: collapsedLabelsUsage
    }), code({
      title: 'Full Interactive Preview',
      description: 'A non compact version of same code example as above',
      source: simpleUsage
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};