Avatar Token HouseKeeping (#16662)

* Avatar Token HouseKeeping

* updated props

* fixed indentation and avatar size

* fixed lint issues

* updated sizes

* fixed alignment of avatar token halo stories

* updated story for src

* updated avatar token

* updated README

* updated Readme

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

@@ -34,30 +34,64 @@ Defaults to `md`
   <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--size" />
 </Canvas>
 
-### Token Name
+```jsx
+import { AvatarToken } from '../../component-library';
 
-Use the `tokenName` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `tokenImageUrl` prop.
+<AvatarToken size={SIZES.XS} />
+<AvatarToken size={SIZES.SM} />
+<AvatarToken size={SIZES.MD} />
+<AvatarToken size={SIZES.LG} />
+<AvatarToken size={SIZES.XL} />
+```
+
+### Name
+
+Use the `name` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `src` prop.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--token-name" />
+  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--name" />
 </Canvas>
 
-### Token Image Url
+```jsx
+import { AvatarToken } from '../../component-library';
+<AvatarToken name="eth" />
+```
 
-Use the `tokenImageUrl` prop to set the image to be rendered of the `AvatarToken`.
+### Src
+
+Use the `src` prop to set the image to be rendered of the `AvatarToken`.
 
 <Canvas>
-  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--token-image-url" />
+  <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--src" />
 </Canvas>
 
+```jsx
+import { AvatarToken } from '../../component-library';
+
+<AvatarToken src="./images/eth_logo.svg" />
+<AvatarToken src="./images/arbitrum.svg" />
+<AvatarToken src="./images/bnb.png" />
+<AvatarToken src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png" />
+<AvatarToken src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x0d8775f648430679a709e98d2b0cb6250d2887ef.png" />
+<AvatarToken src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0.png" />
+<AvatarToken src="https://i.seadn.io/gae/lSm8ChaI-3RqC9MTpi0j3KBXdfdPd57PN5UeQLY49JA3twy9wSt2dpaa22sSc6oyiXi2OEUR6GeFX8jwkZHEMADu6_Bd4EwTJ-rg?w=500&auto=format" />
+```
+
 ### Show Halo
 
-If we want to display the component with halo effect. Only works if an image url is supplied to `tokenImageUrl`
+Use the `showHalo` prop to display the component with halo effect. Only works if an image url is supplied to `src`
 
 <Canvas>
   <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--show-halo" />
 </Canvas>
 
+```jsx
+import { AvatarToken } from '../../component-library';
+
+<AvatarToken src="./images/eth_logo.svg" showHalo/>
+
+```
+
 ### Color, Background Color And Border Color
 
 Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarToken`.
@@ -65,3 +99,25 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color
 <Canvas>
   <Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--color-background-color-and-border-color" />
 </Canvas>
+
+```jsx
+import { COLORS } from '../../../helpers/constants/design-system';
+import { AvatarToken } from '../../component-library';
+
+<AvatarToken
+  backgroundColor={COLORS.GOERLI}
+  borderColor={COLORS.GOERLI}
+  name="G"
+  color={COLORS.PRIMARY_INVERSE}
+>
+  G
+</AvatarToken>
+<AvatarToken
+  backgroundColor={COLORS.SEPOLIA}
+  borderColor={COLORS.SEPOLIA}
+  name="S"
+  color={COLORS.PRIMARY_INVERSE}
+>
+  S
+</AvatarToken>
+```

ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarToken should render correctly 1`] = `
+<div>
+  <div
+    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-token box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
+    data-testid="avatar-token"
+  >
+    <img
+      alt="ast logo"
+      class="mm-avatar-token__token-image"
+      src="./AST.png"
+    />
+  </div>
+</div>
+`;

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

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

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

@@ -3,19 +3,19 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Box from '../../ui/box/box';
 import { AvatarBase } from '../avatar-base';
-
 import {
-  COLORS,
   SIZES,
+  COLORS,
   DISPLAY,
   ALIGN_ITEMS,
   JUSTIFY_CONTENT,
 } from '../../../helpers/constants/design-system';
