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

package/dist/modern/tabs/tabs.js

@@ -0,0 +1,214 @@
+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: -3
+  }
+});
+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

@@ -0,0 +1,196 @@
+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

@@ -0,0 +1,183 @@
+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

@@ -0,0 +1,71 @@
+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"
+}));