"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _react = require("@storybook/react");

var _react2 = _interopRequireDefault(require("react"));

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

var _Icon = require("../Icon");

var _Menu = require("./Menu");

var _MenuItemOption = require("./MenuItemOption");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Menu', module); // stories.addDecorator(story => (
//   <Box maxWidth="md" mx="auto" mt="600px">
//     {story()}
//   </Box>
// ));

stories.add('Default', function () {
  return __jsx(_Menu.Menu, null, __jsx(_Menu.MenuButton, {
    as: _Button.Button,
    variantColor: "blue"
  }, "Open Menu"), __jsx(_Menu.MenuList, {
    minWidth: "200px"
  }, __jsx(_Menu.MenuItem, null, "Share"), __jsx(_Menu.MenuItem, null, "Move"), __jsx(_Menu.MenuDivider, null), __jsx(_Menu.MenuItem, null, "Rename"), __jsx(_Menu.MenuItem, null, "Delete")));
});
stories.add('MenuList only', function () {
  return __jsx(_Menu.Menu, {
    autoSelect: true,
    defaultIsOpen: true,
    closeOnSelect: false
  }, __jsx(_Menu.MenuList, {
    minWidth: "240px"
  }, __jsx(_Menu.MenuGroup, {
    title: "Group 1"
  }, __jsx(_Menu.MenuItem, null, "Share..."), __jsx(_Menu.MenuItem, null, "Move...")), __jsx(_Menu.MenuDivider, null), __jsx(_Menu.MenuGroup, {
    title: "Group 2"
  }, __jsx(_Menu.MenuItem, {
    isDisabled: true
  }, "Rename..."), __jsx(_Menu.MenuItem, null, "Delete..."))));
});
stories.add('MenuItem Radio', function () {
  return __jsx(_Menu.Menu, {
    closeOnBlur: false,
    closeOnSelect: false
  }, __jsx(_Menu.MenuButton, {
    as: _Button.Button,
    variantColor: "blue"
  }, "MenuItem"), __jsx(_Menu.MenuList, {
    minWidth: "240px"
  }, __jsx(_MenuItemOption.MenuOptionGroup, {
    defaultValue: "asc",
    title: "Order",
    type: "radio"
  }, __jsx(_MenuItemOption.MenuItemOption, {
    _checked: {
      color: 'blue.500'
    },
    value: "asc"
  }, "Ascending"), __jsx(_MenuItemOption.MenuItemOption, {
    value: "desc"
  }, "Descending")), __jsx(_Menu.MenuDivider, null), __jsx(_MenuItemOption.MenuOptionGroup, {
    title: "Country",
    type: "checkbox"
  }, __jsx(_MenuItemOption.MenuItemOption, {
    value: "email"
  }, "Email"), __jsx(_MenuItemOption.MenuItemOption, {
    value: "phone"
  }, "Phone"), __jsx(_MenuItemOption.MenuItemOption, {
    value: "country"
  }, "Country"))));
});

function CustomMenu() {
  return __jsx(_Menu.Menu, null, __jsx(_Menu.MenuButton, {
    as: _Button.Button
  }, __jsx(_Icon.Icon, {
    name: "settings"
  })), __jsx(_Menu.MenuList, null, __jsx(_Menu.MenuItem, null, "Download"), __jsx(_Menu.MenuItem, null, "Upload")));
}

stories.add('Bug fix', function () {
  return __jsx("div", {
    style: {
      "float": 'right'
    }
  }, __jsx(CustomMenu, null), __jsx(CustomMenu, null));
});
//# sourceMappingURL=examples.js.map