Adding Avatar docs (#3661)

* Adding Avatar docs

* using imgur instead of behance and moving category

Author: ktabors

packages/@react-spectrum/avatar/docs/Avatar.mdx

@@ -0,0 +1,80 @@
+{/* Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/avatar';
+import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import packageData from '@react-spectrum/avatar/package.json';
+
+```jsx import
+import {Avatar} from '@react-spectrum/avatar';
+import {Flex} from '@react-spectrum/layout';
+```
+
+---
+category: Content
+keywords: [avatar]
+after_version: 3.0.0
+---
+
+# Avatar
+
+<PageDescription>{docs.exports.Avatar.description}</PageDescription>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['Avatar']}
+  sourceData={[{type: 'Spectrum', url: 'https://spectrum.adobe.com/page/avatar/'}]} />
+
+## Example
+
+```tsx example
+<Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" />
+```
+
+## Content
+
+The Avatar component is a thumbnail representation of an entity, such as a user or an organization.
+
+**Note: Avatars must have an `alt` attribute.** If the avatar is considered decorative and should not be announced by screen readers, then set `alt=""` to suppress the warning.
+
+### Internationalization
+
+To internationalize an Avatar, a localized string should be passed to the `alt` prop.
+
+## Props
+
+<PropTable component={docs.exports.Avatar} links={docs.links} />
+
+## Visual options
+
+### Disabled
+[View guidelines](https://spectrum.adobe.com/page/avatar/#Disabled)
+```tsx example
+<Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" isDisabled />
+```
+
+### Size
+[View guidelines](https://spectrum.adobe.com/page/avatar/#Size)
+```tsx example
+<Flex gap="size-100" wrap>
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-50" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-75" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-100" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-200" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-300" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-400" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-500" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-600" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size="avatar-size-700" />
+  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size={100} />
+</Flex>
+```