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

package/dist/modern/tabs/tabs.stories.js

@@ -1,196 +0,0 @@
-import React, { Fragment } from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { logger } from '@storybook/client-logger';
-import { Tabs, TabsState, TabWrapper } from './tabs';
-const colours = Array.from(new Array(15), (val, index) => index).map(i => Math.floor(1 / 15 * i * 16777215).toString(16).padStart(6, '0'));
-
-function fibonacci(num, memo) {
-  /* eslint-disable no-param-reassign */
-  if (!memo) {
-    memo = {};
-  }
-
-  if (memo[num]) {
-    return memo[num];
-  }
-
-  if (num <= 1) {
-    return 1;
-  }
-
-  memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo);
-  return memo[num];
-  /* eslint-enable no-param-reassign */
-}
-
-const panels = {
-  test1: {
-    title: 'Tab title #1',
-    render: ({
-      active,
-      key
-    }) => active ? /*#__PURE__*/React.createElement("div", {
-      id: "test1",
-      key: key
-    }, "CONTENT 1") : null
-  },
-  test2: {
-    title: 'Tab title #2',
-    render: ({
-      active,
-      key
-    }) => /*#__PURE__*/React.createElement("div", {
-      key: key,
-      id: "test2",
-      style: {
-        background: 'hotpink',
-        minHeight: '100%',
-        display: active ? 'block' : 'none'
-      }
-    }, "CONTENT 2")
-  },
-  test3: {
-    title: 'Tab with scroll!',
-    render: ({
-      active,
-      key
-    }) => active ? /*#__PURE__*/React.createElement("div", {
-      id: "test3",
-      key: key
-    }, colours.map((colour, i) => /*#__PURE__*/React.createElement("div", {
-      key: colour,
-      style: {
-        background: `#${colour}`,
-        height: 30 + fibonacci(i + 5) / 10
-      }
-    }))) : null
-  },
-  test4: {
-    title: 'Tab title #4',
-    render: ({
-      active,
-      key
-    }) => active ? /*#__PURE__*/React.createElement("div", {
-      key: key,
-      id: "test4"
-    }, "CONTENT 4") : null
-  },
-  test5: {
-    title: 'Tab title #5',
-    render: ({
-      active,
-      key
-    }) => active ? /*#__PURE__*/React.createElement("div", {
-      key: key,
-      id: "test5"
-    }, "CONTENT 5") : null
-  },
-  test6: {
-    title: 'Tab title #6',
-    render: ({
-      active,
-      key
-    }) => /*#__PURE__*/React.createElement(TabWrapper, {
-      key: key,
-      active: active,
-      render: () => /*#__PURE__*/React.createElement("div", null, "CONTENT 6")
-    })
-  }
-};
-const onSelect = action('onSelect');
-const content = Object.entries(panels).map(([k, v]) => /*#__PURE__*/React.createElement("div", {
-  key: k,
-  id: k,
-  title: v.title
-}, v.render));
-storiesOf('Basics/Tabs', module).addDecorator(s => /*#__PURE__*/React.createElement("div", {
-  style: {
-    position: 'relative',
-    height: 'calc(100vh - 20px)',
-    width: 'calc(100vw - 20px)',
-    margin: 10
-  }
-}, s())).add('stateful - static', () => /*#__PURE__*/React.createElement(TabsState, {
-  initial: "test2"
-}, /*#__PURE__*/React.createElement("div", {
-  id: "test1",
-  title: "With a function"
-}, ({
-  active,
-  selected
-}) => active ? /*#__PURE__*/React.createElement("div", null, selected, " is selected") : null), /*#__PURE__*/React.createElement("div", {
-  id: "test2",
-  title: "With markup"
-}, /*#__PURE__*/React.createElement("div", null, "test2 is always active (but visually hidden)")))).add('stateful - static with set button text colors', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TabsState, {
-  initial: "test2"
-}, /*#__PURE__*/React.createElement("div", {
-  id: "test1",
-  title: "With a function",
-  color: "#e00000"
-}, ({
-  active,
-  selected
-}) => active ? /*#__PURE__*/React.createElement("div", null, selected, " is selected") : null), /*#__PURE__*/React.createElement("div", {
-  id: "test2",
-  title: "With markup",
-  color: "green"
-}, /*#__PURE__*/React.createElement("div", null, "test2 is always active (but visually hidden)"))))).add('stateful - static with set backgroundColor', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TabsState, {
-  initial: "test2",
-  backgroundColor: "rgba(0,0,0,.05)"
-}, /*#__PURE__*/React.createElement("div", {
-  id: "test1",
-  title: "With a function",
-  color: "#e00000"
-}, ({
-  active,
-  selected
-}) => active ? /*#__PURE__*/React.createElement("div", null, selected, " is selected") : null), /*#__PURE__*/React.createElement("div", {
-  id: "test2",
-  title: "With markup",
-  color: "green"
-}, /*#__PURE__*/React.createElement("div", null, "test2 is always active (but visually hidden)"))))).add('stateful - dynamic', () => /*#__PURE__*/React.createElement(TabsState, {
-  initial: "test3"
-}, Object.entries(panels).map(([k, v]) => /*#__PURE__*/React.createElement("div", {
-  key: k,
-  id: k,
-  title: v.title
-}, v.render)))).add('stateful - no initial', () => /*#__PURE__*/React.createElement(TabsState, null, content)).add('stateless - bordered', () => /*#__PURE__*/React.createElement(Tabs, {
-  bordered: true,
-  absolute: false,
-  selected: "test3",
-  actions: {
-    onSelect
-  }
-}, content)).add('stateless - with tools', () => /*#__PURE__*/React.createElement(Tabs, {
-  selected: "test3",
-  actions: {
-    onSelect
-  },
-  tools: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => logger.log('1')
-  }, "1"), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => logger.log('2')
-  }, "2"))
-}, content)).add('stateless - absolute', () => /*#__PURE__*/React.createElement(Tabs, {
-  absolute: true,
-  selected: "test3",
-  actions: {
-    onSelect
-  }
-}, content)).add('stateless - absolute bordered', () => /*#__PURE__*/React.createElement(Tabs, {
-  absolute: true,
-  bordered: true,
-  selected: "test3",
-  actions: {
-    onSelect
-  }
-}, content)).add('stateless - empty', () => /*#__PURE__*/React.createElement(Tabs, {
-  actions: {
-    onSelect
-  },
-  bordered: true,
-  absolute: true
-}));

