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

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withDocs } from 'storybook-readme';
import { Toggle } from 'react-powerplug';
import { Button } from '../..';
import README from './README.md';
import Modal from './Modal';

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

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