Merge pull request #2066 from innovaccer/develop

Develop
innovaccer · Feb 8, 2024 · 93cbcdc · 93cbcdc
2 parents cbb59e4 + 2d6c31d
commit 93cbcdc
Show file tree

Hide file tree

Showing 37 changed files with 2,438 additions and 489 deletions.
diff --git a/core/common.type.tsx b/core/common.type.tsx
@@ -93,4 +93,6 @@ export type TextColor =
 
 export type AvatarSize = 'regular' | 'tiny';
 
+export type AvatarShape = 'round' | 'square';
+
 export type IconType = 'rounded' | 'outlined';
diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Text, Tooltip, Icon } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { TooltipProps } from '@/index.type';
-import { AccentAppearance, AvatarSize } from '@/common.type';
+import { AccentAppearance, AvatarSize, AvatarShape } from '@/common.type';
 import AvatarIcon from './avatarIcon';
 import AvatarImage from './avatarImage';
 import AvatarProvider from './AvatarProvider';
@@ -37,14 +37,18 @@ export interface AvatarProps extends BaseProps {
    * Determines size of `Avatar`
    */
   size: AvatarSize;
+  /**
+   * Determines the shape of `Avatar`
+   */
+  shape: AvatarShape;
 }
 
 const initialsLength = 2;
 const DefaultAppearance = 'secondary';
 const colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
 
 export const Avatar = (props: AvatarProps) => {
-  const { withTooltip, tooltipPosition, size, children, firstName, lastName, className, appearance } = props;
+  const { withTooltip, tooltipPosition, size, children, firstName, lastName, className, appearance, shape } = props;
 
   const baseProps = extractBaseProps(props);
 
@@ -61,13 +65,22 @@ export const Avatar = (props: AvatarProps) => {
   const AvatarClassNames = classNames(
     {
       Avatar: true,
-      [`Avatar--${size}`]: size,
+      ['Avatar--square']: shape === 'square',
+      [`Avatar--${size}`]: shape !== 'square',
       [`Avatar--${AvatarAppearance}`]: AvatarAppearance,
       ['Avatar--disabled']: !initials || !withTooltip,
     },
     className
   );
 
+  const AvatarWrapperClassNames = classNames(
+    {
+      ['Avatar--wrapper']: shape === 'square',
+      [`Avatar--${size}`]: shape === 'square',
+    },
+    className
+  );
+
   const TextClassNames = classNames({
     [`Avatar-content--${size}`]: size,
     [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance,
@@ -87,30 +100,34 @@ export const Avatar = (props: AvatarProps) => {
   const renderAvatar = () => {
     if (children && typeof children !== 'string') {
       return (
-        <AvatarProvider value={sharedProp}>
-          <span data-test="DesignSystem-Avatar" {...baseProps} className={AvatarClassNames}>
-            {children}
-          </span>
-        </AvatarProvider>
+        <span data-test="DesignSystem-AvatarWrapper" className={AvatarWrapperClassNames}>
+          <AvatarProvider value={sharedProp}>
+            <span data-test="DesignSystem-Avatar" {...baseProps} className={AvatarClassNames}>
+              {children}
+            </span>
+          </AvatarProvider>
+        </span>
       );
     }
 
     return (
-      <span data-test="DesignSystem-Avatar" {...baseProps} className={AvatarClassNames}>
-        {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}
-          />
-        )}
+      <span data-test="DesignSystem-AvatarWrapper" className={AvatarWrapperClassNames}>
+        <span data-test="DesignSystem-Avatar" {...baseProps} className={AvatarClassNames}>
+          {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}
+            />
+          )}
+        </span>
       </span>
     );
   };
@@ -139,6 +156,7 @@ Avatar.defaultProps = {
   tooltipPosition: 'bottom',
   withTooltip: true,
   size: 'regular',
+  shape: 'round',
 };
 
 export default Avatar;
diff --git a/core/components/atoms/avatar/__stories__/variants/Shape.story.jsx b/core/components/atoms/avatar/__stories__/variants/Shape.story.jsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Avatar } from '@/index';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const shape = () => {
+  const weight = 'strong';
+
+  return (
+    <div className="d-flex">
+      <div className="mr-9 d-flex flex-column">
+        <Text weight={weight}>Round</Text> <br />
+        <Avatar appearance="accent2" firstName="John" lastName="Doe" />
+      </div>
+      <div className="mr-9  d-flex flex-column">
+        <Text weight={weight}>Square</Text> <br />
+        <Avatar appearance="accent2" firstName="John" lastName="Doe" shape="square" />
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Indicators/Avatar/Variants/Shape',
+  component: Avatar,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Avatar',
+      },
+    },
+  },
+};
diff --git a/core/components/atoms/avatar/__stories__/variants/Size.story.jsx b/core/components/atoms/avatar/__stories__/variants/Size.story.jsx
@@ -16,6 +16,14 @@ export const size = () => {
         <Text weight={weight}>Tiny</Text> <br />
         <Avatar firstName="John" lastName="Doe" size="tiny" />
       </div>
+      <div className="mr-9 d-flex flex-column">
+        <Text weight={weight}>Regular</Text> <br />
+        <Avatar appearance="accent4" firstName="John" lastName="Doe" shape="square" />
+      </div>
+      <div className="mr-9  d-flex flex-column">
+        <Text weight={weight}>Tiny</Text> <br />
+        <Avatar appearance="accent4" firstName="John" lastName="Doe" size="tiny" shape="square" />
+      </div>
     </div>
   );
 };

