@storybook/components 5.2.1 → 5.2.5

package/src/form/field/field.tsx

@@ -1,42 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { styled } from '@storybook/theming';
-
-const Wrapper = styled.label<{}>(({ theme }) => ({
-  display: 'flex',
-  borderBottom: `1px solid ${theme.appBorderColor}`,
-  margin: '0 15px',
-  padding: '8px 0',
-
-  '&:last-child': {
-    marginBottom: '3rem',
-  },
-}));
-
-const Label = styled.span<{}>(({ theme }) => ({
-  minWidth: 100,
-  fontWeight: theme.typography.weight.bold,
-  marginRight: 15,
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  lineHeight: '16px',
-}));
-
-export interface FieldProps {
-  label?: ReactNode;
-}
-
-export const Field: FunctionComponent<FieldProps> = ({ label, children }) => (
-  <Wrapper>
-    {label ? (
-      <Label>
-        <span>{label}</span>
-      </Label>
-    ) : null}
-    {children}
-  </Wrapper>
-);
-
-Field.defaultProps = {
-  label: undefined,
-};

package/src/form/form.stories.tsx

@@ -1,133 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { Input, Button, Select, Textarea } from './input/input';
-import { Field } from './field/field';
-import { Spaced } from '../spaced/Spaced';
-
-const Flexed = styled.div({ display: 'flex' });
-
-storiesOf('Basics|Form/Field', module).add('field', () => (
-  <Field key="key" label="label">
-    <Select value="val2" onChange={action('onChange')} size={1}>
-      <option value="val1">Value 1</option>
-      <option value="val2">Value 2</option>
-      <option value="val3">Value 3</option>
-    </Select>
-  </Field>
-));
-
-storiesOf('Basics|Form/Select', module)
-  .add('sizes', () => (
-    <Spaced>
-      {['auto', 'flex', '100%'].map(size => (
-        <Flexed key={size}>
-          <Select value="val2" onChange={action('onChange')} size={size}>
-            <option value="val1">Value 1</option>
-            <option value="val2">Value 2</option>
-            <option value="val3">Value 3</option>
-          </Select>
-        </Flexed>
-      ))}
-    </Spaced>
-  ))
-  .add('validations', () => (
-    <div>
-      <Spaced>
-        {['error', 'warn', 'valid', null].map(valid => (
-          <Select key={valid} value="val2" onChange={action('onChange')} size="100%" valid={valid}>
-            <option value="val1">Value 1</option>
-            <option value="val2">Value 2</option>
-            <option value="val3">Value 3</option>
-          </Select>
-        ))}
-      </Spaced>
-      <Select value="val2" onChange={action('onChange')} size="100%" disabled>
-        <option value="val1">Value 1</option>
-        <option value="val2">Value 2</option>
-        <option value="val3">Value 3</option>
-      </Select>
-    </div>
-  ));
-
-storiesOf('Basics|Form/Button', module)
-  .add('sizes', () => (
-    <Spaced>
-      {['auto', 'flex', '100%'].map(size => (
-        <Flexed key={size}>
-          <Button size={size}>click this button</Button>
-        </Flexed>
-      ))}
-    </Spaced>
-  ))
-  .add('validations', () => (
-    <Spaced>
-      {['error', 'warn', 'valid', null].map(valid => (
-        <Flexed key={valid}>
-          <Button size="100%" valid={valid}>
-            click this button
-          </Button>
-        </Flexed>
-      ))}
-    </Spaced>
-  ));
-
-storiesOf('Basics|Form/Textarea', module)
-  .add('sizes', () => (
-    <Spaced>
-      {['auto', 'flex', '100%'].map(size => (
-        <Flexed key={size}>
-          <Textarea defaultValue="textarea" size={size} />
-        </Flexed>
-      ))}
-    </Spaced>
-  ))
-  .add('validations', () => (
-    <Spaced>
-      {['error', 'warn', 'valid', null].map(valid => (
-        <Flexed key={valid}>
-          <Textarea defaultValue="textarea" size="100%" valid={valid} />
-        </Flexed>
-      ))}
-    </Spaced>
-  ))
-  .add('alignment', () => (
-    <Spaced>
-      {['end', 'center', 'start'].map(align => (
-        <Flexed key={align}>
-          <Textarea defaultValue="textarea" size="100%" align={align} />
-        </Flexed>
-      ))}
-    </Spaced>
-  ));
-
-storiesOf('Basics|Form/Input', module)
-  .add('sizes', () => (
-    <Spaced>
-      {['auto', 'flex', '100%'].map(size => (
-        <Flexed key={size}>
-          <Input defaultValue="text" size={size} />
-        </Flexed>
-      ))}
-    </Spaced>
-  ))
-  .add('validations', () => (
-    <Spaced>
-      {['error', 'warn', 'valid', null].map(valid => (
-        <Flexed key={valid}>
-          <Input defaultValue="text" size="100%" valid={valid} />
-        </Flexed>
-      ))}
-    </Spaced>
-  ))
-  .add('alignment', () => (
-    <Spaced>
-      {['end', 'center', 'start'].map(align => (
-        <Flexed key={align}>
-          <Input defaultValue="text" size="100%" align={align} />
-        </Flexed>
-      ))}
-    </Spaced>
-  ));

