Updating AvatarAccount objects to enums (#17727)

* Updating object to enums

* lint fix

* Improving test coverage

* Updating filename to .types.ts

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

@@ -24,49 +24,45 @@ component props
 
 ### Size
 
-Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarAccount`
-
-Optional: `AVATAR_ACCOUNT_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
+Use the `size` prop and the `AvatarAccountSize` enum from `../../component-library` to change the size of `AvatarAccount`
 
 Possible sizes include:
 
-- `Size.XS` 16px
-- `Size.SM` 24px
-- `Size.MD` 32px
-- `Size.LG` 40px
-- `Size.XL` 48px
+- `AvatarAccountSize.Xs` 16px
+- `AvatarAccountSize.Sm` 24px
+- `AvatarAccountSize.Md` 32px
+- `AvatarAccountSize.Lg` 40px
+- `AvatarAccountSize.Xl` 48px
 
-Defaults to `Size.MD`
+Defaults to `AvatarAccountSize.MD`
 
 <Canvas>
-  <Story id="components-componentlibrary-avataraccount--size-story" />
+  <Story id="components-componentlibrary-avataraccount--size" />
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
-import { AvatarAccount } from '../ui/component-library';
+import { AvatarAccount, AvatarAccountSize } from '../ui/component-library';
 
-<AvatarAccount size={Size.XS} />
-<AvatarAccount size={Size.SM} />
-<AvatarAccount size={Size.MD} />
-<AvatarAccount size={Size.LG} />
-<AvatarAccount size={Size.XL} />
+<AvatarAccount size={AvatarAccountSize.Xs} />
+<AvatarAccount size={AvatarAccountSize.Sm} />
+<AvatarAccount size={AvatarAccountSize.Md} />
+<AvatarAccount size={AvatarAccountSize.Lg} />
+<AvatarAccount size={AvatarAccountSize.Xl} />
 ```
 
-### Type
+### Variant
 
-Use the `type` prop for the avatar to be rendered, it can either be a Jazzicon or a Blockie
+Use the `variant` prop and the `AvatarAccountVariant` enum from `../../component-library` to change between jazzicon and blockies variants.
 
 <Canvas>
-  <Story id="components-componentlibrary-avataraccount--type" />
+  <Story id="components-componentlibrary-avataraccount--variant" />
 </Canvas>
 
 ```jsx
-import { TYPES } from './avatar-account.constants';
-import { AvatarAccount } from '../ui/component-library';
+import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library';
 
-<AvatarAccount type={TYPES.JAZZICON} />
-<AvatarAccount type={TYPES.BLOCKIES} />
+<AvatarAccount variant={AvatarAccountVariant.Jazzicon} />
+<AvatarAccount variant={AvatarAccountVariant.Blockies} />
 ```
 
 ### Address
@@ -78,9 +74,8 @@ Use the required `address` for generating images
 </Canvas>
 
 ```jsx
-import { TYPES } from './avatar-account.constants';
-import { AvatarAccount } from '../ui/component-library';
+import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library';
 
-<AvatarAccount type={TYPES.JAZZICON} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" />
-<AvatarAccount type={TYPES.BLOCKIES} address="0x0" />
+<AvatarAccount variant={AvatarAccountVariant.Jazzicon} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" />
+<AvatarAccount variant={AvatarAccountVariant.Blockies} address="0x0" />
 ```

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

@@ -1,22 +0,0 @@
-import { Size } from '../../../helpers/constants/design-system';
-
-export const AVATAR_ACCOUNT_DIAMETERS = {
-  xs: '16',
-  sm: '24',
-  md: '32',
-  lg: '40',
-  xl: '48',
-};
-
-export const AVATAR_ACCOUNT_TYPES = {
-  JAZZICON: 'Jazzicon',
-  BLOCKIES: 'Blockie',
-};
-
-export const AVATAR_ACCOUNT_SIZES = {
-  XS: Size.XS,
-  SM: Size.SM,
-  MD: Size.MD,
-  LG: Size.LG,
-  XL: Size.XL,
-};

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

@@ -3,58 +3,55 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Jazzicon from '../../ui/jazzicon/jazzicon.component';
 import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
-import { AvatarBase } from '../avatar-base';
-import { Size } from '../../../helpers/constants/design-system';
+
 import Box from '../../ui/box/box';
 
+import { AvatarBase } from '../avatar-base';
 import {
-  AVATAR_ACCOUNT_DIAMETERS,
-  AVATAR_ACCOUNT_TYPES,
-  AVATAR_ACCOUNT_SIZES,
-} from './avatar-account.constants';
+  AvatarAccountDiameter,
+  AvatarAccountVariant,
+  AvatarAccountSize,
+} from './avatar-account.types';
 
 export const AvatarAccount = ({
-  size = Size.MD,
+  size = AvatarAccountSize.Md,
   address,
   className,
-  type,
+  variant = AvatarAccountVariant.Jazzicon,
   ...props
-}) => {
-  return (
-    <AvatarBase
-      size={size}
-      className={classnames('mm-avatar-account', className)}
-      {...props}
-    >
-      {type === 'Jazzicon' ? (
-        <Jazzicon
-          className={classnames('mm-avatar-account__jazzicon')}
-          address={address}
-          diameter={Number(AVATAR_ACCOUNT_DIAMETERS[size])}
-        />
-      ) : (
-        <BlockieIdenticon
-          className={classnames('mm-avatar-account__blockie')}
-          address={address}
-          diameter={Number(AVATAR_ACCOUNT_DIAMETERS[size])}
-          borderRadius="50%"
-        />
-      )}
-    </AvatarBase>
-  );
-};
+}) => (
+  <AvatarBase
+    size={size}
+    className={classnames('mm-avatar-account', className)}
+    {...props}
+  >
+    {variant === AvatarAccountVariant.Jazzicon ? (
+      <Jazzicon
+        className={classnames('mm-avatar-account__jazzicon')}
+        address={address}
+        diameter={AvatarAccountDiameter[size]}
+      />
+    ) : (
+      <BlockieIdenticon
+        address={address}
+        diameter={AvatarAccountDiameter[size]}
+        borderRadius="50%"
+      />
+    )}
+  </AvatarBase>
+);
 
 AvatarAccount.propTypes = {
   /**
    * The size of the AvatarAccount.
-   * Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
-   * Defaults to SIZES.MD
+   * Possible values could be 'AvatarAccountSize.Xs', 'AvatarAccountSize.Sm', 'AvatarAccountSize.Md', 'AvatarAccountSize.Lg', 'AvatarAccountSize.Xl'
+   * Defaults to AvatarAccountSize.Md
    */
-  size: PropTypes.oneOf(Object.values(AVATAR_ACCOUNT_SIZES)),
+  size: PropTypes.oneOf(Object.values(AvatarAccountSize)),
   /**
-   * The type of the avatar to be rendered, it can render either a Jazzicon or a Blockie
+   * The variant of the avatar to be rendered, it can render either a AvatarAccountVariant.Jazzicon or a AvatarAccountVariant.Blockie
    */
-  type: PropTypes.oneOf(Object.values(AVATAR_ACCOUNT_TYPES)),
+  variant: PropTypes.oneOf(Object.values(AvatarAccountVariant)),
   /**
    * Address used for generating random image
    */

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

@@ -1,21 +1,16 @@
 import React from 'react';
 import Box from '../../ui/box/box';
-import {
-  AlignItems,
-  DISPLAY,
-  Size,
-} from '../../../helpers/constants/design-system';
+import { AlignItems, DISPLAY } from '../../../helpers/constants/design-system';
 import { AvatarAccount } from './avatar-account';
 import {
-  AVATAR_ACCOUNT_TYPES,
-  AVATAR_ACCOUNT_SIZES,
-} from './avatar-account.constants';
+  AvatarAccountVariant,
+  AvatarAccountSize,
+} from './avatar-account.types';
 
 import README from './README.mdx';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarAccount',
-
   component: AvatarAccount,
   parameters: {
     docs: {
@@ -25,18 +20,20 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(AVATAR_ACCOUNT_SIZES),
+      options: Object.values(AvatarAccountSize).map(
+        (value) => value.toLowerCase(), // Removes reverse mapping from enum this is a temporary fix until we are using typescript for everything
+      ),
     },
     address: { control: 'text' },
-    type: {
+    variant: {
       control: 'select',
-      options: Object.values(AVATAR_ACCOUNT_TYPES),
+      options: Object.values(AvatarAccountVariant),
     },
   },
   args: {
     address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
-    size: Size.MD,
-    type: AVATAR_ACCOUNT_TYPES.JAZZICON,
+    size: AvatarAccountSize.Md,
+    variant: AvatarAccountVariant.Jazzicon,
   },
 };
 
@@ -44,21 +41,20 @@ export const DefaultStory = (args) => <AvatarAccount {...args} />;
 
 DefaultStory.storyName = 'Default';
 
-export const SizeStory = (args) => (
+export const Size = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
-    <AvatarAccount {...args} size={Size.XS} />
-    <AvatarAccount {...args} size={Size.SM} />
-    <AvatarAccount {...args} size={Size.MD} />
-    <AvatarAccount {...args} size={Size.LG} />
-    <AvatarAccount {...args} size={Size.XL} />
+    <AvatarAccount {...args} size={AvatarAccountSize.Xs} />
+    <AvatarAccount {...args} size={AvatarAccountSize.Sm} />
+    <AvatarAccount {...args} size={AvatarAccountSize.Md} />
+    <AvatarAccount {...args} size={AvatarAccountSize.Lg} />
+    <AvatarAccount {...args} size={AvatarAccountSize.Xl} />
   </Box>
 );
-SizeStory.storyName = 'Size';
 
-export const Type = (args) => (
+export const Variant = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
-    <AvatarAccount {...args} type={AVATAR_ACCOUNT_TYPES.JAZZICON} />
-    <AvatarAccount {...args} type={AVATAR_ACCOUNT_TYPES.BLOCKIES} />
+    <AvatarAccount {...args} variant={AvatarAccountVariant.Jazzicon} />
+    <AvatarAccount {...args} variant={AvatarAccountVariant.Blockies} />
   </Box>
 );
 
@@ -66,12 +62,12 @@ export const Address = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={AlignItems.BASELINE} gap={1}>
     <AvatarAccount
       {...args}
-      type={AVATAR_ACCOUNT_TYPES.JAZZICON}
+      variant={AvatarAccountVariant.Jazzicon}
       address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
     />
     <AvatarAccount
       {...args}
-      type={AVATAR_ACCOUNT_TYPES.BLOCKIES}
+      variant={AvatarAccountVariant.Blockies}
       address="0x0"
     />
   </Box>

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

@@ -1,103 +1,115 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { AvatarAccount, AVATAR_ACCOUNT_SIZES } from '.';
+import { AvatarAccount, AvatarAccountSize, AvatarAccountVariant } from '.';
 import 'jest-canvas-mock';
 
 describe('AvatarAccount', () => {
-  const args = {
-    address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
-    type: 'Jazzicon',
-  };
   it('should render correctly', () => {
     const { getByTestId, container } = render(
-      <AvatarAccount data-testid="avatar-account" {...args} />,
+      <AvatarAccount
+        data-testid="avatar-account"
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+      />,
     );
     expect(getByTestId('avatar-account')).toBeDefined();
+    expect(container.querySelector('svg')).toBeDefined();
+    expect(
+      container.getElementsByClassName('mm-avatar-account__jazzicon'),
+    ).toBeDefined();
     expect(container).toMatchSnapshot();
   });
 
   it('should render Jazzicon correctly', () => {
-    const container = (
-      <AvatarAccount data-testid="avatar-account" {...args} type="Jazzicon" />
+    const { container } = render(
+      <AvatarAccount
+        data-testid="avatar-account"
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+        variant={AvatarAccountVariant.Jazzicon}
+      />,
     );
-    expect(container.props.type).toStrictEqual('Jazzicon');
+    expect(container.querySelector('svg')).toBeDefined();
   });
 
-  it('should render Blockie correctly', () => {
-    const container = (
-      <AvatarAccount data-testid="avatar-account" {...args} type="Blockie" />
+  it('should render Blockies correctly', () => {
+    const { container } = render(
+      <AvatarAccount
+        data-testid="avatar-account"
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+        variant={AvatarAccountVariant.Blockies}
+      />,
     );
-    expect(container.props.type).toStrictEqual('Blockie');
+    expect(container.querySelector('canvas')).toBeDefined();
+    expect(container.querySelector('img')).toBeDefined();
   });
 
   it('should render with custom classname', () => {
     const { getByTestId } = render(
       <AvatarAccount
         className="mm-avatar-account--test"
-        data-testid="classname"
-        {...args}
+        data-testid="test"
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
       />,
     );
-    expect(getByTestId('classname')).toHaveClass('mm-avatar-account--test');
+    expect(getByTestId('test')).toHaveClass('mm-avatar-account--test');
   });
 
   it('should render with address', () => {
     const container = (
       <AvatarAccount
         className="mm-avatar-account--test"
-        data-testid="classname"
-        {...args}
-        address="0x0"
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
       />
     );
-    expect(container.props.address).toStrictEqual('0x0');
+    expect(container.props.address).toStrictEqual(
+      '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+    );
   });
 
   it('should render with different size classes', () => {
     const { getByTestId } = render(
       <>
         <AvatarAccount
-          size={AVATAR_ACCOUNT_SIZES.XS}
-          data-testid={AVATAR_ACCOUNT_SIZES.XS}
-          {...args}
+          size={AvatarAccountSize.Xs}
+          data-testid={AvatarAccountSize.Xs}
+          address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
         />
         <AvatarAccount
-          size={AVATAR_ACCOUNT_SIZES.SM}
-          data-testid={AVATAR_ACCOUNT_SIZES.SM}
-          {...args}
+          size={AvatarAccountSize.Sm}
+          data-testid={AvatarAccountSize.Sm}
+          address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
         />
         <AvatarAccount
-          size={AVATAR_ACCOUNT_SIZES.MD}
-          data-testid={AVATAR_ACCOUNT_SIZES.MD}
-          {...args}
+          size={AvatarAccountSize.Md}
+          data-testid={AvatarAccountSize.Md}
+          address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
         />
         <AvatarAccount
-          size={AVATAR_ACCOUNT_SIZES.LG}
-          data-testid={AVATAR_ACCOUNT_SIZES.LG}
-          {...args}
+          size={AvatarAccountSize.Lg}
+          data-testid={AvatarAccountSize.Lg}
+          address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
         />
         <AvatarAccount
-          size={AVATAR_ACCOUNT_SIZES.XL}
-          data-testid={AVATAR_ACCOUNT_SIZES.XL}
-          {...args}
+          size={AvatarAccountSize.Xl}
+          data-testid={AvatarAccountSize.Xl}
+          address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
         />
       </>,
     );
-    expect(getByTestId(AVATAR_ACCOUNT_SIZES.XS)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.XS}`,
+    expect(getByTestId(AvatarAccountSize.Xs)).toHaveClass(
+      'mm-avatar-base--size-xs',
     );
-    expect(getByTestId(AVATAR_ACCOUNT_SIZES.SM)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.SM}`,
+    expect(getByTestId(AvatarAccountSize.Sm)).toHaveClass(
+      'mm-avatar-base--size-sm',
     );
-    expect(getByTestId(AVATAR_ACCOUNT_SIZES.MD)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.MD}`,
+    expect(getByTestId(AvatarAccountSize.Md)).toHaveClass(
+      'mm-avatar-base--size-md',
     );
-    expect(getByTestId(AVATAR_ACCOUNT_SIZES.LG)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.LG}`,
+    expect(getByTestId(AvatarAccountSize.Lg)).toHaveClass(
+      'mm-avatar-base--size-lg',
     );
-    expect(getByTestId(AVATAR_ACCOUNT_SIZES.XL)).toHaveClass(
-      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.XL}`,
+    expect(getByTestId(AvatarAccountSize.Xl)).toHaveClass(
+      'mm-avatar-base--size-xl',
     );
   });
 });

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

