@vtex/styleguide/lib/EXPERIMENTAL_Modal/modal.stories.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WithDifferentSizes = exports.WithLongContent = exports.Default = undefined;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _ = require(".");

var _2 = _interopRequireDefault(_);

var _useDisclosure2 = require("../../utilities/useDisclosure");

var _useDisclosure3 = _interopRequireDefault(_useDisclosure2);

var _Button = require("../Button");

var _Button2 = _interopRequireDefault(_Button);

var _Input = require("../Input");

var _Input2 = _interopRequireDefault(_Input);

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var sizes = ['small', 'medium', 'large', 'fit-horizontally', 'auto'];
exports.default = {
  title: 'Components/Modal V2',
  component: _2.default,
  argTypes: {
    size: {
      control: {
        type: 'inline-radio',
        options: sizes
      }
    }
  }
};

var Template = function Template(args) {
  var _useDisclosure = (0, _useDisclosure3.default)(),
      isOpen = _useDisclosure.isOpen,
      onOpen = _useDisclosure.onOpen,
      onClose = _useDisclosure.onClose;

  return _react2.default.createElement(_react2.default.Fragment, null, _react2.default.createElement(_Button2.default, {
    onClick: onOpen
  }, "Open"), _react2.default.createElement(_2.default, _extends({
    isOpen: isOpen,
    onClose: onClose,
    bottomBar: _react2.default.createElement(_react2.default.Fragment, null, _react2.default.createElement(_Button2.default, {
      size: "small",
      type: "button",
      variation: "tertiary",
      onClick: onClose
    }, "Cancel"), _react2.default.createElement("span", {
      className: "mr4"
    }), _react2.default.createElement(_Button2.default, {
      size: "small",
      type: "button",
      variation: 'primary',
      onClick: onClose
    }, "Confirm"))
  }, args)));
};

var Default = exports.Default = Template.bind({});
Default.args = {
  title: 'Tell me your name',
  responsiveFullScreen: true,
  size: 'medium',
  centered: true,
  showTopBar: true,
  showBottomBarBorder: true,
  closeOnEsc: true,
  closeOnOverlayClick: true,
  showCloseIcon: true,
  children: _react2.default.createElement(_react2.default.Fragment, null, "This is a simple customizable Modal to ask your name! Please try change my props below in the Knobs and see how I react!", _react2.default.createElement("div", {
    className: "mt6 mb5"
  }, _react2.default.createElement(_Input2.default, {
    autoFocus: true,
    placeholder: "Type your name...",
    size: "small",
    label: "Name"
  })))
};

var lorem = _react2.default.createElement("p", null, "Mauris ac arcu sit amet dui interdum bibendum a sed diam. Praesent rhoncus congue ipsum elementum lobortis. Ut ligula purus, ultrices id condimentum quis, tincidunt quis purus. Proin quis enim metus. Nunc feugiat odio at eros porta, ut rhoncus lorem tristique. Nunc et ipsum eu ex vulputate consectetur vel eu nisi. Donec ultricies rutrum lectus, sit ame feugiat est semper vitae. Proin varius imperdiet consequat. Proin eu metus nisi. In hac habitasse platea dictumst. Vestibulum ac ultrices risus. Pellentesque arcu sapien, aliquet sed orci sit amet, pulvinar interdum velit. Nunc a rhoncus ipsum, maximus fermentum dolor. Praesent aliquet justo vitae rutrum volutpat. Ut quis pulvinar est.");

var WithLongContent = exports.WithLongContent = Template.bind({});
WithLongContent.args = {
  children: _react2.default.createElement(_react2.default.Fragment, null, lorem, lorem, lorem, lorem, lorem, lorem, lorem, lorem)
};

var WithDifferentSizes = exports.WithDifferentSizes = function WithDifferentSizes() {
  var smallModal = (0, _useDisclosure3.default)();
  var mediumModal = (0, _useDisclosure3.default)();
  var largeModal = (0, _useDisclosure3.default)();
  return _react2.default.createElement("div", {
    className: "flex flex-row"
  }, _react2.default.createElement("span", {
    className: "mr4"
  }, _react2.default.createElement(_Button2.default, {
    size: "small",
    onClick: smallModal.onOpen,
    type: "button"
  }, "Open Small Modal")), _react2.default.createElement(_2.default, {
    size: "small",
    isOpen: smallModal.isOpen,
    onClose: smallModal.onClose,
    title: "Small Size",
    bottomBar: _react2.default.createElement(_react2.default.Fragment, null, _react2.default.createElement(_Button2.default, {
      size: "small",
      type: "button",
      variation: "tertiary",
      onClick: smallModal.onClose
    }, "Cancel"), _react2.default.createElement("span", {
      className: "mr4"
    }), _react2.default.createElement(_Button2.default, {
      size: "small",
      type: "button",
      variation: 'primary',
      onClick: smallModal.onClose
    }, "Confirm"))
  }, _react2.default.createElement("div", {
    className: "mb3"
  }, "Small Modal Example, adjust viewport to see how I react to different screen sizes!")), _react2.default.createElement("br", null), _react2.default.createElement("span", {
    className: "mr4"
  }, _react2.default.createElement(_Button2.default, {
    size: "regular",
    onClick: mediumModal.onOpen,
    type: "button"
  }, "Open Medium Modal")), _react2.default.createElement(_2.default, {
    size: "medium",
    isOpen: mediumModal.isOpen,
    onClose: mediumModal.onClose,
    title: "A medium Modal",
    bottomBar: _react2.default.createElement(_react2.default.Fragment, null, _react2.default.createElement(_Button2.default, {
      size: "small",
      type: "button",
      variation: "tertiary",
      onClick: mediumModal.onClose
    }, "Cancel"), _react2.default.createElement("span", {
      className: "mr4"
    }), _react2.default.createElement(_Button2.default, {
      size: "small",
      type: "button",
      variation: 'primary',
      onClick: mediumModal.onClose
    }, "Confirm"))
  }, _react2.default.createElement("div", {
    className: "mb3"
  }, "Medium Modal Example, adjust viewport to see how I react to different screen sizes!")), _react2.default.createElement("br", null), _react2.default.createElement("span", {
    className: "mr4"
  }, _react2.default.createElement(_Button2.default, {
    size: "large",
    onClick: largeModal.onOpen,
    type: "button"
  }, "Open Large Modal")), _react2.default.createElement(_2.default, {
    size: "large",
    isOpen: largeModal.isOpen,
    onClose: largeModal.onClose,
    title: "Large Size",
    bottomBar: _react2.default.createElement(_react2.default.Fragment, null, _react2.default.createElement(_Button2.default, {
      size: "small",
      type: "button",
      variation: "tertiary",
      onClick: largeModal.onClose
    }, "Cancel"), _react2.default.createElement("span", {
      className: "mr4"
    }), _react2.default.createElement(_Button2.default, {
      size: "small",
      type: "button",
      variation: 'primary',
      onClick: largeModal.onClose
    }, "Confirm"))
  }, _react2.default.createElement("div", {
    className: "mb3"
  }, "Large Modal Example, adjust viewport to see how I react to different screen sizes!")));
};