@storybook/components 5.2.1 → 5.2.5

package/src/tooltip/ListItem.tsx

@@ -1,245 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { styled } from '@storybook/theming';
-import memoize from 'memoizerific';
-import { transparentize } from 'polished';
-
-export interface TitleProps {
-  active?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-}
-const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => (
-  <span {...rest}></span>
-))<{ active: boolean; loading: boolean; disabled: boolean }>(
-  ({ 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
-      ? {
-          display: 'inline-block',
-          flex: 'none',
-          ...theme.animation.inlineGlow,
-        }
-      : {},
-  ({ disabled, theme }) =>
-    disabled
-      ? {
-          color: transparentize(0.7, theme.color.defaultText),
-        }
-      : {}
-);
-
-export interface RightProps {
-  active?: boolean;
-}
-
-const Right = styled.span<RightProps>(
-  {
-    '& svg': {
-      transition: 'all 200ms ease-out',
-      opacity: '0',
-      height: '12px',
-      width: '12px',
-      margin: '3px 0',
-      verticalAlign: 'top',
-    } as any,
-    '& 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,
-  },
-});
-
-export interface CenterTextProps {
-  active?: boolean;
-  disabled?: boolean;
-}
-
-const CenterText = styled.span<CenterTextProps>(
-  {
-    flex: 1,
-    textAlign: 'center',
-  },
-  ({ active, theme }) =>
-    active
-      ? {
-          color: theme.color.primary,
-        }
-      : {},
-  ({ theme, disabled }) =>
-    disabled
-      ? {
-          color: theme.color.mediumdark,
-        }
-      : {}
-);
-
-export interface LeftProps {
-  active?: boolean;
-}
-
-const Left = styled.span<LeftProps>(({ active, theme }) =>
-  active
-    ? {
-        '& svg': {
-          opacity: 1,
-        },
-        '& path': {
-          fill: theme.color.primary,
-        },
-      }
-    : {}
-);
-
-export interface ItemProps {
-  disabled?: boolean;
-}
-
-const Item = styled.a<ItemProps>(
-  ({ 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;
-});
-
-export type LinkWrapperType = FunctionComponent;
-
-export interface ListItemProps {
-  loading?: boolean;
-  left?: ReactNode;
-  title?: ReactNode;
-  center?: ReactNode;
-  right?: ReactNode;
-  active?: boolean;
-  disabled?: boolean;
-  href?: string | object;
-  LinkWrapper?: LinkWrapperType;
-  onClick?: () => void;
-}
-
-const ListItem: FunctionComponent<ListItemProps> = ({
-  loading,
-  left,
-  title,
-  center,
-  right,
-  active,
-  disabled,
-  href,
-  onClick,
-  LinkWrapper,
-  ...rest
-}) => {
-  const itemProps = getItemProps(onClick, href, LinkWrapper);
-  const commonProps = { active, disabled };
-
-  return (
-    <Item {...commonProps} {...rest} {...itemProps}>
-      {left && <Left {...commonProps}>{left}</Left>}
-      {title || center ? (
-        <Center>
-          {title && (
-            <Title {...commonProps} loading={loading}>
-              {title}
-            </Title>
-          )}
-          {center && <CenterText {...commonProps}>{center}</CenterText>}
-        </Center>
-      ) : null}
-      {right && <Right {...commonProps}>{right}</Right>}
-    </Item>
-  );
-};
-
-ListItem.defaultProps = {
-  loading: false,
-  left: null,
-  title: <span>Loading state</span>,
-  center: null,
-  right: null,
-  active: false,
-  disabled: false,
-  href: null,
-  LinkWrapper: null,
-  onClick: null,
-};
-
-export default ListItem;

package/src/tooltip/Tooltip.stories.tsx

@@ -1,42 +0,0 @@
-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: '20px', left: '20px' } };
-
-const Content = styled.div({
-  width: '100px',
-  height: '100px',
-  fontSize: '16px',
-  textAlign: 'center',
-  lineHeight: '100px',
-});
-
-storiesOf('basics/Tooltip/Tooltip', module)
-  .add('basic, default', () => (
-    <Tooltip {...mockPopperProps} color="medium">
-      <Content>Text</Content>
-    </Tooltip>
-  ))
-  .add('basic, default, bottom', () => (
-    <Tooltip placement="bottom" {...mockPopperProps}>
-      <Content>Text</Content>
-    </Tooltip>
-  ))
-  .add('basic, default, left', () => (
-    <Tooltip placement="left" {...mockPopperProps}>
-      <Content>Text</Content>
-    </Tooltip>
-  ))
-  .add('basic, default, right', () => (
-    <Tooltip placement="right" {...mockPopperProps}>
-      <Content>Text</Content>
-    </Tooltip>
-  ))
-  .add('no chrome', () => (
-    <Tooltip hasChrome={false} {...mockPopperProps}>
-      <Content>Text</Content>
-    </Tooltip>
-  ));