@@ -0,0 +1,22 @@
+import { Size } from '../../../helpers/constants/design-system';
+
+export enum AvatarAccountVariant {
+  Jazzicon = 'jazzicon',
+  Blockies = 'blockies',
+}
+
+export enum AvatarAccountSize {
+  Xs = Size.XS,
+  Sm = Size.SM,
+  Md = Size.MD,
+  Lg = Size.LG,
+  Xl = Size.XL,
+}
+
+export const AvatarAccountDiameter = {
+  [AvatarAccountSize.Xs]: 16,
+  [AvatarAccountSize.Sm]: 24,
+  [AvatarAccountSize.Md]: 32,
+  [AvatarAccountSize.Lg]: 40,
+  [AvatarAccountSize.Xl]: 48,
+} as const;

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

@@ -1,6 +1,6 @@
 export { AvatarAccount } from './avatar-account';
 export {
-  AVATAR_ACCOUNT_SIZES,
-  AVATAR_ACCOUNT_TYPES,
-  AVATAR_ACCOUNT_DIAMETERS,
-} from './avatar-account.constants';
+  AvatarAccountSize,
+  AvatarAccountVariant,
+  AvatarAccountDiameter,
+} from './avatar-account.types';

ui/components/component-library/index.js

@@ -1,8 +1,8 @@
 export {
   AvatarAccount,
-  AVATAR_ACCOUNT_SIZES,
-  AVATAR_ACCOUNT_TYPES,
-  AVATAR_ACCOUNT_DIAMETERS,
+  AvatarAccountSize,
+  AvatarAccountVariant,
+  AvatarAccountDiameter,
 } from './avatar-account';
 export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
 export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';

ui/components/component-library/text-field/text-field.stories.js

@@ -16,6 +16,7 @@ import Box from '../../ui/box/box';
 
 import {
   AvatarAccount,
+  AvatarAccountSize,
   AvatarToken,
   Button,
   ButtonIcon,
@@ -305,7 +306,10 @@ export const StartAccessoryEndAccessory = (args) => {
         truncate
         startAccessory={
           value.accountAddress && (
-            <AvatarAccount size={Size.SM} address={value.accountAddress} />
+            <AvatarAccount
+              size={AvatarAccountSize.SM}
+              address={value.accountAddress}
+            />
           )
         }
         endAccessory={