Merge pull request #2360 from innovaccer/develop

Develop
innovaccer · Oct 1, 2024 · 1820bb5 · 1820bb5
2 parents 7975d7e + 785c237
commit 1820bb5
Show file tree

Hide file tree

Showing 71 changed files with 836 additions and 275 deletions.
diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
@@ -98,6 +98,8 @@ export const Avatar = (props: AvatarProps) => {
   const AvatarAppearance =
     appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
 
+  const darkAppearance = ['secondary', 'success', 'warning', 'accent1', 'accent4'];
+
   const AvatarClassNames = classNames(
     {
       Avatar: true,
@@ -118,18 +120,19 @@ export const Avatar = (props: AvatarProps) => {
 
   const TextClassNames = classNames({
     [`Avatar-content--${size}`]: size,
-    [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance,
+    ['Avatar-content']: darkAppearance.includes(AvatarAppearance),
   });
 
   const IconClassNames = classNames({
-    [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance,
+    ['Avatar-content']: darkAppearance.includes(AvatarAppearance),
   });
 
   const sharedProp = {
     size,
     firstName,
     lastName,
     appearance: AvatarAppearance,
+    darkAppearance,
   };
 
   const renderAvatar = () => {

diff --git a/core/components/atoms/avatar/AvatarProvider.tsx b/core/components/atoms/avatar/AvatarProvider.tsx
@@ -5,13 +5,15 @@ type ContextProps = {
   appearance?: string;
   firstName?: string;
   lastName?: string;
+  darkAppearance: string[];
 };
 
 export const AvatarContext = React.createContext<ContextProps>({
   size: 'regular',
   appearance: 'secondary',
   firstName: '',
   lastName: '',
+  darkAppearance: [],
 });
 
 export default AvatarContext.Provider;
diff --git a/core/components/atoms/avatar/__tests__/Avatar.test.tsx b/core/components/atoms/avatar/__tests__/Avatar.test.tsx
@@ -131,6 +131,18 @@ describe('Avatar component with prop:appearance', () => {
   });
 });
 
+describe('Avatar component accessibility', () => {
+  it('should have the Avatar-content class when appearance is secondary', () => {
+    const { getByTestId } = render(<Avatar appearance="secondary">Design</Avatar>);
+    expect(getByTestId('DesignSystem-Text')).toHaveClass('Avatar-content');
+  });
+
+  it('should not have the Avatar-content class when appearance is primary', () => {
+    const { getByTestId } = render(<Avatar appearance="primary">Design</Avatar>);
+    expect(getByTestId('DesignSystem-Text')).not.toHaveClass('Avatar-content');
+  });
+});
+
 describe('Avatar component with prop:size', () => {
   it('should have the Avatar--regular class when size is regular', () => {
     const { getByTestId } = render(<Avatar>Design</Avatar>);