From 958c51cdde7aafd81e09f74b4d357328ba747104 Mon Sep 17 00:00:00 2001
From: anuradha9712 <anuradha.mcs18.du@gmail.com>
Date: Wed, 27 Nov 2024 14:46:24 +0400
Subject: [PATCH 1/4] feat(avatar): add presence indicator support in avatar
 component

---
 core/components/atoms/avatar/Avatar.tsx       | 31 +++++++++++++---
 .../__stories__/variants/Presence.story.jsx   | 36 +++++++++++++++++++
 css/src/components/avatar.css                 | 18 ++++++++++
 3 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 core/components/atoms/avatar/__stories__/variants/Presence.story.jsx

diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
index 5e4e54fd61..447c91d55e 100644
--- a/core/components/atoms/avatar/Avatar.tsx
+++ b/core/components/atoms/avatar/Avatar.tsx
@@ -8,6 +8,8 @@ import AvatarIcon from './avatarIcon';
 import AvatarImage from './avatarImage';
 import AvatarProvider from './AvatarProvider';
 
+type TPresence = 'active' | 'away';
+
 export interface AvatarProps extends BaseProps {
   /**
    * Color of the `Avatar`
@@ -57,6 +59,10 @@ export interface AvatarProps extends BaseProps {
    * Defines tabIndex of the `Avatar`
    */
   tabIndex?: number;
+  /**
+   * Show presence indicator for the `Avatar`
+   */
+  presence?: TPresence;
 }
 
 const initialsLength = 2;
@@ -77,6 +83,7 @@ export const Avatar = (props: AvatarProps) => {
     disabled,
     tooltipSuffix,
     tabIndex,
+    presence,
     role = 'presentation',
   } = props;
 
@@ -127,6 +134,13 @@ export const Avatar = (props: AvatarProps) => {
     ['Avatar-content']: darkAppearance.includes(AvatarAppearance),
   });
 
+  const presenceClassNames = classNames({
+    ['Avatar-presence']: presence,
+    ['d-none']: shape !== 'round' || disabled,
+    ['Avatar-presence--active']: presence === 'active',
+    ['Avatar-presence--away']: presence === 'away',
+  });
+
   const sharedProp = {
     size,
     firstName,
@@ -183,13 +197,22 @@ export const Avatar = (props: AvatarProps) => {
   const renderTooltip = () => {
     if (withTooltip && initials) {
       return (
-        <Tooltip tooltip={getTooltipName()} position={tooltipPosition} triggerClass={'flex-grow-0'}>
-          {renderAvatar()}
-        </Tooltip>
+        <span className="position-relative d-inline-flex">
+          <Tooltip tooltip={getTooltipName()} position={tooltipPosition} triggerClass={'flex-grow-0'}>
+            {renderAvatar()}
+          </Tooltip>
+
+          {presence && <span className={presenceClassNames} />}
+        </span>
       );
     }
 
-    return renderAvatar();
+    return (
+      <span className="position-relative d-inline-flex">
+        {renderAvatar()}
+        {presence && <span className={presenceClassNames} />}
+      </span>
+    );
   };
 
   return renderTooltip();
diff --git a/core/components/atoms/avatar/__stories__/variants/Presence.story.jsx b/core/components/atoms/avatar/__stories__/variants/Presence.story.jsx
new file mode 100644
index 0000000000..e4f9738764
--- /dev/null
+++ b/core/components/atoms/avatar/__stories__/variants/Presence.story.jsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Avatar, Row, Column, Text } from '@/index';
+
+// CSF format story
+export const presence = () => {
+  const weight = 'strong';
+
+  return (
+    <Row className="w-50">
+      <Column>
+        <Text weight={weight}>Active</Text>
+        <br />
+        <br />
+        <Avatar firstName="John" lastName="Doe" presence="active" />
+      </Column>
+      <Column>
+        <Text weight={weight}>Away</Text>
+        <br />
+        <br />
+        <Avatar firstName="John" lastName="Doe" presence="away" />
+      </Column>
+    </Row>
+  );
+};
+
+export default {
+  title: 'Components/Avatar/Avatar/Variants/Presence',
+  component: Avatar,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Avatar',
+      },
+    },
+  },
+};
diff --git a/css/src/components/avatar.css b/css/src/components/avatar.css
index 2974338f51..5d937c5e81 100644
--- a/css/src/components/avatar.css
+++ b/css/src/components/avatar.css
@@ -106,3 +106,21 @@
   opacity: var(--opacity-20);
   mix-blend-mode: multiply;
 }
+
+.Avatar-presence {
+  position: absolute;
+  border-radius: 50%;
+  width: var(--spacing);
+  height: var(--spacing);
+  box-shadow: 0 0 0 var(--spacing-s) var(--white);
+  right: 0;
+  bottom: 0;
+}
+
+.Avatar-presence--active {
+  background: var(--success);
+}
+
+.Avatar-presence--away {
+  background: var(--secondary-dark);
+}

