@storybook/components 5.2.1 → 5.2.5

package/src/typography/link/link.tsx

@@ -1,223 +0,0 @@
-import React, { AnchorHTMLAttributes, FunctionComponent } from 'react';
-import { styled, css, Theme } from '@storybook/theming';
-import { darken } from 'polished';
-
-import { Icons } from '../../icon/icon';
-
-// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
-const LEFT_BUTTON = 0;
-
-const isPlainLeftClick = (e: React.MouseEvent) =>
-  e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
-
-const cancelled = (e: React.MouseEvent, cb: (_e: React.MouseEvent) => void) => {
-  if (isPlainLeftClick(e)) {
-    e.preventDefault();
-    cb(e);
-  }
-};
-
-export interface LinkStylesProps {
-  secondary?: boolean;
-  tertiary?: boolean;
-  nochrome?: boolean;
-  inverse?: boolean;
-  isButton?: boolean;
-}
-
-const linkStyles = (props: LinkStylesProps & { theme: Theme }) => css`
-  display: inline-block;
-  transition: all 150ms ease-out;
-  text-decoration: none;
-
-  color: ${props.theme.color.secondary};
-  svg path {
-    fill: ${props.theme.color.secondary};
-  }
-
-  &:hover,
-  &:focus {
-    cursor: pointer;
-    color: ${darken(0.07, props.theme.color.secondary)};
-    svg path {
-      fill: ${darken(0.07, props.theme.color.secondary)};
-    }
-  }
-  &:active {
-    color: ${darken(0.1, props.theme.color.secondary)};
-    svg path {
-      fill: ${darken(0.1, props.theme.color.secondary)};
-    }
-  }
-
-  svg {
-    display: inline-block;
-    height: 1em;
-    width: 1em;
-    vertical-align: text-top;
-    position: relative;
-    bottom: -0.125em;
-    margin-right: 0.4em;
-  }
-
-  ${props.secondary &&
-    css`
-      color: ${props.theme.color.mediumdark};
-      svg path {
-        fill: ${props.theme.color.mediumdark};
-      }
-
-      &:hover {
-        color: ${props.theme.color.dark};
-        svg path {
-          fill: ${props.theme.color.dark};
-        }
-      }
-
-      &:active {
-        color: ${props.theme.color.darker};
-        svg path {
-          fill: ${props.theme.color.darker};
-        }
-      }
-    `};
-
-  ${props.tertiary &&
-    css`
-      color: ${props.theme.color.dark};
-      svg path {
-        fill: ${props.theme.color.dark};
-      }
-
-      &:hover {
-        color: ${props.theme.color.darkest};
-        svg path {
-          fill: ${props.theme.color.darkest};
-        }
-      }
-
-      &:active {
-        color: ${props.theme.color.mediumdark};
-        svg path {
-          fill: ${props.theme.color.mediumdark};
-        }
-      }
-    `};
-
-  ${props.nochrome &&
-    css`
-      color: inherit;
-
-      &:hover,
-      &:active {
-        color: inherit;
-        text-decoration: underline;
-      }
-    `};
-
-  ${props.inverse &&
-    css`
-      color: ${props.theme.color.lightest};
-      svg path {
-        fill: ${props.theme.color.lightest};
-      }
-
-      &:hover {
-        color: ${props.theme.color.lighter};
-        svg path {
-          fill: ${props.theme.color.lighter};
-        }
-      }
-
-      &:active {
-        color: ${props.theme.color.light};
-        svg path {
-          fill: ${props.theme.color.light};
-        }
-      }
-    `};
-
-  ${props.isButton &&
-    css`
-      border: 0;
-      border-radius: 0;
-      background: none;
-      padding: 0;
-      font-size: inherit;
-    `};
-`;
-
-export interface LinkInnerProps {
-  withArrow?: boolean;
-  containsIcon?: boolean;
-}
-
-const LinkInner = styled.span`
-  ${(props: LinkInnerProps) =>
-    props.withArrow &&
-    css`
-      > svg:last-of-type {
-        height: 0.7em;
-        width: 0.7em;
-        margin-right: 0;
-        margin-left: 0.25em;
-        bottom: auto;
-        vertical-align: inherit;
-      }
-    `};
-
-  ${props =>
-    props.containsIcon &&
-    css`
-      svg {
-        height: 1em;
-        width: 1em;
-        vertical-align: middle;
-        position: relative;
-        bottom: 0;
-        margin-right: 0;
-      }
-    `};
-`;
-
-type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
-
-const A = styled.a<AProps>`
-  ${linkStyles};
-`;
-
-export interface LinkProps extends LinkInnerProps, LinkStylesProps {
-  cancel?: boolean;
-  className?: string;
-  style?: object;
-  onClick?: (e: React.MouseEvent) => void;
-  href?: string;
-}
-
-export const Link: FunctionComponent<LinkProps & AProps> = ({
-  cancel,
-  children,
-  onClick,
-  withArrow,
-  containsIcon,
-  className,
-  ...rest
-}) => {
-  return (
-    <A {...rest} onClick={cancel ? e => cancelled(e, onClick) : onClick} className={className}>
-      <LinkInner withArrow={withArrow} containsIcon={containsIcon}>
-        {children}
-        {withArrow && <Icons icon="arrowright" />}
-      </LinkInner>
-    </A>
-  );
-};
-
-Link.defaultProps = {
-  cancel: true,
-  className: undefined,
-  style: undefined,
-  onClick: () => {},
-  withArrow: false,
-  containsIcon: false,
-};

