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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _CodeExample = require('wix-storybook-utils/CodeExample');

var _CodeExample2 = _interopRequireDefault(_CodeExample);

var _Markdown = require('wix-storybook-utils/Markdown');

var _Markdown2 = _interopRequireDefault(_Markdown);

var _storySettings = require('./storySettings');

var _Popover = require('../../src/Popover');

var _Popover2 = _interopRequireDefault(_Popover);

var _Button = require('../../src/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Dropdown = require('../../src/Dropdown');

var _Dropdown2 = _interopRequireDefault(_Dropdown);

var _FormField = require('../../src/FormField');

var _FormField2 = _interopRequireDefault(_FormField);

var _ExampleAppendTo = require('./examples/ExampleAppendTo');

var _ExampleAppendTo2 = _interopRequireDefault(_ExampleAppendTo);

var _ExampleInteractive = require('./examples/ExampleInteractive');

var _ExampleInteractive2 = _interopRequireDefault(_ExampleInteractive);

var _ExampleFlip = require('./examples/ExampleFlip');

var _ExampleFlip2 = _interopRequireDefault(_ExampleFlip);

var _ExampleFixed = require('./examples/ExampleFixed');

var _ExampleFixed2 = _interopRequireDefault(_ExampleFixed);

var _ExamplePositioning = require('./examples/ExamplePositioning');

var _ExamplePositioning2 = _interopRequireDefault(_ExamplePositioning);

var _ExamplePositioning3 = require('!raw-loader!./examples/ExamplePositioning');

var _ExamplePositioning4 = _interopRequireDefault(_ExamplePositioning3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

var children = [{
  label: 'Content without padding',
  value: [_react2.default.createElement(
    _Popover2.default.Element,
    { key: '1' },
    'This is the Popover.Element'
  ), _react2.default.createElement(
    _Popover2.default.Content,
    { key: '2' },
    'Content without padding'
  )]
}, {
  label: 'Content with padding',
  value: [_react2.default.createElement(
    _Popover2.default.Element,
    { key: '1' },
    'This is the Popover.Element'
  ), _react2.default.createElement(
    _Popover2.default.Content,
    { key: '2' },
    _react2.default.createElement(
      'div',
      { style: { padding: '12px 24px', textAlign: 'center' } },
      'Content with padding'
    )
  )]
}, {
  label: 'A button',
  value: [_react2.default.createElement(
    _Popover2.default.Element,
    { key: '1' },
    'This is the Popover.Element'
  ), _react2.default.createElement(
    _Popover2.default.Content,
    { key: '2' },
    _react2.default.createElement(
      'div',
      { style: { padding: '12px 24px', textAlign: 'center', width: 250 } },
      _react2.default.createElement(
        _Button2.default,
        null,
        'I am a useless button!'
      )
    )
  )]
}, {
  label: 'A Dropdown',
  value: [_react2.default.createElement(
    _Popover2.default.Element,
    { key: '1' },
    'This is the Popover.Element'
  ), _react2.default.createElement(
    _Popover2.default.Content,
    { key: '2' },
    _react2.default.createElement(
      'div',
      { style: { padding: '12px 24px', textAlign: 'center' } },
      _react2.default.createElement(
        _FormField2.default,
        { label: 'This is the FormField label' },
        _react2.default.createElement(_Dropdown2.default, {
          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'
        })
      )
    )
  )]
}];

exports.default = {
  category: _storySettings.storySettings.kind,
  storyName: _storySettings.storySettings.storyName,

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

  componentProps: function componentProps(setProps, getProps) {
    return {
      dataHook: _storySettings.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: _Popover.placements
  },

  examples: _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      Example,
      { title: '`appendTo` prop' },
      _react2.default.createElement(_ExampleAppendTo2.default, null)
    ),
    _react2.default.createElement(
      _CodeExample2.default,
      { title: 'Positioning', code: _ExamplePositioning4.default },
      _react2.default.createElement(_ExamplePositioning2.default, null)
    ),
    _react2.default.createElement(
      Example,
      { title: 'Interactive' },
      _react2.default.createElement(_ExampleInteractive2.default, null)
    ),
    _react2.default.createElement(
      Example,
      { title: 'Flip behaviour' },
      _react2.default.createElement(_ExampleFlip2.default, null)
    ),
    _react2.default.createElement(
      Example,
      { title: 'Fixed behaviour' },
      _react2.default.createElement(_ExampleFixed2.default, null)
    )
  )
};