add typings (#147)

Author: kuzhelov

src/components/Image/Image.tsx

@@ -5,6 +5,21 @@ import { customPropTypes, UIComponent } from '../../lib'
 import { ImageBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
 
+import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
+import { Extendable, ReactChildren } from '../../../types/utils'
+
+export interface IImageProps {
+  accessibility?: Accessibility
+  as?: any
+  avatar?: boolean
+  children?: ReactChildren
+  circular?: boolean
+  className?: string
+  fluid?: boolean
+  styles?: IComponentPartStylesInput
+  variables?: ComponentVariablesInput
+}
+
 /**
  * An image is a graphic representation of something.
  * @accessibility
@@ -18,7 +33,7 @@ import { Accessibility } from '../../lib/accessibility/interfaces'
  *  - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior
  *  - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently.
  */
-class Image extends UIComponent<any, any> {
+class Image extends UIComponent<Extendable<IImageProps>, any> {
   static className = 'ui-image'
 
   static displayName = 'Image'

src/themes/teams/components/Image/imageStyles.ts

@@ -1,8 +1,9 @@
 import { pxToRem } from '../../../../lib'
 import { ICSSInJSStyle } from '../../../../../types/theme'
+import { IImageProps } from '../../../../components/Image/Image'
 
 export default {
-  root: ({ props, variables }): ICSSInJSStyle => ({
+  root: ({ props, variables }: { props: IImageProps; variables: any }): ICSSInJSStyle => ({
     display: 'inline-block',
     verticalAlign: 'middle',
     width: (props.fluid && '100%') || variables.width,