import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";

import * as stories from "./avatar.stories";

<Meta of={stories} />

# Avatar

Avatars display a unique color that helps a user visually recognize their logged in account.

A variance in color across the avatar component is important as it is used in Account Switching as a
visual indicator to recognize which of a personal or work account a user is logged into.

<Primary />
<Controls />

## Size

### Large: 64px

<Story of={stories.Large} />

### Default: 48px

<Story of={stories.Default} />

### Small 28px

<Story of={stories.Small} />

## Background color

The Background color can be set 3 ways. The color is generated using the following order of
priority:

- Color
- ID
- Text, usually set to the user's Name field

<Story of={stories.ColorByText} />
Use the user 'ID' field if `Name` is not defined.
<Story of={stories.ColorByID} />

## Outline

If the avatar is displayed on one of the theme's `background` color variables or is interactive,
display the avatar with a 1 pixel `secondary-600` border to meet WCAG AA graphic contrast guidelines
for interactive elements.

<Story of={stories.Border} />

## Avatar as a button

The Avatar can be used as a button.

Typically this is only in the navigation on client apps where account switching is used and in the
web app for the account menu indicator.

When the avatar is used as a button, the following states should be used:

`TODO:` [Jira add stories](https://bitwarden.atlassian.net/browse/CL-101) for button avatars.
[See Figma](https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?type=design&node-id=9730-31746&mode=design&t=IjDIHDb6FZl6bUQW-4)

## Accessibility

Avatar background color should have 3.1:1 contrast with it’s background; or include the
`secondary-600` border Avatar text should have 4.5:1 contrast with the avatar background color