Fix/18885 migrate avatar token (#19080)

* Migrate AvatarToken
---------

Co-authored-by: garrettbear <gwhisten@gmail.com>

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

@@ -13,7 +13,7 @@ export enum AvatarNetworkSize {
  * Props for the AvatarNetwork component
  */
 export interface AvatarNetworkStyleUtilityProps
-  extends Omit<AvatarBaseStyleUtilityProps, 'size'> {
+  extends Omit<AvatarBaseStyleUtilityProps, 'size' | 'children'> {
   /**
    * The name accepts the string to render the first alphabet of the Avatar Name
    */

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

@@ -12,23 +12,23 @@ The `AvatarToken` is a component responsible for display of the image of a given
 
 ## Props
 
-The `AvatarToken` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `AvatarToken` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
 
 <ArgsTable of={AvatarToken} />
 
 ### Size
 
-Use the `size` prop to set the size of the `AvatarToken`.
+Use the `size` prop and the `AvatarTokenSize` enum to change the size of `AvatarToken`. Defaults to `IconSize.Sm`
 
 Possible sizes include:
 
-- `xs` 16px
+- `AvatarTokenSize.Xs` 16px
-- `sm` 24px
+- `AvatarTokenSize.Sm` 24px
-- `md` 32px
+- `AvatarTokenSize.Md` 32px
-- `lg` 40px
+- `AvatarTokenSize.Lg` 40px
-- `xl` 48px
+- `AvatarTokenSize.Xl` 48px
 
-Defaults to `md`
+Defaults to `AvatarTokenSize.Md`
 
 The fallback display of the `AvatarToken` is a circle with the initial letter of the network name. The size of the initial letter is calculated based on the size of the `AvatarToken` component.
 
@@ -37,13 +37,13 @@ The fallback display of the `AvatarToken` is a circle with the initial letter of
 </Canvas>
 
 ```jsx
-import { AvatarToken } from '../../component-library';
+import { AvatarToken, AvatarTokenSize } from '../../component-library';
 
-<AvatarToken size={Size.XS} />
+<AvatarToken size={AvatarTokenSize.Xs} />
-<AvatarToken size={Size.SM} />
+<AvatarToken size={AvatarTokenSize.Sm} />
-<AvatarToken size={Size.MD} />
+<AvatarToken size={AvatarTokenSize.Md} />
-<AvatarToken size={Size.LG} />
+<AvatarToken size={AvatarTokenSize.Lg} />
-<AvatarToken size={Size.XL} />
+<AvatarToken size={AvatarTokenSize.Xl} />
 ```
 
 ### Name
@@ -104,24 +104,22 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color
 </Canvas>
 
 ```jsx
-import {   TextColor,
+import { TextColor, BackgroundColor, BorderColor, } from '../../../helpers/constants/design-system';
-           BackgroundColor,
-           BorderColor, } from '../../../helpers/constants/design-system';
 import { AvatarToken } from '../../component-library';
 
 <AvatarToken
-      backgroundColor={BackgroundColor.goerli}
+    backgroundColor={BackgroundColor.goerli}
-      borderColor={BorderColor.goerli}
+    borderColor={BorderColor.goerli}
-      name="G"
+    name="G"
-      color={Color.primaryInverse}
+    color={Color.primaryInverse}
 >
   G
 </AvatarToken>
 <AvatarToken
-    backgroundColor={BackgroundColor.sepolia}
+  backgroundColor={BackgroundColor.sepolia}
-      borderColor={BorderColor.sepolia}
+  borderColor={BorderColor.sepolia}
-      name="S"
+  name="S"
-      color={Color.primaryInverse}
+  color={Color.primaryInverse}
 >
   S
 </AvatarToken>

ui/components/component-library/avatar-token/avatar-token.constants.js

@@ -1,9 +0,0 @@
-import { Size } from '../../../helpers/constants/design-system';
-
-export const AVATAR_TOKEN_SIZES = {
-  XS: Size.XS,
-  SM: Size.SM,
-  MD: Size.MD,
-  LG: Size.LG,
-  XL: Size.XL,
-};

ui/components/component-library/avatar-token/avatar-token.js

@@ -1,133 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import Box from '../../ui/box/box';
-import { AvatarBase } from '../avatar-base';
-import {
-  Size,
-  DISPLAY,
-  AlignItems,
-  JustifyContent,
-  TextColor,
-  BorderColor,
-  BackgroundColor,
-} from '../../../helpers/constants/design-system';
-import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
-
-export const AvatarToken = React.forwardRef(
-  (
-    {
-      size = Size.MD,
-      name,
-      src,
-      showHalo,
-      color = TextColor.textDefault,
-      backgroundColor = BackgroundColor.backgroundAlternative,
-      borderColor = BorderColor.transparent,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const [showFallback, setShowFallback] = useState(false);
-
-    useEffect(() => {
-      setShowFallback(!src);
-    }, [src]);
-
-    const handleOnError = () => {
-      setShowFallback(true);
-    };
-
-    const fallbackString = name && name[0] ? name[0] : '?';
-
-    return (
-      <AvatarBase
-        ref={ref}
-        size={size}
-        display={DISPLAY.FLEX}
-        alignItems={AlignItems.center}
-        justifyContent={JustifyContent.center}
-        className={classnames(
-          'mm-avatar-token',
-          showHalo && 'mm-avatar-token--with-halo',
-          className,
-        )}
-        {...{ backgroundColor, borderColor, color, ...props }}
-      >
-        {showFallback ? (
-          fallbackString
-        ) : (
-          <>
-            {showHalo && (
-              <img
-                src={src}
-                className={
-                  showHalo ? 'mm-avatar-token__token-image--blurred' : ''
-                }
-                aria-hidden="true"
-              />
-            )}
-            <img
-              className={
-                showHalo
-                  ? 'mm-avatar-token__token-image--size-reduced'
-                  : 'mm-avatar-token__token-image'
-              }
-              onError={handleOnError}
-              src={src}
-              alt={`${name} logo` || 'token logo'}
-            />
-          </>
-        )}
-      </AvatarBase>
-    );
-  },
-);
-
-AvatarToken.propTypes = {
-  /**
-   * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src
-   */
-  name: PropTypes.string,
-  /**
-   * The src accepts the string of the image to be rendered
-   */
-  src: PropTypes.string,
-  /**
-   * The showHalo accepts a boolean prop to render the image with halo effect
-   */
-  showHalo: PropTypes.bool,
-  /**
-   * The size of the AvatarToken.
-   * Possible values could be SIZES.XS(16px), SIZES.SM(24px), SIZES.MD(32px), SIZES.LG(40px), SIZES.XL(48px)
-   * Defaults to SIZES.MD
-   */
-  size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)),
-  /**
-   * The background color of the AvatarToken
-   * Defaults to Color.backgroundAlternative
-   */
-  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
-  /**
-   * The background color of the AvatarToken
-   * Defaults to Color.borderDefault
-   */
-  borderColor: PropTypes.oneOf(Object.values(BorderColor)),
-  /**
-   * The color of the text inside the AvatarToken
-   * Defaults to Color.textDefault
-   */
-  color: PropTypes.oneOf(Object.values(TextColor)),
-  /**
-   * Additional classNames to be added to the AvatarToken
-   */
-  className: PropTypes.string,
-  /**
-   * AvatarToken also accepts all Box props including but not limited to
-   * className, as(change root element of HTML element) and margin props
-   */
-  ...Box.propTypes,
-};
-
-AvatarToken.displayName = 'AvatarToken';

ui/components/component-library/avatar-token/avatar-token.stories.tsx

@@ -1,32 +1,26 @@
 import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
-  Size,
+  Display,
-  DISPLAY,
   AlignItems,
   TextColor,
   BackgroundColor,
   BorderColor,
 } from '../../../helpers/constants/design-system';
-
-import Box from '../../ui/box/box';
-
 import {
   AvatarNetwork,
   AvatarNetworkSize,
-  BUTTON_LINK_SIZES,
   BadgeWrapper,
+  Box,
   ButtonLink,
+  BUTTON_LINK_SIZES,
   Text,
 } from '..';
-
 import README from './README.mdx';
-
+import { AvatarToken, AvatarTokenSize } from '.';
-import { AvatarToken } from './avatar-token';
-import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarToken',
-
   component: AvatarToken,
   parameters: {
     docs: {
@@ -36,7 +30,7 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(AVATAR_TOKEN_SIZES),
+      options: Object.values(AvatarTokenSize),
     },
     color: {
       options: Object.values(TextColor),
@@ -63,43 +57,43 @@ export default {
   args: {
     name: 'eth',
     src: './images/eth_logo.png',
-    size: Size.MD,
+    size: AvatarTokenSize.Md,
     showHalo: false,
   },
-};
+} as Meta<typeof AvatarToken>;
 
-const Template = (args) => {
+const Template: StoryFn<typeof AvatarToken> = (args) => {
   return <AvatarToken {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const SizeStory = (args) => (
+export const SizeStory: StoryFn<typeof AvatarToken> = (args) => (
   <>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.baseline}
       gap={2}
       marginBottom={4}
     >
-      <AvatarToken {...args} size={Size.XS} />
+      <AvatarToken {...args} size={AvatarTokenSize.Xs} />
-      <AvatarToken {...args} size={Size.SM} />
+      <AvatarToken {...args} size={AvatarTokenSize.Sm} />
-      <AvatarToken {...args} size={Size.MD} />
+      <AvatarToken {...args} size={AvatarTokenSize.Md} />
-      <AvatarToken {...args} size={Size.LG} />
+      <AvatarToken {...args} size={AvatarTokenSize.Lg} />
-      <AvatarToken {...args} size={Size.XL} />
+      <AvatarToken {...args} size={AvatarTokenSize.Xl} />
     </Box>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexEnd}
       gap={2}
       marginBottom={4}
     >
-      <AvatarToken {...args} src="" size={Size.XS} />
+      <AvatarToken {...args} src="" size={AvatarTokenSize.Xs} />
-      <AvatarToken {...args} src="" size={Size.SM} />
+      <AvatarToken {...args} src="" size={AvatarTokenSize.Sm} />
-      <AvatarToken {...args} src="" size={Size.MD} />
+      <AvatarToken {...args} src="" size={AvatarTokenSize.Md} />
-      <AvatarToken {...args} src="" size={Size.LG} />
+      <AvatarToken {...args} src="" size={AvatarTokenSize.Lg} />
-      <AvatarToken {...args} src="" size={Size.XL} />
+      <AvatarToken {...args} src="" size={AvatarTokenSize.Xl} />
     </Box>
     <Text marginBottom={4}>
       Sizes with{' '}
@@ -119,7 +113,7 @@ export const SizeStory = (args) => (
       components
     </Text>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexEnd}
       gap={2}
       marginBottom={4}
@@ -130,12 +124,12 @@ export const SizeStory = (args) => (
             src="./images/eth_logo.png"
             name="ETH"
             size={AvatarNetworkSize.Xs}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
       >
-        <AvatarToken {...args} name="ETH" size={Size.XS} />
+        <AvatarToken {...args} name="ETH" size={AvatarTokenSize.Xs} />
       </BadgeWrapper>
       <BadgeWrapper
         badge={
@@ -143,12 +137,12 @@ export const SizeStory = (args) => (
             src="./images/eth_logo.png"
             name="ETH"
             size={AvatarNetworkSize.Xs}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
       >
-        <AvatarToken {...args} name="ETH" size={Size.SM} />
+        <AvatarToken {...args} name="ETH" size={AvatarTokenSize.Sm} />
       </BadgeWrapper>
       <BadgeWrapper
         badge={
@@ -156,12 +150,12 @@ export const SizeStory = (args) => (
             src="./images/eth_logo.png"
             name="ETH"
             size={AvatarNetworkSize.Xs}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
       >
-        <AvatarToken {...args} name="ETH" size={Size.MD} />
+        <AvatarToken {...args} name="ETH" size={AvatarTokenSize.Md} />
       </BadgeWrapper>
       <BadgeWrapper
         badge={
@@ -169,12 +163,12 @@ export const SizeStory = (args) => (
             src="./images/eth_logo.png"
             name="ETH"
             size={AvatarNetworkSize.Xs}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
       >
-        <AvatarToken {...args} name="ETH" size={Size.LG} />
+        <AvatarToken {...args} name="ETH" size={AvatarTokenSize.Lg} />
       </BadgeWrapper>
       <BadgeWrapper
         badge={
@@ -182,21 +176,21 @@ export const SizeStory = (args) => (
             src="./images/eth_logo.png"
             name="ETH"
             size={AvatarNetworkSize.Sm}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
       >
-        <AvatarToken {...args} name="ETH" size={Size.XL} />
+        <AvatarToken {...args} name="ETH" size={AvatarTokenSize.Xl} />
       </BadgeWrapper>
     </Box>
-    <Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={2}>
+    <Box display={Display.Flex} alignItems={AlignItems.flexEnd} gap={2}>
       <BadgeWrapper
         badge={
           <AvatarNetwork
             name="ETH"
             size={AvatarNetworkSize.Xs}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
@@ -205,9 +199,9 @@ export const SizeStory = (args) => (
           {...args}
           src=""
           name="ETH"
-          size={Size.XS}
+          size={AvatarTokenSize.Xs}
           borderColor={BorderColor.borderDefault}
-          borderSize={2}
+          borderWidth={2}
         />
       </BadgeWrapper>
       <BadgeWrapper
@@ -215,7 +209,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             name="ETH"
             size={AvatarNetworkSize.Xs}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
@@ -224,9 +218,9 @@ export const SizeStory = (args) => (
           {...args}
           name="ETH"
           src=""
-          size={Size.SM}
+          size={AvatarTokenSize.Sm}
           borderColor={BorderColor.borderDefault}
-          borderSize={2}
+          borderWidth={2}
         />
       </BadgeWrapper>
       <BadgeWrapper
@@ -234,7 +228,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             name="ETH"
             size={AvatarNetworkSize.Xs}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
@@ -243,9 +237,9 @@ export const SizeStory = (args) => (
           {...args}
           name="ETH"
           src=""
-          size={Size.MD}
+          size={AvatarTokenSize.Md}
           borderColor={BorderColor.borderDefault}
-          borderSize={2}
+          borderWidth={2}
         />
       </BadgeWrapper>
       <BadgeWrapper
@@ -253,7 +247,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             name="ETH"
             size={AvatarNetworkSize.Xs}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
@@ -262,9 +256,9 @@ export const SizeStory = (args) => (
           {...args}
           name="ETH"
           src=""
-          size={Size.LG}
+          size={AvatarTokenSize.Lg}
           borderColor={BorderColor.borderDefault}
-          borderSize={2}
+          borderWidth={2}
         />
       </BadgeWrapper>
       <BadgeWrapper
@@ -272,7 +266,7 @@ export const SizeStory = (args) => (
           <AvatarNetwork
             name="ETH"
             size={AvatarNetworkSize.Sm}
-            borderColor={BackgroundColor.backgroundDefault}
+            borderColor={BorderColor.backgroundDefault}
             borderWidth={2}
           />
         }
@@ -281,9 +275,9 @@ export const SizeStory = (args) => (
           {...args}
           name="ETH"
           src=""
-          size={Size.XL}
+          size={AvatarTokenSize.Xl}
           borderColor={BorderColor.borderDefault}
-          borderSize={2}
+          borderWidth={2}
         />
       </BadgeWrapper>
     </Box>
@@ -296,8 +290,8 @@ Name.args = {
   src: '',
 };
 
-export const Src = (args) => (
+export const Src: StoryFn<typeof AvatarToken> = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={Display.Flex} gap={1}>
     <AvatarToken {...args} src="./images/eth_logo.png" />
     <AvatarToken {...args} src="./images/arbitrum.svg" />
     <AvatarToken {...args} src="./images/bnb.png" />
@@ -325,8 +319,10 @@ ShowHalo.args = {
   showHalo: true,
 };
 
-export const ColorBackgroundColorAndBorderColor = (args) => (
+export const ColorBackgroundColorAndBorderColor: StoryFn<typeof AvatarToken> = (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  args,
+) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarToken
       {...args}
       backgroundColor={BackgroundColor.goerli}

ui/components/component-library/avatar-token/avatar-token.test.tsx

@@ -1,14 +1,12 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-
 import {
   BackgroundColor,
   BorderColor,
   TextColor,
 } from '../../../helpers/constants/design-system';
-
+import { AvatarToken, AvatarTokenSize } from '.';
-import { AvatarToken } from './avatar-token';
 
 describe('AvatarToken', () => {
   const args = {
@@ -58,6 +56,53 @@ describe('AvatarToken', () => {
     );
     expect(getByTestId('avatar-token')).toHaveClass('test-class');
   });
+  // size
+  it('should render with different AvatarTokenSize', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarToken
+          {...args}
+          size={AvatarTokenSize.Xs}
+          data-testid={AvatarTokenSize.Xs}
+        />
+        <AvatarToken
+          {...args}
+          size={AvatarTokenSize.Sm}
+          data-testid={AvatarTokenSize.Sm}
+        />
+        <AvatarToken
+          {...args}
+          size={AvatarTokenSize.Md}
+          data-testid={AvatarTokenSize.Md}
+        />
+        <AvatarToken
+          {...args}
+          size={AvatarTokenSize.Lg}
+          data-testid={AvatarTokenSize.Lg}
+        />
+        <AvatarToken
+          {...args}
+          size={AvatarTokenSize.Xl}
+          data-testid={AvatarTokenSize.Xl}
+        />
+      </>,
+    );
+    expect(getByTestId(AvatarTokenSize.Xs)).toHaveClass(
+      `mm-avatar-base--size-${AvatarTokenSize.Xs}`,
+    );
+    expect(getByTestId(AvatarTokenSize.Sm)).toHaveClass(
+      `mm-avatar-base--size-${AvatarTokenSize.Sm}`,
+    );
+    expect(getByTestId(AvatarTokenSize.Md)).toHaveClass(
+      `mm-avatar-base--size-${AvatarTokenSize.Md}`,
+    );
+    expect(getByTestId(AvatarTokenSize.Lg)).toHaveClass(
+      `mm-avatar-base--size-${AvatarTokenSize.Lg}`,
+    );
+    expect(getByTestId(AvatarTokenSize.Xl)).toHaveClass(
+      `mm-avatar-base--size-${AvatarTokenSize.Xl}`,
+    );
+  });
   // color
   it('should render with different colors', () => {
     const { getByTestId } = render(
@@ -122,9 +167,11 @@ describe('AvatarToken', () => {
     );
   });
   it('should forward a ref to the root html element', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<HTMLDivElement>();
     render(<AvatarToken ref={ref} />);
     expect(ref.current).not.toBeNull();
-    expect(ref.current.nodeName).toBe('DIV');
+    if (ref.current) {
+      expect(ref.current.nodeName).toBe('DIV');
+    }
   });
 });

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

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { AvatarBase, AvatarBaseProps } from '../avatar-base';
+import {
+  Display,
+  AlignItems,
+  JustifyContent,
+  TextColor,
+  BorderColor,
+  BackgroundColor,
+} from '../../../helpers/constants/design-system';
+import type { PolymorphicRef } from '../box';
+import type { AvatarTokenComponent } from './avatar-token.types';
+import { AvatarTokenProps, AvatarTokenSize } from './avatar-token.types';
+
+export const AvatarToken: AvatarTokenComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    {
+      size = AvatarTokenSize.Md,
+      name,
+      src,
+      showHalo,
+      color = TextColor.textDefault,
+      backgroundColor = BackgroundColor.backgroundAlternative,
+      borderColor = BorderColor.transparent,
+      className = '',
+      ...props
+    }: AvatarTokenProps<C>,
+    ref: PolymorphicRef<C>,
+  ) => {
+    const [showFallback, setShowFallback] = useState(false);
+
+    useEffect(() => {
+      setShowFallback(!src);
+    }, [src]);
+
+    const handleOnError = () => {
+      setShowFallback(true);
+    };
+
+    const fallbackString = name?.[0] ?? '?';
+
+    return (
+      <AvatarBase
+        ref={ref}
+        size={size}
+        display={Display.Flex}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+        className={classnames(
+          'mm-avatar-token',
+          showHalo ? 'mm-avatar-token--with-halo' : '',
+          className,
+        )}
+        {...{
+          backgroundColor,
+          borderColor,
+          color,
+          ...(props as AvatarBaseProps<C>),
+        }}
+      >
+        {showFallback ? (
+          fallbackString
+        ) : (
+          <>
+            {showHalo && (
+              <img
+                src={src}
+                className={
+                  showHalo ? 'mm-avatar-token__token-image--blurred' : ''
+                }
+                aria-hidden="true"
+              />
+            )}
+            <img
+              className={
+                showHalo
+                  ? 'mm-avatar-token__token-image--size-reduced'
+                  : 'mm-avatar-token__token-image'
+              }
+              onError={handleOnError}
+              src={src}
+              alt={`${name} logo` || 'token logo'}
+            />
+          </>
+        )}
+      </AvatarBase>
+    );
+  },
+);

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

@@ -0,0 +1,42 @@
+import type { PolymorphicComponentPropWithRef } from '../box';
+import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types';
+
+export enum AvatarTokenSize {
+  Xs = 'xs',
+  Sm = 'sm',
+  Md = 'md',
+  Lg = 'lg',
+  Xl = 'xl',
+}
+
+/**
+ * Props for the AvatarToken component
+ */
+export interface AvatarTokenStyleUtilityProps
+  extends Omit<AvatarBaseStyleUtilityProps, 'size' | 'children'> {
+  /**
+   * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src
+   */
+  name?: string;
+  /**
+   * The src accepts the string of the image to be rendered
+   */
+  src?: string;
+  /**
+   * The showHalo accepts a boolean prop to render the image with halo effect
+   */
+  showHalo?: boolean;
+  /**
+   * The size of the AvatarToken.
+   * Possible values could be 'AvatarTokenSize.Xs' 16px, 'AvatarTokenSize.Sm' 24px, 'AvatarTokenSize.Md' 32px, 'AvatarTokenSize.Lg' 40px, 'AvatarTokenSize.Xl' 48px
+   * Defaults to AvatarTokenSize.Md
+   */
+  size?: AvatarTokenSize;
+}
+
+export type AvatarTokenProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, AvatarTokenStyleUtilityProps>;
+
+export type AvatarTokenComponent = <C extends React.ElementType = 'span'>(
+  props: AvatarTokenProps<C>,
+) => React.ReactElement | null;

ui/components/component-library/avatar-token/index.js

@@ -1 +0,0 @@
-export { AvatarToken } from './avatar-token';

ui/components/component-library/avatar-token/index.ts

@@ -0,0 +1,3 @@
+export { AvatarToken } from './avatar-token';
+export { AvatarTokenSize } from './avatar-token.types';
+export type { AvatarTokenProps } from './avatar-token.types';

ui/components/component-library/index.js

@@ -7,8 +7,8 @@ export {
 export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
 export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
 export { AvatarNetwork, AvatarNetworkSize } from './avatar-network';
-export { AvatarToken } from './avatar-token';
+export { AvatarToken, AvatarTokenSize } from './avatar-token';
-export { AvatarBase } from './avatar-base';
+export { AvatarBase, AvatarBaseSize } from './avatar-base';
 export {
   BadgeWrapper,
   BadgeWrapperPosition,