Feat: add avatar mdx

src/Avatar/.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Default as Thing } from './stories';
+import { Avatar as Thing } from './';
 
 describe('Thing', () => {
   it('renders without crashing', () => {

src/Avatar/stories.mdx

@@ -0,0 +1,88 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
+
+import { Avatar } from '.';
+import { Props } from './props';
+
+<Meta title="Avatar" component={Avatar} />
+
+export const Template = (args) => <Avatar {...args} />;
+
+# Avatar
+
+The Avatar visually represents a user.
+
+Avatars's can also display a user's online status.
+
+You can customize the look and feel with the `avatarUrl`, `username`, `showOnline`, `isOnline`, and `style` props.
+
+## Default
+
+<Story
+  name="Default"
+  args={{
+    avatarUrl:
+      'https://chat-engine-assets.s3.amazonaws.com/tutorials/my-face-min.png',
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<ArgsTable story="Default" />
+
+## Show Online
+
+When you set `showOnline` to `true`, then you can see the user's online status.
+
+There will be a red dot if the user is offline, and a green dot if the user is online.
+
+<Canvas>
+  <Story
+    name="Is Online"
+    args={{
+      avatarUrl:
+        'https://chat-engine-assets.s3.amazonaws.com/tutorials/my-face-min.png',
+      showOnline: true,
+      isOnline: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## No Avatar Url
+
+When you do not have an `avatarUrl` value, you can set a `username` value instead.
+
+The component displays the first 2 letters of `username` and assigns a randomly unique colour.
+
+<Canvas>
+  <Story
+    name="No Avatar Url"
+    args={{
+      username: 'Dylan',
+      showOnline: true,
+      isOnline: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Custom Style
+
+You can also use the `style` component to overlay custom CSS onto the `Avatar` component.
+
+<Canvas>
+  <Story
+    name="Custom Style"
+    args={{
+      username: 'Dylan',
+      style: {
+        backgroundImage: 'linear-gradient(#f67a36,#ed008c)',
+        borderRadius: '4px',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/Dot/.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Default as Thing } from './stories';
+import { Dot as Thing } from '.';
 
 describe('Thing', () => {
   it('renders without crashing', () => {

src/Dot/index.tsx

@@ -16,13 +16,13 @@ export const Dot = ({
       className="ce-avatar-dot"
       style={{
         ...styles.default,
-        ...style,
         ...{
           backgroundColor: avatarUrl ? 'white' : color,
           backgroundImage: avatarUrl ? `url(${avatarUrl})` : '',
           width: visible ? '13px' : '0px',
           height: visible ? '13px' : '0px',
         },
+        ...style,
       }}
     />
   );

src/Dot/stories.mdx

@@ -0,0 +1,66 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs';
+
+import { Dot } from '.';
+import { Props } from './props';
+
+<Meta title="Dot" component={Dot} />
+
+export const Template = (args) => <Dot {...args} />;
+
+# Dot
+
+The Dot visually represents a user, compactly.
+
+Dots are typically used in small spaces, like under messages.
+
+avatarUrl, username, style, visible
+
+You can customize the look and feel with the `avatarUrl`, `username`, `isVisible`, and `style` props.
+
+## Default
+
+<Story
+  name="Default"
+  args={{
+    avatarUrl:
+      'https://chat-engine-assets.s3.amazonaws.com/tutorials/my-face-min.png',
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<ArgsTable story="Default" />
+
+## No Avatar Url
+
+When you do not have an `avatarUrl` value, you can set a `username` value instead.
+
+The component displays none of the `username` letters, but assigns a randomly unique colour.
+
+<Canvas>
+  <Story name="No Avatar Url" args={{ username: 'Dylan' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Custom Style
+
+You can also use the `style` component to overlay custom CSS onto the `Dot` component.
+
+<Canvas>
+  <Story
+    name="Custom Style"
+    args={{
+      avatarUrl:
+        'https://chat-engine-assets.s3.amazonaws.com/tutorials/my-face-min.png',
+      style: {
+        width: '24px',
+        height: '24px',
+        backgroundSize: '24px',
+        borderRadius: '4px',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>