## Feature Examples

### Size
- description: Controls size of a component. It supports 3 sizes: - \`medium\` (default)- use in all common cases - \`small\` - use to de-emphasise the group, also in more dense and narrow layouts - \`tiny\`
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AvatarGroup
    size="medium"
    items={[
      { name: 'first user' },
      { name: 'second user' },
      { name: 'third avatar' },
    ]}
  />
  <AvatarGroup
    size="small"
    items={[
      { name: 'first user' },
      { name: 'second user' },
      { name: 'third avatar' },
    ]}
  />
  <AvatarGroup
    size="tiny"
    items={[
      { name: 'first user' },
      { name: 'second user' },
      { name: 'third avatar' },
    ]}
  />
</StorybookComponents.Stack>;
```

### Group type
- description: Changes density of a group. Component supports 2 types: - \`stretched\` (default)- use when each user is as important as a group as a whole - \`condensed\` - use in narrow layouts and in cases where it is important to show the sum of the people rather than individuals
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AvatarGroup
    type="stretched"
    items={[
      { name: 'first user' },
      { name: 'second user' },
      { name: 'third avatar' },
    ]}
  />
  <AvatarGroup
    type="condensed"
    items={[
      { name: 'first user' },
      { name: 'second user' },
      { name: 'third avatar' },
    ]}
  />
</StorybookComponents.Stack>;
```

### Divider
- description: Separates first avatar from the rest of the group to highlight the difference of a status or role (i.e. admin, team lead, etc). Component allows to separate single avatar only, which must be a first item on the list.
- example:
```jsx
<AvatarGroup
  showDivider
  items={[
    { name: 'first avatar' },
    { name: 'second avatar' },
    { name: 'third avatar' },
  ]}
/>;
```

### Max number of items
- description: Defines the maximum number of items to show before collapsing them. By default component displays up to 5 items. The '+N' indication will replace the last avatar, in case the number exceeds this limit.
- example:
```jsx
<AvatarGroup
  maxItems={5}
  items={[
    { name: 'first user' },
    { name: 'second user' },
    { name: 'third avatar' },
    { name: 'fourth avatar' },
    { name: 'fifth avatar' },
    { name: 'sixth avatar' },
  ]}
/>;
```

## Common Use Case Examples

### Assigned users
- description: Use avatar group to display multiple users that are assigned to the same role, group or task.
- example:
```jsx
() => {
  const renderTableListItem = ({
    title,
    subtitle,
    avatarGroup,
    renderTableActionCell = true,
  }) => (
    <TableListItem
      showDivider
      options={[
        {
          value: (
            <Box direction="vertical">
              <Text weight="normal">{title}</Text>
              <Text size="small" secondary>
                {subtitle}
              </Text>
            </Box>
          ),
          width: '450px',
        },
        {
          value: avatarGroup,
        },
        {
          value: renderTableActionCell ? (
            <TableActionCell
              primaryAction={{
                text: 'Edit',
                skin: 'standard',
                onClick: () => {},
              }}
              secondaryActions={[
                {
                  text: 'Invite Contributor',
                  icon: <Icons.UserAdd />,
                  onClick: () => {},
                },
                {
                  text: 'Duplicate & Edit',
                  icon: <Icons.Duplicate />,
                  onClick: () => {},
                },
                {
                  text: 'Delete',
                  icon: <Icons.Delete />,
                  onClick: () => {},
                },
              ]}
              numOfVisibleSecondaryActions={0}
            />
          ) : null,
        },
      ]}
    />
  );

  return (
    <Card>
      <Card.Header title="System Roles" />
      <Card.Divider />
      {renderTableListItem({
        title: 'Account Owner',
        subtitle:
          'Has full administrative access to the account and can manage all sites.',
        avatarGroup: (
          <AvatarGroup type="condensed" items={[{ name: 'Matt Thompson' }]} />
        ),
        renderTableActionCell: false,
      })}

      {renderTableListItem({
        title: 'Site Admin',
        subtitle:
          'Has full access to the site but cannot edit the payment info, delete or duplicate the site.',
        avatarGroup: (
          <AvatarGroup
            type="condensed"
            items={[{ name: 'Matt Thompson' }, { name: 'Luke Wheeler' }]}
          />
        ),
      })}

      {renderTableListItem({
        title: 'Website Manager',
        subtitle:
          ' Can edit the site, manage settings and apps but cannot access Inbox, contacts and other sensitive info.',
        avatarGroup: (
          <AvatarGroup
            type="condensed"
            items={[
              { name: 'Matt Thompson' },
              { name: 'Emma Pike' },
              { name: 'Julia Maria Rogers' },
              { name: 'Margareth Simmons' },
            ]}
          />
        ),
      })}

      {renderTableListItem({
        title: 'Back-Office Manager',
        subtitle:
          'Can access the Wix Dashboard to manage site settings and apps but cannot edit the site.',
        avatarGroup: (
          <AvatarGroup type="condensed" items={[{ name: 'Emma Pike' }]} />
        ),
      })}
    </Card>
  );
};
```