housekeeping for Avatar Favicon (#16931)

* housekeeping for avatar favicon * added test for custom className * fixed lint errors * updated avatar favicon in tag url * updated import * updated readme and fixed label * updated tag url snapshot * updated snapshot for favicon
2024-11-22 09:57:02 +01:00 · 2023-01-11 21:41:06 +05:30 · 2023-01-11 21:41:06 +05:30 · 6e900fb0e3
commit 6e900fb0e3
parent c12d469af2
11 changed files with 161 additions and 33 deletions
--- a/ui/components/component-library/avatar-favicon/README.mdx
+++ b/ui/components/component-library/avatar-favicon/README.mdx
@ -1,5 +1,7 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

+import { AvatarBase } from '../';
+
 import { AvatarFavicon } from './avatar-favicon';

 # AvatarFavicon
@ -16,29 +18,58 @@ The `AvatarFavicon` accepts all props below as well as all [Box](/docs/ui-compon

 <ArgsTable of={AvatarFavicon} />

+`AvatarFavicon` accepts all [AvatarBase](/docs/ui-components-component-library-avatar-base-avatar-base-stories-js--default-story#props)
+component props
+
+<ArgsTable of={AvatarBase} />
+
 ### Size

 Use the `size` prop to set the size of the `AvatarFavicon`.

+Optional: `AVATAR_FAVICON_SIZES` from `./ui/components/component-library` object can be used instead of `SIZES`
+
 Possible sizes include:

- `xs` 16px
- `sm` 24px
- `md` 32px
- `lg` 40px
- `xl` 48px
+- `SIZES.XS` 16px
+- `SIZES.SM` 24px
+- `SIZES.MD` 32px
+- `SIZES.LG` 40px
+- `SIZES.XL` 48px

-Defaults to `md`
+Defaults to `SIZES.MD`

 <Canvas>
  <Story id="ui-components-component-library-avatar-favicon-avatar-favicon-stories-js--size" />
 </Canvas>

-### Image Source
+```jsx
+import { SIZES } from '../../../helpers/constants/design-system';
+import { AvatarFavicon } from '../ui/component-library';

-Use the `imageSource` prop to set the image to be rendered of the `AvatarFavicon`.
+<AvatarFavicon size={SIZES.XS} />
+<AvatarFavicon size={SIZES.SM} />
+<AvatarFavicon size={SIZES.MD} />
+<AvatarFavicon size={SIZES.LG} />
+<AvatarFavicon size={SIZES.XL} />
+```
+
+### Src
+
+Use the `src` prop to set the image to be rendered of the `AvatarFavicon`.
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-favicon-avatar-favicon-stories-js--src" />
+</Canvas>
+
+```jsx
+import { AvatarFavicon } from '../ui/component-library';
+
+<AvatarFavicon src="https://uniswap.org/favicon.ico" />
+<AvatarFavicon src="https://1inch.exchange/assets/favicon/favicon-32x32.png" />
+```

 ### Fallback Icon Props

-If there is no `imageSource` then in that case an [icon](/docs/ui-components-component-library-icon-icon-stories-js--default-story) will be used as the fallback display and it can be customised via `fallbackIconProps`.
+If there is no `src` then in that case an [icon](/docs/ui-components-component-library-icon-icon-stories-js--default-story) will be used as the fallback display and it can be customised via `fallbackIconProps`.

--- a/ui/components/component-library/avatar-favicon/snapshots/avatar-favicon.test.js.snap
+++ b/ui/components/component-library/avatar-favicon/snapshots/avatar-favicon.test.js.snap
@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarFavicon should render correctly 1`] = `
+<div>
+  <div
+    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon 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-favicon"
+  >
+    <div
+      class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
+      style="mask-image: url('./images/icons/icon-global-filled.svg');"
+    />
+  </div>
+</div>
+`;
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.constants.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.constants.js
@ -0,0 +1,9 @@
+import { SIZES } from '../../../helpers/constants/design-system';
+
+export const AVATAR_FAVICON_SIZES = {
+  XS: SIZES.XS,
+  SM: SIZES.SM,
+  MD: SIZES.MD,
+  LG: SIZES.LG,
+  XL: SIZES.XL,
+};
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js
@ -12,11 +12,12 @@ import {
  ALIGN_ITEMS,
  JUSTIFY_CONTENT,
 } from '../../../helpers/constants/design-system';
+import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';

 export const AvatarFavicon = ({
  size = SIZES.MD,
-  imageSource,
-  imgAlt = 'avatar-favicon',
+  src,
+  name = 'avatar-favicon',
  className,
  fallbackIconProps,
  borderColor = BORDER_COLORS.TRANSPARENT,
@ -28,17 +29,20 @@ export const AvatarFavicon = ({
      display={DISPLAY.FLEX}
      alignItems={ALIGN_ITEMS.CENTER}
      justifyContent={JUSTIFY_CONTENT.CENTER}
-      className={classnames('avatar-favicon', className)}
+      className={classnames('mm-avatar-favicon', className)}
      {...{ borderColor, ...props }}
    >
-      {imageSource ? (
-        <img className="avatar-favicon__image" src={imageSource} alt={imgAlt} />
+      {src ? (
+        <img
+          className="mm-avatar-favicon__image"
+          src={src}
+          alt={`${name} logo`}
+        />
      ) : (
        <Icon
          name={ICON_NAMES.GLOBAL_FILLED}
          color={COLORS.ICON_DEFAULT}
          size={size}
-          aria-label={imgAlt}
          {...fallbackIconProps}
        />
      )}
@ -48,23 +52,23 @@ export const AvatarFavicon = ({

 AvatarFavicon.propTypes = {
  /**
-   * The imageSource accepts the string of the image to be rendered
+   * The src accepts the string of the image to be rendered
   */
-  imageSource: PropTypes.string,
+  src: PropTypes.string,
  /**
   * The alt text for the favicon avatar to be rendered
   */
-  imgAlt: PropTypes.string,
+  name: PropTypes.string.isRequired,
  /**
   * Props for the fallback icon. All Icon props can be used
   */
  fallbackIconProps: PropTypes.shape(Icon.PropTypes),
  /**
   * The size of the AvatarFavicon
-   * 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_FAVICON_SIZES)),
  /**
   * The border color of the AvatarFavicon
   * Defaults to COLORS.TRANSPARENT
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.scss
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.scss
@ -1,4 +1,4 @@
-.avatar-favicon {
+.mm-avatar-favicon {
  &__image {
    width: 100%;
  }
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.stories.js
@ -9,7 +9,7 @@ import {
 import Box from '../../ui/box/box';

 import README from './README.mdx';
-import { AvatarFavicon } from './avatar-favicon';
+import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';

 export default {
  title: 'Components/ComponentLibrary/AvatarFavicon',
@ -23,9 +23,9 @@ export default {
  argTypes: {
    size: {
      control: 'select',
-      options: Object.values(SIZES),
+      options: Object.values(AVATAR_FAVICON_SIZES),
    },
-    imageSource: {
+    src: {
      control: 'text',
    },
    borderColor: {
@ -34,7 +34,7 @@ export default {
    },
  },
  args: {
-    imageSource: 'https://uniswap.org/favicon.ico',
+    src: 'https://uniswap.org/favicon.ico',
    size: SIZES.MD,
  },
 };
@ -55,3 +55,13 @@ export const Size = (args) => (
    <AvatarFavicon {...args} size={SIZES.XL} />
  </Box>
 );
+
+export const Src = (args) => (
+  <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX} gap={1}>
+    <AvatarFavicon {...args} src="https://uniswap.org/favicon.ico" />
+    <AvatarFavicon
+      {...args}
+      src="https://1inch.exchange/assets/favicon/favicon-32x32.png"
+    />
+  </Box>
+);
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
@ -2,25 +2,26 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';

-import { AvatarFavicon } from './avatar-favicon';
+import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';

 describe('AvatarFavicon', () => {
  const args = {
-    imageSource: './images/eth_logo.svg',
+    src: './images/eth_logo.svg',
  };

  it('should render correctly', () => {
-    const { getByTestId } = render(
+    const { getByTestId, container } = render(
      <AvatarFavicon data-testid="avatar-favicon" />,
    );
    expect(getByTestId('avatar-favicon')).toBeDefined();
+    expect(container).toMatchSnapshot();
  });

  it('should render image of Avatar Favicon', () => {
    render(<AvatarFavicon data-testid="avatar-favicon" {...args} />);
    const image = screen.getByRole('img');
    expect(image).toBeDefined();
-    expect(image).toHaveAttribute('src', args.imageSource);
+    expect(image).toHaveAttribute('src', args.src);
  });

  it('should render fallback image if no ImageSource is provided', () => {
@ -43,4 +44,62 @@ describe('AvatarFavicon', () => {
      'fallback-icon',
    );
  });
+
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.XS}
+          data-testid={AVATAR_FAVICON_SIZES.XS}
+          {...args}
+        />
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.SM}
+          data-testid={AVATAR_FAVICON_SIZES.SM}
+          {...args}
+        />
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.MD}
+          data-testid={AVATAR_FAVICON_SIZES.MD}
+          {...args}
+        />
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.LG}
+          data-testid={AVATAR_FAVICON_SIZES.LG}
+          {...args}
+        />
+        <AvatarFavicon
+          size={AVATAR_FAVICON_SIZES.XL}
+          data-testid={AVATAR_FAVICON_SIZES.XL}
+          {...args}
+        />
+      </>,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.XS)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.XS}`,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.SM)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.SM}`,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.MD)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.MD}`,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.LG)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.LG}`,
+    );
+    expect(getByTestId(AVATAR_FAVICON_SIZES.XL)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_FAVICON_SIZES.XL}`,
+    );
+  });
+
+  it('should render with custom classname', () => {
+    const { getByTestId } = render(
+      <AvatarFavicon
+        className="mm-avatar-favicon--test"
+        data-testid="classname"
+        {...args}
+      />,
+    );
+    expect(getByTestId('classname')).toHaveClass('mm-avatar-favicon--test');
+  });
 });