package/dist/modern/tooltip/ListItem.js

@@ -1,183 +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 memoize from 'memoizerific';
-import { transparentize } from 'polished';
-const Title = styled((_ref) => {
-  let rest = _objectWithoutPropertiesLoose(_ref, ["active", "loading", "disabled"]);
-
-  return /*#__PURE__*/React.createElement("span", rest);
-})(({
-  theme
-}) => ({
-  color: theme.color.defaultText,
-  // Previously was theme.typography.weight.normal but this weight does not exists in Theme
-  fontWeight: theme.typography.weight.regular
-}), ({
-  active,
-  theme
-}) => active ? {
-  color: theme.color.primary,
-  fontWeight: theme.typography.weight.bold
-} : {}, ({
-  loading,
-  theme
-}) => loading ? Object.assign({
-  display: 'inline-block',
-  flex: 'none'
-}, theme.animation.inlineGlow) : {}, ({
-  disabled,
-  theme
-}) => disabled ? {
-  color: transparentize(0.7, theme.color.defaultText)
-} : {});
-const Right = styled.span({
-  '& svg': {
-    transition: 'all 200ms ease-out',
-    opacity: 0,
-    height: 12,
-    width: 12,
-    margin: '3px 0',
-    verticalAlign: 'top'
-  },
-  '& path': {
-    fill: 'inherit'
-  }
-}, ({
-  active,
-  theme
-}) => active ? {
-  '& svg': {
-    opacity: 1
-  },
-  '& path': {
-    fill: theme.color.primary
-  }
-} : {});
-const Center = styled.span({
-  flex: 1,
-  textAlign: 'left',
-  display: 'inline-flex',
-  '& > * + *': {
-    paddingLeft: 10
-  }
-});
-const CenterText = styled.span({
-  flex: 1,
-  textAlign: 'center'
-}, ({
-  active,
-  theme
-}) => active ? {
-  color: theme.color.primary
-} : {}, ({
-  theme,
-  disabled
-}) => disabled ? {
-  color: theme.color.mediumdark
-} : {});
-const Left = styled.span(({
-  active,
-  theme
-}) => active ? {
-  '& svg': {
-    opacity: 1
-  },
-  '& path': {
-    fill: theme.color.primary
-  }
-} : {});
-const Item = styled.a(({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s1,
-  transition: 'all 150ms ease-out',
-  color: transparentize(0.5, theme.color.defaultText),
-  textDecoration: 'none',
-  cursor: 'pointer',
-  justifyContent: 'space-between',
-  lineHeight: '18px',
-  padding: '7px 15px',
-  display: 'flex',
-  alignItems: 'center',
-  '& > * + *': {
-    paddingLeft: 10
-  },
-  '&:hover': {
-    background: theme.background.hoverable
-  },
-  '&:hover svg': {
-    opacity: 1
-  }
-}), ({
-  disabled
-}) => disabled ? {
-  cursor: 'not-allowed'
-} : {});
-const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
-  const result = {};
-
-  if (onClick) {
-    Object.assign(result, {
-      onClick
-    });
-  }
-
-  if (href) {
-    Object.assign(result, {
-      href
-    });
-  }
-
-  if (LinkWrapper && href) {
-    Object.assign(result, {
-      to: href,
-      as: LinkWrapper
-    });
-  }
-
-  return result;
-});
-
-const ListItem = (_ref2) => {
-  let {
-    loading,
-    left,
-    title,
-    center,
-    right,
-    active,
-    disabled,
-    href,
-    onClick,
-    LinkWrapper
-  } = _ref2,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["loading", "left", "title", "center", "right", "active", "disabled", "href", "onClick", "LinkWrapper"]);
-
-  const itemProps = getItemProps(onClick, href, LinkWrapper);
-  const commonProps = {
-    active,
-    disabled
-  };
-  return /*#__PURE__*/React.createElement(Item, _extends({}, commonProps, rest, itemProps), left && /*#__PURE__*/React.createElement(Left, commonProps, left), title || center ? /*#__PURE__*/React.createElement(Center, null, title && /*#__PURE__*/React.createElement(Title, _extends({}, commonProps, {
-    loading: loading
-  }), title), center && /*#__PURE__*/React.createElement(CenterText, commonProps, center)) : null, right && /*#__PURE__*/React.createElement(Right, commonProps, right));
-};
-
-ListItem.displayName = "ListItem";
-ListItem.defaultProps = {
-  loading: false,
-  left: null,
-  title: /*#__PURE__*/React.createElement("span", null, "Loading state"),
-  center: null,
-  right: null,
-  active: false,
-  disabled: false,
-  href: null,
-  LinkWrapper: null,
-  onClick: null
-};
-export default ListItem;

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import ListItem from './ListItem';
-import { Icons } from '../icon/icon';
-storiesOf('basics/Tooltip/ListItem', module).add('all', () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ListItem, {
-  loading: true
-}), /*#__PURE__*/React.createElement(ListItem, {
-  title: "Default"
-}), /*#__PURE__*/React.createElement(ListItem, {
-  title: "Default icon",
-  right: /*#__PURE__*/React.createElement(Icons, {
-    icon: "eye"
-  })
-}), /*#__PURE__*/React.createElement(ListItem, {
-  left: "left",
-  title: "title",
-  center: "center",
-  right: "right"
-}), /*#__PURE__*/React.createElement(ListItem, {
-  active: true,
-  left: "left",
-  title: "active",
-  center: "center",
-  right: "right"
-}), /*#__PURE__*/React.createElement(ListItem, {
-  active: true,
-  left: "left",
-  title: "active icon",
-  center: "center",
-  right: /*#__PURE__*/React.createElement(Icons, {
-    icon: "eye"
-  })
-}), /*#__PURE__*/React.createElement(ListItem, {
-  disabled: true,
-  left: "left",
-  title: "disabled",
-  center: "center",
-  right: "right"
-}))).add('loading', () => /*#__PURE__*/React.createElement(ListItem, {
-  loading: true
-})).add('default', () => /*#__PURE__*/React.createElement(ListItem, {
-  title: "Default"
-})).add('default icon', () => /*#__PURE__*/React.createElement(ListItem, {
-  title: "Default icon",
-  right: /*#__PURE__*/React.createElement(Icons, {
-    icon: "eye"
-  })
-})).add('active icon', () => /*#__PURE__*/React.createElement(ListItem, {
-  active: true,
-  title: "active icon",
-  right: /*#__PURE__*/React.createElement(Icons, {
-    icon: "eye"
-  })
-})).add('w/positions', () => /*#__PURE__*/React.createElement(ListItem, {
-  left: "left",
-  title: "title",
-  center: "center",
-  right: "right"
-})).add('w/positions active', () => /*#__PURE__*/React.createElement(ListItem, {
-  active: true,
-  left: "left",
-  title: "active",
-  center: "center",
-  right: "right"
-})).add('disabled', () => /*#__PURE__*/React.createElement(ListItem, {
-  disabled: true,
-  left: "left",
-  title: "disabled",
-  center: "center",
-  right: "right"
-}));

