@storybook/components 6.4.0-beta.24 → 6.4.0-beta.28

package/dist/cjs/tooltip/TooltipLinkList.stories.js

@@ -0,0 +1,100 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.links = void 0;
+
+require("core-js/modules/es.array.slice.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _WithTooltip = require("./WithTooltip");
+
+var _TooltipLinkList = require("./TooltipLinkList");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 onLinkClick = (0, _addonActions.action)('onLinkClick');
+
+var StoryLinkWrapper = function StoryLinkWrapper(_ref) {
+  var href = _ref.href,
+      passHref = _ref.passHref,
+      children = _ref.children;
+
+  var child = _react.Children.only(children);
+
+  return /*#__PURE__*/(0, _react.cloneElement)(child, {
+    href: passHref && href,
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onLinkClick(href);
+    }
+  });
+};
+
+StoryLinkWrapper.defaultProps = {
+  passHref: false
+};
+var links = [{
+  id: '1',
+  title: 'Link',
+  href: 'http://google.com'
+}, {
+  id: '2',
+  title: 'Link',
+  href: 'http://google.com'
+}, {
+  id: '3',
+  title: 'callback',
+  onClick: (0, _addonActions.action)('onClick')
+}];
+exports.links = links;
+(0, _react2.storiesOf)('basics/Tooltip/TooltipLinkList', module).addDecorator(function (storyFn) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_WithTooltip.WithTooltip, {
+    placement: "top",
+    trigger: "click",
+    startOpen: true,
+    tooltip: storyFn()
+  }, /*#__PURE__*/_react.default.createElement("div", null, "Tooltip")));
+}).add('links', function () {
+  return /*#__PURE__*/_react.default.createElement(_TooltipLinkList.TooltipLinkList, {
+    links: links.slice(0, 2),
+    LinkWrapper: StoryLinkWrapper
+  });
+}).add('links and callback', function () {
+  return /*#__PURE__*/_react.default.createElement(_TooltipLinkList.TooltipLinkList, {
+    links: links,
+    LinkWrapper: StoryLinkWrapper
+  });
+});

package/dist/cjs/tooltip/TooltipMessage.js

@@ -0,0 +1,85 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipMessage = void 0;
+
+require("core-js/modules/es.array.map.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+var _link = require("../typography/link/link");
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Title = _theming.styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontWeight: theme.typography.weight.black
+  };
+});
+
+var Desc = _theming.styled.span();
+
+var Links = _theming.styled.div(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: 8,
+    textAlign: 'center',
+    '> *': {
+      margin: '0 8px',
+      fontWeight: theme.typography.weight.black
+    }
+  };
+});
+
+var Message = _theming.styled.div(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    color: theme.textColor,
+    lineHeight: '18px'
+  };
+});
+
+var MessageWrapper = _theming.styled.div({
+  padding: 15,
+  width: 280,
+  boxSizing: 'border-box'
+});
+
+var TooltipMessage = function TooltipMessage(_ref4) {
+  var title = _ref4.title,
+      desc = _ref4.desc,
+      links = _ref4.links;
+  return /*#__PURE__*/_react.default.createElement(MessageWrapper, null, /*#__PURE__*/_react.default.createElement(Message, null, title && /*#__PURE__*/_react.default.createElement(Title, null, title), desc && /*#__PURE__*/_react.default.createElement(Desc, null, desc)), links && /*#__PURE__*/_react.default.createElement(Links, null, links.map(function (_ref5) {
+    var linkTitle = _ref5.title,
+        other = _objectWithoutProperties(_ref5, ["title"]);
+
+    return /*#__PURE__*/_react.default.createElement(_link.Link, _extends({}, other, {
+      key: linkTitle
+    }), linkTitle);
+  })));
+};
+
+exports.TooltipMessage = TooltipMessage;
+TooltipMessage.displayName = "TooltipMessage";
+TooltipMessage.defaultProps = {
+  title: null,
+  desc: null,
+  links: null
+};

