Merge branch 'master' into feat/forwardRef

src/Box.tsx

@@ -19,6 +19,7 @@ import {
   minHeight,
   minWidth,
   opacity,
+  overflow,
   position,
   right,
   space,
@@ -164,6 +165,7 @@ export const Box = styled<IBoxProps, 'div'>('div')(
   minHeight,
   minWidth,
   opacity,
+  overflow,
   position,
   right,
   space,

src/Image.tsx

@@ -1,55 +1,33 @@
-import * as React from 'react';
+import { styled } from './utils';
 
-import { borderRadius, height, opacity, styled, width } from './utils';
+import { Box, IBoxProps } from './Box';
 
-import { BorderRadius } from './types';
-
-export interface IImageProps {
-  src: string;
-  label?: string;
-  radius?: BorderRadius;
+export interface IImageProps extends IBoxProps {
+  src: HTMLImageElement['src'];
+  alt?: HTMLImageElement['alt'];
+  title?: HTMLImageElement['title'];
   hidden?: boolean;
-  opacity?: number;
   responsive?: boolean;
-  height?: string;
-  width?: string;
-}
-
-interface IPlainImageProps extends IImageProps {
-  className: string;
+  height?: HTMLImageElement['height'];
+  width?: HTMLImageElement['width'];
 }
 
-const PlainImage = (props: IPlainImageProps) => <img className={props.className} src={props.src} title={props.label} />;
-
-export const Image = styled<IImageProps, 'img'>(PlainImage as any)(
-  {
-    // @ts-ignore
-    display: 'inline',
-  },
-
-  borderRadius,
-  opacity,
-  width,
-  height,
-
-  ({ hidden }: IImageProps) =>
-    hidden && {
-      display: 'none',
-    },
+export const Image = styled<IImageProps, 'img'>(Box).attrs({
+  as: 'img',
+})(
+  // @ts-ignore
+  ({ hidden }: IImageProps) => hidden && { display: 'none' },
 
   ({ responsive }: IImageProps) =>
     responsive && {
+      width: 'auto',
+      height: 'auto',
       maxWidth: '100%',
+      maxHeight: '100%',
     }
 );
 
 Image.defaultProps = {
-  circular: false,
-  label: '',
-  height: 'auto',
   hidden: false,
-  opacity: 1,
-  responsive: true,
-  rounded: false,
-  width: 'auto',
+  responsive: false,
 };

src/ThemeSection.tsx

@@ -1,4 +1,5 @@
-import { get, merge } from 'lodash';
+import get = require('lodash/get');
+import merge = require('lodash/merge');
 import * as React from 'react';
 import * as styledComponents from 'styled-components';
 

src/__stories__/BlockQuote.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { boolean, text, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 import { BlockQuote } from '../BlockQuote';
 
 export const blockQuoteKnobs = (tabName = 'Block Quote'): any => {

src/__stories__/Box.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { number, select, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { Box } from '../Box';
 import {

src/__stories__/Break.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { NumberOptions, withKnobs } from '@storybook/addon-knobs';
 import { number } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { Break } from '../Break';
 

src/__stories__/Button.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { Button } from '../Button';
 import { boxKnobs } from './Box';

src/__stories__/Flex.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { select } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { Box } from '../Box';
 import { Flex } from '../Flex';

src/__stories__/Heading.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { select } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { Heading } from '../Heading';
 import { boxKnobs } from './Box';

src/__stories__/Icon.tsx

@@ -6,7 +6,9 @@ import * as _solidIcons from '@fortawesome/free-solid-svg-icons';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean, select } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { map, omitBy, pick } from 'lodash';
+import map = require('lodash/map');
+import omitBy = require('lodash/omitBy');
+import pick = require('lodash/pick');
 
 import { Icon, IconLibrary, IIcon } from '../Icon';
 import { boxKnobs } from './Box';

src/__stories__/Image.tsx

@@ -12,7 +12,7 @@ export const imageKnobs = (tabName = 'Image'): any => {
     radius: select('radius', BorderRadius, '', tabName),
     height: text('height', '', tabName),
     hidden: boolean('hidden', false, tabName),
-    responsive: boolean('responsive', true, tabName),
+    responsive: boolean('responsive', false, tabName),
     opacity: number(
       'opacity',
       1,
@@ -22,16 +22,16 @@ export const imageKnobs = (tabName = 'Image'): any => {
       } as NumberOptions,
       tabName
     ),
-    src: text(
-      'src',
-      'https://s3.amazonaws.com/totem_production/assets/logos/10719/original/logo_light_bg.png?1501094221',
-      tabName
-    ),
+    src: text('src', 'https://placehold.it/150x50', tabName),
+    alt: text('alt', 'Placeholder', tabName),
+    title: text('title', 'Placeholder', tabName),
     width: text('width', '', tabName),
+    shadow: select('shadow', ['', 'sm', 'md', 'lg'], '', tabName),
   };
 };
 
 storiesOf('Image', module)
   .addDecorator(withKnobs)
   .addDecorator(storyFn => <div style={{ width: '300px' }}>{storyFn()}</div>)
-  .add('with defaults', () => <Image {...imageKnobs()} />);
+  .add('with defaults', () => <Image {...imageKnobs()} />)
+  .add('responsive', () => <Image {...imageKnobs()} responsive />);

src/__stories__/Input.tsx

@@ -5,7 +5,7 @@ import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { Input } from '../Input';
 import { AutosizeInputType, InlineInputType } from './_utils';

src/__stories__/Link.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { text, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 import { Link } from '../Link';
 
 export const linkKnobs = (tabName = 'Link'): any => {

src/__stories__/List.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { select } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { List } from '../List';
 import { ListStylePosition, ListStyleType } from './_utils';

src/__stories__/Mark.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { select, text, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 import { Mark } from '../Mark';
 
 export const markKnobs = (tabName = 'Mark'): any => {

src/__stories__/Menu.tsx

@@ -1,4 +1,4 @@
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 import * as React from 'react';
 
 import { action } from '@storybook/addon-actions';

src/__stories__/Popup.tsx

@@ -1,7 +1,7 @@
 import { NumberOptions, withKnobs } from '@storybook/addon-knobs';
 import { number, select, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 import * as React from 'react';
 
 import { Box, Icon, Popup } from '..';

src/__stories__/Text.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { Text } from '../Text';
 import { Casing, Decoration, LetterSpacing, LineHeight } from './_utils';

src/__stories__/Textarea.tsx

@@ -5,7 +5,7 @@ import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean, number } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
-import { omitBy } from 'lodash';
+import omitBy = require('lodash/omitBy');
 
 import { Textarea } from '../Textarea';
 import { boxKnobs } from './Box';

src/__tests__/Image.spec.tsx

@@ -0,0 +1,27 @@
+import { mount } from 'enzyme';
+import 'jest-enzyme';
+import * as React from 'react';
+import { IImageProps, Image } from '../Image';
+
+describe('Image', () => {
+  let props: IImageProps;
+
+  beforeEach(() => {
+    props = {
+      title: 'Stoplight.io',
+      src: 'www.stoplight.io',
+    };
+  });
+
+  it('attaches title', () => {
+    const wrapper = mount(<Image {...props} />);
+    expect(wrapper).toHaveProp('title', props.title);
+    wrapper.unmount();
+  });
+
+  it('attaches src', () => {
+    const wrapper = mount(<Image {...props} />);
+    expect(wrapper).toHaveProp('src', props.src);
+    wrapper.unmount();
+  });
+});

src/__tests__/hooks/__tests__/useWindowResize.spec.tsx → src/hooks/__tests__/useWindowResize.spec.tsx

@@ -3,7 +3,7 @@ import 'jest-enzyme';
 import debounce = require('lodash/debounce');
 import * as React from 'react';
 
-import { useWindowResize } from '../../../hooks/useWindowResize';
+import { useWindowResize } from '../useWindowResize';
 
 describe('useWindowResize hook', () => {
   let addEventListenerSpy: jest.SpyInstance;

src/storybook-addon/withThemes.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 // @ts-ignore
 import addons, { makeDecorator } from '@storybook/addons';
-import { merge } from 'lodash';
+import merge = require('lodash/merge');
 
 import { Flex } from '../Flex';
 import { baseTheme } from '../theme';

src/utils/rules.ts

@@ -1,4 +1,5 @@
-import { get, merge } from 'lodash';
+import get = require('lodash/get');
+import merge = require('lodash/merge');
 
 // @ts-ignore
 import { compose, is, num, px, style } from 'styled-system';
@@ -233,7 +234,7 @@ const getProperties = key => {
 };
 
 // @ts-ignore FIXME
-const getSpaceValue = scale => propVal => {
+const getSpaceValue = (scale: any = {}) => propVal => {
   let val = propVal;
   let isNegative;
 
@@ -244,7 +245,7 @@ const getSpaceValue = scale => propVal => {
     }
 
     // check the theme config for a value, or just use the prop
-    val = scale !== undefined ? scale[val] : val;
+    val = scale[val] || val;
   }
 
   // if was negative string/add the '-' back
@@ -267,18 +268,15 @@ export const space = props => {
       const innerProperties = getProperties(key);
 
       // @ts-ignore FIXME
-      const innerStyle = n =>
-        is(n)
-          ? innerProperties.reduce(
-              (a, prop) => ({
-                ...a,
-                [prop]: getStyle(n),
-              }),
-              {}
-            )
-          : null;
-
-      return innerStyle(value);
+      if (!is(value)) return null;
+
+      return innerProperties.reduce(
+        (a, prop) => ({
+          ...a,
+          [prop]: getStyle(value),
+        }),
+        {}
+      );
     })
     .reduce(merge, {});
 };