package/src/typography/typography.stories.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { storiesOf } from '@storybook/react';
-
-const Info = styled.div`
-  margin-bottom: 3rem;
-`;
-
-const Heading1 = styled.div`
-  font-size: ${props => props.theme.typography.size.l3}px;
-`;
-const Heading2 = styled.div`
-  font-size: ${props => props.theme.typography.size.l2}px;
-`;
-const Heading3 = styled.div`
-  font-size: ${props => props.theme.typography.size.l1}px;
-`;
-const Heading4 = styled.div`
-  font-size: ${props => props.theme.typography.size.m3}px;
-`;
-const Heading5 = styled.div`
-  font-size: ${props => props.theme.typography.size.m3}px;
-`;
-const Heading6 = styled.div`
-  font-size: ${props => props.theme.typography.size.m1}px;
-`;
-const Heading7 = styled.div`
-  font-size: ${props => props.theme.typography.size.s3}px;
-`;
-const Heading8 = styled.div`
-  font-size: ${props => props.theme.typography.size.s2}px;
-`;
-const Heading9 = styled.div`
-  font-size: ${props => props.theme.typography.size.s1}px;
-`;
-
-const HeadingWrapper = styled.div`
-  font-weight: ${props => props.theme.typography.weight.black};
-  > * {
-    margin-bottom: 1rem;
-  }
-`;
-
-const Type1 = styled.div`
-  font-size: ${props => props.theme.typography.size.s3}px;
-`;
-const Type2 = styled.div`
-  font-size: ${props => props.theme.typography.size.s2}px;
-`;
-const Type3 = styled.div`
-  font-size: ${props => props.theme.typography.size.s1}px;
-`;
-
-const TypeWrapper = styled.div`
-  > * {
-    margin-bottom: 1rem;
-  }
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  > * {
-    flex: 1;
-    padding-right: 40px;
-  }
-`;
-
-const Page = styled.div`
-  padding: 3rem;
-`;
-
-storiesOf('Basics|typography', module).add('all', () => (
-  <Page>
-    <Info>
-      <div>
-        <b>Font-family:</b> "Nunito sans", Apple system font ... sans-serif
-      </div>
-      <div>
-        <b>UI text size:</b> 13px
-      </div>
-      <div>
-        <b>Document/Markdown text size:</b> 14px
-      </div>
-      <div>
-        <b>Code font:</b> <code>Operator Mono, Fira Code, Consolas ... monospace</code>
-      </div>
-      <div>
-        <b>Weights:</b> 400(normal), 600(bold), 900(black)
-      </div>
-    </Info>
-    <Wrapper>
-      <HeadingWrapper>
-        <Heading1>48 heading</Heading1>
-        <Heading2>40 heading</Heading2>
-        <Heading3>32 heading</Heading3>
-        <Heading4>28 heading</Heading4>
-        <Heading5>24 heading</Heading5>
-        <Heading6>20 heading</Heading6>
-        <Heading7>16 heading</Heading7>
-        <Heading8>14 heading</Heading8>
-        <Heading9>12 heading</Heading9>
-      </HeadingWrapper>
-      <TypeWrapper>
-        <Type1>16 The quick brown fox jumps over the lazy dog</Type1>
-        <Type2>14 The quick brown fox jumps over the lazy dog</Type2>
-        <Type3>12 The quick brown fox jumps over the lazy dog</Type3>
-      </TypeWrapper>
-    </Wrapper>
-  </Page>
-));

package/src/typography/withReset.tsx

@@ -1,12 +0,0 @@
-import { CSSObject, Theme } from '@storybook/theming';
-
-export const withReset = ({ theme }: { theme: Theme }): CSSObject => ({
-  fontFamily: theme.typography.fonts.base,
-  fontSize: theme.typography.size.s3,
-  margin: 0,
-
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-  WebkitOverflowScrolling: 'touch',
-});

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "types": [
-      "webpack-env",
-      "jest",
-      "react-syntax-highlighter"
-    ]
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*"
-  ]
-}