From a99d8cdbedaafa63d6cbeeeea668575b93d0b674 Mon Sep 17 00:00:00 2001
From: anuradha9712 <anuradha.mcs18.du@gmail.com>
Date: Wed, 27 Nov 2024 18:43:46 +0400
Subject: [PATCH 2/4] feat(avatar): add presence indicator support in avatar
 component

---
 core/components/atoms/avatar/Avatar.tsx | 32 ++++++++++---------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
index 447c91d55e..a4b8112694 100644
--- a/core/components/atoms/avatar/Avatar.tsx
+++ b/core/components/atoms/avatar/Avatar.tsx
@@ -194,26 +194,18 @@ export const Avatar = (props: AvatarProps) => {
     );
   };
 
-  const renderTooltip = () => {
-    if (withTooltip && initials) {
-      return (
-        <span className="position-relative d-inline-flex">
-          <Tooltip tooltip={getTooltipName()} position={tooltipPosition} triggerClass={'flex-grow-0'}>
-            {renderAvatar()}
-          </Tooltip>
-
-          {presence && <span className={presenceClassNames} />}
-        </span>
-      );
-    }
-
-    return (
-      <span className="position-relative d-inline-flex">
-        {renderAvatar()}
-        {presence && <span className={presenceClassNames} />}
-      </span>
-    );
-  };
+  const renderTooltip = () => (
+    <span className="position-relative d-inline-flex">
+      {withTooltip && initials ? (
+        <Tooltip tooltip={getTooltipName()} position={tooltipPosition} triggerClass="flex-grow-0">
+          {renderAvatar()}
+        </Tooltip>
+      ) : (
+        renderAvatar()
+      )}
+      {presence && <span className={presenceClassNames} />}
+    </span>
+  );
 
   return renderTooltip();
 };

From 9d072e5d619fc01f9972f02745e163dcea0a9ded Mon Sep 17 00:00:00 2001
From: anuradha9712 <anuradha.mcs18.du@gmail.com>
Date: Thu, 28 Nov 2024 12:55:16 +0400
Subject: [PATCH 3/4] feat(avatar): add status indicator support in avatar

---
 core/components/atoms/avatar/Avatar.tsx |  8 ++++++++
 css/src/components/avatar.css           | 14 ++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
index a4b8112694..7306dba06b 100644
--- a/core/components/atoms/avatar/Avatar.tsx
+++ b/core/components/atoms/avatar/Avatar.tsx
@@ -141,6 +141,11 @@ export const Avatar = (props: AvatarProps) => {
     ['Avatar-presence--away']: presence === 'away',
   });
 
+  const statusHintClassName = classNames({
+    ['Avatar-statusHint']: true,
+    ['d-none']: shape !== 'round' || size !== 'regular',
+  });
+
   const sharedProp = {
     size,
     firstName,
@@ -204,6 +209,9 @@ export const Avatar = (props: AvatarProps) => {
         renderAvatar()
       )}
       {presence && <span className={presenceClassNames} />}
+      <span className={statusHintClassName}>
+        <Icon name="done" size={12} appearance="white" type="rounded" />
+      </span>
     </span>
   );
 
diff --git a/css/src/components/avatar.css b/css/src/components/avatar.css
index 5d937c5e81..6825f4d5cb 100644
--- a/css/src/components/avatar.css
+++ b/css/src/components/avatar.css
@@ -124,3 +124,17 @@
 .Avatar-presence--away {
   background: var(--secondary-dark);
 }
+
+.Avatar-statusHint {
+  top: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px red;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: green;
+  position: absolute;
+}

From 56e0f79be44e9942f237aff16c895141bd5c9b19 Mon Sep 17 00:00:00 2001
From: anuradha9712 <anuradha.mcs18.du@gmail.com>
Date: Fri, 29 Nov 2024 11:02:40 +0400
Subject: [PATCH 4/4] feat(avatar): add status indicator support in avatar

---
 core/components/atoms/avatar/Avatar.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
index 7306dba06b..348ee055a2 100644
--- a/core/components/atoms/avatar/Avatar.tsx
+++ b/core/components/atoms/avatar/Avatar.tsx
@@ -210,7 +210,9 @@ export const Avatar = (props: AvatarProps) => {
       )}
       {presence && <span className={presenceClassNames} />}
       <span className={statusHintClassName}>
-        <Icon name="done" size={12} appearance="white" type="rounded" />
+        <Tooltip tooltip='verified'>
+          <Icon name="done" size={12} appearance="white" type="rounded" className='bg-warning' />
+        </Tooltip>
       </span>
     </span>
   );