Migrates avatar base to TypeScript

ui/components/component-library/avatar-base/README.mdx

@@ -39,13 +39,13 @@ The text styles of the `AvatarBase` is based on the `size` prop. To override thi
 </Canvas>
 
 ```jsx
-import { AVATAR_BASE_SIZES } from '../ui/component-library/avatar-base';
-import { AvatarBase } from '../../component-library';
-<AvatarBase size={AVATAR_BASE_SIZES.XS} />
-<AvatarBase size={AVATAR_BASE_SIZES.SM} />
-<AvatarBase size={AVATAR_BASE_SIZES.MD} />
-<AvatarBase size={AVATAR_BASE_SIZES.LG} />
-<AvatarBase size={AVATAR_BASE_SIZES.XL} />
+import { AvatarBaseSize } from '../ui/component-library/avatar-base/avatar-base.types';
+import { AvatarBase } from '../../component-library/avatar-base';
+<AvatarBase size={AvatarBaseSize.XS} />
+<AvatarBase size={AvatarBaseSize.SM} />
+<AvatarBase size={AvatarBaseSize.MD} />
+<AvatarBase size={AvatarBaseSize.LG} />
+<AvatarBase size={AvatarBaseSize.XL} />
 ```
 
 ### Children

ui/components/component-library/avatar-base/avatar-base.stories.js → ui/components/component-library/avatar-base/avatar-base.stories.tsx

@@ -1,19 +1,20 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';
 import {
   AlignItems,
   DISPLAY,
   TextColor,
   BackgroundColor,
   BorderColor,
-  Color,
+  IconColor,
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box/box';
 
 import { Icon, IconName } from '..';
 import README from './README.mdx';
 import { AvatarBase } from './avatar-base';
-import { AVATAR_BASE_SIZES } from './avatar-base.constants';
+import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types';
 
 const marginSizeKnobOptions = [
   0,
@@ -44,7 +45,7 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(AVATAR_BASE_SIZES),
+      options: Object.values(AvatarBaseSize),
     },
     color: {
       options: Object.values(TextColor),
@@ -85,29 +86,29 @@ export default {
     },
   },
   args: {
-    size: AVATAR_BASE_SIZES.MD,
+    size: AvatarBaseSize.Md,
     color: TextColor.textDefault,
     backgroundColor: BackgroundColor.backgroundAlternative,
     borderColor: BorderColor.borderDefault,
     children: 'B',
   },
-};
+} as ComponentMeta<typeof AvatarBase>;
 
-export const DefaultStory = (args) => <AvatarBase {...args} />;
+export const DefaultStory = (args: AvatarBaseProps) => <AvatarBase {...args} />;
 
 DefaultStory.storyName = 'Default';
 
