Merge pull request #2684 from innovaccer/develop

Develop

Author: veekays

core/common.type.tsx

@@ -91,7 +91,7 @@ export type TextColor =
   | 'accent4-shadow'
   | 'inverse-shadow';
 
-export type AvatarSize = 'regular' | 'tiny';
+export type AvatarSize = 'regular' | 'tiny' | 'micro';
 
 export type AvatarShape = 'round' | 'square';
 

core/components/atoms/avatar/Avatar.tsx

@@ -7,7 +7,9 @@ import { AccentAppearance, AvatarSize, AvatarShape } from '@/common.type';
 import AvatarIcon from './avatarIcon';
 import AvatarImage from './avatarImage';
 import AvatarProvider from './AvatarProvider';
+import { iconAppearanceMapper } from './constants';
 import styles from '@css/components/avatar.module.css';
+import { IconAppearance } from 'types';
 
 type TPresence = 'active' | 'away';
 
@@ -117,8 +119,9 @@ export const Avatar = (props: AvatarProps) => {
     appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
 
   const darkAppearance = ['secondary', 'success', 'warning', 'accent1', 'accent4'];
-  const showPresence = presence && !disabled && shape === 'round' && (presence === 'active' || presence === 'away');
-  const showStatus = status && size === 'regular' && shape === 'round';
+  const showPresence =
+    presence && !disabled && size !== 'micro' && shape === 'round' && (presence === 'active' || presence === 'away');
+  const showStatus = status && size !== 'micro' && size === 'regular' && shape === 'round';
 
   const AvatarClassNames = classNames(
     {
@@ -140,11 +143,7 @@ export const Avatar = (props: AvatarProps) => {
 
   const TextClassNames = classNames({
     [styles[`Avatar-content--${size}`]]: size,
-    [styles['Avatar-content']]: darkAppearance.includes(AvatarAppearance),
-  });
-
-  const IconClassNames = classNames({
-    [styles['Avatar-content']]: darkAppearance.includes(AvatarAppearance),
+    [styles[`Avatar-content--${AvatarAppearance}`]]: AvatarAppearance,
   });
 
   const presenceClassNames = classNames({
@@ -165,6 +164,19 @@ export const Avatar = (props: AvatarProps) => {
     darkAppearance,
   };
 
+  const renderFallbackIcon = () => {
+    const iconName = shape === 'square' ? 'groups' : 'person';
+    const iconAppearance = iconAppearanceMapper[AvatarAppearance] || 'inverse';
+    return (
+      <Icon
+        data-test="DesignSystem-Avatar--Icon"
+        name={iconName}
+        size={size === 'regular' ? 20 : 16}
+        appearance={iconAppearance as IconAppearance}
+      />
+    );
+  };
+
   const renderAvatar = () => {
     if (children && typeof children !== 'string') {
       return (
@@ -191,20 +203,14 @@ export const Avatar = (props: AvatarProps) => {
           className={AvatarClassNames}
           tabIndex={tabIndex || disabled ? -1 : 0}
         >
-          {initials && (
-            <Text weight="medium" appearance={'white'} className={TextClassNames}>
-              {initials}
-            </Text>
-          )}
-          {!initials && (
-            <Icon
-              data-test="DesignSystem-Avatar--Icon"
-              name="person"
-              size={size === 'regular' ? 20 : 16}
-              appearance={'white'}
-              className={IconClassNames}
-            />
-          )}
+          <>
+            {initials && (
+              <Text weight="medium" className={TextClassNames}>
+                {initials}
+              </Text>
+            )}
+            {!initials && renderFallbackIcon()}
+          </>
         </span>
       </span>
     );

core/components/atoms/avatar/__stories__/variants/Size.story.jsx

@@ -20,6 +20,13 @@ export const size = () => {
             <Avatar appearance="accent4" firstName="John" lastName="Doe" shape="square" size="tiny" />
           </div>
         </Column>
+        <Column>
+          <Text weight="strong">Micro</Text>
+          <div className="d-flex mt-7">
+            <Avatar firstName="John" lastName="Doe" size="micro" className="mr-8" />
+            <Avatar appearance="accent4" firstName="John" lastName="Doe" shape="square" size="micro" />
+          </div>
+        </Column>
       </Row>
     </div>
   );

core/components/atoms/avatar/__tests__/Avatar.test.tsx

@@ -15,7 +15,7 @@ const appearances: AccentAppearance[] = [
   'accent4',
 ];
 
-const sizes: AvatarSize[] = ['regular', 'tiny'];
+const sizes: AvatarSize[] = ['regular', 'tiny', 'micro'];
 
 const shapes: AvatarShape[] = ['round', 'square'];
 const booleanValues = [true, false];
@@ -134,14 +134,14 @@ describe('Avatar component with prop:appearance', () => {
 });
 
 describe('Avatar component accessibility', () => {
-  it('should have the Avatar-content class when appearance is secondary', () => {
+  it('should have the Avatar-content--secondary class when appearance is secondary', () => {
     const { getByTestId } = render(<Avatar appearance="secondary">Design</Avatar>);
-    expect(getByTestId('DesignSystem-Text')).toHaveClass('Avatar-content');
+    expect(getByTestId('DesignSystem-Text')).toHaveClass('Avatar-content--secondary');
   });
 
-  it('should not have the Avatar-content class when appearance is primary', () => {
+  it('should have the Avatar-content--primary class when appearance is primary', () => {
     const { getByTestId } = render(<Avatar appearance="primary">Design</Avatar>);
-    expect(getByTestId('DesignSystem-Text')).not.toHaveClass('Avatar-content');
+    expect(getByTestId('DesignSystem-Text')).toHaveClass('Avatar-content--primary');
   });
 });
 
@@ -316,3 +316,94 @@ describe('Avatar component with prop:status', () => {
     expect(statusElement).toHaveStyle('box-shadow: 0 0 0 var(--spacing-05) red');
   });
 });
+
+describe('Avatar component with prop:shape square fallback icon', () => {
+  it('should render groups icon when shape is square and no initials', () => {
+    const { getByTestId } = render(<Avatar shape="square" />);
+    const icon = getByTestId('DesignSystem-Avatar--Icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon.textContent).toBe('groups');
+  });
+
+  it('should render person icon when shape is round and no initials', () => {
+    const { getByTestId } = render(<Avatar shape="round" />);
+    const icon = getByTestId('DesignSystem-Avatar--Icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon.textContent).toBe('person');
+  });
+
+  it('should render initials when shape is square and initials are provided', () => {
+    const { getByTestId, queryByTestId } = render(<Avatar shape="square" firstName="John" lastName="Doe" />);
+    expect(getByTestId('DesignSystem-Avatar').textContent).toMatch('JD');
+    expect(queryByTestId('DesignSystem-Avatar--Icon')).not.toBeInTheDocument();
+  });
+});
+
+describe('Avatar component with prop:size micro and presence/status', () => {
+  it('should not render presence when size is micro', () => {
+    render(<Avatar firstName="John" lastName="Doe" presence="active" size="micro" />);
+    const presenceEle = screen.queryByTestId('DesignSystem-Avatar--Presence');
+    expect(presenceEle).not.toBeInTheDocument();
+  });
+
+  it('should not render status when size is micro', () => {
+    render(
+      <Avatar firstName="John" lastName="Doe" status={statusComponent} size="micro">
+        Design
+      </Avatar>
+    );
+    const statusElement = screen.queryByTestId('DesignSystem-Avatar--Status');
+    expect(statusElement).not.toBeInTheDocument();
+  });
+
+  it('should render presence when size is regular', () => {
+    const { getByTestId } = render(<Avatar firstName="John" lastName="Doe" presence="active" size="regular" />);
+    const presenceEle = getByTestId('DesignSystem-Avatar--Presence');
+    expect(presenceEle).toBeInTheDocument();
+  });
+
+  it('should render status when size is regular', () => {
+    const { getByTestId } = render(
+      <Avatar status={statusComponent} size="regular">
+        Design
+      </Avatar>
+    );
+    const statusElement = getByTestId('DesignSystem-Avatar--Status');
+    expect(statusElement).toBeInTheDocument();
+  });
+});
+
+describe('Avatar component with Avatar.Image child and appearance', () => {
+  it('should apply appearance background when Avatar.Image is child', () => {
+    const { getByTestId } = render(
+      <Avatar appearance="primary" firstName="John" lastName="Doe">
+        <Avatar.Image src="https://design.innovaccer.com/images/avatar2.jpeg" />
+      </Avatar>
+    );
+    const avatarElement = getByTestId('DesignSystem-Avatar');
+    expect(avatarElement).toHaveClass('Avatar--primary');
+  });
+
+  it('should apply appearance background when Avatar.Icon is child', () => {
+    const { getByTestId } = render(
+      <Avatar appearance="primary" firstName="John" lastName="Doe">
+        <Avatar.Icon name="person" />
+      </Avatar>
+    );
+    const avatarElement = getByTestId('DesignSystem-Avatar');
+    expect(avatarElement).toHaveClass('Avatar--primary');
+  });
+
+  it('should apply appearance background when only initials are provided', () => {
+    const { getByTestId } = render(<Avatar appearance="primary" firstName="John" lastName="Doe" />);
+    const avatarElement = getByTestId('DesignSystem-Avatar');
+    expect(avatarElement).toHaveClass('Avatar--primary');
+  });
+});
+
+describe('Avatar component with prop:size micro', () => {
+  it('should have the Avatar--micro class when size is micro', () => {
+    const { getByTestId } = render(<Avatar size="micro">Design</Avatar>);
+    expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--micro');
+  });
+});