package/dist/modern/tooltip/Tooltip.js

@@ -1,110 +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 memoize from 'memoizerific';
-import { styled, lighten, darken } from '@storybook/theming';
-const match = memoize(1000)((requests, actual, value, fallback = 0) => actual.split('-')[0] === requests ? value : fallback);
-const ArrowSpacing = 8;
-const Arrow = styled.div({
-  position: 'absolute',
-  borderStyle: 'solid'
-}, ({
-  placement
-}) => {
-  let x = 0;
-  let y = 0;
-
-  switch (true) {
-    case placement.startsWith('left') || placement.startsWith('right'):
-      {
-        y = 8;
-        break;
-      }
-
-    case placement.startsWith('top') || placement.startsWith('bottom'):
-      {
-        x = 8;
-        break;
-      }
-
-    default:
-      {//
-      }
-  }
-
-  const transform = `translate3d(${x}px, ${y}px, 0px)`;
-  return {
-    transform
-  };
-}, ({
-  theme,
-  color,
-  placement
-}) => ({
-  bottom: `${match('top', placement, ArrowSpacing * -1, 'auto')}px`,
-  top: `${match('bottom', placement, ArrowSpacing * -1, 'auto')}px`,
-  right: `${match('left', placement, ArrowSpacing * -1, 'auto')}px`,
-  left: `${match('right', placement, ArrowSpacing * -1, 'auto')}px`,
-  borderBottomWidth: `${match('top', placement, '0', ArrowSpacing)}px`,
-  borderTopWidth: `${match('bottom', placement, '0', ArrowSpacing)}px`,
-  borderRightWidth: `${match('left', placement, '0', ArrowSpacing)}px`,
-  borderLeftWidth: `${match('right', placement, '0', ArrowSpacing)}px`,
-  borderTopColor: match('top', placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app), 'transparent'),
-  borderBottomColor: match('bottom', placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app), 'transparent'),
-  borderLeftColor: match('left', placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app), 'transparent'),
-  borderRightColor: match('right', placement, theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app), 'transparent')
-}));
-const Wrapper = styled.div(({
-  hidden
-}) => ({
-  display: hidden ? 'none' : 'inline-block',
-  zIndex: 2147483647
-}), ({
-  theme,
-  color,
-  hasChrome
-}) => hasChrome ? {
-  background: theme.color[color] || color || theme.base === 'light' ? lighten(theme.background.app) : darken(theme.background.app),
-  filter: `
-            drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
-            drop-shadow(0 1px 3px rgba(0,0,0,0.1))
-          `,
-  borderRadius: theme.appBorderRadius * 2,
-  fontSize: theme.typography.size.s1
-} : {});
-export const Tooltip = (_ref) => {
-  let {
-    placement,
-    hasChrome,
-    children,
-    arrowProps,
-    tooltipRef,
-    arrowRef,
-    color
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["placement", "hasChrome", "children", "arrowProps", "tooltipRef", "arrowRef", "color"]);
-
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
-    hasChrome: hasChrome,
-    placement: placement,
-    ref: tooltipRef
-  }, props, {
-    color: color
-  }), hasChrome && /*#__PURE__*/React.createElement(Arrow, _extends({
-    placement: placement,
-    ref: arrowRef
-  }, arrowProps, {
-    color: color
-  })), children);
-};
-Tooltip.displayName = "Tooltip";
-Tooltip.defaultProps = {
-  color: undefined,
-  arrowRef: undefined,
-  tooltipRef: undefined,
-  hasChrome: true,
-  placement: 'top',
-  arrowProps: {}
-};

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