-export const Size = (args) => (
+export const Size = (args: AvatarBaseProps) => (
   <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
-    <AvatarBase {...args} size={AVATAR_BASE_SIZES.XS} />
-    <AvatarBase {...args} size={AVATAR_BASE_SIZES.SM} />
-    <AvatarBase {...args} size={AVATAR_BASE_SIZES.MD} />
-    <AvatarBase {...args} size={AVATAR_BASE_SIZES.LG} />
-    <AvatarBase {...args} size={AVATAR_BASE_SIZES.XL} />
+    <AvatarBase {...args} size={AvatarBaseSize.Xs} />
+    <AvatarBase {...args} size={AvatarBaseSize.Sm} />
+    <AvatarBase {...args} size={AvatarBaseSize.Md} />
+    <AvatarBase {...args} size={AvatarBaseSize.Lg} />
+    <AvatarBase {...args} size={AvatarBaseSize.Xl} />
   </Box>
 );
 
-export const Children = (args) => (
+export const Children = (args: AvatarBaseProps) => (
   <Box display={DISPLAY.FLEX} gap={1}>
     <AvatarBase {...args}>
       <img src="./images/eth_logo.png" />
@@ -124,12 +125,12 @@ export const Children = (args) => (
       backgroundColor={BackgroundColor.infoMuted}
       borderColor={BorderColor.infoMuted}
     >
-      <Icon name={IconName.User} color={Color.infoDefault} />
+      <Icon name={IconName.User} color={IconColor.infoDefault} />
     </AvatarBase>
   </Box>
 );
 
-export const ColorBackgroundColorAndBorderColor = (args) => (
+export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => (
   <Box display={DISPLAY.FLEX} gap={1}>
     <AvatarBase {...args}>B</AvatarBase>
     <AvatarBase

ui/components/component-library/avatar-base/avatar-base.test.js → ui/components/component-library/avatar-base/avatar-base.test.tsx

@@ -2,9 +2,15 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { Color, TextColor } from '../../../helpers/constants/design-system';
+import {
+  BackgroundColor,
+  BorderColor,
+  Color,
+  TextColor,
+} from '../../../helpers/constants/design-system';
 
 import { AvatarBase } from './avatar-base';
+import { AvatarBaseSize } from './avatar-base.types';
 
 describe('AvatarBase', () => {
   it('should render correctly', () => {
@@ -17,11 +23,11 @@ describe('AvatarBase', () => {
   it('should render with different size classes', () => {
     const { getByTestId } = render(
       <>
-        <AvatarBase size="xs" data-testid="avatar-base-xs" />
-        <AvatarBase size="sm" data-testid="avatar-base-sm" />
-        <AvatarBase size="md" data-testid="avatar-base-md" />
-        <AvatarBase size="lg" data-testid="avatar-base-lg" />
-        <AvatarBase size="xl" data-testid="avatar-base-xl" />
+        <AvatarBase size={AvatarBaseSize.Xs} data-testid="avatar-base-xs" />
+        <AvatarBase size={AvatarBaseSize.Sm} data-testid="avatar-base-sm" />
+        <AvatarBase size={AvatarBaseSize.Md} data-testid="avatar-base-md" />
+        <AvatarBase size={AvatarBaseSize.Lg} data-testid="avatar-base-lg" />
+        <AvatarBase size={AvatarBaseSize.Xl} data-testid="avatar-base-xl" />
       </>,
     );
     expect(getByTestId('avatar-base-xs')).toHaveClass(
@@ -84,11 +90,11 @@ describe('AvatarBase', () => {
     const { getByTestId } = render(
       <>
         <AvatarBase
-          backgroundColor={TextColor.successDefault}
+          backgroundColor={BackgroundColor.successDefault}
           data-testid={Color.successDefault}
         />
         <AvatarBase
-          backgroundColor={TextColor.errorDefault}
+          backgroundColor={BackgroundColor.errorDefault}
           data-testid={Color.errorDefault}
         />
       </>,
@@ -105,11 +111,11 @@ describe('AvatarBase', () => {
     const { getByTestId } = render(
       <>
         <AvatarBase
-          borderColor={Color.successDefault}
+          borderColor={BorderColor.successDefault}
           data-testid={Color.successDefault}
         />
         <AvatarBase
-          borderColor={Color.errorDefault}
+          borderColor={BorderColor.errorDefault}
           data-testid={Color.errorDefault}
         />
       </>,

ui/components/component-library/avatar-base/avatar-base.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef, Ref } from 'react';
+import classnames from 'classnames';
+
+import {
+  BackgroundColor,
+  BorderColor,
+  TextColor,
+  DISPLAY,
+  JustifyContent,
+  AlignItems,
+  BorderRadius,
+  TextVariant,
+  TextTransform,
+} from '../../../helpers/constants/design-system';
+
+import { Text, ValidTag } from '../text';
+
+import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types';
+
+export const AvatarBase = forwardRef(
+  (
+    {
+      size = AvatarBaseSize.Md,
+      children,
+      backgroundColor = BackgroundColor.backgroundAlternative,
+      borderColor = BorderColor.borderDefault,
+      color = TextColor.textDefault,
+      className = '',
+      ...props
+    }: AvatarBaseProps,
+    ref: Ref<HTMLElement>,
+  ) => {
+    let fallbackTextVariant;
+
+    if (size === AvatarBaseSize.Lg || size === AvatarBaseSize.Xl) {
+      fallbackTextVariant = TextVariant.bodyLgMedium;
+    } else if (size === AvatarBaseSize.Sm || size === AvatarBaseSize.Md) {
+      fallbackTextVariant = TextVariant.bodySm;
+    } else {
+      fallbackTextVariant = TextVariant.bodyXs;
+    }
+    return (
+      <Text
+        className={classnames(
+          'mm-avatar-base',
+          `mm-avatar-base--size-${size}`,
+          className,
+        )}
+        ref={ref}
+        as={ValidTag.Div}
+        display={DISPLAY.FLEX}
+        justifyContent={JustifyContent.center}
+        alignItems={AlignItems.center}
+        borderRadius={BorderRadius.full}
+        variant={fallbackTextVariant}
+        textTransform={TextTransform.Uppercase}
+        {...{ backgroundColor, borderColor, color, ...props }}
+      >
+        {children}
+      </Text>
+    );
+  },
+);

ui/components/component-library/avatar-base/avatar-base.types.ts

@@ -0,0 +1,47 @@
+import {
+  BackgroundColor,
+  BorderColor,
+  TextColor,
+} from '../../../helpers/constants/design-system';
+import { TextProps } from '../text';
+
+export enum AvatarBaseSize {
+  Xs = 'xs',
+  Sm = 'sm',
+  Md = 'md',
+  Lg = 'lg',
+  Xl = 'xl',
+}
+
+export interface AvatarBaseProps extends TextProps {
+  /**
+   * The size of the AvatarBase.
+   * Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px),
+   * 'AvatarBaseSize.Md'(32px), 'AvatarBaseSize.Lg'(40px), 'AvatarBaseSize.Xl'(48px)
+   * Defaults to AvatarBaseSize.Md
+   */
+  size?: AvatarBaseSize;
+  /**
+   * The children to be rendered inside the AvatarBase
+   */
+  children: React.ReactNode;
+  /**
+   * The background color of the AvatarBase
+   * Defaults to Color.backgroundAlternative
+   */
+  backgroundColor?: BackgroundColor;
+  /**
+   * The background color of the AvatarBase
+   * Defaults to Color.borderDefault
+   */
+  borderColor?: BorderColor;
+  /**
+   * The color of the text inside the AvatarBase
+   * Defaults to TextColor.textDefault
+   */
+  color?: TextColor;
+  /**
+   * Additional classNames to be added to the AvatarBase
+   */
+  className?: string;
+}