fix/AvatarFavicon to TS (#20430)

* AvatarFavicon to TS

* documentation updates

* fix types import

* Some doc updates

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

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

@@ -36,7 +36,7 @@ Defaults to `AvatarAccountSize.MD`
 </Canvas>
 
 ```jsx
-import { AvatarAccount, AvatarAccountSize } from '../ui/component-library';
+import { AvatarAccount, AvatarAccountSize } from '../../component-library';
 
 <AvatarAccount size={AvatarAccountSize.Xs} />
 <AvatarAccount size={AvatarAccountSize.Sm} />
@@ -54,7 +54,7 @@ Use the `variant` prop and the `AvatarAccountVariant` enum from `../../component
 </Canvas>
 
 ```jsx
-import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library';
+import { AvatarAccount, AvatarAccountVariant } from '../../component-library';
 
 <AvatarAccount variant={AvatarAccountVariant.Jazzicon} />
 <AvatarAccount variant={AvatarAccountVariant.Blockies} />
@@ -69,7 +69,7 @@ Use the required `address` for generating images
 </Canvas>
 
 ```jsx
-import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library';
+import { AvatarAccount, AvatarAccountVariant } from '../../component-library';
 
 <AvatarAccount variant={AvatarAccountVariant.Jazzicon} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" />
 <AvatarAccount variant={AvatarAccountVariant.Blockies} address="0x0" />

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

@@ -6,7 +6,7 @@ import { AvatarFavicon } from './avatar-favicon';
 
 # AvatarFavicon
 
-The `AvatarFavicon` is an image component that renders an icon that is provided in the form of a URL.
+The `AvatarFavicon` is an image component that represents a dapp or third party service
 
 <Canvas>
   <Story id="components-componentlibrary-avatarfavicon--default-story" />
@@ -14,44 +14,34 @@ The `AvatarFavicon` is an image component that renders an icon that is provided
 
 ## Props
 
-The `AvatarFavicon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
-
 <ArgsTable of={AvatarFavicon} />
 
-`AvatarFavicon` accepts all [AvatarBase](components-componentlibrary-avatarbase--default-story))
-component props
-
-<ArgsTable of={AvatarBase} />
-
 ### Size
 
-Use the `size` prop to set the size of the `AvatarFavicon`.
+Use the `size` prop and the `AvatarFaviconSize` enum from `../../component-library` to change the size of `AvatarFavicon`
-
-Optional: `AVATAR_FAVICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
 
 Possible sizes include:
 
-- `Size.XS` 16px
+- `AvatarFaviconSize.Xs` 16px
-- `Size.SM` 24px
+- `AvatarFaviconSize.Sm` 24px
-- `Size.MD` 32px
+- `AvatarFaviconSize.Md` 32px
-- `Size.LG` 40px
+- `AvatarFaviconSize.Lg` 40px
-- `Size.XL` 48px
+- `AvatarFaviconSize.Xl` 48px
 
-Defaults to `Size.MD`
+Defaults to `AvatarFaviconSize.MD`
 
 <Canvas>
   <Story id="components-componentlibrary-avatarfavicon--size-story" />
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
+import { AvatarFavicon, AvatarFaviconSize } from '../../component-library';
-import { AvatarFavicon } from '../ui/component-library';
 
-<AvatarFavicon size={Size.XS} />
+<AvatarFavicon size={AvatarFaviconSize.Xs} />
-<AvatarFavicon size={Size.SM} />
+<AvatarFavicon size={AvatarFaviconSize.Sm} />
-<AvatarFavicon size={Size.MD} />
+<AvatarFavicon size={AvatarFaviconSize.Md} />
-<AvatarFavicon size={Size.LG} />
+<AvatarFavicon size={AvatarFaviconSize.Lg} />
-<AvatarFavicon size={Size.XL} />
+<AvatarFavicon size={AvatarFaviconSize.Xl} />
 ```
 
 ### Src
@@ -63,7 +53,7 @@ Use the `src` prop to set the image to be rendered of the `AvatarFavicon`.
 </Canvas>
 
 ```jsx
-import { AvatarFavicon } from '../ui/component-library';
+import { AvatarFavicon } from '../../component-library';
 
 <AvatarFavicon src="https://uniswap.org/favicon.ico" />
 <AvatarFavicon src="https://1inch.exchange/assets/favicon/favicon-32x32.png" />

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

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

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

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { AvatarBase } from '../avatar-base';
-import Box from '../../ui/box/box';
-import { IconName, Icon } from '../icon';
-import {
-  BorderColor,
-  Size,
-  Display,
-  AlignItems,
-  JustifyContent,
-  IconColor,
-} from '../../../helpers/constants/design-system';
-import { useI18nContext } from '../../../hooks/useI18nContext';
-import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
-
-export const AvatarFavicon = React.forwardRef(
-  (
-    {
-      size = Size.MD,
-      src,
-      name = 'avatar-favicon',
-      className,
-      fallbackIconProps,
-      borderColor = BorderColor.transparent,
-      ...props
-    },
-    ref,
-  ) => {
-    const t = useI18nContext();
-    return (
-      <AvatarBase
-        ref={ref}
-        size={size}
-        display={Display.Flex}
-        alignItems={AlignItems.center}
-        justifyContent={JustifyContent.center}
-        className={classnames('mm-avatar-favicon', className)}
-        {...{ borderColor, ...props }}
-      >
-        {src ? (
-          <img
-            className="mm-avatar-favicon__image"
-            src={src}
-            alt={t('logo', [name])}
-          />
-        ) : (
-          <Icon
-            name={IconName.Global}
-            color={IconColor.iconDefault}
-            size={size}
-            {...fallbackIconProps}
-          />
-        )}
-      </AvatarBase>
-    );
-  },
-);
-
-AvatarFavicon.propTypes = {
-  /**
-   * The src accepts the string of the image to be rendered
-   */
-  src: PropTypes.string,
-  /**
-   * The alt text for the favicon avatar to be rendered
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * Props for the fallback icon. All Icon props can be used
-   */
-  fallbackIconProps: PropTypes.object,
-  /**
-   * The size of the AvatarFavicon
-   * Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px
-   * Defaults to Size.MD
-   */
-  size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)),
-  /**
-   * The border color of the AvatarFavicon
-   * Defaults to Color.transparent
-   */
-  borderColor: PropTypes.oneOf(Object.values(BorderColor)),
-  /**
-   * Additional classNames to be added to the AvatarFavicon
-   */
-  className: PropTypes.string,
-  /**
-   * AvatarFavicon also accepts all Box props including but not limited to
-   * className, as(change root element of HTML element) and margin props
-   */
-  ...Box.propTypes,
-};
-
-AvatarFavicon.displayName = 'AvatarFavicon';

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

