docs(avatar): add avatar stories

@types/index.d.ts

@@ -6,6 +6,11 @@ declare module '*.svg' {
   export default content
 }
 
+declare module '*.jpg' {
+  const content: any
+  export default content
+}
+
 declare type ListenerMap = {
   [k: string]: any
 }

src/Avatar.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The size of the avatar
    */
@@ -17,7 +17,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   src: string
 }
 
-const Avatar = React.forwardRef<HTMLDivElement, Props>(function Avatar(props, ref) {
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(function Avatar(props, ref) {
   const { size = 'regular', src, alt, className, ...other } = props
   const {
     theme: { avatar },

src/stories/Avatar.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Avatar, { AvatarProps } from '../Avatar'
+
+import avatarImage from './static/avatar-1.jpg'
+
+export default {
+  title: 'Avatar',
+  component: Avatar,
+} as Meta
+
+const Template: Story<AvatarProps> = (args) => <Avatar {...args} />
+
+export const Large = Template.bind({})
+Large.args = {
+  size: 'large',
+  src: avatarImage,
+  alt: 'Profile image',
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  src: avatarImage,
+  alt: 'Profile image',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  size: 'small',
+  src: avatarImage,
+  alt: 'Profile image',
+}