package/dist/cjs/tooltip/TooltipMessage.stories.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _WithTooltip = require("./WithTooltip");
+
+var _TooltipMessage = require("./TooltipMessage");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _react2.storiesOf)('basics/Tooltip/TooltipMessage', module).addDecorator(function (storyFn) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_WithTooltip.WithTooltip, {
+    placement: "top",
+    trigger: "click",
+    startOpen: true,
+    tooltip: storyFn()
+  }, /*#__PURE__*/_react.default.createElement("div", null, "Tooltip")));
+}).add('default', function () {
+  return /*#__PURE__*/_react.default.createElement(_TooltipMessage.TooltipMessage, {
+    title: "Lorem ipsum dolor sit",
+    desc: "Amet consectatur vestibulum concet durum politu coret weirom"
+  });
+}).add('with link', function () {
+  return /*#__PURE__*/_react.default.createElement(_TooltipMessage.TooltipMessage, {
+    title: "Lorem ipsum dolor sit",
+    desc: "Amet consectatur vestibulum concet durum politu coret weirom",
+    links: [{
+      title: 'Continue',
+      href: 'test'
+    }]
+  });
+}).add('with links', function () {
+  return /*#__PURE__*/_react.default.createElement(_TooltipMessage.TooltipMessage, {
+    title: "Lorem ipsum dolor sit",
+    desc: "Amet consectatur vestibulum concet durum politu coret weirom",
+    links: [{
+      title: 'Get more tips',
+      href: 'test'
+    }, {
+      title: 'Done',
+      href: 'test'
+    }]
+  });
+}).add('minimal message', function () {
+  return /*#__PURE__*/_react.default.createElement(_TooltipMessage.TooltipMessage, {
+    desc: "Amet consectatur vestibulum concet durum politu coret weirom"
+  });
+});

package/dist/cjs/tooltip/TooltipNote.js

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipNote = void 0;
+
+require("core-js/modules/es.string.bold.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Note = _theming.styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    padding: '2px 6px',
+    lineHeight: '16px',
+    fontSize: 10,
+    fontWeight: theme.typography.weight.bold,
+    color: theme.color.lightest,
+    boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.3)',
+    borderRadius: 4,
+    whiteSpace: 'nowrap',
+    pointerEvents: 'none',
+    zIndex: -1,
+    background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)',
+    margin: 6
+  };
+});
+
+var TooltipNote = function TooltipNote(_ref2) {
+  var note = _ref2.note,
+      props = _objectWithoutProperties(_ref2, ["note"]);
+
+  return /*#__PURE__*/_react.default.createElement(Note, props, note);
+};
+
+exports.TooltipNote = TooltipNote;
+TooltipNote.displayName = "TooltipNote";

package/dist/cjs/tooltip/TooltipNote.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _WithTooltip = require("./WithTooltip");
+
+var _TooltipNote = require("./TooltipNote");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _react2.storiesOf)('basics/Tooltip/TooltipNote', module).addDecorator(function (storyFn) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_WithTooltip.WithTooltip, {
+    hasChrome: false,
+    placement: "top",
+    trigger: "click",
+    startOpen: true,
+    tooltip: storyFn()
+  }, /*#__PURE__*/_react.default.createElement("div", null, "Tooltip")));
+}).add('default', function () {
+  return /*#__PURE__*/_react.default.createElement(_TooltipNote.TooltipNote, {
+    note: "Lorem ipsum dolor"
+  });
+});

package/dist/cjs/tooltip/WithTooltip.js

