@roo-ui/components/dist/Modal/Model.story.js

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _storybookReadme = require('storybook-readme');

var _reactPowerplug = require('react-powerplug');

var _ = require('../..');

var _README = require('./README.md');

var _README2 = _interopRequireDefault(_README);

var _Modal = require('./Modal');

var _Modal2 = _interopRequireDefault(_Modal);

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

var ModalWrapper = function ModalWrapper(_ref) {
  var _ref$initial = _ref.initial,
      initial = _ref$initial === undefined ? true : _ref$initial,
      variant = _ref.variant;
  return _react2.default.createElement(
    _reactPowerplug.Toggle,
    { initial: initial },
    function (_ref2) {
      var on = _ref2.on,
          toggle = _ref2.toggle;
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          _.Button,
          { primary: true, onClick: toggle },
          'Open'
        ),
        _react2.default.createElement(
          _Modal2.default,
          { isOpen: on, onRequestClose: toggle, ariaHideApp: false, shouldCloseOnOverlayClick: true },
          _react2.default.createElement(
            _Modal2.default.header,
            { variant: variant, style: { textTransform: 'capitalize' } },
            variant || 'Default'
          ),
          _react2.default.createElement(
            _Modal2.default.body,
            null,
            'Lorem ipsum dolor sit amet',
            _react2.default.createElement('br', null),
            'Lorem ipsum dolor sit amet',
            _react2.default.createElement('br', null),
            'Lorem ipsum dolor sit amet',
            _react2.default.createElement('br', null)
          ),
          _react2.default.createElement(
            _Modal2.default.footer,
            null,
            _react2.default.createElement(
              _.Button,
              { primary: true, onClick: toggle },
              'Close'
            )
          )
        )
      );
    }
  );
};

(0, _react3.storiesOf)('Components|Modal', module).addDecorator((0, _storybookReadme.withDocs)(_README2.default)).add('<Modal />', function () {
  return _react2.default.createElement(ModalWrapper, { initial: false });
}).add('<Modal.header variant="info" />', function () {
  return _react2.default.createElement(ModalWrapper, { variant: 'info' });
}).add('<Modal.header variant="success" />', function () {
  return _react2.default.createElement(ModalWrapper, { variant: 'success' });
}).add('<Modal.header variant="error" />', function () {
  return _react2.default.createElement(ModalWrapper, { variant: 'error' });
});