From e72dfad21a2034e66cff93e19e2a3e8d47448a85 Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Fri, 7 Oct 2022 21:23:40 +0530
Subject: [PATCH] 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>
---
 .../avatar-account/README.mdx                 | 43 ++++++++++++++
 .../avatar-account.constants.js               | 12 ++++
 .../avatar-account/avatar-account.js          | 54 +++++++++++++++++
 .../avatar-account/avatar-account.scss        |  5 ++
 .../avatar-account/avatar-account.stories.js  | 59 +++++++++++++++++++
 .../avatar-account/avatar-account.test.js     | 23 ++++++++
 .../component-library/avatar-account/index.js |  1 +
 .../component-library-components.scss         |  1 +
 8 files changed, 198 insertions(+)
 create mode 100644 ui/components/component-library/avatar-account/README.mdx
 create mode 100644 ui/components/component-library/avatar-account/avatar-account.constants.js
 create mode 100644 ui/components/component-library/avatar-account/avatar-account.js
 create mode 100644 ui/components/component-library/avatar-account/avatar-account.scss
 create mode 100644 ui/components/component-library/avatar-account/avatar-account.stories.js
 create mode 100644 ui/components/component-library/avatar-account/avatar-account.test.js
 create mode 100644 ui/components/component-library/avatar-account/index.js

diff --git a/ui/components/component-library/avatar-account/README.mdx b/ui/components/component-library/avatar-account/README.mdx
new file mode 100644
index 000000000..da8be813c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ui/components/component-library/avatar-account/avatar-account.constants.js b/ui/components/component-library/avatar-account/avatar-account.constants.js
new file mode 100644
index 000000000..fd4e7e7cd
--- /dev/null
+++ b/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',
+};
diff --git a/ui/components/component-library/avatar-account/avatar-account.js b/ui/components/component-library/avatar-account/avatar-account.js
new file mode 100644
index 000000000..032703718
--- /dev/null
+++ b/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,
+};
diff --git a/ui/components/component-library/avatar-account/avatar-account.scss b/ui/components/component-library/avatar-account/avatar-account.scss
new file mode 100644
index 000000000..72d32de8a
--- /dev/null
+++ b/ui/components/component-library/avatar-account/avatar-account.scss
@@ -0,0 +1,5 @@
+.avatar-account {
+  &__jazzicon {
+    display: flex;
+  }
+}
diff --git a/ui/components/component-library/avatar-account/avatar-account.stories.js b/ui/components/component-library/avatar-account/avatar-account.stories.js
new file mode 100644
index 000000000..f3fb9ce31
--- /dev/null
+++ b/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>
+);
diff --git a/ui/components/component-library/avatar-account/avatar-account.test.js b/ui/components/component-library/avatar-account/avatar-account.test.js
new file mode 100644
index 000000000..94cf2783d
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/ui/components/component-library/avatar-account/index.js b/ui/components/component-library/avatar-account/index.js
new file mode 100644
index 000000000..f314e744d
--- /dev/null
+++ b/ui/components/component-library/avatar-account/index.js
@@ -0,0 +1 @@
+export { AvatarAccount } from './avatar-account';
diff --git a/ui/components/component-library/component-library-components.scss b/ui/components/component-library/component-library-components.scss
index 2a9363272..d15655bb0 100644
--- a/ui/components/component-library/component-library-components.scss
+++ b/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';