@@ -0,0 +1,229 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.object.freeze.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithTooltip = exports.WithToolTipState = exports.WithTooltipPure = void 0;
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _theming = require("@storybook/theming");
+
+var _global = _interopRequireDefault(require("global"));
+
+var _reactPopperTooltip = _interopRequireDefault(require("react-popper-tooltip"));
+
+var _Tooltip = require("./Tooltip");
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var document = _global.default.document; // A target that doesn't speak popper
+
+var TargetContainer = _theming.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  cursor: ", ";\n"])), function (props) {
+  return props.mode === 'hover' ? 'default' : 'pointer';
+});
+
+var TargetSvgContainer = _theming.styled.g(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: ", ";\n"])), function (props) {
+  return props.mode === 'hover' ? 'default' : 'pointer';
+});
+
+// Pure, does not bind to the body
+var WithTooltipPure = function WithTooltipPure(_ref) {
+  var svg = _ref.svg,
+      trigger = _ref.trigger,
+      closeOnClick = _ref.closeOnClick,
+      placement = _ref.placement,
+      modifiers = _ref.modifiers,
+      hasChrome = _ref.hasChrome,
+      _tooltip = _ref.tooltip,
+      children = _ref.children,
+      tooltipShown = _ref.tooltipShown,
+      onVisibilityChange = _ref.onVisibilityChange,
+      props = _objectWithoutProperties(_ref, ["svg", "trigger", "closeOnClick", "placement", "modifiers", "hasChrome", "tooltip", "children", "tooltipShown", "onVisibilityChange"]);
+
+  var Container = svg ? TargetSvgContainer : TargetContainer;
+  return /*#__PURE__*/_react.default.createElement(_reactPopperTooltip.default, {
+    placement: placement,
+    trigger: trigger,
+    modifiers: modifiers,
+    tooltipShown: tooltipShown,
+    onVisibilityChange: onVisibilityChange,
+    tooltip: function tooltip(_ref2) {
+      var getTooltipProps = _ref2.getTooltipProps,
+          getArrowProps = _ref2.getArrowProps,
+          tooltipRef = _ref2.tooltipRef,
+          arrowRef = _ref2.arrowRef,
+          tooltipPlacement = _ref2.placement;
+      return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, _extends({
+        hasChrome: hasChrome,
+        placement: tooltipPlacement,
+        tooltipRef: tooltipRef,
+        arrowRef: arrowRef,
+        arrowProps: getArrowProps()
+      }, getTooltipProps()), typeof _tooltip === 'function' ? _tooltip({
+        onHide: function onHide() {
+          return onVisibilityChange(false);
+        }
+      }) : _tooltip);
+    }
+  }, function (_ref3) {
+    var getTriggerProps = _ref3.getTriggerProps,
+        triggerRef = _ref3.triggerRef;
+    return (
+      /*#__PURE__*/
+      // @ts-ignore
+      _react.default.createElement(Container, _extends({
+        ref: triggerRef
+      }, getTriggerProps(), props), children)
+    );
+  });
+};
+
+exports.WithTooltipPure = WithTooltipPure;
+WithTooltipPure.displayName = "WithTooltipPure";
+WithTooltipPure.defaultProps = {
+  svg: false,
+  trigger: 'hover',
+  closeOnClick: false,
+  placement: 'top',
+  modifiers: [{
+    name: 'preventOverflow',
+    options: {
+      padding: 8
+    }
+  }, {
+    name: 'offset',
+    options: {
+      offset: [8, 8]
+    }
+  }, {
+    name: 'arrow',
+    options: {
+      padding: 8
+    }
+  }],
+  hasChrome: true,
+  tooltipShown: false
+};
+
+var WithToolTipState = function WithToolTipState(_ref4) {
+  var startOpen = _ref4.startOpen,
+      onChange = _ref4.onVisibilityChange,
+      rest = _objectWithoutProperties(_ref4, ["startOpen", "onVisibilityChange"]);
+
+  var _useState = (0, _react.useState)(startOpen || false),
+      _useState2 = _slicedToArray(_useState, 2),
+      tooltipShown = _useState2[0],
+      setTooltipShown = _useState2[1];
+
+  var onVisibilityChange = (0, _react.useCallback)(function (visibility) {
+    if (onChange && onChange(visibility) === false) return;
+    setTooltipShown(visibility);
+  }, [onChange]);
+  (0, _react.useEffect)(function () {
+    var hide = function hide() {
+      return onVisibilityChange(false);
+    };
+
+    document.addEventListener('keydown', hide, false); // Find all iframes on the screen and bind to clicks inside them (waiting until the iframe is ready)
+
+    var iframes = Array.from(document.getElementsByTagName('iframe'));
+    var unbinders = [];
+    iframes.forEach(function (iframe) {
+      var bind = function bind() {
+        try {
+          if (iframe.contentWindow.document) {
+            iframe.contentWindow.document.addEventListener('click', hide);
+            unbinders.push(function () {
+              try {
+                iframe.contentWindow.document.removeEventListener('click', hide);
+              } catch (e) {// logger.debug('Removing a click listener from iframe failed: ', e);
+              }
+            });
+          }
+        } catch (e) {// logger.debug('Adding a click listener to iframe failed: ', e);
+        }
+      };
+
+      bind(); // I don't know how to find out if it's already loaded so I potentially will bind twice
+
+      iframe.addEventListener('load', bind);
+      unbinders.push(function () {
+        iframe.removeEventListener('load', bind);
+      });
+    });
+    return function () {
+      document.removeEventListener('keydown', hide);
+      unbinders.forEach(function (unbind) {
+        unbind();
+      });
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement(WithTooltipPure, _extends({}, rest, {
+    tooltipShown: tooltipShown,
+    onVisibilityChange: onVisibilityChange
+  }));
+};
+
+exports.WithTooltip = exports.WithToolTipState = WithToolTipState;
+WithToolTipState.displayName = "WithToolTipState";

package/dist/cjs/tooltip/WithTooltip.stories.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _theming = require("@storybook/theming");
+
+var _TooltipMessage = require("./TooltipMessage");
+
+var _WithTooltip = require("./WithTooltip");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ViewPort = _theming.styled.div({
+  height: 300
+});
+
+var BackgroundBox = _theming.styled.div({
+  width: 500,
+  height: 500,
+  overflowY: 'scroll',
+  background: '#eee',
+  position: 'relative'
+});
+
+var Spacer = _theming.styled.div({
+  height: 100
+});
+
+var Trigger = _theming.styled.div({
+  width: 200,
+  height: 100,
+  backgroundColor: 'red',
+  color: 'white'
+});
+
+var Tooltip = function Tooltip(_ref) {
+  var onHide = _ref.onHide;
+  return /*#__PURE__*/_react.default.createElement(_TooltipMessage.TooltipMessage, {
+    title: "Lorem ipsum dolor sit",
+    desc: "Amet consectatur vestibulum concet durum politu coret weirom",
+    links: [{
+      title: 'Continue',
+      onClick: onHide
+    }]
+  });
+};
+
+Tooltip.displayName = "Tooltip";
+Tooltip.defaultProps = {
+  onHide: null
+};
+(0, _react2.storiesOf)('basics/Tooltip/WithTooltip', module).addDecorator(function (storyFn) {
+  return /*#__PURE__*/_react.default.createElement(ViewPort, null, /*#__PURE__*/_react.default.createElement(BackgroundBox, null, /*#__PURE__*/_react.default.createElement(Spacer, null), storyFn()));
+}).add('simple hover', function () {
+  return /*#__PURE__*/_react.default.createElement(_WithTooltip.WithToolTipState, {
+    placement: "top",
+    trigger: "hover",
+    tooltip: /*#__PURE__*/_react.default.createElement(Tooltip, null)
+  }, /*#__PURE__*/_react.default.createElement(Trigger, null, "Hover me!"));
+}).add('simple hover, functional', function () {
+  return /*#__PURE__*/_react.default.createElement(_WithTooltip.WithToolTipState, {
+    placement: "top",
+    trigger: "hover",
+    tooltip: Tooltip
+  }, /*#__PURE__*/_react.default.createElement(Trigger, null, "Hover me!"));
+}).add('simple click', function () {
+  return /*#__PURE__*/_react.default.createElement(_WithTooltip.WithToolTipState, {
+    placement: "top",
+    trigger: "click",
+    tooltip: /*#__PURE__*/_react.default.createElement(Tooltip, null)
+  }, /*#__PURE__*/_react.default.createElement(Trigger, null, "Click me!"));
+}).add('simple click start open', function () {
+  return /*#__PURE__*/_react.default.createElement(_WithTooltip.WithToolTipState, {
+    placement: "top",
+    trigger: "click",
+    startOpen: true,
+    tooltip: /*#__PURE__*/_react.default.createElement(Tooltip, null)
+  }, /*#__PURE__*/_react.default.createElement(Trigger, null, "Click me!"));
+}).add('simple click closeOnClick', function () {
+  return /*#__PURE__*/_react.default.createElement(_WithTooltip.WithToolTipState, {
+    placement: "top",
+    trigger: "click",
+    closeOnClick: true,
+    tooltip: /*#__PURE__*/_react.default.createElement(Tooltip, null)
+  }, /*#__PURE__*/_react.default.createElement(Trigger, null, "Click me!"));
+}).add('no chrome', function () {
+  return /*#__PURE__*/_react.default.createElement(_WithTooltip.WithToolTipState, {
+    placement: "top",
+    trigger: "click",
+    hasChrome: false,
+    tooltip: /*#__PURE__*/_react.default.createElement(Tooltip, null)
+  }, /*#__PURE__*/_react.default.createElement(Trigger, null, "Click me!"));
+});