package/src/tooltip/Tooltip.tsx

@@ -1,146 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import memoize from 'memoizerific';
-
-import { styled, Color, lighten, darken } from '@storybook/theming';
-
-const match = memoize(1000)((requestes, actual, value, fallback = 0) =>
-  actual.split('-')[0] === requestes ? value : fallback
-);
-
-const ArrowSpacing = 8;
-
-export interface ArrowProps {
-  color: keyof Color;
-  placement: string;
-}
-
-const Arrow = styled.div<ArrowProps>(
-  {
-    position: 'absolute',
-    borderStyle: 'solid',
-  },
-  ({ theme, color, placement }) => ({
-    marginBottom: `${match('top', placement, '0', ArrowSpacing)}px`,
-    marginTop: `${match('bottom', placement, '0', ArrowSpacing)}px`,
-    marginRight: `${match('left', placement, '0', ArrowSpacing)}px`,
-    marginLeft: `${match('right', placement, '0', ArrowSpacing)}px`,
-
-    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'
-    ),
-  })
-);
-
-export interface WrapperProps {
-  color: keyof Color;
-  placement: string;
-  hidden?: boolean;
-  hasChrome: boolean;
-}
-
-const Wrapper = styled.div<WrapperProps>(
-  ({ hidden }) => ({
-    display: hidden ? 'none' : 'inline-block',
-    zIndex: 2147483647,
-  }),
-  ({ theme, color, hasChrome, placement }) =>
-    hasChrome
-      ? {
-          marginBottom: `${match('top', placement, ArrowSpacing + 2, 0)}px`,
-          marginTop: `${match('bottom', placement, ArrowSpacing + 2, 0)}px`,
-          marginLeft: `${match('right', placement, ArrowSpacing + 2, 0)}px`,
-          marginRight: `${match('left', placement, ArrowSpacing + 2, 0)}px`,
-
-          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,
-        }
-      : {
-          marginBottom: `${match('top', placement, 8, 0)}px`,
-          marginTop: `${match('bottom', placement, 8, 0)}px`,
-          marginLeft: `${match('right', placement, 8, 0)}px`,
-          marginRight: `${match('left', placement, 8, 0)}px`,
-        }
-);
-
-export interface TooltipProps {
-  arrowRef?: any;
-  tooltipRef?: any;
-  hasChrome?: boolean;
-  arrowProps?: any;
-  placement?: string;
-  color?: keyof Color;
-}
-
-export const Tooltip: FunctionComponent<TooltipProps> = ({
-  placement,
-  hasChrome,
-  children,
-  arrowProps,
-  tooltipRef,
-  arrowRef,
-  color,
-  ...props
-}) => {
-  return (
-    <Wrapper hasChrome={hasChrome} placement={placement} ref={tooltipRef} {...props} color={color}>
-      {hasChrome && <Arrow placement={placement} ref={arrowRef} {...arrowProps} color={color} />}
-      {children}
-    </Wrapper>
-  );
-};
-
-Tooltip.defaultProps = {
-  color: undefined,
-  arrowRef: undefined,
-  tooltipRef: undefined,
-  hasChrome: true,
-  placement: 'top',
-  arrowProps: {},
-};

package/src/tooltip/TooltipLinkList.stories.tsx

