import {
  Specifications,
  SymbolDoc,
  SymbolDescription,
  ExampleCodeBlock,
  StorybookStatusIndicator,
} from '@workday/canvas-kit-docs';
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';

import Basic from './examples/Basic';
import Button from './examples/Button';
import Image from './examples/Image';
import LazyLoad from './examples/LazyLoad';
import ObjectFit from './examples/ObjectFit';
import Size from './examples/Size';
import Variant from './examples/Variant';
import CustomStyles from './examples/CustomStyles';


# Canvas Kit Avatar <StorybookStatusIndicator type="deprecated" />

<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
  <InformationHighlight.Icon />
  <InformationHighlight.Body>
    `Avatar` in Main has been deprecated and will be removed in a future major version. Please use
    [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs) in Preview
    instead.
  </InformationHighlight.Body>
</InformationHighlight>

Represents a person's profile.

[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

<SymbolDescription name="Avatar" fileName="/react/" />

The example below shows multiple instances of a `Avatar` with various configurations.

### Basic

By default, the Avatar renders a `button` element. If yo'd like to change the default element, use
the `as` prop.

<ExampleCodeBlock code={Basic} />

### Button

Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
semantic element to a `div`. This should be done with caution to ensure the best accessibility.
Generally, `<button>` elements should be used for actions.

<ExampleCodeBlock code={Button} />

### Variant

Avatar defaults to using a `"light"` `variant` property. You can change the `variant` prop to "dark"
by including `variant="dark"`.

<ExampleCodeBlock code={Variant} />

### Size

Avatar defaults to using a `"medium"` `size` property. You can change the `size` prop to various
sizing options. See Component API for more details.

Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.

<ExampleCodeBlock code={Size} />

### Image

Avatar renders an image when the `url` prop is defined.

<ExampleCodeBlock code={Image} />

### Object Fit

Avatar defaults to using `contain` for object-fit. You can change this property to any other
acceptable `object-fit` properties. For best fit, try to use square images.

<ExampleCodeBlock code={ObjectFit} />

### Lazy Load

Example of implementing lazy load behavior with Avatar.

<ExampleCodeBlock code={LazyLoad} />

### Custom Styling

To change the background color of the Avatar, you can use our `createStencil` functionality.

<ExampleCodeBlock code={CustomStyles} />

## Component API

<SymbolDoc name="Avatar" fileName="/react/" />

## Specifications

<Specifications file="Avatar.spec.ts" name="Avatar" />