@storybook/components 5.2.1 → 5.2.5

package/src/tabs/tabs.stories.tsx

@@ -1,207 +0,0 @@
-import React, { Fragment, Key } 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')
-);
-
-interface FibonacciMap {
-  [key: string]: number;
-}
-
-function fibonacci(num: number, memo?: FibonacciMap): number {
-  /* 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 */
-}
-
-interface Panels {
-  [key: string]: {
-    title: string;
-    color: string;
-    render: ({ active, key }: { active: boolean; key: Key }) => JSX.Element;
-  };
-}
-
-const panels: Panels = {
-  test1: {
-    title: 'Tab title #1',
-    render: ({ active, key }) =>
-      active ? (
-        <div id="test1" key={key}>
-          CONTENT 1
-        </div>
-      ) : null,
-  },
-  test2: {
-    title: 'Tab title #2',
-    render: ({ active, key }) => (
-      <div
-        key={key}
-        id="test2"
-        style={{ background: 'hotpink', minHeight: '100%', display: active ? 'block' : 'none' }}
-      >
-        CONTENT 2
-      </div>
-    ),
-  },
-  test3: {
-    title: 'Tab with scroll!',
-    render: ({ active, key }) =>
-      active ? (
-        <div id="test3" key={key}>
-          {colours.map((colour, i) => (
-            <div
-              key={colour}
-              style={{
-                background: `#${colour}`,
-                height: 30 + fibonacci(i + 5) / 10,
-              }}
-            />
-          ))}
-        </div>
-      ) : null,
-  },
-  test4: {
-    title: 'Tab title #4',
-    render: ({ active, key }) =>
-      active ? (
-        <div key={key} id="test4">
-          CONTENT 4
-        </div>
-      ) : null,
-  },
-  test5: {
-    title: 'Tab title #5',
-    render: ({ active, key }) =>
-      active ? (
-        <div key={key} id="test5">
-          CONTENT 5
-        </div>
-      ) : null,
-  },
-  test6: {
-    title: 'Tab title #6',
-    render: ({ active, key }) => (
-      <TabWrapper key={key} active={active} render={() => <div>CONTENT 6</div>} />
-    ),
-  },
-};
-
-const onSelect = action('onSelect');
-
-const content = Object.entries(panels).map(([k, v]) => (
-  <div key={k} id={k} title={v.title}>
-    {v.render}
-  </div>
-));
-
-storiesOf('Basics|Tabs', module)
-  .addDecorator(s => (
-    <div
-      style={{
-        position: 'relative',
-        height: 'calc(100vh - 20px)',
-        width: 'calc(100vw - 20px)',
-        margin: 10,
-      }}
-    >
-      {s()}
-    </div>
-  ))
-  .add('stateful - static', () => (
-    <TabsState initial="test2">
-      <div id="test1" title="With a function">
-        {({ active, selected }: { active: boolean; selected: string }) =>
-          active ? <div>{selected} is selected</div> : null
-        }
-      </div>
-      <div id="test2" title="With markup">
-        <div>test2 is always active (but visually hidden)</div>
-      </div>
-    </TabsState>
-  ))
-  .add('stateful - static with set button text colors', () => (
-    <div>
-      <TabsState initial="test2">
-        <div id="test1" title="With a function" color="red">
-          {({ active, selected }: { active: boolean; selected: string }) =>
-            active ? <div>{selected} is selected</div> : null
-          }
-        </div>
-        <div id="test2" title="With markup" color="green">
-          <div>test2 is always active (but visually hidden)</div>
-        </div>
-      </TabsState>
-    </div>
-  ))
-  .add('stateful - static with set backgroundColor', () => (
-    <div>
-      <TabsState initial="test2" backgroundColor="rgba(0,0,0,.05)">
-        <div id="test1" title="With a function" color="red">
-          {({ active, selected }: { active: boolean; selected: string }) =>
-            active ? <div>{selected} is selected</div> : null
-          }
-        </div>
-        <div id="test2" title="With markup" color="green">
-          <div>test2 is always active (but visually hidden)</div>
-        </div>
-      </TabsState>
-    </div>
-  ))
-  .add('stateful - dynamic', () => (
-    <TabsState initial="test3">
-      {Object.entries(panels).map(([k, v]) => (
-        <div key={k} id={k} title={v.title}>
-          {v.render}
-        </div>
-      ))}
-    </TabsState>
-  ))
-  .add('stateful - no initial', () => <TabsState>{content}</TabsState>)
-  .add('stateless - bordered', () => (
-    <Tabs bordered absolute={false} selected="test3" actions={{ onSelect }}>
-      {content}
-    </Tabs>
-  ))
-  .add('stateless - with tools', () => (
-    <Tabs
-      selected="test3"
-      actions={{ onSelect }}
-      tools={
-        <Fragment>
-          <button type="button" onClick={() => logger.log('1')}>
-            1
-          </button>
-          <button type="button" onClick={() => logger.log('2')}>
-            2
-          </button>
-        </Fragment>
-      }
-    >
-      {content}
-    </Tabs>
-  ))
-  .add('stateless - absolute', () => (
-    <Tabs bordered absolute selected="test3" actions={{ onSelect }}>
-      {content}
-    </Tabs>
-  ))
-  .add('stateless - empty', () => <Tabs actions={{ onSelect }} bordered absolute />);