@@ -1,52 +0,0 @@
-import React, { Children, FunctionComponent, ReactElement, ReactNode } 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');
-
-interface StoryLinkWrapperProps {
-  href: string;
-  passHref?: boolean;
-}
-
-const StoryLinkWrapper: FunctionComponent<StoryLinkWrapperProps> = ({
-  href,
-  passHref,
-  children,
-}) => {
-  const child = Children.only(children) as ReactElement;
-
-  return React.cloneElement(child, {
-    href: passHref && href,
-    onClick: (e: React.MouseEvent) => {
-      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 => (
-    <div style={{ height: '300px' }}>
-      <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
-        <div>Tooltip</div>
-      </WithTooltip>
-    </div>
-  ))
-  .add('links', () => <TooltipLinkList links={links.slice(0, 2)} LinkWrapper={StoryLinkWrapper} />)
-  .add('links and callback', () => (
-    <TooltipLinkList links={links} LinkWrapper={StoryLinkWrapper} />
-  ));

package/src/tooltip/TooltipLinkList.tsx

@@ -1,49 +0,0 @@
-import React, { FunctionComponent, Key, ReactNode } from 'react';
-import { styled } from '@storybook/theming';
-
-import ListItem, { LinkWrapperType, ListItemProps } from './ListItem';
-
-const List = styled.div<{}>(
-  {
-    minWidth: 180,
-    overflow: 'hidden',
-    overflowY: 'auto',
-    maxHeight: 10.5 * 32, // 10.5 items
-  },
-  ({ theme }) => ({
-    borderRadius: theme.appBorderRadius * 2,
-  })
-);
-
-export interface Link extends ListItemProps {
-  id: string;
-  isGatsby?: boolean;
-}
-
-export interface TooltipLinkListProps {
-  links: Link[];
-  LinkWrapper?: LinkWrapperType;
-}
-
-export const TooltipLinkList: FunctionComponent<TooltipLinkListProps> = ({
-  links,
-  LinkWrapper,
-}) => (
-  <List>
-    {links.map(({ id, title, href, onClick, active, isGatsby, ...props }) => (
-      <ListItem
-        key={id || (title as string)}
-        title={title}
-        onClick={onClick}
-        active={active}
-        href={href}
-        LinkWrapper={isGatsby ? LinkWrapper : null}
-        {...props}
-      />
-    ))}
-  </List>
-);
-
-TooltipLinkList.defaultProps = {
-  LinkWrapper: ListItem.defaultProps.LinkWrapper,
-};

package/src/tooltip/TooltipMessage.stories.tsx

@@ -1,37 +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 => (
-    <div style={{ height: '300px' }}>
-      <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
-        <div>Tooltip</div>
-      </WithTooltip>
-    </div>
-  ))
-  .add('default', () => (
-    <TooltipMessage
-      title="Lorem ipsum dolor sit"
-      desc="Amet consectatur vestibulum concet durum politu coret weirom"
-    />
-  ))
-  .add('with link', () => (
-    <TooltipMessage
-      title="Lorem ipsum dolor sit"
-      desc="Amet consectatur vestibulum concet durum politu coret weirom"
-      links={[{ title: 'Continue', href: 'test' }]}
-    />
-  ))
-  .add('with links', () => (
-    <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', () => (
-    <TooltipMessage desc="Amet consectatur vestibulum concet durum politu coret weirom" />
-  ));

package/src/tooltip/TooltipMessage.tsx

@@ -1,67 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { styled } from '@storybook/theming';
-
-import { Link } from '../typography/link/link';
-
-const Title = styled.div`
-  font-weight: ${props => props.theme.typography.weight.black};
-`;
-
-const Desc = styled.span``;
-
-const Links = styled.div`
-  margin-top: 8px;
-  text-align: center;
-
-  > * {
-    margin: 0 8px;
-    font-weight: ${props => props.theme.typography.weight.black};
-  }
-`;
-
-const Message = styled.div`
-  color: ${props => props.theme.color.darker};
-  line-height: 18px;
-`;
-
-const MessageWrapper = styled.div`
-  padding: 15px;
-  width: 280px;
-  box-sizing: border-box;
-`;
-
-export interface TooltipMessageProps {
-  title?: ReactNode;
-  desc?: ReactNode;
-  links?: {
-    title: string;
-    href?: string;
-    onClick?: () => void;
-  }[];
-}
-
-export const TooltipMessage: FunctionComponent<TooltipMessageProps> = ({ title, desc, links }) => {
-  return (
-    <MessageWrapper>
-      <Message>
-        {title && <Title>{title}</Title>}
-        {desc && <Desc>{desc}</Desc>}
-      </Message>
-      {links && (
-        <Links>
-          {links.map(({ title: linkTitle, ...other }) => (
-            <Link {...other} key={linkTitle}>
-              {linkTitle}
-            </Link>
-          ))}
-        </Links>
-      )}
-    </MessageWrapper>
-  );
-};
-
-TooltipMessage.defaultProps = {
-  title: null,
-  desc: null,
-  links: null,
-};

package/src/tooltip/TooltipNote.stories.tsx

@@ -1,15 +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 => (
-    <div style={{ height: '300px' }}>
-      <WithTooltip hasChrome={false} placement="top" trigger="click" startOpen tooltip={storyFn()}>
-        <div>Tooltip</div>
-      </WithTooltip>
-    </div>
-  ))
-  .add('default', () => <TooltipNote note="Lorem ipsum dolor" />);

package/src/tooltip/TooltipNote.tsx

@@ -1,25 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
-
-const Note = styled.div`
-  padding: 2px 6px;
-  line-height: 16px;
-  font-size: 10px;
-  font-weight: ${props => props.theme.typography.weight.bold};
-  color: ${props => props.theme.color.lightest};
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: -1;
-  background: rgba(0, 0, 0, 0.4);
-  margin: 6px;
-`;
-
-export interface TooltipNoteProps {
-  note: string;
-}
-
-export const TooltipNote: FunctionComponent<TooltipNoteProps> = ({ note }) => {
-  return <Note>{note}</Note>;
-};