@wix/design-system/dist/cjs/FullScreenModalLayout/FullScreenModalLayout.story.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.Basic = void 0;
var _react = _interopRequireDefault(require("react"));
var _Modal = _interopRequireDefault(require("../Modal"));
var _Button = _interopRequireDefault(require("../Button"));
var _Text = _interopRequireDefault(require("../Text"));
var _FullScreenModalLayout = _interopRequireDefault(require("./FullScreenModalLayout"));
var _ = require("..");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FullScreenModalLayout/FullScreenModalLayout.story.tsx";
var meta = {
  component: _FullScreenModalLayout.default
};
var _default = exports.default = meta;
var ModalWithButton = _ref => {
  var {
    isOpen: isOpenProp = false,
    children
  } = _ref;
  var [isOpen, setIsOpen] = _react.default.useState(isOpenProp);
  var close = _react.default.useCallback(() => setIsOpen(false), []);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onClick: () => setIsOpen(true),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 7
    }
  }, "Open Modal"), /*#__PURE__*/_react.default.createElement(_Modal.default, {
    isOpen: isOpen,
    onRequestClose: close,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35,
      columnNumber: 7
    }
  }, children({
    isOpen,
    close
  })));
};
var Basic = exports.Basic = {
  render: () => {
    return /*#__PURE__*/_react.default.createElement(ModalWithButton, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 45,
        columnNumber: 7
      }
    }, _ref2 => {
      var {
        close
      } = _ref2;
      return /*#__PURE__*/_react.default.createElement(_FullScreenModalLayout.default, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 47,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement(_FullScreenModalLayout.default.Header, {
        startNode: /*#__PURE__*/_react.default.createElement(_.CloseButton, {
          skin: "dark",
          size: "large",
          onClick: close,
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 50,
            columnNumber: 17
          }
        }),
        endNode: /*#__PURE__*/_react.default.createElement(_.TextButton, {
          size: "small",
          onClick: close,
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 53,
            columnNumber: 17
          }
        }, "Save"),
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 48,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        size: "small",
        weight: "normal",
        ellipsis: true,
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 58,
          columnNumber: 15
        }
      }, "Modal Title")), /*#__PURE__*/_react.default.createElement(_FullScreenModalLayout.default.Content, {
        padding: true,
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 62,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 63,
          columnNumber: 15
        }
      }, "This is the main content area with padding.")), /*#__PURE__*/_react.default.createElement(_FullScreenModalLayout.default.Footer, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 65,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 66,
          columnNumber: 15
        }
      }, "Footer")));
    });
  }
};
//# sourceMappingURL=FullScreenModalLayout.story.js.map