package/src/tabs/tabs.tsx

@@ -1,252 +0,0 @@
-import React, {
-  Children,
-  Component,
-  Fragment,
-  FunctionComponent,
-  MouseEvent,
-  ReactNode,
-} from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-
-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 */';
-
-export interface WrapperProps {
-  bordered?: boolean;
-  absolute?: boolean;
-}
-
-const Wrapper = styled.div<WrapperProps>(
-  ({ theme, bordered }) =>
-    bordered
-      ? {
-          backgroundClip: 'padding-box',
-          border: `1px solid ${theme.appBorderColor}`,
-          borderRadius: theme.appBorderRadius,
-          overflow: 'hidden',
-        }
-      : {},
-  ({ 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,
-  },
-});
-
-export interface ContentProps {
-  absolute?: boolean;
-}
-
-const Content = styled.div<ContentProps>(
-  {
-    display: 'block',
-    position: 'relative',
-  },
-  ({ theme }) => ({
-    fontSize: theme.typography.size.s2 - 1,
-  }),
-  ({ absolute }) =>
-    absolute
-      ? {
-          height: 'calc(100% - 40px)',
-
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          top: 40,
-          overflow: 'auto',
-          [`& > *:first-child${ignoreSsrWarning}`]: {
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            top: 0,
-            height: '100%',
-            overflow: 'auto',
-          },
-        }
-      : {}
-);
-
-export interface VisuallyHiddenProps {
-  active?: boolean;
-}
-
-const VisuallyHidden = styled.div<VisuallyHiddenProps>(({ active }) =>
-  active ? { display: 'block' } : { display: 'none' }
-);
-
-export interface TabWrapperProps {
-  active: boolean;
-  render?: () => JSX.Element;
-  children?: ReactNode;
-}
-
-export const TabWrapper: FunctionComponent<TabWrapperProps> = ({ active, render, children }) => (
-  <VisuallyHidden active={active}>{render ? render() : children}</VisuallyHidden>
-);
-
-export const panelProps = {
-  active: PropTypes.bool,
-};
-
-const childrenToList = (children: any, selected: string) =>
-  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 }: any) => (
-                <VisuallyHidden key={key} active={active} role="tabpanel">
-                  {content}
-                </VisuallyHidden>
-              ),
-      };
-    }
-  );
-
-export interface TabsProps {
-  id?: string;
-  children?: ReactNode;
-  tools?: ReactNode;
-  selected?: string;
-  actions?: {
-    onSelect: (id: string) => void;
-  };
-  backgroundColor?: string;
-  absolute?: boolean;
-  bordered?: boolean;
-}
-
-export const Tabs = React.memo<TabsProps>(
-  ({
-    children,
-    selected,
-    actions,
-    absolute,
-    bordered,
-    tools,
-    backgroundColor,
-    id: htmlId,
-  }: TabsProps) => {
-    const list = childrenToList(children, selected);
-
-    return list.length ? (
-      <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
-        <FlexBar border backgroundColor={backgroundColor}>
-          <TabBar role="tablist">
-            {list.map(({ title, id, active, color }) => (
-              <TabButton
-                type="button"
-                key={id}
-                active={active}
-                textColor={color}
-                onClick={(e: MouseEvent) => {
-                  e.preventDefault();
-                  actions.onSelect(id);
-                }}
-                role="tab"
-              >
-                {typeof title === 'function' ? title() : title}
-              </TabButton>
-            ))}
-          </TabBar>
-          {tools ? <Fragment>{tools}</Fragment> : null}
-        </FlexBar>
-        <Content absolute={absolute}>
-          {list.map(({ id, active, render }) => render({ key: id, active }))}
-        </Content>
-      </Wrapper>
-    ) : (
-      <Placeholder>
-        <Fragment key="title">Nothing found</Fragment>
-      </Placeholder>
-    );
-  }
-);
-Tabs.displayName = 'Tabs';
-(Tabs as any).defaultProps = {
-  id: null,
-  children: null,
-  tools: null,
-  selected: null,
-  absolute: false,
-  bordered: false,
-};
-
-type FuncChilden = () => void;
-
-export interface TabsStateProps {
-  children: (ReactNode | FuncChilden)[];
-  initial: string;
-  absolute: boolean;
-  bordered: boolean;
-  backgroundColor: string;
-}
-
-export interface TabsStateState {
-  selected: string;
-}
-
-export class TabsState extends Component<TabsStateProps, TabsStateState> {
-  static defaultProps: TabsStateProps = {
-    children: [],
-    initial: null,
-    absolute: false,
-    bordered: false,
-    backgroundColor: '',
-  };
-
-  constructor(props: TabsStateProps) {
-    super(props);
-
-    this.state = {
-      selected: props.initial,
-    };
-  }
-
-  render() {
-    const { bordered = false, absolute = false, children, backgroundColor } = this.props;
-    const { selected } = this.state;
-    return (
-      <Tabs
-        bordered={bordered}
-        absolute={absolute}
-        selected={selected}
-        backgroundColor={backgroundColor}
-        actions={{
-          onSelect: id => this.setState({ selected: id }),
-        }}
-      >
-        {children}
-      </Tabs>
-    );
-  }
-}

package/src/tooltip/ListItem.stories.tsx

@@ -1,35 +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', () => (
-    <div>
-      <ListItem loading />
-      <ListItem title="Default" />
-      <ListItem title="Default icon" right={<Icons icon="eye" />} />
-      <ListItem left="left" title="title" center="center" right="right" />
-      <ListItem active left="left" title="active" center="center" right="right" />
-      <ListItem
-        active
-        left="left"
-        title="active icon"
-        center="center"
-        right={<Icons icon="eye" />}
-      />
-      <ListItem disabled left="left" title="disabled" center="center" right="right" />
-    </div>
-  ))
-  .add('loading', () => <ListItem loading />)
-  .add('default', () => <ListItem title="Default" />)
-  .add('default icon', () => <ListItem title="Default icon" right={<Icons icon="eye" />} />)
-  .add('active icon', () => <ListItem active title="active icon" right={<Icons icon="eye" />} />)
-  .add('w/positions', () => <ListItem left="left" title="title" center="center" right="right" />)
-  .add('w/positions active', () => (
-    <ListItem active left="left" title="active" center="center" right="right" />
-  ))
-  .add('disabled', () => (
-    <ListItem disabled left="left" title="disabled" center="center" right="right" />
-  ));