"use strict";

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

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

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

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

var _cjs = _interopRequireDefault(require("react-focus-lock/dist/cjs"));

var _ = require(".");

var _Avatar = require("../Avatar");

var _Badge = require("../Badge");

var _Box = require("../Box");

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

var _ButtonGroup = require("../ButtonGroup");

var _FormControl = require("../FormControl");

var _FormLabel = require("../FormLabel");

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

var _Link = require("../Link");

var _Stack = require("../Stack");

var _Text = require("../Text");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Popover', module);

var Example = function Example() {
  return __jsx(_.Popover, {
    closeOnBlur: false
  }, __jsx(_.PopoverTrigger, null, __jsx(_Button.Button, {
    mt: "180px"
  }, "Trigger")), __jsx(_.PopoverContent, null, __jsx(_.PopoverArrow, null), __jsx(_.PopoverCloseButton, null), __jsx(_.PopoverHeader, null, "Confirmation!"), __jsx(_.PopoverBody, null, "Are you sure you want to have that milkshake?")));
};

stories.add('Default', function () {
  return __jsx(Example, null);
});

var PortalEx = function PortalEx() {
  var initRef = (0, _react2.useRef)();
  return __jsx(_.Popover, {
    closeOnBlur: false,
    placement: "left",
    usePortal: true,
    initialFocusRef: initRef
  }, __jsx(_.PopoverTrigger, null, __jsx(_Button.Button, {
    "float": "right"
  }, "Trigger")), __jsx(_.PopoverContent, null, __jsx(_.PopoverHeader, null, "Please Confirm!"), __jsx(_.PopoverCloseButton, null), __jsx(_.PopoverBody, null, __jsx(_Box.Box, null, "Are you sure you want to delete something? This action is permanent, and we're totally not just flipping a field called \"deleted\" to \"true\" in our database, we're actually deleting something."), __jsx(_Button.Button, {
    mt: "spacing",
    ref: initRef
  }, "Close")), __jsx(_.PopoverFooter, null, "This is the footer")));
};

stories.add('with portal', function () {
  return __jsx(PortalEx, null);
});

var PortalAndFocusLockEx = function PortalAndFocusLockEx() {
  return __jsx(_.Popover, {
    usePortal: true,
    closeOnBlur: false
  }, __jsx(_.PopoverTrigger, null, __jsx(_Button.Button, {
    "float": "right"
  }, "Trigger")), __jsx(_.PopoverContent, null, __jsx(_cjs["default"], {
    returnFocus: true,
    persistentFocus: false
  }, __jsx(_.PopoverHeader, null, "Header"), __jsx(_.PopoverCloseButton, null), __jsx(_.PopoverBody, null, __jsx(_Button.Button, null, "Close")), __jsx(_.PopoverFooter, null, "This is the footer"))));
};

stories.add('with focus lock', function () {
  return __jsx(PortalAndFocusLockEx, null);
});

function Card() {
  return __jsx(_Box.Box, {
    p: 5
  }, __jsx(_Avatar.Avatar, {
    name: "swyx",
    src: "https://pbs.twimg.com/profile_images/990728399873232896/CMPn3IxT_reasonably_small.jpg"
  }), __jsx(_Text.Text, {
    mt: "spacing",
    fontWeight: "bold"
  }, "swyx", __jsx(_Badge.Badge, {
    ml: "spacing-sm"
  }, "Follows you")), __jsx(_Text.Text, {
    mt: "spacing-sm"
  }, "Infinite Builder working on DX @Netlify. Helping people #LearnInPublic"));
}

function TwitterEx() {
  return __jsx(_.Popover, {
    trigger: "hover"
  }, __jsx(_.PopoverTrigger, null, __jsx(_Link.Link, {
    href: "/",
    color: "blue.500"
  }, "Hover to see @swyx profile")), __jsx(_.PopoverContent, {
    bg: "#15202b",
    color: "white",
    width: "400px"
  }, __jsx(Card, null)));
}

stories.add('twitter hover card', function () {
  return __jsx(TwitterEx, null);
});

var FeedbackEx = function FeedbackEx() {
  return __jsx(_.Popover, {
    usePortal: true,
    defaultIsOpen: true,
    closeOnBlur: false,
    placement: "right"
  }, __jsx(_.PopoverTrigger, null, __jsx(_Button.Button, null, "Trigger")), __jsx(_.PopoverContent, {
    border: "0"
  }, __jsx(_.PopoverHeader, {
    borderBottom: "0",
    bg: "red.600",
    color: "white"
  }, "Header", __jsx(_.PopoverCloseButton, null)), __jsx(_.PopoverBody, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.", __jsx(_Link.Link, {
    href: "/",
    color: "blue.500"
  }, "Learn More"))));
};

stories.add('feedback', function () {
  return __jsx(FeedbackEx, null);
});

