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

wix-style-react

import React from 'react';
import { storiesOf } from '@storybook/react';
import Markdown from 'wix-storybook-utils/Markdown';
import TabbedView from 'wix-storybook-utils/TabbedView';
import CodeExample from 'wix-storybook-utils/CodeExample';

import Readme from '../../src/DropdownLayout/README.md';
import ReadmeTestkit from '../../src/DropdownLayout/README.TESTKIT.md';

import ExampleStandard from './ExampleStandard';
import ExampleStandardRaw from '!raw-loader!./ExampleStandard';

import ExampleInfiniteScroll from './ExampleInfiniteScroll';
import ExampleInfiniteScrollRaw from '!raw-loader!./ExampleInfiniteScroll';

import ExampleBuilder from './ExampleBuilder';
import ExampleBuilderRaw from '!raw-loader!./ExampleBuilder';

import ExampleManyOptions from './ExampleManyOptions';
import ExampleManyOptionsRaw from '!raw-loader!./ExampleManyOptions';

import ExampleReactElement from './ExampleReactElements';
import ExampleReactElementRaw from '!raw-loader!./ExampleReactElements';

import ExampleControlled from './ExampleControlled';
import ExampleControlledRaw from '!raw-loader!./ExampleControlled';

import ExampleControlledInContainer from './ExampleControlledInContainer';
import ExampleControlledInContainerRaw from '!raw-loader!./ExampleControlledInContainer';

storiesOf('11. Pickers and Selectors', module).add('11.1 DropdownLayout', function () {
  return React.createElement(
    TabbedView,
    { tabs: ['API', 'Testkit'] },
    React.createElement(
      'div',
      null,
      React.createElement(Markdown, { source: Readme }),
      React.createElement(
        'h1',
        null,
        'Usage examples'
      ),
      React.createElement(
        CodeExample,
        { title: 'Standard', code: ExampleStandardRaw },
        React.createElement(ExampleStandard, null)
      ),
      React.createElement('div', { style: { paddingTop: '230px' } }),
      React.createElement(
        CodeExample,
        { title: 'Infinite Scroll', code: ExampleInfiniteScrollRaw },
        React.createElement(ExampleInfiniteScroll, null)
      ),
      React.createElement('div', { style: { paddingTop: '230px' } }),
      React.createElement(
        CodeExample,
        { title: 'Options Builder', code: ExampleBuilderRaw },
        React.createElement(ExampleBuilder, null)
      ),
      React.createElement('div', { style: { paddingTop: '230px' } }),
      React.createElement(
        CodeExample,
        { title: 'Many options', code: ExampleManyOptionsRaw },
        React.createElement(ExampleManyOptions, null)
      ),
      React.createElement('div', { style: { paddingTop: '251px' } }),
      React.createElement(
        CodeExample,
        { title: 'React elements', code: ExampleReactElementRaw },
        React.createElement(ExampleReactElement, null)
      ),
      React.createElement('div', { style: { paddingTop: '143px' } }),
      React.createElement(
        CodeExample,
        { title: 'Controlled', code: ExampleControlledRaw },
        React.createElement(ExampleControlled, null)
      ),
      React.createElement(
        CodeExample,
        {
          title: 'With custom container styles',
          code: ExampleControlledInContainerRaw
        },
        React.createElement(ExampleControlledInContainer, null)
      ),
      React.createElement('div', { style: { paddingTop: '230px' } })
    ),
    React.createElement(Markdown, { source: ReadmeTestkit })
  );
});