Merge pull request #13 from stoplightio/SL-149/image

SL-149/image

README.md

@@ -86,4 +86,4 @@ cd ../another/package
 
 # link ui-kit
 yarn link "@stoplight/ui-kit"
-```
+```

src/Image.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { borderRadius, height, opacity, styled, width } from './utils';
+
+import { BorderRadius } from './types';
+
+export interface IImageProps {
+  src: string;
+  label?: string;
+  radius?: BorderRadius;
+  hidden?: boolean;
+  opacity?: number;
+  responsive?: boolean;
+  height?: string;
+  width?: string;
+}
+
+interface IPlainImageProps extends IImageProps {
+  className: string;
+}
+
+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',
+    },
+
+  ({ responsive }: IImageProps) =>
+    responsive && {
+      maxWidth: '100%',
+    }
+);
+
+Image.defaultProps = {
+  circular: false,
+  label: '',
+  height: 'auto',
+  hidden: false,
+  opacity: 1,
+  responsive: true,
+  rounded: false,
+  width: 'auto',
+};

src/storybook-addon/themes/index.ts

@@ -1,5 +1,8 @@
 // NOTE: ordering here matters - it determines the button order in the panel
 
+// empty default theme
+export { baseTheme as Default } from '../../theme';
+
 export { light as Light } from './light';
 
 export { dark as Dark } from './dark';

stories/Image.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { NumberOptions, withKnobs } from '@storybook/addon-knobs';
+import { boolean, number, select, text } from '@storybook/addon-knobs/react';
+import { storiesOf } from '@storybook/react';
+
+import { Image } from '../src/Image';
+import { BorderRadius } from './_utils';
+
+export const imageKnobs = (tabName = 'Image'): any => {
+  return {
+    radius: select('radius', BorderRadius, '', tabName),
+    height: text('height', '', tabName),
+    hidden: boolean('hidden', false, tabName),
+    responsive: boolean('responsive', true, tabName),
+    opacity: number(
+      'opacity',
+      1,
+      {
+        min: 0,
+        max: 1,
+      } as NumberOptions,
+      tabName
+    ),
+    src: text(
+      'src',
+      'https://s3.amazonaws.com/totem_production/assets/logos/10719/original/logo_light_bg.png?1501094221',
+      tabName
+    ),
+    width: text('width', '', tabName),
+  };
+};
+
+storiesOf('Image', module)
+  .addDecorator(withKnobs)
+  .addDecorator(storyFn => <div style={{ width: '300px' }}>{storyFn()}</div>)
+  .add('with defaults', () => <Image {...imageKnobs()} />);

stories/_utils.ts

@@ -1,6 +1,7 @@
 /**
  * BOX
  */
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
 
 export const BorderRadius = ['', 'none', 'sm', 'md', 'lg', 'xl', 'full'];
 export const BorderWidth = ['', 'none', 'xs', 'sm', 'md', 'lg'];
@@ -12,6 +13,8 @@ export const PositionOpts = ['', 'static', 'relative', 'fixed', 'absolute', 'sti
 export const FontSize = ['', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
 export const FontWeight = ['', 'thin', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'];
 
+export const Size: SizeProp[] = ['xs', 'lg', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'];
+
 export const FullSpace = [
   '',
   'none',

stories/index.ts

@@ -3,6 +3,7 @@ import './Button';
 import './Flex';
 import './Heading';
 import './Icon';
+import './Image';
 import './Input';
 import './KitchenSink';
 import './List';

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "./node_modules/@stoplight/scripts/tsconfig.json",
-  "include": ["src"],
+  "include": ["src", "stories"],
   "compilerOptions": {
     "outDir": "dist"
   }