Merge pull request #2505 from anuradha9712/feat-avatar-group-presence…

…-support feat(avatarGroup): add presence support in avatar group component
innovaccer · Jan 22, 2025 · 600288f · 600288f
2 parents 32f8630 + 377979d
commit 600288f
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 15 deletions.
diff --git a/core/components/atoms/avatarGroup/AvatarGroup.tsx b/core/components/atoms/avatarGroup/AvatarGroup.tsx
@@ -18,6 +18,7 @@ export interface AvatarData extends Record<string, any> {
   disabled?: boolean;
   tooltipSuffix?: string;
   status?: React.ReactNode;
+  presence?: AvatarProps['presence'];
 }
 
 interface AvatarPopoverProps {
@@ -49,9 +50,21 @@ export interface AvatarGroupProps extends BaseProps {
    *  disabled?: boolean;
    *  tooltipSuffix?: string;
    *  status?: React.ReactNode;
+   *  presence?: AvatarProps['presence'];
    * }
    * </pre>
    *
+   * | Name | Description | Default |
+   * | --- | --- | --- |
+   * | firstName | First Name of Avatar | |
+   * | lastName | Last Name of Avatar | |
+   * | appearance | Appearance of Avatar | |
+   * | icon | Icon to be rendered inside Avatar | |
+   * | image | Image to be rendered inside Avatar | |
+   * | disabled | Disables the Avatar | false |
+   * | tooltipSuffix | Suffix to be shown in tooltip | |
+   * | status | Status to be shown in only Regular Round Avatar | |
+   * | presence | Presence of Avatar |
    */
   list: AvatarData[];
   /**

diff --git a/core/components/atoms/avatarGroup/AvatarOptionItem.tsx b/core/components/atoms/avatarGroup/AvatarOptionItem.tsx
@@ -8,7 +8,8 @@ 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);
 
@@ -24,7 +25,7 @@ const AvatarOptionItem = (props: AvatarOptionItemProps) => {
 
   return (
     <Listbox.Item disabled={disabled} className={itemClassName} tagName="li" data-test="DesignSystem-AvatarGroup--Item">
-      <Avatar firstName={firstName} lastName={lastName} withTooltip={false} {...rest}>
+      <Avatar {...avatarData} withTooltip={false}>
         {image || icon}
       </Avatar>
       <Tooltip showOnTruncation={true} tooltip={name} elementRef={elementRef} triggerClass={triggerClassName}>

diff --git a/core/components/atoms/avatarGroup/AvatarPopperBody.tsx b/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) => {

diff --git a/core/components/atoms/avatarGroup/Avatars.tsx b/core/components/atoms/avatarGroup/Avatars.tsx
@@ -13,23 +13,13 @@ const Avatars = (props: any) => {
   });
 
   const avatars = avatarList.map((item: any, index: any) => {
-    const { appearance, firstName, lastName, icon, image, disabled, tooltipSuffix, status } = 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}
-          status={status}
-        >
+        <Avatar size={size} withTooltip={true} tooltipPosition={tooltipPosition} {...item}>
           {image || icon}
         </Avatar>
       </div>

diff --git a/core/components/atoms/avatarGroup/__stories__/withPresence.story.jsx b/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 presenceList = [
+    {
+      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={presenceList} />;
+};
+
+const customCode = `() => {
+  const presenceList = [
+    {
+      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={presenceList} />;
+}`;
+
+export default {
+  title: 'Components/Avatar/AvatarGroup/With Presence',
+  component: AvatarGroup,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};
diff --git a/core/components/atoms/avatarGroup/__tests__/AvatarGroup.test.tsx b/core/components/atoms/avatarGroup/__tests__/AvatarGroup.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import AvatarGroup, { AvatarGroupProps as Props } from '../AvatarGroup';
+import AvatarGroup, { AvatarGroupProps as Props, AvatarData } from '../AvatarGroup';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 import { Avatar, Tooltip, Icon } from '@/index';
 
@@ -61,10 +61,12 @@ const statusList = [
   {
     firstName: 'John',
     lastName: 'Doe',
+    presence: 'active' as AvatarData['presence'],
   },
   {
     firstName: 'Steven',
     lastName: 'Packton',
+    presence: 'active' as AvatarData['presence'],
     status: (
       <Tooltip position="top" tooltip="Verified">
         <Icon
@@ -95,6 +97,7 @@ const statusList = [
   {
     firstName: 'Monica',
     lastName: 'Geller',
+    presence: 'away' as AvatarData['presence'],
   },
   {
     firstName: 'Tom',
@@ -247,6 +250,15 @@ describe('AvatarGroup component', () => {
     expect(getByTestId('DesignSystem-AvatarGroup--Status-2')).toBeInTheDocument();
     expect(getByTestId('DesignSystem-AvatarGroup--Status-3')).toBeInTheDocument();
   });
+
+  it('renders avatars with presence', () => {
+    const { getAllByTestId } = render(<AvatarGroup list={statusList} max={5} />);
+    const avatars = getAllByTestId('DesignSystem-AvatarGroup--Avatar');
+
+    expect(avatars[0].querySelector('.Avatar-presence')).toBeInTheDocument();
+    expect(avatars[1].querySelector('.Avatar-presence')).toBeInTheDocument();
+    expect(avatars[3].querySelector('.Avatar-presence')).toBeInTheDocument();
+  });
 });
 
 describe('AvatarGroup Component with overwrite class', () => {