@storybook/components 6.5.0-alpha.9 → 6.5.0-beta.2

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

@@ -1,54 +0,0 @@
-import React, { Children, cloneElement } from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { WithTooltip } from './WithTooltip';
-import { TooltipLinkList } from './TooltipLinkList';
-const onLinkClick = action('onLinkClick');
-
-const StoryLinkWrapper = ({
-  href,
-  passHref,
-  children
-}) => {
-  const child = Children.only(children);
-  return /*#__PURE__*/cloneElement(child, {
-    href: passHref && href,
-    onClick: e => {
-      e.preventDefault();
-      onLinkClick(href);
-    }
-  });
-};
-
-StoryLinkWrapper.defaultProps = {
-  passHref: false
-};
-export const links = [{
-  id: '1',
-  title: 'Link',
-  href: 'http://google.com'
-}, {
-  id: '2',
-  title: 'Link',
-  href: 'http://google.com'
-}, {
-  id: '3',
-  title: 'callback',
-  onClick: action('onClick')
-}];
-storiesOf('basics/Tooltip/TooltipLinkList', module).addDecorator(storyFn => /*#__PURE__*/React.createElement("div", {
-  style: {
-    height: '300px'
-  }
-}, /*#__PURE__*/React.createElement(WithTooltip, {
-  placement: "top",
-  trigger: "click",
-  startOpen: true,
-  tooltip: storyFn()
-}, /*#__PURE__*/React.createElement("div", null, "Tooltip")))).add('links', () => /*#__PURE__*/React.createElement(TooltipLinkList, {
-  links: links.slice(0, 2),
-  LinkWrapper: StoryLinkWrapper
-})).add('links and callback', () => /*#__PURE__*/React.createElement(TooltipLinkList, {
-  links: links,
-  LinkWrapper: StoryLinkWrapper
-}));

package/dist/modern/tooltip/TooltipMessage.js

@@ -1,56 +0,0 @@
-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 _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; }
-
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { Link } from '../typography/link/link';
-const Title = styled.div(({
-  theme
-}) => ({
-  fontWeight: theme.typography.weight.black
-}));
-const Desc = styled.span();
-const Links = styled.div(({
-  theme
-}) => ({
-  marginTop: 8,
-  textAlign: 'center',
-  '> *': {
-    margin: '0 8px',
-    fontWeight: theme.typography.weight.black
-  }
-}));
-const Message = styled.div(({
-  theme
-}) => ({
-  color: theme.textColor,
-  lineHeight: '18px'
-}));
-const MessageWrapper = styled.div({
-  padding: 15,
-  width: 280,
-  boxSizing: 'border-box'
-});
-export const TooltipMessage = ({
-  title,
-  desc,
-  links
-}) => {
-  return /*#__PURE__*/React.createElement(MessageWrapper, null, /*#__PURE__*/React.createElement(Message, null, title && /*#__PURE__*/React.createElement(Title, null, title), desc && /*#__PURE__*/React.createElement(Desc, null, desc)), links && /*#__PURE__*/React.createElement(Links, null, links.map((_ref) => {
-    let {
-      title: linkTitle
-    } = _ref,
-        other = _objectWithoutPropertiesLoose(_ref, ["title"]);
-
-    return /*#__PURE__*/React.createElement(Link, _extends({}, other, {
-      key: linkTitle
-    }), linkTitle);
-  })));
-};
-TooltipMessage.displayName = "TooltipMessage";
-TooltipMessage.defaultProps = {
-  title: null,
-  desc: null,
-  links: null
-};

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { WithTooltip } from './WithTooltip';
-import { TooltipMessage } from './TooltipMessage';
-storiesOf('basics/Tooltip/TooltipMessage', module).addDecorator(storyFn => /*#__PURE__*/React.createElement("div", {
-  style: {
-    height: '300px'
-  }
-}, /*#__PURE__*/React.createElement(WithTooltip, {
-  placement: "top",
-  trigger: "click",
-  startOpen: true,
-  tooltip: storyFn()
-}, /*#__PURE__*/React.createElement("div", null, "Tooltip")))).add('default', () => /*#__PURE__*/React.createElement(TooltipMessage, {
-  title: "Lorem ipsum dolor sit",
-  desc: "Amet consectatur vestibulum concet durum politu coret weirom"
-})).add('with link', () => /*#__PURE__*/React.createElement(TooltipMessage, {
-  title: "Lorem ipsum dolor sit",
-  desc: "Amet consectatur vestibulum concet durum politu coret weirom",
-  links: [{
-    title: 'Continue',
-    href: 'test'
-  }]
-})).add('with links', () => /*#__PURE__*/React.createElement(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', () => /*#__PURE__*/React.createElement(TooltipMessage, {
-  desc: "Amet consectatur vestibulum concet durum politu coret weirom"
-}));

