diff --git a/src/Box.tsx b/src/Box.tsx index 933a9340..045cb97f 100644 --- a/src/Box.tsx +++ b/src/Box.tsx @@ -19,6 +19,7 @@ import { minHeight, minWidth, opacity, + overflow, position, right, space, @@ -164,6 +165,7 @@ export const Box = styled('div')( minHeight, minWidth, opacity, + overflow, position, right, space, diff --git a/src/Image.tsx b/src/Image.tsx index ba731478..7dc7a49f 100644 --- a/src/Image.tsx +++ b/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) => ; - -export const Image = styled(PlainImage as any)( - { - // @ts-ignore - display: 'inline', - }, - - borderRadius, - opacity, - width, - height, - - ({ hidden }: IImageProps) => - hidden && { - display: 'none', - }, +export const Image = styled(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, }; diff --git a/src/ThemeSection.tsx b/src/ThemeSection.tsx index 2e26a1fa..b457297b 100644 --- a/src/ThemeSection.tsx +++ b/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'; diff --git a/src/__stories__/BlockQuote.tsx b/src/__stories__/BlockQuote.tsx index 24fdfb23..aa3bd69d 100644 --- a/src/__stories__/BlockQuote.tsx +++ b/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 => { diff --git a/src/__stories__/Box.tsx b/src/__stories__/Box.tsx index 7f023ba2..53ce8e82 100644 --- a/src/__stories__/Box.tsx +++ b/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 { diff --git a/src/__stories__/Break.tsx b/src/__stories__/Break.tsx index 29e46f44..1033ae29 100644 --- a/src/__stories__/Break.tsx +++ b/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'; diff --git a/src/__stories__/Button.tsx b/src/__stories__/Button.tsx index 5c43d114..b225b5fa 100644 --- a/src/__stories__/Button.tsx +++ b/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'; diff --git a/src/__stories__/Flex.tsx b/src/__stories__/Flex.tsx index e631f2a6..efa97ec8 100644 --- a/src/__stories__/Flex.tsx +++ b/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'; diff --git a/src/__stories__/Heading.tsx b/src/__stories__/Heading.tsx index 7f3501a0..b7f737b9 100644 --- a/src/__stories__/Heading.tsx +++ b/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'; diff --git a/src/__stories__/Icon.tsx b/src/__stories__/Icon.tsx index 5784d86a..8c39149a 100644 --- a/src/__stories__/Icon.tsx +++ b/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'; diff --git a/src/__stories__/Image.tsx b/src/__stories__/Image.tsx index cde0f793..6417987e 100644 --- a/src/__stories__/Image.tsx +++ b/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 =>
{storyFn()}
) - .add('with defaults', () => ); + .add('with defaults', () => ) + .add('responsive', () => ); diff --git a/src/__stories__/Input.tsx b/src/__stories__/Input.tsx index 0ac689c7..694e4106 100644 --- a/src/__stories__/Input.tsx +++ b/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'; diff --git a/src/__stories__/Link.tsx b/src/__stories__/Link.tsx index d833d894..3ce5f143 100644 --- a/src/__stories__/Link.tsx +++ b/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 => { diff --git a/src/__stories__/List.tsx b/src/__stories__/List.tsx index 4cffac24..e936e384 100644 --- a/src/__stories__/List.tsx +++ b/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'; diff --git a/src/__stories__/Mark.tsx b/src/__stories__/Mark.tsx index cc6d2d4a..eb93d76b 100644 --- a/src/__stories__/Mark.tsx +++ b/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 => { diff --git a/src/__stories__/Menu.tsx b/src/__stories__/Menu.tsx index eb174a3d..bc4c20a0 100644 --- a/src/__stories__/Menu.tsx +++ b/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'; diff --git a/src/__stories__/Popup.tsx b/src/__stories__/Popup.tsx index 799c19cb..38327c4e 100644 --- a/src/__stories__/Popup.tsx +++ b/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 '..'; diff --git a/src/__stories__/Text.tsx b/src/__stories__/Text.tsx index 7064f610..2c118f8e 100644 --- a/src/__stories__/Text.tsx +++ b/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'; diff --git a/src/__stories__/Textarea.tsx b/src/__stories__/Textarea.tsx index 74576684..7c2eca4d 100644 --- a/src/__stories__/Textarea.tsx +++ b/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'; diff --git a/src/__tests__/Image.spec.tsx b/src/__tests__/Image.spec.tsx new file mode 100644 index 00000000..9ec34d9a --- /dev/null +++ b/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(); + expect(wrapper).toHaveProp('title', props.title); + wrapper.unmount(); + }); + + it('attaches src', () => { + const wrapper = mount(); + expect(wrapper).toHaveProp('src', props.src); + wrapper.unmount(); + }); +}); diff --git a/src/__tests__/hooks/__tests__/useWindowResize.spec.tsx b/src/hooks/__tests__/useWindowResize.spec.tsx similarity index 96% rename from src/__tests__/hooks/__tests__/useWindowResize.spec.tsx rename to src/hooks/__tests__/useWindowResize.spec.tsx index c4e1181b..2aeb728c 100644 --- a/src/__tests__/hooks/__tests__/useWindowResize.spec.tsx +++ b/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; diff --git a/src/storybook-addon/withThemes.tsx b/src/storybook-addon/withThemes.tsx index d2d0f242..759f909d 100644 --- a/src/storybook-addon/withThemes.tsx +++ b/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'; diff --git a/src/utils/rules.ts b/src/utils/rules.ts index 9435f936..b9cddbb8 100644 --- a/src/utils/rules.ts +++ b/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, {}); };