chore: creating new enum for avatar favicon size and removing circular dependency

Author: georgewrmarshall

packages/design-system-react/src/components/avatar-favicon/AvatarFavicon.constants.ts

@@ -0,0 +1,13 @@
+import { AvatarBaseSize } from '../avatar-base';
+import { AvatarFaviconSize } from './AvatarFavicon.types';
+
+export const AVATAR_FAVICON_TO_AVATAR_BASE_SIZE_MAP: Record<
+  AvatarFaviconSize,
+  AvatarBaseSize
+> = {
+  [AvatarFaviconSize.Xs]: AvatarBaseSize.Xs,
+  [AvatarFaviconSize.Sm]: AvatarBaseSize.Sm,
+  [AvatarFaviconSize.Md]: AvatarBaseSize.Md,
+  [AvatarFaviconSize.Lg]: AvatarBaseSize.Lg,
+  [AvatarFaviconSize.Xl]: AvatarBaseSize.Xl,
+};

packages/design-system-react/src/components/avatar-favicon/AvatarFavicon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { AvatarBase, AvatarBaseShape, AvatarBaseSize } from '../avatar-base';
 import type { AvatarFaviconProps } from './AvatarFavicon.types';
+import { AVATAR_FAVICON_TO_AVATAR_BASE_SIZE_MAP } from './AvatarFavicon.constants';
 
 export const AvatarFavicon = React.forwardRef<
   HTMLDivElement,
@@ -27,7 +28,7 @@ export const AvatarFavicon = React.forwardRef<
       <AvatarBase
         ref={ref}
         shape={AvatarBaseShape.Circle}
-        size={size}
+        size={AVATAR_FAVICON_TO_AVATAR_BASE_SIZE_MAP[size]}
         className={className}
         fallbackText={displayText}
         fallbackTextProps={fallbackTextProps}

packages/design-system-react/src/components/avatar-favicon/AvatarFavicon.types.ts

@@ -1,12 +1,32 @@
 import type { ComponentProps } from 'react';
 
 import type { TextProps } from '../text';
-import { AvatarFaviconSize } from '.';
+import type { AvatarBaseProps } from '../avatar-base';
 
-export type AvatarFaviconProps = Omit<
-  ComponentProps<'img'>,
-  'children' | 'size'
-> & {
+export enum AvatarFaviconSize {
+  /**
+   * Extra small size (16px)
+   */
+  Xs = 'xs',
+  /**
+   * Small size (24px)
+   */
+  Sm = 'sm',
+  /**
+   * Medium size (32px)
+   */
+  Md = 'md',
+  /**
+   * Large size (40px)
+   */
+  Lg = 'lg',
+  /**
+   * Extra large size (48px)
+   */
+  Xl = 'xl',
+}
+
+export type AvatarFaviconProps = Omit<AvatarBaseProps, 'size'> & {
   /**
    * Required name of the dapp
    * Used as alt text for image and first letter is used as fallback if no fallbackText provided

packages/design-system-react/src/components/avatar-favicon/index.ts

@@ -1,3 +1,3 @@
 export { AvatarFavicon } from './AvatarFavicon';
+export { AvatarFaviconSize } from './AvatarFavicon.types';
 export type { AvatarFaviconProps } from './AvatarFavicon.types';
-export { AvatarBaseSize as AvatarFaviconSize } from '../avatar-base';