+import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
 
 export const AvatarToken = ({
   size = SIZES.MD,
-  tokenName,
+  name,
-  tokenImageUrl,
+  src,
   showHalo,
   color = COLORS.TEXT_DEFAULT,
   backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
@@ -26,14 +26,14 @@ export const AvatarToken = ({
   const [showFallback, setShowFallback] = useState(false);
 
   useEffect(() => {
-    setShowFallback(!tokenImageUrl);
+    setShowFallback(!src);
-  }, [tokenImageUrl]);
+  }, [src]);
 
   const handleOnError = () => {
     setShowFallback(true);
   };
 
-  const fallbackString = tokenName && tokenName[0] ? tokenName[0] : '?';
+  const fallbackString = name && name[0] ? name[0] : '?';
 
   return (
     <AvatarBase
@@ -42,8 +42,8 @@ export const AvatarToken = ({
       alignItems={ALIGN_ITEMS.CENTER}
       justifyContent={JUSTIFY_CONTENT.CENTER}
       className={classnames(
-        'avatar-token',
+        'mm-avatar-token',
-        showHalo && 'avatar-token--with-halo',
+        showHalo && 'mm-avatar-token--with-halo',
         className,
       )}
       {...{ backgroundColor, borderColor, color, ...props }}
@@ -54,20 +54,22 @@ export const AvatarToken = ({
         <>
           {showHalo && (
             <img
-              src={tokenImageUrl}
+              src={src}
-              className={showHalo ? 'avatar-token__token-image--blurred' : ''}
+              className={
+                showHalo ? 'mm-avatar-token__token-image--blurred' : ''
+              }
               aria-hidden="true"
             />
           )}
           <img
             className={
               showHalo
-                ? 'avatar-token__token-image--size-reduced'
+                ? 'mm-avatar-token__token-image--size-reduced'
-                : 'avatar-token__token-image'
+                : 'mm-avatar-token__token-image'
             }
             onError={handleOnError}
-            src={tokenImageUrl}
+            src={src}
-            alt={tokenName || 'token avatar'}
+            alt={`${name} logo` || 'token logo'}
           />
         </>
       )}
@@ -77,23 +79,23 @@ export const AvatarToken = ({
 
 AvatarToken.propTypes = {
   /**
-   * The tokenName 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 tokenImageUrl
+   * 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
    */
-  tokenName: PropTypes.string,
+  name: PropTypes.string,
   /**
-   * The tokenImageUrl accepts the string of the image to be rendered
+   * The src accepts the string of the image to be rendered
    */
-  tokenImageUrl: PropTypes.string,
+  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', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
+   * 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(SIZES)),
+  size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)),
   /**
    * The background color of the AvatarToken
    * Defaults to COLORS.BACKGROUND_ALTERNATIVE

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

@@ -1,4 +1,4 @@
-.avatar-token {
+.mm-avatar-token {
   &--with-halo {
     position: relative;
   }

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

@@ -13,6 +13,7 @@ import Box from '../../ui/box/box';
 
 import README from './README.mdx';
 import { AvatarToken } from './avatar-token';
+import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarToken',
@@ -26,7 +27,7 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(SIZES),
+      options: Object.values(AVATAR_TOKEN_SIZES),
     },
     color: {
       options: Object.values(TEXT_COLORS),
@@ -40,10 +41,10 @@ export default {
       options: Object.values(BORDER_COLORS),
       control: 'select',
     },
-    tokenName: {
+    name: {
       control: 'text',
     },
-    tokenImageUrl: {
+    src: {
       control: 'text',
     },
     showHalo: {
@@ -51,8 +52,8 @@ export default {
     },
   },
   args: {
-    tokenName: 'ast',
+    name: 'eth',
-    tokenImageUrl: './AST.png',
+    src: './images/eth_logo.svg',
     size: SIZES.MD,
     showHalo: false,
   },
@@ -75,12 +76,34 @@ export const Size = (args) => (
   </Box>
 );
 
-export const TokenName = Template.bind({});
+export const Name = Template.bind({});
-TokenName.args = {
+Name.args = {
-  tokenImageUrl: '',
+  src: '',
 };
 
-export const TokenImageUrl = Template.bind({});
+export const Src = (args) => (
+  <Box display={DISPLAY.FLEX} gap={1}>
+    <AvatarToken {...args} src="./images/eth_logo.svg" />
+    <AvatarToken {...args} src="./images/arbitrum.svg" />
+    <AvatarToken {...args} src="./images/bnb.png" />
+    <AvatarToken
+      {...args}
+      src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png"
+    />
+    <AvatarToken
+      {...args}
+      src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x0d8775f648430679a709e98d2b0cb6250d2887ef.png"
+    />
+    <AvatarToken
+      {...args}
+      src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0.png"
+    />
+    <AvatarToken
+      {...args}
+      src="https://i.seadn.io/gae/lSm8ChaI-3RqC9MTpi0j3KBXdfdPd57PN5UeQLY49JA3twy9wSt2dpaa22sSc6oyiXi2OEUR6GeFX8jwkZHEMADu6_Bd4EwTJ-rg?w=500&auto=format"
+    />
+  </Box>
+);
 
 export const ShowHalo = Template.bind({});
 ShowHalo.args = {
@@ -93,18 +116,18 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
       {...args}
       backgroundColor={COLORS.GOERLI}
       borderColor={COLORS.GOERLI}
-      tokenName="G"
+      name="G"
-      color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar
+      color={COLORS.PRIMARY_INVERSE} // TODO: update it to COLORS.GOERLI_INVERSE
     />
     <AvatarToken
       {...args}
       backgroundColor={COLORS.SEPOLIA}
       borderColor={COLORS.SEPOLIA}
-      tokenName="G"
+      name="S"
-      color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar
+      color={COLORS.PRIMARY_INVERSE} // TODO: update it to COLORS.GOERLI_INVERSE
     />
   </Box>
 );
 ColorBackgroundColorAndBorderColor.args = {
-  tokenImageUrl: '',
+  src: '',
 };

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

@@ -2,30 +2,35 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
+import { COLORS } from '../../../helpers/constants/design-system';
+
 import { AvatarToken } from './avatar-token';
 
 describe('AvatarToken', () => {
   const args = {
-    tokenName: 'ast',
+    name: 'ast',
-    tokenImageUrl: './AST.png',
+    src: './AST.png',
     showHalo: false,
   };
 
   it('should render correctly', () => {
-    const { getByTestId } = render(<AvatarToken data-testid="avatar-token" />);
+    const { getByTestId, container } = render(
+      <AvatarToken {...args} data-testid="avatar-token" />,
+    );
     expect(getByTestId('avatar-token')).toBeDefined();
+    expect(container).toMatchSnapshot();
   });
 
   it('should render image Avatar', () => {
     render(<AvatarToken {...args} data-testid="avatar-token" />);
     const image = screen.getByRole('img');
     expect(image).toBeDefined();
-    expect(image).toHaveAttribute('src', args.tokenImageUrl);
+    expect(image).toHaveAttribute('src', args.src);
   });
 
-  it('should render the first letter of the tokenName prop if no tokenImageUrl is provided', () => {
+  it('should render the first letter of the name prop if no src is provided', () => {
     const { getByText } = render(
-      <AvatarToken {...args} data-testid="avatar-token" tokenImageUrl="" />,
+      <AvatarToken {...args} data-testid="avatar-token" src="" />,
     );
     expect(getByText('a')).toBeDefined();
   });
@@ -33,18 +38,83 @@ describe('AvatarToken', () => {
   it('should render halo effect if showHalo is true and image url is there', () => {
     render(<AvatarToken {...args} data-testid="avatar-token" showHalo />);
     const image = screen.getAllByRole('img', { hidden: true });
-    expect(image[1]).toHaveClass('avatar-token__token-image--size-reduced');
+    expect(image[1]).toHaveClass('mm-avatar-token__token-image--size-reduced');
   });
 
-  it('should render the first letter of the tokenName prop when showHalo is true and no image url is provided', () => {
+  it('should render the first letter of the name prop when showHalo is true and no image url is provided', () => {
     const { getByText } = render(
-      <AvatarToken
+      <AvatarToken {...args} src="" data-testid="avatar-token" showHalo />,
-        {...args}
-        tokenImageUrl=""
-        data-testid="avatar-token"
-        showHalo
-      />,
     );
     expect(getByText('a')).toBeDefined();
   });
+  // className
+  it('should render with custom className', () => {
+    const { getByTestId } = render(
+      <AvatarToken data-testid="avatar-token" className="test-class" />,
+    );
+    expect(getByTestId('avatar-token')).toHaveClass('test-class');
+  });
+  // color
+  it('should render with different colors', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarToken
+          color={COLORS.SUCCESS_DEFAULT}
+          data-testid={COLORS.SUCCESS_DEFAULT}
+        />
+        <AvatarToken
+          color={COLORS.ERROR_DEFAULT}
+          data-testid={COLORS.ERROR_DEFAULT}
+        />
+      </>,
+    );
+    expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
+      `box--color-${COLORS.SUCCESS_DEFAULT}`,
+    );
+    expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
+      `box--color-${COLORS.ERROR_DEFAULT}`,
+    );
+  });
+  // background color
+  it('should render with different background colors', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarToken
+          backgroundColor={COLORS.SUCCESS_DEFAULT}
+          data-testid={COLORS.SUCCESS_DEFAULT}
+        />
+        <AvatarToken
+          backgroundColor={COLORS.ERROR_DEFAULT}
+          data-testid={COLORS.ERROR_DEFAULT}
+        />
+      </>,
+    );
+    expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
+      `box--background-color-${COLORS.SUCCESS_DEFAULT}`,
+    );
+    expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
+      `box--background-color-${COLORS.ERROR_DEFAULT}`,
+    );
+  });
+  // border color
+  it('should render with different border colors', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarToken
+          borderColor={COLORS.SUCCESS_DEFAULT}
+          data-testid={COLORS.SUCCESS_DEFAULT}
+        />
+        <AvatarToken
+          borderColor={COLORS.ERROR_DEFAULT}
+          data-testid={COLORS.ERROR_DEFAULT}
+        />
+      </>,
+    );
+    expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
+      `box--border-color-${COLORS.SUCCESS_DEFAULT}`,
+    );
+    expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
+      `box--border-color-${COLORS.ERROR_DEFAULT}`,
+    );
+  });
 });