feat: add Image component

example/src/App.tsx

@@ -2,13 +2,13 @@ import React from 'react'
 import { theme } from 'avocado-ui'
 import { ThemeProvider } from '@emotion/react'
 
-import { Avatar } from './components'
+import { ImageDemo } from './components'
 
 const App = () => {
   return (
     // Pass custom theme to theme provider
     <ThemeProvider theme={theme}>
-      <Avatar />
+      <ImageDemo />
     </ThemeProvider>
   )
 }

example/src/components/image.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Image } from 'avocado-ui'
+
+import ImgURL from '../images/demo-img.jpeg'
+
+const ImageDemo = () => {
+  return <Image src={ImgURL} height='200' width='200' alt='Alternative text' />
+}
+
+export { ImageDemo }

example/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './header'
 export * from './typography'
 export * from './text'
 export * from './avatar'
+export * from './image'

src/components/avatar/avatar.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import { css } from '@emotion/react'
 import { getInitials } from '../../utils/avatar'
 import { avatarTheme } from '../../components/theme/components/avatar.theme'
+import { Shape, Size } from '../../utils/types'
 
 // Avatar component
 const Avatar: FC<AvatarProps> = ({ className, alt, name, ...props }) => {
@@ -50,8 +51,6 @@ const Avatar: FC<AvatarProps> = ({ className, alt, name, ...props }) => {
   )
 }
 
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-type AvatarShape = 'round' | 'curve' | 'square'
 export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
   /**
    * initials of the `name` string are rendered when there are no values for `src` and `icon`
@@ -61,7 +60,7 @@ export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
   /**
    * specifies the size of the avatar image or box
    */
-  size?: AvatarSize | number
+  size?: Size | number
 
   /**
    * specifies the icon to render when there's no value for image source (`src`)
@@ -72,7 +71,7 @@ export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
    * shape controls the curvature of the avatar border radius> It can be either set to "round", "curve", "square"
    */
 
-  shape?: AvatarShape
+  shape?: Shape
 
   /**
    * background color for avatar with icon or initials

src/components/avatar/readme.md

@@ -34,7 +34,7 @@ function App() {
 - [x] color
 - [x] src
 - [x] icon
-- [ ] write tests
+- [x] write tests
 
 ## Tests suites
 

src/components/button/button.tsx

@@ -5,6 +5,7 @@ import { theme } from '../theme'
 import { getButtonShape, trimButtonText } from '../../utils/button'
 import ButtonIcon from './button-icon'
 import Spinner from '../spinner/spinner'
+import { Shape } from '../../utils/types'
 
 /**
  * Button - Renders a clickable item to the browser
@@ -50,8 +51,8 @@ const Button: React.FC<ButtonProps> = ({
   )
 }
 
-export type Size = 'sm' | 'md' | 'lg'
-export type ButtonShape = 'round' | 'curve' | 'square'
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
 export type ButtonType = 'solid' | 'outline' | 'link' | 'ghost'
 export type ButtonVariant = 'primary' | 'warning' | 'error' | 'success'
 
@@ -64,11 +65,11 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    *  size of button. Can be sm, lg, md
    */
-  size?: Size
+  size?: ButtonSize
   /**
    * shape of the button. can be round, border, square
    */
-  shape?: ButtonShape
+  shape?: Shape
   /**
    * trim text on button if more than specified length
    */

src/components/image/image.tsx

@@ -0,0 +1,19 @@
+import React, { FC, ImgHTMLAttributes } from 'react'
+import { Shape } from '../../utils/types'
+
+const Image: FC<ImageProps> = (props) => {
+  return <img {...props} />
+}
+
+type ImageSize = 'xs' | 'sm' | 'md' | 'lg'
+
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  size?: ImageSize
+  shape?: Shape
+}
+
+Image.defaultProps = {
+  size: 'md'
+}
+
+export { Image }

src/components/image/index.ts

@@ -0,0 +1 @@
+export * from './image'

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './select'
 export * from './heading'
 export * from './text'
 export * from './avatar'
+export * from './image'

src/components/input/input.tsx

@@ -5,6 +5,7 @@ import { theme } from '../theme'
 import { Size } from '../button'
 import { getBorderRadius, getInputIconSize } from '../../utils/input'
 import InputIcon from './input-icon'
+import { Shape } from '../../utils/types'
 
 const { inputTheme } = theme.components
 
@@ -74,7 +75,9 @@ interface Input extends InputHTMLAttributes<HTMLInputElement> {
    * set the size of the input. Can be "sm", "md", "lg"
    */
   inputSize?: Size
-  borderRadius?: BorderRadius
+
+  // FIXME: Change to shape prop
+  borderRadius?: Shape
 }
 
 const StyledBaseInput = ({

src/components/select/select.tsx

@@ -2,11 +2,12 @@ import React, { FC, SelectHTMLAttributes } from 'react'
 import { css } from '@emotion/react'
 
 import { Size } from '../button'
-import { BorderRadius, Variant } from '../input'
+import { Variant } from '../input'
 import styled from '@emotion/styled'
 import { theme } from '../theme'
 import { getBorderRadius } from '../../utils/input'
 import { selectTheme } from '../theme/components/select.theme'
+import { Shape } from '../../utils/types'
 
 const Select: FC<Select> = ({ className, options, ...props }) => {
   const _className = className
@@ -50,7 +51,8 @@ interface Select extends SelectHTMLAttributes<HTMLSelectElement> {
   selectSize?: Size
 
   // shape of the border. Could be `curve`, `round` or `square`
-  borderRadius?: BorderRadius
+  // FIXME: Change prop to shape
+  borderRadius?: Shape
 
   // specifies the items to render as options of the select
   options: ISelectOptions[]

src/utils/types/index.ts

@@ -0,0 +1,2 @@
+export type Shape = 'round' | 'curve' | 'square'
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'