Merge pull request #35 from stoplightio/feature/SL-631/image-component

SL-631: image component

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/__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/__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();
+  });
+});