@@ -1,19 +1,18 @@
 import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
 import {
   Display,
   AlignItems,
   BorderColor,
-  Size,
 } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box/box';
+import { Box } from '../box';
 
 import README from './README.mdx';
-import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';
+import { AvatarFavicon, AvatarFaviconSize } from '.';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarFavicon',
-
   component: AvatarFavicon,
   parameters: {
     docs: {
@@ -23,7 +22,7 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(AVATAR_FAVICON_SIZES),
+      options: Object.values(AvatarFaviconSize),
     },
     src: {
       control: 'text',
@@ -38,30 +37,30 @@ export default {
   },
   args: {
     src: 'https://uniswap.org/favicon.ico',
-    size: Size.MD,
+    size: AvatarFaviconSize.Md,
     name: 'Uniswap',
   },
-};
+} as Meta<typeof AvatarFavicon>;
 
-const Template = (args) => {
+const Template: StoryFn<typeof AvatarFavicon> = (args) => {
   return <AvatarFavicon {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const SizeStory = (args) => (
+export const SizeStory: StoryFn<typeof AvatarFavicon> = (args) => (
   <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
-    <AvatarFavicon {...args} size={Size.XS} />
+    <AvatarFavicon {...args} size={AvatarFaviconSize.Xs} />
-    <AvatarFavicon {...args} size={Size.SM} />
+    <AvatarFavicon {...args} size={AvatarFaviconSize.Sm} />
-    <AvatarFavicon {...args} size={Size.MD} />
+    <AvatarFavicon {...args} size={AvatarFaviconSize.Md} />
-    <AvatarFavicon {...args} size={Size.LG} />
+    <AvatarFavicon {...args} size={AvatarFaviconSize.Lg} />
-    <AvatarFavicon {...args} size={Size.XL} />
+    <AvatarFavicon {...args} size={AvatarFaviconSize.Xl} />
   </Box>
 );
 SizeStory.storyName = 'Size';
 
-export const Src = (args) => (
+export const Src: StoryFn<typeof AvatarFavicon> = (args) => (
   <Box display={Display.Flex} alignItems={AlignItems.flexStart} gap={1}>
     <AvatarFavicon {...args} src="https://uniswap.org/favicon.ico" />
     <AvatarFavicon

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

@@ -2,7 +2,8 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';
+import { AvatarFaviconSize } from './avatar-favicon.types';
+import { AvatarFavicon } from '.';
 
 describe('AvatarFavicon', () => {
   const args = {
@@ -51,46 +52,46 @@ describe('AvatarFavicon', () => {
     const { getByTestId } = render(
       <>
         <AvatarFavicon
-          size={AVATAR_FAVICON_SIZES.XS}
+          size={AvatarFaviconSize.Xs}
-          data-testid={AVATAR_FAVICON_SIZES.XS}
+          data-testid={AvatarFaviconSize.Xs}
           {...args}
         />
         <AvatarFavicon
-          size={AVATAR_FAVICON_SIZES.SM}
+          size={AvatarFaviconSize.Sm}
-          data-testid={AVATAR_FAVICON_SIZES.SM}
+          data-testid={AvatarFaviconSize.Sm}
           {...args}
         />
         <AvatarFavicon
-          size={AVATAR_FAVICON_SIZES.MD}
+          size={AvatarFaviconSize.Md}
-          data-testid={AVATAR_FAVICON_SIZES.MD}
+          data-testid={AvatarFaviconSize.Md}
           {...args}
         />
         <AvatarFavicon
-          size={AVATAR_FAVICON_SIZES.LG}
+          size={AvatarFaviconSize.Lg}
-          data-testid={AVATAR_FAVICON_SIZES.LG}
+          data-testid={AvatarFaviconSize.Lg}
           {...args}
         />
         <AvatarFavicon
-          size={AVATAR_FAVICON_SIZES.XL}
+          size={AvatarFaviconSize.Xl}
-          data-testid={AVATAR_FAVICON_SIZES.XL}
+          data-testid={AvatarFaviconSize.Xl}
           {...args}
         />
       </>,
     );
-    expect(getByTestId(AVATAR_FAVICON_SIZES.XS)).toHaveClass(
+    expect(getByTestId(AvatarFaviconSize.Xs)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.XS}`,
+      `mm-avatar-base--size-${AvatarFaviconSize.Xs}`,
     );
-    expect(getByTestId(AVATAR_FAVICON_SIZES.SM)).toHaveClass(
+    expect(getByTestId(AvatarFaviconSize.Sm)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.SM}`,
+      `mm-avatar-base--size-${AvatarFaviconSize.Sm}`,
     );
-    expect(getByTestId(AVATAR_FAVICON_SIZES.MD)).toHaveClass(
+    expect(getByTestId(AvatarFaviconSize.Md)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.MD}`,
+      `mm-avatar-base--size-${AvatarFaviconSize.Md}`,
     );
-    expect(getByTestId(AVATAR_FAVICON_SIZES.LG)).toHaveClass(
+    expect(getByTestId(AvatarFaviconSize.Lg)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.LG}`,
+      `mm-avatar-base--size-${AvatarFaviconSize.Lg}`,
     );
-    expect(getByTestId(AVATAR_FAVICON_SIZES.XL)).toHaveClass(
+    expect(getByTestId(AvatarFaviconSize.Xl)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.XL}`,
+      `mm-avatar-base--size-${AvatarFaviconSize.Xl}`,
     );
   });
 

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import classnames from 'classnames';
+import { AvatarBase, AvatarBaseProps } from '../avatar-base';
+import { IconName, Icon, IconSize } from '../icon';
+import {
+  BorderColor,
+  Display,
+  AlignItems,
+  JustifyContent,
+  IconColor,
+} from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { PolymorphicRef } from '../box';
+import {
+  AvatarFaviconComponent,
+  AvatarFaviconProps,
+  AvatarFaviconSize,
+} from './avatar-favicon.types';
+
+export const AvatarFavicon: AvatarFaviconComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    {
+      size = AvatarFaviconSize.Md,
+      src,
+      name = 'avatar-favicon',
+      className = '',
+      fallbackIconProps,
+      borderColor = BorderColor.transparent,
+      ...props
+    }: AvatarFaviconProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    const t = useI18nContext();
+    return (
+      <AvatarBase
+        ref={ref}
+        size={size}
+        display={Display.Flex}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+        className={classnames('mm-avatar-favicon', className)}
+        {...{ borderColor, ...(props as AvatarBaseProps<C>) }}
+      >
+        {src ? (
+          <img
+            className="mm-avatar-favicon__image"
+            src={src}
+            alt={t('logo', [name])}
+          />
+        ) : (
+          <Icon
+            name={IconName.Global}
+            color={IconColor.iconDefault}
+            size={IconSize.Md}
+            {...fallbackIconProps}
+          />
+        )}
+      </AvatarBase>
+    );
+  },
+);

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

@@ -0,0 +1,50 @@
+import { BorderColor } from '../../../helpers/constants/design-system';
+import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types';
+import { PolymorphicComponentPropWithRef } from '../box';
+import { IconProps } from '../icon';
+
+export enum AvatarFaviconSize {
+  Xs = 'xs',
+  Sm = 'sm',
+  Md = 'md',
+  Lg = 'lg',
+  Xl = 'xl',
+}
+
+export interface AvatarFaviconStyleUtilityProps
+  extends Omit<AvatarBaseStyleUtilityProps, 'size'> {
+  /**
+   * The src accepts the string of the image to be rendered
+   */
+  src?: string;
+  /**
+   * The alt text for the favicon avatar to be rendered
+   */
+  name: string;
+  /**
+   * Props for the fallback icon. All Icon props can be used
+   */
+  fallbackIconProps?: IconProps<'span'>;
+  /**
+   * The size of the AvatarFavicon
+   * Possible values could be 'AvatarFaviconSize.Xs' 16px, 'AvatarFaviconSize.Sm' 24px, 'AvatarFaviconSize.Md' 32px, 'AvatarFaviconSize.Lg' 40px, 'AvatarFaviconSize.Xs' 48px
+   * Defaults to AvatarFaviconSize.Md
+   */
+  size?: AvatarFaviconSize;
+  /**
+   * The border color of the AvatarFavicon
+   * Defaults to Color.transparent
+   */
+  borderColor?: BorderColor;
+  /**
+   * Additional classNames to be added to the AvatarFavicon
+   */
+  className?: string;
+}
+
+export type AvatarFaviconProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, AvatarFaviconStyleUtilityProps>;
+
+export type AvatarFaviconComponent = <C extends React.ElementType = 'span'>(
+  props: AvatarFaviconProps<C>,
+) => React.ReactElement | null;

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

@@ -1,2 +0,0 @@
-export { AvatarFavicon } from './avatar-favicon';
-export { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';

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

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

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

@@ -41,7 +41,7 @@ Defaults to `AvatarIconSize.Md`
 </Canvas>
 
 ```jsx
-import { AvatarIcon, AvatarIconSize } from '../ui/component-library';
+import { AvatarIcon, AvatarIconSize } from '../../component-library';
 
     <AvatarIcon {...args} size={AvatarIconSize.Xs} />
     <AvatarIcon {...args} size={AvatarIconSize.Sm} />
@@ -61,7 +61,7 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
 </Canvas>
 
 ```jsx
-import { AvatarIcon, IconName } from '../ui/component-library';
+import { AvatarIcon, IconName } from '../../component-library';
 
 <AvatarIcon iconName={IconName.SwapHorizontal} />
 <AvatarIcon iconName={IconName.Confirmation} />
@@ -83,7 +83,7 @@ Use the `color` and `backgroundColor` props with the `IconColor` and `Background
 
 ```jsx
 import { BackgroundColor, IconColor } from '../../../helpers/constants/design-system';
-import { AvatarIcon } from '../ui/component-library';
+import { AvatarIcon } from '../../component-library';
 
 <AvatarIcon color={IconColor.primaryDefault} backgroundColor={BackgroundColor.primaryMuted} />
 <AvatarIcon color={IconColor.primaryInverse} backgroundColor={BackgroundColor.primaryDefault} />

ui/components/component-library/button/README.mdx

@@ -67,7 +67,7 @@ Possible sizes include:
 
 ```jsx
 import { Size } from '../../../helpers/constants/design-system';
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 
 <Button size={Size.inherit} />
 <Button size={Size.SM} />
@@ -84,7 +84,7 @@ Use the `danger` boolean prop to change the `Button` to danger color.
 </Canvas>
 
 ```jsx
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 
 <Button>Normal</Button>
 <Button danger>Danger</Button>
@@ -99,7 +99,7 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 </Canvas>
 
 ```jsx
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 
 <Button href="/">Anchor Element</Button>;
 ```
@@ -114,7 +114,7 @@ Use boolean `block` prop to quickly enable a full width block button
 
 ```jsx
 import { DISPLAY } from '../../../helpers/constants/design-system';
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 
 <Button>Default Button</Button>
 <Button block>Block Button</Button>
@@ -136,7 +136,7 @@ Button `as` options:
 </Canvas>
 
 ```jsx
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 
 
 <Button as="button">Button Element</Button>
@@ -154,7 +154,7 @@ Use the boolean `disabled` prop to disable button
 </Canvas>
 
 ```jsx
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 
 <Button disabled>Disabled Button</Button>;
 ```
@@ -168,7 +168,7 @@ Use the boolean `loading` prop to set loading spinner
 </Canvas>
 
 ```jsx
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 
 <Button loading>Loading Button</Button>;
 ```
@@ -184,7 +184,7 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
 </Canvas>
 
 ```jsx
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 import { IconName } from '../icon';
 
 <Button startIconName={IconName.AddSquare}>Button</Button>;
@@ -195,7 +195,7 @@ import { IconName } from '../icon';
 </Canvas>
 
 ```jsx
-import { Button } from '../ui/component-library';
+import { Button } from '../../component-library';
 import { IconName } from '../icon';
 
 <Button endIconName={IconName.Arrow2Right}>Button</Button>;

ui/components/component-library/index.js

@@ -4,7 +4,7 @@ export {
   AvatarAccountVariant,
   AvatarAccountDiameter,
 } from './avatar-account';
-export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
+export { AvatarFavicon, AvatarFaviconSize } from './avatar-favicon';
 export { AvatarIcon, AvatarIconSize } from './avatar-icon';
 export { AvatarNetwork, AvatarNetworkSize } from './avatar-network';
 export { AvatarToken, AvatarTokenSize } from './avatar-token';