wix-style-react/dist/es/stories/Popover/index.story.js

wix-style-react

import React from 'react';
import CodeExample from 'wix-storybook-utils/CodeExample';
import Markdown from 'wix-storybook-utils/Markdown';
import { storySettings } from './storySettings';

import Popover, { placements } from '../../src/Popover';
import Button from '../../src/Button';
import Dropdown from '../../src/Dropdown';
import FormField from '../../src/FormField';

import ExampleAppendTo from './examples/ExampleAppendTo';
import ExampleInteractive from './examples/ExampleInteractive';
import ExampleFlip from './examples/ExampleFlip';
import ExampleFixed from './examples/ExampleFixed';

import ExamplePositioning from './examples/ExamplePositioning';
import ExamplePositioningRaw from '!raw-loader!./examples/ExamplePositioning';

var Example = function Example(_ref) {
  var title = _ref.title,
      children = _ref.children;
  return React.createElement(
    'div',
    null,
    React.createElement(Markdown, { source: '### ' + title }),
    children
  );
};

var children = [{
  label: 'Content without padding',
  value: [React.createElement(
    Popover.Element,
    { key: '1' },
    'This is the Popover.Element'
  ), React.createElement(
    Popover.Content,
    { key: '2' },
    'Content without padding'
  )]
}, {
  label: 'Content with padding',
  value: [React.createElement(
    Popover.Element,
    { key: '1' },
    'This is the Popover.Element'
  ), React.createElement(
    Popover.Content,
    { key: '2' },
    React.createElement(
      'div',
      { style: { padding: '12px 24px', textAlign: 'center' } },
      'Content with padding'
    )
  )]
}, {
  label: 'A button',
  value: [React.createElement(
    Popover.Element,
    { key: '1' },
    'This is the Popover.Element'
  ), React.createElement(
    Popover.Content,
    { key: '2' },
    React.createElement(
      'div',
      { style: { padding: '12px 24px', textAlign: 'center', width: 250 } },
      React.createElement(
        Button,
        null,
        'I am a useless button!'
      )
    )
  )]
}, {
  label: 'A Dropdown',
  value: [React.createElement(
    Popover.Element,
    { key: '1' },
    'This is the Popover.Element'
  ), React.createElement(
    Popover.Content,
    { key: '2' },
    React.createElement(
      'div',
      { style: { padding: '12px 24px', textAlign: 'center' } },
      React.createElement(
        FormField,
        { label: 'This is the FormField label' },
        React.createElement(Dropdown, {
          options: [{ id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { value: '-' }, { id: 2, value: 'Option 3' }, { id: 3, value: 'Option 4' }],
          placeholder: 'This is a placeholder'
        })
      )
    )
  )]
}];

export default {
  category: storySettings.kind,
  storyName: storySettings.storyName,

  component: Popover,
  componentPath: '../../src/Popover/Popover.js',

  componentProps: function componentProps(setProps, getProps) {
    return {
      dataHook: storySettings.dataHook,

      children: children[1].value,
      showArrow: true,
      animate: true,
      shown: false,
      flip: true,
      placement: 'top',
      appendTo: 'window',

      onClick: function onClick() {
        return setProps({ shown: !getProps().shown });
      }
    };
  },

  exampleProps: {
    children: children,

    appendTo: [{ label: 'window', value: window }, { label: 'scrollParent', value: 'scrollParent' }, { label: 'viewport', value: 'viewport' }, { label: 'parent', value: 'parent' }, { label: 'null', value: null }],

    hideDelay: null,
    showDelay: null,

    placement: placements
  },

  examples: React.createElement(
    'div',
    null,
    React.createElement(
      Example,
      { title: '`appendTo` prop' },
      React.createElement(ExampleAppendTo, null)
    ),
    React.createElement(
      CodeExample,
      { title: 'Positioning', code: ExamplePositioningRaw },
      React.createElement(ExamplePositioning, null)
    ),
    React.createElement(
      Example,
      { title: 'Interactive' },
      React.createElement(ExampleInteractive, null)
    ),
    React.createElement(
      Example,
      { title: 'Flip behaviour' },
      React.createElement(ExampleFlip, null)
    ),
    React.createElement(
      Example,
      { title: 'Fixed behaviour' },
      React.createElement(ExampleFixed, null)
    )
  )
};