package/dist/modern/tooltip/TooltipNote.js

@@ -1,29 +0,0 @@
-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; }
-
-import React from 'react';
-import { styled } from '@storybook/theming';
-const Note = styled.div(({
-  theme
-}) => ({
-  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
-}));
-export const TooltipNote = (_ref) => {
-  let {
-    note
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["note"]);
-
-  return /*#__PURE__*/React.createElement(Note, props, note);
-};
-TooltipNote.displayName = "TooltipNote";

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { WithTooltip } from './WithTooltip';
-import { TooltipNote } from './TooltipNote';
-storiesOf('basics/Tooltip/TooltipNote', module).addDecorator(storyFn => /*#__PURE__*/React.createElement("div", {
-  style: {
-    height: '300px'
-  }
-}, /*#__PURE__*/React.createElement(WithTooltip, {
-  hasChrome: false,
-  placement: "top",
-  trigger: "click",
-  startOpen: true,
-  tooltip: storyFn()
-}, /*#__PURE__*/React.createElement("div", null, "Tooltip")))).add('default', () => /*#__PURE__*/React.createElement(TooltipNote, {
-  note: "Lorem ipsum dolor"
-}));

package/dist/modern/tooltip/WithTooltip.js

@@ -1,152 +0,0 @@
-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 _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; }
-
-import React, { useCallback, useState, useEffect } from 'react';
-import { styled } from '@storybook/theming';
-import global from 'global';
-import TooltipTrigger from 'react-popper-tooltip';
-import { Tooltip } from './Tooltip';
-const {
-  document
-} = global; // A target that doesn't speak popper
-
-const TargetContainer = styled.div`
-  display: inline-block;
-  cursor: ${props => props.mode === 'hover' ? 'default' : 'pointer'};
-`;
-const TargetSvgContainer = styled.g`
-  cursor: ${props => props.mode === 'hover' ? 'default' : 'pointer'};
-`;
-
-// Pure, does not bind to the body
-const WithTooltipPure = (_ref) => {
-  let {
-    svg,
-    trigger,
-    placement,
-    modifiers,
-    hasChrome,
-    tooltip,
-    children,
-    tooltipShown,
-    onVisibilityChange
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["svg", "trigger", "closeOnClick", "placement", "modifiers", "hasChrome", "tooltip", "children", "tooltipShown", "onVisibilityChange"]);
-
-  const Container = svg ? TargetSvgContainer : TargetContainer;
-  return /*#__PURE__*/React.createElement(TooltipTrigger, {
-    placement: placement,
-    trigger: trigger,
-    modifiers: modifiers,
-    tooltipShown: tooltipShown,
-    onVisibilityChange: onVisibilityChange,
-    tooltip: ({
-      getTooltipProps,
-      getArrowProps,
-      tooltipRef,
-      arrowRef,
-      placement: tooltipPlacement
-    }) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-      hasChrome: hasChrome,
-      placement: tooltipPlacement,
-      tooltipRef: tooltipRef,
-      arrowRef: arrowRef,
-      arrowProps: getArrowProps()
-    }, getTooltipProps()), typeof tooltip === 'function' ? tooltip({
-      onHide: () => onVisibilityChange(false)
-    }) : tooltip)
-  }, ({
-    getTriggerProps,
-    triggerRef
-  }) =>
-  /*#__PURE__*/
-  // @ts-ignore
-  React.createElement(Container, _extends({
-    ref: triggerRef
-  }, getTriggerProps(), props), children));
-};
-
-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
-};
-
-const WithToolTipState = (_ref2) => {
-  let {
-    startOpen,
-    onVisibilityChange: onChange
-  } = _ref2,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["startOpen", "onVisibilityChange"]);
-
-  const [tooltipShown, setTooltipShown] = useState(startOpen || false);
-  const onVisibilityChange = useCallback(visibility => {
-    if (onChange && onChange(visibility) === false) return;
-    setTooltipShown(visibility);
-  }, [onChange]);
-  useEffect(() => {
-    const hide = () => 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)
-
-    const iframes = Array.from(document.getElementsByTagName('iframe'));
-    const unbinders = [];
-    iframes.forEach(iframe => {
-      const bind = () => {
-        try {
-          if (iframe.contentWindow.document) {
-            iframe.contentWindow.document.addEventListener('click', hide);
-            unbinders.push(() => {
-              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(() => {
-        iframe.removeEventListener('load', bind);
-      });
-    });
-    return () => {
-      document.removeEventListener('keydown', hide);
-      unbinders.forEach(unbind => {
-        unbind();
-      });
-    };
-  });
-  return /*#__PURE__*/React.createElement(WithTooltipPure, _extends({}, rest, {
-    tooltipShown: tooltipShown,
-    onVisibilityChange: onVisibilityChange
-  }));
-};
-
-WithToolTipState.displayName = "WithToolTipState";
-export { WithTooltipPure, WithToolTipState, WithToolTipState as WithTooltip };

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

@@ -1,68 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { styled } from '@storybook/theming';
-import { TooltipMessage } from './TooltipMessage';
-import { WithToolTipState as WithTooltip } from './WithTooltip';
-const ViewPort = styled.div({
-  height: 300
-});
-const BackgroundBox = styled.div({
-  width: 500,
-  height: 500,
-  overflowY: 'scroll',
-  background: '#eee',
-  position: 'relative'
-});
-const Spacer = styled.div({
-  height: 100
-});
-const Trigger = styled.div({
-  width: 200,
-  height: 100,
-  backgroundColor: 'red',
-  color: 'white'
-});
-
-const Tooltip = ({
-  onHide
-}) => /*#__PURE__*/React.createElement(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
-};
-storiesOf('basics/Tooltip/WithTooltip', module).addDecorator(storyFn => /*#__PURE__*/React.createElement(ViewPort, null, /*#__PURE__*/React.createElement(BackgroundBox, null, /*#__PURE__*/React.createElement(Spacer, null), storyFn()))).add('simple hover', () => /*#__PURE__*/React.createElement(WithTooltip, {
-  placement: "top",
-  trigger: "hover",
-  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
-}, /*#__PURE__*/React.createElement(Trigger, null, "Hover me!"))).add('simple hover, functional', () => /*#__PURE__*/React.createElement(WithTooltip, {
-  placement: "top",
-  trigger: "hover",
-  tooltip: Tooltip
-}, /*#__PURE__*/React.createElement(Trigger, null, "Hover me!"))).add('simple click', () => /*#__PURE__*/React.createElement(WithTooltip, {
-  placement: "top",
-  trigger: "click",
-  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
-}, /*#__PURE__*/React.createElement(Trigger, null, "Click me!"))).add('simple click start open', () => /*#__PURE__*/React.createElement(WithTooltip, {
-  placement: "top",
-  trigger: "click",
-  startOpen: true,
-  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
-}, /*#__PURE__*/React.createElement(Trigger, null, "Click me!"))).add('simple click closeOnClick', () => /*#__PURE__*/React.createElement(WithTooltip, {
-  placement: "top",
-  trigger: "click",
-  closeOnClick: true,
-  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
-}, /*#__PURE__*/React.createElement(Trigger, null, "Click me!"))).add('no chrome', () => /*#__PURE__*/React.createElement(WithTooltip, {
-  placement: "top",
-  trigger: "click",
-  hasChrome: false,
-  tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
-}, /*#__PURE__*/React.createElement(Trigger, null, "Click me!")));

package/dist/modern/tooltip/lazy-WithTooltip.js

@@ -1,15 +0,0 @@
-import React, { Suspense } from 'react';
-const LazyWithTooltip = /*#__PURE__*/React.lazy(() => import('./WithTooltip').then(mod => ({
-  default: mod.WithTooltip
-})));
-export const WithTooltip = props => /*#__PURE__*/React.createElement(Suspense, {
-  fallback: /*#__PURE__*/React.createElement("div", null)
-}, /*#__PURE__*/React.createElement(LazyWithTooltip, props));
-WithTooltip.displayName = "WithTooltip";
-const LazyWithTooltipPure = /*#__PURE__*/React.lazy(() => import('./WithTooltip').then(mod => ({
-  default: mod.WithTooltipPure
-})));
-export const WithTooltipPure = props => /*#__PURE__*/React.createElement(Suspense, {
-  fallback: /*#__PURE__*/React.createElement("div", null)
-}, /*#__PURE__*/React.createElement(LazyWithTooltipPure, props));
-WithTooltipPure.displayName = "WithTooltipPure";