@wix/design-system/dist/docs/components/AvatarGroupExamples.md

@wix/design-system

## 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',
              }}
              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>
  );
};
```