@@ -1,30 +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); }
-
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { styled } from '@storybook/theming';
-import { Tooltip } from './Tooltip'; // Popper would position the tooltip absolutely. We just need to make sure we are pos:rel
-
-const mockPopperProps = {
-  style: {
-    position: 'relative',
-    top: 20,
-    left: 20
-  }
-};
-const Content = styled.div({
-  width: '100px',
-  height: '100px',
-  fontSize: '16px',
-  textAlign: 'center',
-  lineHeight: '100px'
-});
-storiesOf('basics/Tooltip/Tooltip', module).add('basic, default', () => /*#__PURE__*/React.createElement(Tooltip, mockPopperProps, /*#__PURE__*/React.createElement(Content, null, "Text"))).add('basic, default, bottom', () => /*#__PURE__*/React.createElement(Tooltip, _extends({
-  placement: "bottom"
-}, mockPopperProps), /*#__PURE__*/React.createElement(Content, null, "Text"))).add('basic, default, left', () => /*#__PURE__*/React.createElement(Tooltip, _extends({
-  placement: "left"
-}, mockPopperProps), /*#__PURE__*/React.createElement(Content, null, "Text"))).add('basic, default, right', () => /*#__PURE__*/React.createElement(Tooltip, _extends({
-  placement: "right"
-}, mockPopperProps), /*#__PURE__*/React.createElement(Content, null, "Text"))).add('no chrome', () => /*#__PURE__*/React.createElement(Tooltip, _extends({
-  hasChrome: false
-}, mockPopperProps), /*#__PURE__*/React.createElement(Content, null, "Text")));

