feat(avatar): add status indicator support in avatar

core/components/atoms/avatar/Avatar.tsx

@@ -8,6 +8,8 @@
 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 @@
    * Defines tabIndex of the `Avatar`
    */
   tabIndex?: number;
+  /**
+   * Show presence indicator for the `Avatar`
+   */
+  presence?: TPresence;
 }
 
 const initialsLength = 2;
@@ -77,6 +83,7 @@
     disabled,
     tooltipSuffix,
     tabIndex,
+    presence,
     role = 'presentation',
   } = props;
 
@@ -127,6 +134,18 @@
     ['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 statusHintClassName = classNames({
+    ['Avatar-statusHint']: true,
+    ['d-none']: shape !== 'round' || size !== 'regular',
+  });
+
   const sharedProp = {
     size,
     firstName,
@@ -180,17 +199,23 @@
     );
   };
 
-  const renderTooltip = () => {
-    if (withTooltip && initials) {
-      return (
-        <Tooltip tooltip={getTooltipName()} position={tooltipPosition} triggerClass={'flex-grow-0'}>
+  const renderTooltip = () => (
+    <span className="position-relative d-inline-flex">
+      {withTooltip && initials ? (
+        <Tooltip tooltip={getTooltipName()} position={tooltipPosition} triggerClass="flex-grow-0">
           {renderAvatar()}
         </Tooltip>
-      );
-    }
-
-    return renderAvatar();
-  };
+      ) : (
+        renderAvatar()
+      )}
+      {presence && <span className={presenceClassNames} />}
+      <span className={statusHintClassName}>
+        <Tooltip tooltip='verified'>
+          <Icon name="done" size={12} appearance="white" type="rounded" className='bg-warning' />
+        </Tooltip>
+      </span>
+    </span>
+  );
 
   return renderTooltip();
 };

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

css/src/components/avatar.css

@@ -106,3 +106,35 @@
   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);
+}
+
+.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;
+}