diff --git a/core/components/atoms/avatar/__stories__/withIcon.story.jsx b/core/components/atoms/avatar/__stories__/withIcon.story.jsx
@@ -16,7 +16,7 @@ export const withIcon = () => {
   };
 
   return (
-    <Avatar {...options}>
+    <Avatar {...options} shape="square">
       <Avatar.Icon name="smart_toy" />
     </Avatar>
   );

diff --git a/core/components/atoms/avatar/__tests__/Avatar.test.tsx b/core/components/atoms/avatar/__tests__/Avatar.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import Avatar, { AvatarProps as Props } from '../Avatar';
-import { AccentAppearance, AvatarSize } from '@/common.type';
+import { AccentAppearance, AvatarShape, AvatarSize } from '@/common.type';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
 const appearances: AccentAppearance[] = [
@@ -17,6 +17,8 @@ const appearances: AccentAppearance[] = [
 
 const sizes: AvatarSize[] = ['regular', 'tiny'];
 
+const shapes: AvatarShape[] = ['round', 'square'];
+
 describe('Avatar component', () => {
   const mapper = {
     appearance: valueHelper(appearances, { required: true, iterate: true }),
@@ -51,6 +53,23 @@ describe('Avatar component', () => {
   testHelper(mapper, testFunc);
 });
 
+describe('Avatar component', () => {
+  const mapper = {
+    shape: valueHelper(shapes, { required: true, iterate: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const tree = render(<Avatar {...attr}>JD</Avatar>);
+      expect(tree).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
 describe('Avatar component', () => {
   it('renders initials when firstName,lastName,children are given', () => {
     const { getByTestId } = render(
@@ -121,3 +140,33 @@ describe('Avatar component with prop:size', () => {
     expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--tiny');
   });
 });
+
+describe('Avatar component with prop:shape', () => {
+  it('should have the Avatar-square class when shape is square', () => {
+    const { getByTestId } = render(<Avatar shape="square">Design</Avatar>);
+    expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--square');
+  });
+
+  it('should have the Avatar class when shape is round', () => {
+    const { getByTestId } = render(<Avatar shape="round">Design</Avatar>);
+    expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar');
+  });
+
+  it('should have the Avatar--tiny class when shape is square', () => {
+    const { getByTestId } = render(
+      <Avatar shape="square" size={'tiny'}>
+        Design
+      </Avatar>
+    );
+    expect(getByTestId('DesignSystem-AvatarWrapper')).toHaveClass('Avatar--tiny');
+  });
+
+  it('should have the Avatar--tiny class when shape is round', () => {
+    const { getByTestId } = render(
+      <Avatar shape="round" size={'tiny'}>
+        Design
+      </Avatar>
+    );
+    expect(getByTestId('DesignSystem-Avatar')).toHaveClass('Avatar--tiny');
+  });
+});