package/dist/modern/tooltip/TooltipLinkList.js

@@ -1,64 +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 } from 'react';
-import { styled } from '@storybook/theming';
-import ListItem from './ListItem';
-const List = styled.div({
-  minWidth: 180,
-  overflow: 'hidden',
-  overflowY: 'auto',
-  maxHeight: 13.5 * 32 // 11.5 items
-
-}, ({
-  theme
-}) => ({
-  borderRadius: theme.appBorderRadius * 2
-}));
-
-const Item = props => {
-  const {
-    LinkWrapper,
-    onClick: onClickFromProps
-  } = props,
-        rest = _objectWithoutPropertiesLoose(props, ["LinkWrapper", "onClick"]);
-
-  const {
-    title,
-    href,
-    active
-  } = rest;
-  const onClick = useCallback(event => {
-    onClickFromProps(event, rest);
-  }, [onClickFromProps]);
-  const hasOnClick = !!onClickFromProps;
-  return /*#__PURE__*/React.createElement(ListItem, _extends({
-    title: title,
-    active: active,
-    href: href,
-    LinkWrapper: LinkWrapper
-  }, rest, hasOnClick ? {
-    onClick
-  } : {}));
-};
-
-Item.displayName = "Item";
-export const TooltipLinkList = ({
-  links,
-  LinkWrapper
-}) => /*#__PURE__*/React.createElement(List, null, links.map((_ref) => {
-  let {
-    isGatsby
-  } = _ref,
-      p = _objectWithoutPropertiesLoose(_ref, ["isGatsby"]);
-
-  return /*#__PURE__*/React.createElement(Item, _extends({
-    key: p.id,
-    LinkWrapper: isGatsby ? LinkWrapper : null
-  }, p));
-}));
-TooltipLinkList.displayName = "TooltipLinkList";
-TooltipLinkList.defaultProps = {
-  LinkWrapper: ListItem.defaultProps.LinkWrapper
-};