added AvatarAccount component (#15795)

* added AvatarAccount component

* updated avatar account component and README

* updated lint errors

* updated avatar account with types

* updated Jazzicon lint errors

* removed unused imports

* updated type prop and Blockie

* removed unused exports

* updated jazzicon styles

* fixed overflow in jazzicon

* updated avatar account component

* updated avatar account stories with types and size stories

* updated test for avatar account

* updated tests for avatar account

* Adding `TextFieldBase` component (#16043)

* Adding TextInputBase component

* Removing keyup and keydown props, tests and docs

* removing showClear from stories

* removing unneeded css

* simplifying uncontrolled vs controlled to work

* Fortifying maxLength test

* Lint fix for test

* Doc, style and prop updates

* Updating constant names with 'base'

* Adding a background color

* Adding a background color to input

* Adding ast-types to resolutions (#16103)

Co-authored-by: George Marshall <george.marshall@consensys.net>

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

@@ -0,0 +1,43 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { AvatarAccount } from './avatar-account';
+
+# AvatarAccount
+
+The `AvatarAccount` is a type of avatar reserved for representing accounts.
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `AvatarAccount` accepts all props below 
+
+<ArgsTable of={AvatarAccount} />
+
+### Size
+
+Use the `size` prop to set the size of the `AvatarAccount`.
+
+Possible sizes include:
+
+- `xs` 16px
+- `sm` 24px
+- `md` 32px
+- `lg` 40px
+- `xl` 48px
+
+Defaults to `md`
+
+<Canvas>
+  <Story id="ui-components-component-library-avatar-account-avatar-account-stories-js--size" />
+</Canvas>
+
+### 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>

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

@@ -0,0 +1,12 @@
+export const DIAMETERS = {
+  xs: '16',
+  sm: '24',
+  md: '32',
+  lg: '40',
+  xl: '48',
+};
+
+export const TYPES = {
+  JAZZICON: 'Jazzicon',
+  BLOCKIES: 'Blockie',
+};

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

@@ -0,0 +1,54 @@
+import React from 'react';
+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 { BaseAvatar } from '../base-avatar';
+
+import { SIZES } from '../../../helpers/constants/design-system';
+import { DIAMETERS, TYPES } from './avatar-account.constants';
+
+export const AvatarAccount = ({ size, address, className, type, ...props }) => {
+  return (
+    <BaseAvatar
+      size={size}
+      className={classnames('avatar-account', className)}
+      {...props}
+    >
+      {type === 'Jazzicon' ? (
+        <Jazzicon
+          className={classnames('avatar-account__jazzicon')}
+          address={address}
+          diameter={DIAMETERS[size]}
+        />
+      ) : (
+        <BlockieIdenticon
+          address={address}
+          diameter={DIAMETERS[size]}
+          borderRadius="50%"
+        />
+      )}
+    </BaseAvatar>
+  );
+};
+
+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
+   */
+  size: PropTypes.oneOf(Object.values(SIZES)),
+  /**
+   * The type of the avatar to be rendered, it can render either a Jazzicon or a Blockie
+   */
+  type: PropTypes.oneOf(Object.values(TYPES)),
+  /**
+   * Address used for generating random image
+   */
+  address: PropTypes.string,
+  /**
+   * Add custom css class
+   */
+  className: PropTypes.string,
+};

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

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

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import Box from '../../ui/box/box';
+import {
+  ALIGN_ITEMS,
+  DISPLAY,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+import { AvatarAccount } from './avatar-account';
+import { TYPES } from './avatar-account.constants';
+
+import README from './README.mdx';
+
+export default {
+  title: 'Components/ComponentLibrary/AvatarAccount',
+  id: __filename,
+  component: AvatarAccount,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: Object.values(SIZES),
+    },
+    address: { control: 'text' },
+    type: {
+      control: 'select',
+      options: Object.values(TYPES),
+    },
+  },
+  args: {
+    address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+    size: SIZES.MD,
+    type: TYPES.JAZZICON,
+  },
+};
+
+export const DefaultStory = (args) => <AvatarAccount {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+export const Size = (args) => (
+  <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
+    <AvatarAccount {...args} size={SIZES.XS} />
+    <AvatarAccount {...args} size={SIZES.SM} />
+    <AvatarAccount {...args} size={SIZES.MD} />
+    <AvatarAccount {...args} size={SIZES.LG} />
+    <AvatarAccount {...args} size={SIZES.XL} />
+  </Box>
+);
+
+export const Type = (args) => (
+  <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
+    <AvatarAccount {...args} type={TYPES.JAZZICON} />
+    <AvatarAccount {...args} type={TYPES.BLOCKIES} />
+  </Box>
+);

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

@@ -0,0 +1,23 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { AvatarAccount } from './avatar-account';
+import 'jest-canvas-mock';
+
+describe('AvatarAccount', () => {
+  const args = {
+    address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+  };
+  it('should render Jazzicon correctly', () => {
+    const { getByTestId } = render(
+      <AvatarAccount data-testid="avatar-account" type="Jazzicon" {...args} />,
+    );
+    expect(getByTestId('avatar-account')).toBeDefined();
+  });
+  it('should render Blockie correctly', () => {
+    const { getByTestId } = render(
+      <AvatarAccount data-testid="avatar-account" type="Blockie" {...args} />,
+    );
+    expect(getByTestId('avatar-account')).toBeDefined();
+  });
+});

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

@@ -0,0 +1 @@
+export { AvatarAccount } from './avatar-account';

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

@@ -1,4 +1,5 @@
 /** Please import your files in alphabetical order **/
+@import 'avatar-account/avatar-account';
 @import 'avatar-network/avatar-network';
 @import 'avatar-token/avatar-token';
 @import 'base-avatar/base-avatar';