Merge pull request #2496 from anuradha9712/feat-avatar-group-status-i…

…ndicator

feat(avatarGroup): add status indicator support in avatar group compo…

core/components/atoms/avatarGroup/AvatarGroup.tsx

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

core/components/atoms/avatarGroup/AvatarOptionItem.tsx

@@ -14,6 +14,7 @@ const AvatarOptionItem = (props: AvatarOptionItemProps) => {
 
   const triggerClassName = classNames({
     ['cursor-not-allowed']: disabled,
+    ['ellipsis--noWrap']: true,
   });
 
   const itemClassName = classNames({
@@ -22,21 +23,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 firstName={firstName} lastName={lastName} withTooltip={false} {...rest}>
+        {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

@@ -30,6 +30,7 @@ const AvatarPopperBody = (props: AvatarPopperProps) => {
     withSearch,
     searchPlaceholder,
     searchComparator,
+    size,
   } = props;
 
   const [searchValue, setSearchValue] = React.useState<string>('');
@@ -107,7 +108,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,7 +13,7 @@ const Avatars = (props: any) => {
   });
 
   const avatars = avatarList.map((item: any, index: any) => {
-    const { appearance, firstName, lastName, icon, image, disabled, tooltipSuffix } = item;
+    const { appearance, firstName, lastName, icon, image, disabled, tooltipSuffix, status } = item;
 
     const newAvatarStyle = { ...avatarStyle, zIndex: avatarList.length - index };
 
@@ -28,6 +28,7 @@ const Avatars = (props: any) => {
           disabled={disabled}
           tooltipPosition={tooltipPosition}
           tooltipSuffix={tooltipSuffix}
+          status={status}
         >
           {image || icon}
         </Avatar>

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,
+      },
+    },
+  },
+};

core/components/atoms/avatarGroup/__tests__/AvatarGroup.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import AvatarGroup, { AvatarGroupProps as Props } from '../AvatarGroup';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
-import { Avatar } from '@/index';
+import { Avatar, Tooltip, Icon } from '@/index';
 
 export const list = [
   {
@@ -57,6 +57,67 @@ const iconList = [
   },
 ];
 
+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}
+          data-test="DesignSystem-AvatarGroup--Status-1"
+        />
+      </Tooltip>
+    ),
+  },
+  {
+    firstName: 'Nancy',
+    lastName: 'Wheeler',
+    status: (
+      <Tooltip position="top" tooltip="On Call">
+        <Icon
+          appearance="white"
+          className="p-1 bg-primary"
+          name="phone"
+          size={10}
+          data-test="DesignSystem-AvatarGroup--Status-2"
+        />
+      </Tooltip>
+    ),
+  },
+  {
+    firstName: 'Monica',
+    lastName: 'Geller',
+  },
+  {
+    firstName: 'Tom',
+    lastName: 'Stark',
+    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}
+          data-test="DesignSystem-AvatarGroup--Status-3"
+        />
+      </Tooltip>
+    ),
+  },
+  {
+    firstName: 'Rachel',
+    lastName: 'Green',
+  },
+];
+
 const size = ['tiny', 'regular'];
 const FunctionValue = jest.fn();
 const booleanValue = ['true', 'false'];
@@ -173,6 +234,19 @@ describe('AvatarGroup component', () => {
     expect(listItem[0]).toHaveAttribute('disabled');
     expect(listItem[1]).not.toHaveAttribute('disabled');
   });
+
+  it('renders avatars with status', () => {
+    const { getAllByTestId, getByTestId } = render(<AvatarGroup list={statusList} max={5} />);
+    const avatars = getAllByTestId('DesignSystem-AvatarGroup--Avatar');
+
+    expect(avatars[1].querySelector('.Avatar-status')).toBeInTheDocument();
+    expect(avatars[2].querySelector('.Avatar-status')).toBeInTheDocument();
+    expect(avatars[4].querySelector('.Avatar-status')).toBeInTheDocument();
+
+    expect(getByTestId('DesignSystem-AvatarGroup--Status-1')).toBeInTheDocument();
+    expect(getByTestId('DesignSystem-AvatarGroup--Status-2')).toBeInTheDocument();
+    expect(getByTestId('DesignSystem-AvatarGroup--Status-3')).toBeInTheDocument();
+  });
 });
 
 describe('AvatarGroup Component with overwrite class', () => {