avatar account housekeeping (#16930)

* avatar account housekeeping

* avatar number to the diametere

* fixed lint errors

* converting blockie to number

* updated README

* updated constants for avatar account

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

@@ -1,6 +1,7 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import { AvatarAccount } from './avatar-account';
+import { AvatarBase } from '../';
 
 # AvatarAccount
 
@@ -12,32 +13,74 @@ The `AvatarAccount` is a type of avatar reserved for representing accounts.
 
 ## Props
 
-The `AvatarAccount` accepts all props below 
+The `AvatarAccount` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props
 
 <ArgsTable of={AvatarAccount} />
 
+`AvatarAccount` 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 `AvatarAccount`.
+Use the `size` prop and the `SIZES` 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 `SIZES`
 
 Possible sizes include:
 
-- `xs` 16px
+- `SIZES.XS` 16px
-- `sm` 24px
+- `SIZES.SM` 24px
-- `md` 32px
+- `SIZES.MD` 32px
-- `lg` 40px
+- `SIZES.LG` 40px
-- `xl` 48px
+- `SIZES.XL` 48px
 
-Defaults to `md`
+Defaults to `SIZES.MD`
 
 <Canvas>
   <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--size" />
 </Canvas>
 
-### type
+```jsx
+import { SIZES } from '../../../helpers/constants/design-system';
+import { AvatarAccount } from '../ui/component-library';
+
+<AvatarAccount size={SIZES.XS} />
+<AvatarAccount size={SIZES.SM} />
+<AvatarAccount size={SIZES.MD} />
+<AvatarAccount size={SIZES.LG} />
+<AvatarAccount size={SIZES.XL} />
+```
+
+### Type
 
 Use the `type` prop for the avatar to be rendered, it can either be a Jazzicon or a Blockie
 
 <Canvas>
   <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--type" />
-</Canvas>
+</Canvas>
+
+```jsx
+import { TYPES } from './avatar-account.constants';
+import { AvatarAccount } from '../ui/component-library';
+
+<AvatarAccount type={TYPES.JAZZICON} />
+<AvatarAccount type={TYPES.BLOCKIES} />
+```
+
+### Address
+
+Use the required `address` for generating images
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--address" />
+</Canvas>
+
+```jsx
+import { TYPES } from './avatar-account.constants';
+import { AvatarAccount } from '../ui/component-library';
+
+<AvatarAccount type={TYPES.JAZZICON} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" />
+<AvatarAccount type={TYPES.BLOCKIES} address="0x0" />
+```

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarAccount should render correctly 1`] = `
+<div>
+  <div
+    class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-account box--flex-direction-row box--color-text-default box--background-color-background-alternative box--border-color-border-default box--border-style-solid box--border-width-1"
+    data-testid="avatar-account"
+  >
+    <div
+      class="mm-avatar-account__jazzicon"
+    >
+      <div
+        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(249, 108, 1);"
+      >
+        <svg
+          height="32"
+          width="32"
+          x="0"
+          y="0"
+        >
+          <rect
+            fill="#F2CA02"
+            height="32"
+            transform="translate(1.431306801437213 -0.09488555961102602) rotate(529.4 16 16)"
+            width="32"
+            x="0"
+            y="0"
+          />
+          <rect
+            fill="#FAA200"
+            height="32"
+            transform="translate(10.974858326048588 -13.039888710538095) rotate(336.9 16 16)"
+            width="32"
+            x="0"
+            y="0"
+          />
+          <rect
+            fill="#C8142C"
+            height="32"
+            transform="translate(-22.963750275720685 -20.223166935456838) rotate(276.6 16 16)"
+            width="32"
+            x="0"
+            y="0"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -1,4 +1,6 @@
-export const DIAMETERS = {
+import { SIZES } from '../../../helpers/constants/design-system';
+
+export const AVATAR_ACCOUNT_DIAMETERS = {
   xs: '16',
   sm: '24',
   md: '32',
@@ -6,7 +8,15 @@ export const DIAMETERS = {
   xl: '48',
 };
 
-export const TYPES = {
+export const AVATAR_ACCOUNT_TYPES = {
   JAZZICON: 'Jazzicon',
   BLOCKIES: 'Blockie',
 };
+
+export const AVATAR_ACCOUNT_SIZES = {
+  XS: SIZES.XS,
+  SM: SIZES.SM,
+  MD: SIZES.MD,
+  LG: SIZES.LG,
+  XL: SIZES.XL,
+};

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

@@ -4,27 +4,39 @@ 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 { SIZES } from '../../../helpers/constants/design-system';
-import { DIAMETERS, TYPES } from './avatar-account.constants';
+import Box from '../../ui/box/box';
 
-export const AvatarAccount = ({ size, address, className, type, ...props }) => {
+import {
+  AVATAR_ACCOUNT_DIAMETERS,
+  AVATAR_ACCOUNT_TYPES,
+  AVATAR_ACCOUNT_SIZES,
+} from './avatar-account.constants';
+
+export const AvatarAccount = ({
+  size = SIZES.MD,
+  address,
+  className,
+  type,
+  ...props
+}) => {
   return (
     <AvatarBase
       size={size}
-      className={classnames('avatar-account', className)}
+      className={classnames('mm-avatar-account', className)}
       {...props}
     >
       {type === 'Jazzicon' ? (
         <Jazzicon
-          className={classnames('avatar-account__jazzicon')}
+          className={classnames('mm-avatar-account__jazzicon')}
           address={address}
-          diameter={DIAMETERS[size]}
+          diameter={Number(AVATAR_ACCOUNT_DIAMETERS[size])}
         />
       ) : (
         <BlockieIdenticon
+          className={classnames('mm-avatar-account__blockie')}
           address={address}
-          diameter={DIAMETERS[size]}
+          diameter={Number(AVATAR_ACCOUNT_DIAMETERS[size])}
           borderRadius="50%"
         />
       )}
@@ -38,17 +50,22 @@ AvatarAccount.propTypes = {
    * Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
    * Defaults to SIZES.MD
    */
-  size: PropTypes.oneOf(Object.values(SIZES)),
+  size: PropTypes.oneOf(Object.values(AVATAR_ACCOUNT_SIZES)),
   /**
    * The type of the avatar to be rendered, it can render either a Jazzicon or a Blockie
    */
-  type: PropTypes.oneOf(Object.values(TYPES)),
+  type: PropTypes.oneOf(Object.values(AVATAR_ACCOUNT_TYPES)),
   /**
    * Address used for generating random image
    */
-  address: PropTypes.string,
+  address: PropTypes.string.isRequired,
   /**
    * Add custom css class
    */
   className: PropTypes.string,
+  /**
+   * AvatarAccount also accepts all Box props including but not limited to
+   * className, as(change root element of HTML element) and margin props
+   */
+  ...Box.propTypes,
 };

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

@@ -1,4 +1,4 @@
-.avatar-account {
+.mm-avatar-account {
   &__jazzicon {
     display: flex;
   }

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

@@ -6,7 +6,10 @@ import {
   SIZES,
 } from '../../../helpers/constants/design-system';
 import { AvatarAccount } from './avatar-account';
-import { TYPES } from './avatar-account.constants';
+import {
+  AVATAR_ACCOUNT_TYPES,
+  AVATAR_ACCOUNT_SIZES,
+} from './avatar-account.constants';
 
 import README from './README.mdx';
 
@@ -22,18 +25,18 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(SIZES),
+      options: Object.values(AVATAR_ACCOUNT_SIZES),
     },
     address: { control: 'text' },
     type: {
       control: 'select',
-      options: Object.values(TYPES),
+      options: Object.values(AVATAR_ACCOUNT_TYPES),
     },
   },
   args: {
     address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
     size: SIZES.MD,
-    type: TYPES.JAZZICON,
+    type: AVATAR_ACCOUNT_TYPES.JAZZICON,
   },
 };
 
@@ -53,7 +56,22 @@ export const Size = (args) => (
 
 export const Type = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
-    <AvatarAccount {...args} type={TYPES.JAZZICON} />
+    <AvatarAccount {...args} type={AVATAR_ACCOUNT_TYPES.JAZZICON} />
-    <AvatarAccount {...args} type={TYPES.BLOCKIES} />
+    <AvatarAccount {...args} type={AVATAR_ACCOUNT_TYPES.BLOCKIES} />
+  </Box>
+);
+
+export const Address = (args) => (
+  <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
+    <AvatarAccount
+      {...args}
+      type={AVATAR_ACCOUNT_TYPES.JAZZICON}
+      address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+    />
+    <AvatarAccount
+      {...args}
+      type={AVATAR_ACCOUNT_TYPES.BLOCKIES}
+      address="0x0"
+    />
   </Box>
 );

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

@@ -1,23 +1,103 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { AvatarAccount } from './avatar-account';
+import { AvatarAccount, AVATAR_ACCOUNT_SIZES } from '.';
 import 'jest-canvas-mock';
 
 describe('AvatarAccount', () => {
   const args = {
     address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+    type: 'Jazzicon',
   };
-  it('should render Jazzicon correctly', () => {
+  it('should render correctly', () => {
-    const { getByTestId } = render(
+    const { getByTestId, container } = render(
-      <AvatarAccount data-testid="avatar-account" type="Jazzicon" {...args} />,
+      <AvatarAccount data-testid="avatar-account" {...args} />,
     );
     expect(getByTestId('avatar-account')).toBeDefined();
+    expect(container).toMatchSnapshot();
   });
-  it('should render Blockie correctly', () => {
+
-    const { getByTestId } = render(
+  it('should render Jazzicon correctly', () => {
-      <AvatarAccount data-testid="avatar-account" type="Blockie" {...args} />,
+    const container = (
+      <AvatarAccount data-testid="avatar-account" {...args} type="Jazzicon" />
+    );
+    expect(container.props.type).toStrictEqual('Jazzicon');
+  });
+
+  it('should render Blockie correctly', () => {
+    const container = (
+      <AvatarAccount data-testid="avatar-account" {...args} type="Blockie" />
+    );
+    expect(container.props.type).toStrictEqual('Blockie');
+  });
+
+  it('should render with custom classname', () => {
+    const { getByTestId } = render(
+      <AvatarAccount
+        className="mm-avatar-account--test"
+        data-testid="classname"
+        {...args}
+      />,
+    );
+    expect(getByTestId('classname')).toHaveClass('mm-avatar-account--test');
+  });
+
+  it('should render with address', () => {
+    const container = (
+      <AvatarAccount
+        className="mm-avatar-account--test"
+        data-testid="classname"
+        {...args}
+        address="0x0"
+      />
+    );
+    expect(container.props.address).toStrictEqual('0x0');
+  });
+
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <AvatarAccount
+          size={AVATAR_ACCOUNT_SIZES.XS}
+          data-testid={AVATAR_ACCOUNT_SIZES.XS}
+          {...args}
+        />
+        <AvatarAccount
+          size={AVATAR_ACCOUNT_SIZES.SM}
+          data-testid={AVATAR_ACCOUNT_SIZES.SM}
+          {...args}
+        />
+        <AvatarAccount
+          size={AVATAR_ACCOUNT_SIZES.MD}
+          data-testid={AVATAR_ACCOUNT_SIZES.MD}
+          {...args}
+        />
+        <AvatarAccount
+          size={AVATAR_ACCOUNT_SIZES.LG}
+          data-testid={AVATAR_ACCOUNT_SIZES.LG}
+          {...args}
+        />
+        <AvatarAccount
+          size={AVATAR_ACCOUNT_SIZES.XL}
+          data-testid={AVATAR_ACCOUNT_SIZES.XL}
+          {...args}
+        />
+      </>,
+    );
+    expect(getByTestId(AVATAR_ACCOUNT_SIZES.XS)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.XS}`,
+    );
+    expect(getByTestId(AVATAR_ACCOUNT_SIZES.SM)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.SM}`,
+    );
+    expect(getByTestId(AVATAR_ACCOUNT_SIZES.MD)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.MD}`,
+    );
+    expect(getByTestId(AVATAR_ACCOUNT_SIZES.LG)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.LG}`,
+    );
+    expect(getByTestId(AVATAR_ACCOUNT_SIZES.XL)).toHaveClass(
+      `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.XL}`,
     );
-    expect(getByTestId('avatar-account')).toBeDefined();
   });
 });

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

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

ui/components/component-library/avatar-with-badge/avatar-with-badge.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AvatarAccount } from '../avatar-account';
-import { TYPES } from '../avatar-account/avatar-account.constants';
+import { AVATAR_ACCOUNT_TYPES } from '../avatar-account/avatar-account.constants';
 import { AvatarNetwork } from '../avatar-network';
 import Box from '../../ui/box/box';
 import {
@@ -46,7 +46,7 @@ export const DefaultStory = (args) => (
     <AvatarAccount
       address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
       size={SIZES.MD}
-      type={TYPES.JAZZICON}
+      type={AVATAR_ACCOUNT_TYPES.JAZZICON}
     />
   </AvatarWithBadge>
 );
@@ -67,7 +67,7 @@ export const BadgePosition = () => (
       <AvatarAccount
         address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
         size={SIZES.MD}
-        type={TYPES.JAZZICON}
+        type={AVATAR_ACCOUNT_TYPES.JAZZICON}
       />
     </AvatarWithBadge>
 
@@ -84,7 +84,7 @@ export const BadgePosition = () => (
       <AvatarAccount
         address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
         size={SIZES.MD}
-        type={TYPES.JAZZICON}
+        type={AVATAR_ACCOUNT_TYPES.JAZZICON}
       />
     </AvatarWithBadge>
   </Box>

ui/components/component-library/index.js

@@ -1,4 +1,9 @@
-export { AvatarAccount } from './avatar-account';
+export {
+  AvatarAccount,
+  AVATAR_ACCOUNT_SIZES,
+  AVATAR_ACCOUNT_TYPES,
+  AVATAR_ACCOUNT_DIAMETERS,
+} from './avatar-account';
 export { AvatarFavicon } from './avatar-favicon';
 export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
 export { AvatarNetwork, AVATAR_NETWORK_SIZES } from './avatar-network';