var WalkthroughEx = function WalkthroughEx() {
  return __jsx(_.Popover, {
    placement: "bottom",
    isOpen: true,
    closeOnBlur: false
  }, __jsx(_.PopoverTrigger, null, __jsx(_Button.Button, {
    "float": "right"
  }, "Trigger")), __jsx(_.PopoverContent, {
    color: "white",
    bg: "#032e61",
    borderColor: "#032e61"
  }, __jsx(_.PopoverHeader, {
    pt: 4,
    fontWeight: "bold",
    border: "0"
  }, "Manage Your Channels"), __jsx(_.PopoverArrow, null), __jsx(_.PopoverCloseButton, null), __jsx(_.PopoverBody, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."), __jsx(_.PopoverFooter, {
    border: "0",
    d: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    pb: 4
  }, __jsx(_Text.Text, null, "Step 2 of 4"), __jsx(_ButtonGroup.ButtonGroup, {
    size: "sm"
  }, __jsx(_Button.Button, {
    variantColor: "success"
  }, "Setup Email"), __jsx(_Button.Button, null, "Next")))));
};

stories.add('walkthrough', function () {
  return __jsx(WalkthroughEx, null);
});

var ConfirmationEx = function ConfirmationEx() {
  return __jsx(_.Popover, {
    usePortal: true,
    placement: "right",
    closeOnBlur: false
  }, __jsx(_.PopoverTrigger, null, __jsx(_Button.Button, null, "Delete Customer")), __jsx(_.PopoverContent, null, __jsx(_.PopoverHeader, {
    fontWeight: "semibold"
  }, "Confirmation"), __jsx(_.PopoverArrow, null), __jsx(_.PopoverCloseButton, null), __jsx(_.PopoverBody, null, "Are you sure you want to continue with your action?"), __jsx(_.PopoverFooter, {
    d: "flex",
    justifyContent: "flex-end"
  }, __jsx(_ButtonGroup.ButtonGroup, {
    size: "sm"
  }, __jsx(_Button.Button, {
    variant: "tertiary"
  }, "Cancel"), __jsx(_Button.Button, {
    variantColor: "error"
  }, "Apply")))));
};

stories.add('confirmation', function () {
  return __jsx(ConfirmationEx, null);
});

var CustomTargetEx = function CustomTargetEx() {
  var _useState = (0, _react2.useState)(false),
      open = _useState[0],
      setOpen = _useState[1];

  return __jsx(_react2["default"].Fragment, null, __jsx(_Button.Button, {
    onClick: function onClick() {
      return setOpen(!open);
    }
  }, "Trigger Popover"), __jsx(_.Popover, {
    returnFocusOnClose: false,
    isOpen: open,
    placement: "right",
    closeOnBlur: false,
    usePortal: true
  }, __jsx(_.PopoverTrigger, null, __jsx(_Button.Button, null, "Popover Target")), __jsx(_.PopoverContent, null, __jsx(_.PopoverHeader, {
    fontWeight: "semibold"
  }, "Confirmation"), __jsx(_.PopoverArrow, null), __jsx(_.PopoverCloseButton, null), __jsx(_.PopoverBody, null, "Are you sure you want to continue with your action?"), __jsx(_.PopoverFooter, {
    d: "flex",
    justifyContent: "flex-end"
  }, __jsx(_ButtonGroup.ButtonGroup, {
    size: "sm"
  }, __jsx(_Button.Button, {
    variant: "tertiary"
  }, "Cancel"), __jsx(_Button.Button, {
    variantColor: "error"
  }, "Apply"))))));
};

stories.add('custom target', function () {
  return __jsx(CustomTargetEx, null);
});

function Form(_ref) {
  var initField = _ref.initField,
      props = (0, _objectWithoutProperties2["default"])(_ref, ["initField"]);
  return __jsx(_Stack.Stack, props, __jsx(_FormControl.FormControl, null, __jsx(_FormLabel.FormLabel, {
    htmlFor: "fname"
  }, "First name"), __jsx(_Input.Input, {
    ref: initField,
    id: "fname",
    defaultValue: "John"
  })), __jsx(_FormControl.FormControl, null, __jsx(_FormLabel.FormLabel, {
    htmlFor: "lname"
  }, "Last name"), __jsx(_Input.Input, {
    id: "lname",
    defaultValue: "Smith"
  })));
}

var DialogForm = function DialogForm() {
  var _useState2 = (0, _react2.useState)(false),
      open = _useState2[0],
      setOpen = _useState2[1];

  var firstField = (0, _react2.useRef)(null);
  return __jsx(_react2["default"].Fragment, null, __jsx(_Box.Box, {
    d: "inline-block",
    mr: 3
  }, "John Smith"), __jsx(_.Popover, {
    isOpen: open,
    initialFocusRef: firstField,
    onOpen: function onOpen() {
      return setOpen(true);
    },
    onClose: function onClose() {
      return setOpen(false);
    },
    placement: "right",
    closeOnBlur: false
  }, __jsx(_.PopoverTrigger, null, __jsx(_Button.Button, null, "Edit")), __jsx(_.PopoverContent, {
    p: 5
  }, __jsx(_cjs["default"], {
    returnFocus: true,
    persistentFocus: false
  }, __jsx(_.PopoverArrow, {
    bg: "white"
  }), __jsx(_.PopoverCloseButton, null), __jsx(Form, {
    initField: firstField
  }), __jsx(_ButtonGroup.ButtonGroup, {
    mt: 5,
    d: "flex",
    justifyContent: "flex-end"
  }, __jsx(_Button.Button, {
    variant: "tertiary"
  }, "Cancel"), __jsx(_Button.Button, {
    isDisabled: true,
    variantColor: "teal"
  }, "Save"))))));
};

stories.add('form with focus lock', function () {
  return __jsx(DialogForm, null);
});
//# sourceMappingURL=examples.js.map