feat(avatarGroup): add presence support in avatar group component

core/components/atoms/avatarGroup/AvatarGroup.tsx

@@ -17,6 +17,8 @@ export interface AvatarData extends Record<string, any> {
   image?: React.ReactNode;
   disabled?: boolean;
   tooltipSuffix?: string;
+  status?: React.ReactNode;
+  presence?: AvatarProps['presence'];
 }
 
 interface AvatarPopoverProps {
@@ -47,6 +49,8 @@ export interface AvatarGroupProps extends BaseProps {
    *  image?: React.ReactNode;
    *  disabled?: boolean;
    *  tooltipSuffix?: string;
+   *  status?: React.ReactNode;
+   *  presence?: AvatarProps['presence'];
    * }
    * </pre>
    *
@@ -157,6 +161,7 @@ export const AvatarGroup = (props: AvatarGroupProps) => {
     withSearch,
     searchPlaceholder,
     searchComparator,
+    size,
   };
 
   return (

core/components/atoms/avatarGroup/AvatarOptionItem.tsx

@@ -8,12 +8,14 @@ interface AvatarOptionItemProps {
 }
 
 const AvatarOptionItem = (props: AvatarOptionItemProps) => {
-  const { firstName = '', lastName = '', tooltipSuffix = '', disabled, image, icon, ...rest } = props.avatarData;
+  const { avatarData } = props;
+  const { firstName = '', lastName = '', tooltipSuffix = '', disabled, image, icon } = avatarData;
   const name = `${firstName} ${lastName} ${tooltipSuffix}`;
   const elementRef = React.useRef(null);
 
   const triggerClassName = classNames({
     ['cursor-not-allowed']: disabled,
+    ['ellipsis--noWrap']: true,
   });
 
   const itemClassName = classNames({
@@ -22,21 +24,16 @@ const AvatarOptionItem = (props: AvatarOptionItemProps) => {
   });
 
   return (
-    <Tooltip showOnTruncation={true} tooltip={name} elementRef={elementRef} triggerClass={triggerClassName}>
-      <Listbox.Item
-        disabled={disabled}
-        className={itemClassName}
-        tagName="li"
-        data-test="DesignSystem-AvatarGroup--Item"
-      >
-        <Avatar firstName={firstName} lastName={lastName} className="mr-4" withTooltip={false} {...rest}>
-          {image || icon}
-        </Avatar>
-        <Text ref={elementRef} data-test="DesignSystem-AvatarGroup--Text" className="ellipsis--noWrap">
+    <Listbox.Item disabled={disabled} className={itemClassName} tagName="li" data-test="DesignSystem-AvatarGroup--Item">
+      <Avatar {...avatarData} withTooltip={false}>
+        {image || icon}
+      </Avatar>
+      <Tooltip showOnTruncation={true} tooltip={name} elementRef={elementRef} triggerClass={triggerClassName}>
+        <Text ref={elementRef} data-test="DesignSystem-AvatarGroup--Text" className="ellipsis--noWrap ml-4">
           {name}
         </Text>
-      </Listbox.Item>
-    </Tooltip>
+      </Tooltip>
+    </Listbox.Item>
   );
 };
 

core/components/atoms/avatarGroup/AvatarPopperBody.tsx

@@ -17,6 +17,7 @@ interface AvatarPopperProps {
   withSearch?: boolean;
   searchPlaceholder?: string;
   searchComparator?: (searchValue: string, avatarData: AvatarData) => boolean;
+  size?: AvatarData['size'];
 }
 
 const AvatarPopperBody = (props: AvatarPopperProps) => {
@@ -30,6 +31,7 @@ const AvatarPopperBody = (props: AvatarPopperProps) => {
     withSearch,
     searchPlaceholder,
     searchComparator,
+    size,
   } = props;
 
   const [searchValue, setSearchValue] = React.useState<string>('');
@@ -107,7 +109,7 @@ const AvatarPopperBody = (props: AvatarPopperProps) => {
             data-test="DesignSystem-AvatarGroup--List"
           >
             {searchList.map((item: AvatarData, index: number) => {
-              return <AvatarOptionItem key={index} avatarData={item} />;
+              return <AvatarOptionItem key={index} avatarData={{ ...item, size }} />;
             })}
           </Listbox>
         )}

core/components/atoms/avatarGroup/Avatars.tsx

@@ -13,22 +13,13 @@ const Avatars = (props: any) => {
   });
 
   const avatars = avatarList.map((item: any, index: any) => {
-    const { appearance, firstName, lastName, icon, image, disabled, tooltipSuffix } = item;
+    const { icon, image } = item;
 
     const newAvatarStyle = { ...avatarStyle, zIndex: avatarList.length - index };
 
     return (
       <div data-test="DesignSystem-AvatarGroup--Avatar" className={GroupClass} style={newAvatarStyle} key={index}>
-        <Avatar
-          size={size}
-          appearance={appearance}
-          firstName={firstName}
-          lastName={lastName}
-          withTooltip={true}
-          disabled={disabled}
-          tooltipPosition={tooltipPosition}
-          tooltipSuffix={tooltipSuffix}
-        >
+        <Avatar size={size} withTooltip={true} tooltipPosition={tooltipPosition} {...item}>
           {image || icon}
         </Avatar>
       </div>

core/components/atoms/avatarGroup/__stories__/withPresence.story.jsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { AvatarGroup, Avatar } from '@/index';
+
+export const withPresence = () => {
+  const statusList = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    {
+      firstName: 'Steven',
+      lastName: 'Packton',
+      presence: 'active',
+    },
+    {
+      firstName: 'Nancy',
+      lastName: 'Wheeler',
+      presence: 'away',
+    },
+    {
+      firstName: 'Monica',
+      lastName: 'Geller',
+    },
+    {
+      firstName: 'Anuradha',
+      lastName: 'Aggarwal',
+      image: <Avatar.Image src="https://design.innovaccer.com/images/avatar2.jpeg" />,
+      presence: 'active',
+    },
+    {
+      firstName: 'Rachel',
+      lastName: 'Green',
+      presence: 'away',
+      disabled: true,
+    },
+    {
+      firstName: 'Walter',
+      lastName: 'Wheeler',
+      presence: 'away',
+    },
+    {
+      firstName: 'Mark',
+      lastName: 'Snow',
+    },
+  ];
+
+  return <AvatarGroup list={statusList} />;
+};
+
+const customCode = `() => {
+  const statusList = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    {
+      firstName: 'Steven',
+      lastName: 'Packton',
+      presence: 'active',
+    },
+    {
+      firstName: 'Nancy',
+      lastName: 'Wheeler',
+      presence: 'away',
+    },
+    {
+      firstName: 'Monica',
+      lastName: 'Geller',
+    },
+    {
+      firstName: 'Anuradha',
+      lastName: 'Aggarwal',
+      image: <Avatar.Image src="https://design.innovaccer.com/images/avatar2.jpeg" />,
+      presence: 'active',
+    },
+    {
+      firstName: 'Rachel',
+      lastName: 'Green',
+      presence: 'away',
+      disabled: true,
+    },
+    {
+      firstName: 'Walter',
+      lastName: 'Wheeler',
+      presence: 'away',
+    },
+    {
+      firstName: 'Mark',
+      lastName: 'Snow',
+    },
+  ];
+
+  return <AvatarGroup list={statusList} />;
+}`;
+
+export default {
+  title: 'Components/Avatar/AvatarGroup/With Presence',
+  component: AvatarGroup,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

core/components/atoms/avatarGroup/__stories__/withStatus.story.jsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { AvatarGroup, Tooltip, Icon, Avatar } from '@/index';
+
+export const withStatus = () => {
+  const statusList = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    {
+      firstName: 'Steven',
+      lastName: 'Packton',
+      status: (
+        <Tooltip position="top" tooltip="Verified">
+          <Icon appearance="white" className="p-1 bg-success" name="done" size={10} />
+        </Tooltip>
+      ),
+    },
+    {
+      firstName: 'Nancy',
+      lastName: 'Wheeler',
+      status: (
+        <Tooltip position="top" tooltip="On Call">
+          <Icon appearance="white" className="p-1 bg-primary" name="phone" size={10} />
+        </Tooltip>
+      ),
+    },
+    {
+      firstName: 'Monica',
+      lastName: 'Geller',
+    },
+    {
+      firstName: 'Anuradha',
+      lastName: 'Aggarwal',
+      image: <Avatar.Image src="https://design.innovaccer.com/images/avatar2.jpeg" />,
+      status: (
+        <Tooltip position="top" tooltip="Verified">
+          <Icon appearance="white" className="p-1 bg-success" name="done" size={10} />
+        </Tooltip>
+      ),
+    },
+    {
+      firstName: 'Rachel',
+      lastName: 'Green',
+    },
+    {
+      firstName: 'Walter',
+      lastName: 'Wheeler',
+    },
+    {
+      firstName: 'Mark',
+      lastName: 'Snow',
+    },
+  ];
+
+  return <AvatarGroup list={statusList} />;
+};
+
+const customCode = `() => {
+  const statusList = [
+    {
+      firstName: 'John',
+      lastName: 'Doe',
+    },
+    {
+      firstName: 'Steven',
+      lastName: 'Packton',
+      status: (
+        <Tooltip position="top" tooltip="Verified">
+          <Icon appearance="white" className="p-1 bg-success" name="done" size={10} />
+        </Tooltip>
+      ),
+    },
+    {
+      firstName: 'Nancy',
+      lastName: 'Wheeler',
+      status: (
+        <Tooltip position="top" tooltip="On Call">
+          <Icon appearance="white" className="p-1 bg-primary" name="phone" size={10} />
+        </Tooltip>
+      ),
+    },
+    {
+      firstName: 'Monica',
+      lastName: 'Geller',
+    },
+    {
+      firstName: 'Anuradha',
+      lastName: 'Aggarwal',
+      image: <Avatar.Image src="https://design.innovaccer.com/images/avatar2.jpeg" />,
+      status: (
+        <Tooltip position="top" tooltip="Verified">
+          <Icon appearance="white" className="p-1 bg-success" name="done" size={10} />
+        </Tooltip>
+      ),
+    },
+    {
+      firstName: 'Rachel',
+      lastName: 'Green',
+    },
+    {
+      firstName: 'Walter',
+      lastName: 'Wheeler',
+    },
+    {
+      firstName: 'Mark',
+      lastName: 'Snow',
+    },
+  ];
+
+  return <AvatarGroup list={statusList} />;
+}`;
+
+export default {
+  title: 'Components/Avatar/AvatarGroup/With Status',
+  component: AvatarGroup,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};