--- a/ui/components/component-library/avatar-favicon/index.js
+++ b/ui/components/component-library/avatar-favicon/index.js
@ -1 +1,2 @@
 export { AvatarFavicon } from './avatar-favicon';
+export { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
--- a/ui/components/component-library/index.js
+++ b/ui/components/component-library/index.js
@ -4,7 +4,7 @@ export {
  AVATAR_ACCOUNT_TYPES,
  AVATAR_ACCOUNT_DIAMETERS,
 } from './avatar-account';
-export { AvatarFavicon } from './avatar-favicon';
+export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
 export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
 export { AvatarNetwork, AVATAR_NETWORK_SIZES } from './avatar-network';
 export { AvatarToken } from './avatar-token';
--- a/ui/components/component-library/tag-url/snapshots/tag-url.test.js.snap
+++ b/ui/components/component-library/tag-url/snapshots/tag-url.test.js.snap
@ -7,10 +7,9 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = `
    data-testid="tag-url"
  >
    <div
-      class="box mm-avatar-base mm-avatar-base--size-md avatar-favicon 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"
+      class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon 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"
    >
      <div
-        aria-label="avatar-favicon"
        class="box mm-icon mm-icon--size-md box--flex-direction-row box--color-icon-default"
        style="mask-image: url('./images/icons/icon-global-filled.svg');"
      />
--- a/ui/components/component-library/tag-url/tag-url.js
+++ b/ui/components/component-library/tag-url/tag-url.js
@ -41,7 +41,7 @@ export const TagUrl = ({
      display={DISPLAY.FLEX}
      {...props}
    >
-      <AvatarFavicon imageSource={src} {...avatarFaviconProps} />
+      <AvatarFavicon src={src} {...avatarFaviconProps} />
      {showLockIcon && (
        <Icon
          className="mm-tag-url__lock-icon"