package/src/form/index.tsx

@@ -1,18 +0,0 @@
-import { styled } from '@storybook/theming';
-import { Field } from './field/field';
-// InputStyleProps import is for TS
-import { InputStyleProps, Input, Select, Textarea, Button } from './input/input';
-
-export const Form = Object.assign(
-  styled.form({
-    boxSizing: 'border-box',
-    width: '100%',
-  }),
-  {
-    Field,
-    Input,
-    Select,
-    Textarea,
-    Button,
-  }
-);

package/src/form/input/input.tsx

@@ -1,178 +0,0 @@
-import React, { FunctionComponent, forwardRef, Ref } from 'react';
-import { styled, Theme, CSSObject } from '@storybook/theming';
-
-import TextareaAutoResize, { TextareaAutosizeProps } from 'react-textarea-autosize';
-
-import { Button as StyledButton } from '../../Button/Button';
-
-const styleResets: CSSObject = {
-  // resets
-  appearance: 'none',
-  border: '0',
-  boxSizing: 'inherit',
-  display: ' block',
-  margin: ' 0',
-  background: 'transparent',
-  padding: 0,
-  fontSize: 'inherit',
-  position: 'relative',
-};
-
-const styles = ({ theme }: { theme: Theme }): CSSObject => ({
-  ...styleResets,
-
-  transition: 'all 200ms ease-out',
-  color: theme.input.color || 'inherit',
-  background: theme.input.background,
-  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-  borderRadius: theme.input.borderRadius,
-  fontSize: theme.typography.size.s2 - 1,
-  lineHeight: '20px',
-  padding: '.42em 1em', // 32
-
-  '&:focus': { boxShadow: `${theme.color.secondary} 0 0 0 1px inset` },
-  '&[disabled]': {
-    cursor: 'not-allowed',
-    opacity: 0.5,
-  },
-
-  '&:-webkit-autofill': { WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset` },
-
-  '::placeholder': {
-    color: theme.color.mediumdark,
-  },
-});
-
-type Sizes = '100%' | 'flex' | 'auto';
-type Alignments = 'end' | 'center' | 'start';
-type ValidationStates = 'valid' | 'error' | 'warn';
-
-export interface InputStyleProps {
-  size?: Sizes;
-  align?: Alignments;
-  valid?: ValidationStates;
-}
-
-const sizes = ({ size }: { size?: Sizes }): CSSObject => {
-  switch (size) {
-    case '100%': {
-      return { width: '100%' };
-    }
-    case 'flex': {
-      return { flex: 1 };
-    }
-    case 'auto':
-    default: {
-      return { display: 'inline' };
-    }
-  }
-};
-const alignment = ({ align }: InputStyleProps): CSSObject => {
-  switch (align) {
-    case 'end': {
-      return { textAlign: 'right' };
-    }
-    case 'center': {
-      return { textAlign: 'center' };
-    }
-    case 'start':
-    default: {
-      return { textAlign: 'left' };
-    }
-  }
-};
-const validation = ({ valid, theme }: { valid: ValidationStates; theme: Theme }): CSSObject => {
-  switch (valid) {
-    case 'valid': {
-      return { boxShadow: `${theme.color.positive} 0 0 0 1px inset !important` };
-    }
-    case 'error': {
-      return { boxShadow: `${theme.color.negative} 0 0 0 1px inset !important` };
-    }
-    case 'warn': {
-      return {
-        boxShadow: `${theme.color.warning} 0 0 0 1px inset`,
-      };
-    }
-    case undefined:
-    case null:
-    default: {
-      return {};
-    }
-  }
-};
-
-type InputProps = Omit<React.HTMLProps<HTMLInputElement>, keyof InputStyleProps> & InputStyleProps;
-export const Input = Object.assign(
-  styled(
-    forwardRef<any, InputProps>(({ size, valid, align, ...props }, ref) => (
-      <input {...props} ref={ref} />
-    ))
-  )<InputStyleProps>(styles, sizes, alignment, validation, {
-    minHeight: 32,
-  }),
-  {
-    displayName: 'Input',
-  }
-);
-
-// (Input).styles = { ...styleResets, ...styles };
-// (Input).sizes = sizes;
-// (Input).alignment = alignment;
-
-type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, keyof InputStyleProps> &
-  InputStyleProps;
-export const Select = Object.assign(
-  styled(
-    forwardRef<any, SelectProps>(({ size, valid, align, ...props }, ref) => (
-      <select {...props} ref={ref} />
-    ))
-  )<SelectProps>(styles, sizes, validation, {
-    height: 32,
-    userSelect: 'none',
-    paddingRight: 20,
-    appearance: 'menulist',
-  }),
-  {
-    displayName: 'Select',
-  }
-);
-
-type TextareaProps = Omit<TextareaAutosizeProps, keyof InputStyleProps> & InputStyleProps;
-export const Textarea = Object.assign(
-  styled(
-    forwardRef<any, TextareaProps>(({ size, valid, align, ...props }, ref) => (
-      <TextareaAutoResize {...props} ref={ref} />
-    ))
-  )<TextareaProps>(styles, sizes, alignment, validation, {
-    overflow: 'visible',
-  }),
-  {
-    displayName: 'Textarea',
-  }
-);
-
-const ButtonStyled = styled(
-  forwardRef<any, InputStyleProps>(({ size, valid, align, ...props }, ref) => (
-    <StyledButton {...props} ref={ref} />
-  ))
-)<InputStyleProps>(sizes, validation, {
-  // Custom styling for color widget nested in buttons
-  userSelect: 'none',
-  overflow: 'visible',
-  zIndex: 2,
-
-  // overrides the default hover from Button
-  '&:hover': {
-    transform: 'none',
-  },
-});
-
-export const Button: FunctionComponent<any> = Object.assign(
-  forwardRef<{}, {}>((props, ref) => (
-    <ButtonStyled {...props} {...{ tertiary: true, small: true, inForm: true }} ref={ref} />
-  )),
-  {
-    displayName: 'Button',
-  }
-);

package/src/html.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import * as rawComponents from './typography/DocumentFormatting';
-
-export * from './typography/DocumentFormatting';
-
-export const components = Object.entries(rawComponents).reduce(
-  (acc, [k, V]) => ({
-    ...acc,
-    [k.toLowerCase()]: (props: object) => <V {...props} className={`sbdocs-${k.toLowerCase()}`} />,
-  }),
-  {}
-);

package/src/icon/icon.stories.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { storiesOf } from '@storybook/react';
-
-import { Icons } from './icon';
-import { icons, IconKey } from './icons';
-
-const Meta = styled.div({
-  color: '#333',
-  fontSize: 12,
-});
-
-interface ItemProps {
-  minimal?: boolean;
-}
-
-const Item = styled.div<ItemProps>(
-  {
-    display: 'inline-flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: '0 1 20%',
-    minWidth: 120,
-
-    padding: '0px 7.5px 20px',
-
-    '& svg': {
-      marginRight: 10,
-      width: 24,
-      height: 24,
-    },
-  },
-  ({ minimal }) =>
-    minimal
-      ? {
-          flex: 'none',
-          minWidth: 'auto',
-          padding: 0,
-          background: '#fff',
-          border: '1px solid #666',
-
-          '& svg': {
-            display: 'block',
-            marginRight: 0,
-            width: 48,
-            height: 48,
-          },
-        }
-      : {}
-);
-
-const List = styled.div({
-  display: 'flex',
-  flexFlow: 'row wrap',
-});
-
-const list = Object.keys(icons).sort() as IconKey[];
-
-storiesOf('Basics|Icon', module)
-  .add('labels', () => (
-    <List>
-      {list.map(key => (
-        <Item key={key}>
-          <Icons icon={key} /> <Meta>{key}</Meta>
-        </Item>
-      ))}
-    </List>
-  ))
-  .add('no labels', () => (
-    <List>
-      {list.map(key => (
-        <Item minimal key={key}>
-          <Icons icon={key} />
-        </Item>
-      ))}
-    </List>
-  ));

package/src/icon/icon.tsx

@@ -1,22 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
-import icons, { IconKey } from './icons';
-
-import Svg from './svg';
-
-const Path = styled.path({
-  fill: 'currentColor',
-});
-
-export interface IconsProps {
-  icon: IconKey;
-}
-
-// TODO: if we can resize the 1024 to 20, we can remove the size attributes
-export const Icons: FunctionComponent<IconsProps> = ({ icon, ...props }) => {
-  return (
-    <Svg viewBox="0 0 1024 1024" {...props}>
-      <Path d={icons[icon]} />
-    </Svg>
-  );
-};