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

package/dist/modern/tabs/tabs.js

@@ -1,214 +0,0 @@
-import React, { Children, Component, Fragment, memo } from 'react';
-import { styled } from '@storybook/theming';
-import { sanitize } from '@storybook/csf';
-import { Placeholder } from '../placeholder/placeholder';
-import { FlexBar } from '../bar/bar';
-import { TabButton } from '../bar/button';
-const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
-const Wrapper = styled.div(({
-  theme,
-  bordered
-}) => bordered ? {
-  backgroundClip: 'padding-box',
-  border: `1px solid ${theme.appBorderColor}`,
-  borderRadius: theme.appBorderRadius,
-  overflow: 'hidden',
-  boxSizing: 'border-box'
-} : {}, ({
-  absolute
-}) => absolute ? {
-  width: '100%',
-  height: '100%',
-  boxSizing: 'border-box',
-  display: 'flex',
-  flexDirection: 'column'
-} : {
-  display: 'block'
-});
-export const TabBar = styled.div({
-  overflow: 'hidden',
-  '&:first-of-type': {
-    marginLeft: 0
-  }
-});
-const Content = styled.div({
-  display: 'block',
-  position: 'relative'
-}, ({
-  theme
-}) => ({
-  fontSize: theme.typography.size.s2 - 1,
-  background: theme.background.content
-}), ({
-  bordered,
-  theme
-}) => bordered ? {
-  borderRadius: `0 0 ${theme.appBorderRadius - 1}px ${theme.appBorderRadius - 1}px`
-} : {}, ({
-  absolute,
-  bordered
-}) => absolute ? {
-  height: `calc(100% - ${bordered ? 42 : 40}px)`,
-  position: 'absolute',
-  left: 0 + (bordered ? 1 : 0),
-  right: 0 + (bordered ? 1 : 0),
-  bottom: 0 + (bordered ? 1 : 0),
-  top: 40 + (bordered ? 1 : 0),
-  overflow: 'auto',
-  [`& > *:first-child${ignoreSsrWarning}`]: {
-    position: 'absolute',
-    left: 0 + (bordered ? 1 : 0),
-    right: 0 + (bordered ? 1 : 0),
-    bottom: 0 + (bordered ? 1 : 0),
-    top: 0 + (bordered ? 1 : 0),
-    height: `calc(100% - ${bordered ? 2 : 0}px)`,
-    overflow: 'auto'
-  }
-} : {});
-const VisuallyHidden = styled.div(({
-  active
-}) => active ? {
-  display: 'block'
-} : {
-  display: 'none'
-});
-export const TabWrapper = ({
-  active,
-  render,
-  children
-}) => /*#__PURE__*/React.createElement(VisuallyHidden, {
-  active: active
-}, render ? render() : children);
-TabWrapper.displayName = "TabWrapper";
-export const panelProps = {};
-
-const childrenToList = (children, selected) => Children.toArray(children).map(({
-  props: {
-    title,
-    id,
-    color,
-    children: childrenOfChild
-  }
-}, index) => {
-  const content = Array.isArray(childrenOfChild) ? childrenOfChild[0] : childrenOfChild;
-  return {
-    active: selected ? id === selected : index === 0,
-    title,
-    id,
-    color,
-    render: typeof content === 'function' ? content : ({
-      active,
-      key
-    }) => /*#__PURE__*/React.createElement(VisuallyHidden, {
-      key: key,
-      active: active,
-      role: "tabpanel"
-    }, content)
-  };
-});
-
-export const Tabs = /*#__PURE__*/memo(({
-  children,
-  selected,
-  actions,
-  absolute,
-  bordered,
-  tools,
-  backgroundColor,
-  id: htmlId
-}) => {
-  const list = childrenToList(children, selected);
-  return list.length ? /*#__PURE__*/React.createElement(Wrapper, {
-    absolute: absolute,
-    bordered: bordered,
-    id: htmlId
-  }, /*#__PURE__*/React.createElement(FlexBar, {
-    border: true,
-    backgroundColor: backgroundColor
-  }, /*#__PURE__*/React.createElement(TabBar, {
-    role: "tablist"
-  }, list.map(({
-    title,
-    id,
-    active,
-    color
-  }) => {
-    const tabTitle = typeof title === 'function' ? title() : title;
-    return /*#__PURE__*/React.createElement(TabButton, {
-      id: `tabbutton-${sanitize(tabTitle)}`,
-      className: `tabbutton ${active ? 'tabbutton-active' : ''}`,
-      type: "button",
-      key: id,
-      active: active,
-      textColor: color,
-      onClick: e => {
-        e.preventDefault();
-        actions.onSelect(id);
-      },
-      role: "tab"
-    }, tabTitle);
-  })), tools ? /*#__PURE__*/React.createElement(Fragment, null, tools) : null), /*#__PURE__*/React.createElement(Content, {
-    id: "panel-tab-content",
-    bordered: bordered,
-    absolute: absolute
-  }, list.map(({
-    id,
-    active,
-    render
-  }) => render({
-    key: id,
-    active
-  })))) : /*#__PURE__*/React.createElement(Placeholder, null, /*#__PURE__*/React.createElement(Fragment, {
-    key: "title"
-  }, "Nothing found"));
-});
-Tabs.displayName = 'Tabs';
-Tabs.defaultProps = {
-  id: null,
-  children: null,
-  tools: null,
-  selected: null,
-  absolute: false,
-  bordered: false
-};
-export class TabsState extends Component {
-  constructor(props) {
-    super(props);
-    this.handlers = {
-      onSelect: id => this.setState({
-        selected: id
-      })
-    };
-    this.state = {
-      selected: props.initial
-    };
-  }
-
-  render() {
-    const {
-      bordered = false,
-      absolute = false,
-      children,
-      backgroundColor
-    } = this.props;
-    const {
-      selected
-    } = this.state;
-    return /*#__PURE__*/React.createElement(Tabs, {
-      bordered: bordered,
-      absolute: absolute,
-      selected: selected,
-      backgroundColor: backgroundColor,
-      actions: this.handlers
-    }, children);
-  }
-
-}
-TabsState.displayName = "TabsState";
-TabsState.defaultProps = {
-  children: [],
-  initial: null,
-  absolute: false,
-  bordered: false,
-  backgroundColor: ''
-};

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"
-}));