wix-style-react/dist/es/stories/StatsWidget/index.js

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';

import AutoDocs from 'wix-storybook-utils/AutoDocs';
import TabbedView from 'wix-storybook-utils/TabbedView';
import Markdown from 'wix-storybook-utils/Markdown';
import CodeExample from 'wix-storybook-utils/CodeExample';

import StatsWidgetSource from '!raw-loader!../../src/StatsWidget/StatsWidget';

import ExampleStatsWidgetStandard from './ExampleStatsWidgetStandard';
import ExampleStatsWidgetStandardRaw from '!raw-loader!./ExampleStatsWidgetStandard';

import ExampleStatsWidgetWithPercents from './ExampleStatsWidgetWithPercents';
import ExampleStatsWidgetWithPercentsRaw from '!raw-loader!./ExampleStatsWidgetWithPercents';

import ExampleStatsWidgetWithInvertPercentColor from './ExampleStatsWidgetWithInvertPercentColor';
import ExampleStatsWidgetWithInvertPercentColorRaw from '!raw-loader!./ExampleStatsWidgetWithInvertPercentColor';

import ExampleStatsWidgetWithFilters from './ExampleStatsWidgetWithFilters';
import ExampleStatsWidgetWithFiltersRaw from '!raw-loader!./ExampleStatsWidgetWithFilters';

import ExampleStatsWidgetEmptyState from './ExampleStatsWidgetEmptyState';
import ExampleStatsWidgetEmptyStateRaw from '!raw-loader!./ExampleStatsWidgetEmptyState';

import ExampleStatsWidgetWithFilterWithNoBorder from './ExampleStatsWidgetWithFilterWithNoBorder';
import ExampleStatsWidgetWithFilterWithNoBorderRaw from '!raw-loader!./ExampleStatsWidgetWithFilterWithNoBorder';

import ReadmeTestkit from '../../src/StatsWidget/README.TESTKIT.md';

storiesOf('2. Layout', module).add('2.7 StatsWidget', function () {
  return React.createElement(
    TabbedView,
    { tabs: ['Usage', 'Testkit'] },
    React.createElement(
      'div',
      null,
      React.createElement(AutoDocs, { source: StatsWidgetSource }),
      React.createElement(
        'h1',
        null,
        'Usage examples'
      ),
      React.createElement(
        CodeExample,
        { title: 'Stats widget', code: ExampleStatsWidgetStandardRaw },
        React.createElement(ExampleStatsWidgetStandard, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'Stats widget example with percents',
          code: ExampleStatsWidgetWithPercentsRaw
        },
        React.createElement(ExampleStatsWidgetWithPercents, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'Stats widget example with invert percent color',
          code: ExampleStatsWidgetWithInvertPercentColorRaw
        },
        React.createElement(ExampleStatsWidgetWithInvertPercentColor, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'Stats widget example with filter',
          code: ExampleStatsWidgetWithFilterWithNoBorderRaw
        },
        React.createElement(ExampleStatsWidgetWithFilterWithNoBorder, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'Stats widget example with multiple filters',
          code: ExampleStatsWidgetWithFiltersRaw
        },
        React.createElement(ExampleStatsWidgetWithFilters, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'Stats widget example with empty state',
          code: ExampleStatsWidgetEmptyStateRaw
        },
        React.createElement(ExampleStatsWidgetEmptyState, null)
      )
    ),
    React.createElement(Markdown, { source: ReadmeTestkit })
  );
});