wix-style-react/dist/es/stories/Tooltip/Composite/CompositeStory.js

wix-style-react

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

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

import ExampleTooltip from './ExampleTooltip';
import ExamplePopover from './ExamplePopover';
import TooltipReadmeTestKit from '../../../src/Tooltip/README.TESTKIT.md';

import ExamplePlacement from '../Core/ExamplePlacement';
import ExamplePlacementRaw from '!raw-loader!../Core/ExamplePlacement';
import ExampleBounce from '../Core/ExampleBounce';
import ExampleBounceRaw from '!raw-loader!../Core/ExampleBounce';
import ExampleTheme from '../Core/ExampleTheme';
import ExampleThemeRaw from '!raw-loader!../Core/ExampleTheme';
import ExampleCustomContent from '../Core/ExampleCustomContent';
import ExampleCustomContentRaw from '!raw-loader!../Core/ExampleCustomContent';
import ExampleMove from '../Core/ExampleMove';
import ExampleMoveRaw from '!raw-loader!../Core/ExampleMove';
import TooltipSource from '!raw-loader!wix-style-react/Tooltip/Tooltip';

import ExamplePopoverEmptyState from './ExamplePopoverEmptyState';
import ExamplePopoverEmptyStateRaw from '!raw-loader!./ExamplePopoverEmptyState';

storiesOf('7. Tooltips', module).add('7.1. Tooltip', function () {
  return React.createElement(
    TabbedView,
    { tabs: ['Usage', 'API', 'Testkit'] },
    React.createElement(
      'div',
      null,
      React.createElement(
        'h1',
        null,
        'Tooltip'
      ),
      React.createElement(
        InteractiveCodeExample,
        { title: 'Customize a <Tooltip/>' },
        React.createElement(ExampleTooltip, null)
      )
    ),
    React.createElement(
      'div',
      null,
      React.createElement(AutoDocs, { source: TooltipSource }),
      React.createElement(
        CodeExample,
        { title: 'Tooltip Placement', code: ExamplePlacementRaw },
        React.createElement(ExamplePlacement, null)
      ),
      React.createElement(
        CodeExample,
        { title: 'Tooltip Bounce', code: ExampleBounceRaw },
        React.createElement(ExampleBounce, null)
      ),
      React.createElement(
        CodeExample,
        { title: 'Tooltip Theme', code: ExampleThemeRaw },
        React.createElement(ExampleTheme, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'Tooltip Custom Content',
          code: ExampleCustomContentRaw
        },
        React.createElement(ExampleCustomContent, null)
      ),
      React.createElement(
        CodeExample,
        { title: 'Custom tooltip adjustment', code: ExampleMoveRaw },
        React.createElement(ExampleMove, null)
      )
    ),
    React.createElement(Markdown, { source: TooltipReadmeTestKit })
  );
}).add('7.2. Popover', function () {
  return React.createElement(
    'div',
    null,
    React.createElement(
      'h1',
      null,
      'Popover'
    ),
    React.createElement(
      InteractiveCodeExample,
      { title: 'Customize a <Tooltip/>' },
      React.createElement(ExamplePopover, null)
    ),
    React.createElement(
      CodeExample,
      {
        title: 'Popover with EmptyState',
        code: ExamplePopoverEmptyStateRaw
      },
      React.createElement(ExamplePopoverEmptyState, null)
    )
  );
});