wix-style-react
Version:
114 lines (113 loc) • 4.62 kB
JavaScript
export default {
description:
'Avatar visually represents a user or an organization either as an image, text (name initials) or a placeholder image.',
do: [
'Use it in circle shape to represent a user.',
'Use it in square shape to represent an organization.',
],
dont: [
'Don’t use it to display visual content other than users or organizations. Use <Image/> instead.',
'Don’t use it to display a group of users. Use <AvatarGroup/> instead.',
'Don’t use it as a round image placeholder, use <Image/> instead.',
],
featureExamples: [
{
title: 'Shape',
description: `Control the form of the avatar with a shape prop. It supports 2 shapes:<br/>
 - \`circle\` (default) - use it to represent a user.<br/>
 - \`square\` - use it to represent an entity such as a company or organization.<br/>`,
example: '_shape',
},
{
title: 'Content states',
description: `Component has 3 states:<br/>
 - Loads image when image URL is provided.<br/>
 - Falls back to the placeholder when provided image URL is broken or not given.<br/>
 - Display initials when image URL is broken or not given, but avatar name is defined.`,
example: '_contentStates',
},
{
title: 'Size',
description: `Adjust the avatar size using size prop. It supports 8 sizes:<br/>
 - \`size90\`<br/>
 - \`size72\`<br/>
 - \`size60\`<br/>
 - \`size48\` (default)<br/>
 - \`size36\`<br/>
 - \`size30\`<br/>
 - \`size24\`<br/>
 - \`size18\`<br/>`,
example: '_size',
},
{
title: 'Color',
description: `Control avatar color with color prop. It supports 6 colors:<br/>
 - \`A1\` - blue<br/>
 - \`A2\` - purple<br/>
 - \`A3\` - arctic blue<br/>
 - \`A4\` - magenta<br/>
 - \`A5\` - yellow<br/>
 - \`A6\` - green<br/>
If not provided, color is determined by a given text so each name would receive a different color.`,
example: '_color',
},
{
title: 'Presence',
description: `Use the presence prop to indicate the status of a user. It supports 3 statuses:<br/>
 - \`online\` - indicates that user is online.<br/>
 - \`offline\` - indicates that user is not available.<br/>
 - \`busy\` - indicates that user is online, but is busy, so might not be accessible.<br/>`,
example: '_presence',
},
{
title: 'Placeholder',
description: `Display a placeholder when component has no image and no name.
When required, override default placeholders to any custom elements by passing required content to \`placeholder\` prop.`,
example: '_placeholder',
},
{
title: 'Indication',
description: `Render any indicator via \`customIndication\` prop. It accepts any component or a set of them within a restricted dimensions:<br/>
 - 30x30px container for avatar in \`size90\`, \`size72\`.<br/>
 - 24x24px container for avatar in \`size60\`, \`size48\`.<br/>
Smaller avatar sizes cannot have custom indicators.`,
example: '_indication',
},
{
title: 'Action button',
description: `Render related action such as image upload as an icon button with \`indication\` prop.
This prop applies for 4 largest avatar sizes only: size90, size72, size60 and size48.`,
example: '_actionButton',
},
{
title: 'Show action on hover',
description:
'Reveal action button on avatar hover only with `showIndicationOnHover` prop.',
example: '_showActionOnHover',
},
{
title: 'Loader',
description: `Render related action such as image upload as an icon button with \`indication\` prop.
This prop applies for 4 largest avatar sizes only: size90, size72, size60 and size48.`,
example: '_loader',
},
],
commonUseCaseExamples: [
{
title: 'Users list',
description: `Use \\<Avatar/> as a first data column in a table to visually represent your customers.`,
example: '_usersList',
},
{
title: 'Prefix',
description: `Use \\<Avatar/> as a prefix item to build user selections.`,
example: '_prefix',
},
{
title: 'Upload photo',
description:
'Use an `indication` prop to display a button allowing users to manually upload a photo to avatar',
example: '_uploadPhoto',
},
],
};