wix-style-react/src/AvatarGroup/docs/AvatarGroup.examples.js

wix-style-react

export const _groupType = `
<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>
`;

export const _maxItems = `
<AvatarGroup
  maxItems={5}
  items={[
    { name: 'first user' },
    { name: 'second user' },
    { name: 'third avatar' },
    { name: 'fourth avatar' },
    { name: 'fifth avatar' },
    { name: 'sixth avatar' }
  ]}
/>;

`;
export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <AvatarGroup size="small" items={[{name: 'first user'}, {name: 'second user'}, {name: 'third avatar'}]}/>
  <AvatarGroup size="medium" items={[{name: 'first user'}, {name: 'second user'}, {name: 'third avatar'}]}/>
</StorybookComponents.Stack>
`;

export const _divider = `
<AvatarGroup showDivider items={[{name: 'first avatar'}, {name: 'second avatar'}, {name: 'third avatar'}]}/>
`;

export const _assignedUsers = `
() => {
  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>
  );
};
`;