added AvatarBase Component (#15307)

* added AvatarBase Component

* added README file to storybook

* converted avatar-base to base-avatar

* props for snapshot testing

* replaced snapshot testing

* Updates to stories and component

* used arrow function for component

* fixed merge conflicts

* removed box stories

* changed import order for scss files

* replaced base-avatar import with component scss file

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

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

@@ -0,0 +1,53 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { BaseAvatar } from './base-avatar';
+
+### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components
+
+# BaseAvatar
+
+The `BaseAvatar` is a wrapper component responsible for enforcing dimensions and border radius for Avatar components
+
+<Canvas>
+  <Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `BaseAvatar` accepts all props below as well as all [Box](/ui-components-ui-box-box-stories-js--default-story) component props.
+
+<ArgsTable of={BaseAvatar} />
+
+### Size
+
+Use the `size` prop to set the size of the `BaseAvatar`.
+
+Possible sizes include:
+
+- `xs` 16px
+- `sm` 24px
+- `md` 32px
+- `lg` 40px
+- `xl` 48px
+
+Defaults to `md`
+
+<Canvas>
+  <Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--size" />
+</Canvas>
+
+### Children
+
+The `BaseAvatar` component can contain images, icons or text
+
+<Canvas>
+  <Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--children" />
+</Canvas>
+
+### Background and border color
+
+Use the `backgroundColor` and `borderColor` prop to set the background and border colors of the avatar
+
+<Canvas>
+  <Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--background-and-border-color" />
+</Canvas>

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Box from '../../ui/box/box';
+import { COLORS, SIZES } from '../../../helpers/constants/design-system';
+
+export const BaseAvatar = ({
+  size = SIZES.MD,
+  children,
+  backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
+  borderColor = COLORS.BORDER_DEFAULT,
+  ...props
+}) => (
+  <Box
+    className={classnames('base-avatar', `base-avatar--size-${size}`)}
+    {...{ backgroundColor, borderColor, ...props }}
+  >
+    {children}
+  </Box>
+);
+
+BaseAvatar.propTypes = {
+  /**
+   * The size of the BaseAvatar.
+   * Possible values could be 'xs', 'sm', 'md', 'lg', 'xl',
+   */
+  size: PropTypes.oneOf(Object.values(SIZES)),
+  /**
+   * The children to be rendered inside the BaseAvatar
+   */
+  children: PropTypes.node,
+  /**
+   * The background color of the BaseAvatar
+   */
+  backgroundColor: Box.propTypes.backgroundColor,
+  /**
+   * The background color of the BaseAvatar
+   */
+  borderColor: Box.propTypes.borderColor,
+  /**
+   * BaseAvatar accepts all the props from Box
+   */
+  ...Box.propTypes,
+};

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

@@ -0,0 +1,31 @@
+.base-avatar {
+  --avatar-size: var(--size, 16px);
+
+  &--size-xs {
+    --size: 16px;
+  }
+
+  &--size-sm {
+    --size: 24px;
+  }
+
+  &--size-md {
+    --size: 32px;
+  }
+
+  &--size-lg {
+    --size: 40px;
+  }
+
+  &--size-xl {
+    --size: 48px;
+  }
+
+  height: var(--avatar-size);
+  width: var(--avatar-size);
+  border-radius: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  ALIGN_ITEMS,
+  COLORS,
+  DISPLAY,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+import { ValidBackgroundColors, ValidBorderColors } from '../../ui/box';
+import Box from '../../ui/box/box';
+
+import README from './README.mdx';
+import { BaseAvatar } from './base-avatar';
+
+const marginSizeKnobOptions = [
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  'auto',
+];
+
+export default {
+  title: 'Components/ComponentLibrary/BaseAvatar',
+  id: __filename,
+  component: BaseAvatar,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: Object.values(SIZES),
+    },
+    backgroundColor: {
+      options: ValidBackgroundColors,
+      control: 'select',
+    },
+    borderColor: {
+      options: ValidBorderColors,
+      control: 'select',
+    },
+    display: {
+      options: Object.values(DISPLAY),
+      control: 'select',
+      defaultValue: DISPLAY.FLEX,
+      table: { category: 'box props' },
+    },
+    marginTop: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginRight: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginBottom: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+    marginLeft: {
+      options: marginSizeKnobOptions,
+      control: 'select',
+      table: { category: 'box props' },
+    },
+  },
+  args: {
+    size: SIZES.MD,
+    backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
+    borderColor: COLORS.BORDER_DEFAULT,
+  },
+};
+
+export const DefaultStory = (args) => <BaseAvatar {...args}>B</BaseAvatar>;
+
+DefaultStory.storyName = 'Default';
+
+export const Size = (args) => (
+  <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
+    <BaseAvatar {...args} marginBottom={2} size={SIZES.XS} />
+    <BaseAvatar {...args} marginBottom={2} size={SIZES.SM} />
+    <BaseAvatar {...args} marginBottom={2} size={SIZES.MD} />
+    <BaseAvatar {...args} marginBottom={2} size={SIZES.LG} />
+    <BaseAvatar {...args} marginBottom={2} size={SIZES.XL} />
+  </Box>
+);
+
+export const Children = (args) => (
+  <Box display={DISPLAY.FLEX} gap={1}>
+    <BaseAvatar {...args}>
+      <img src="./images/eth_logo.svg" />
+    </BaseAvatar>
+    <BaseAvatar {...args}>
+      <img width="100%" src="./images/arbitrum.svg" />
+    </BaseAvatar>
+    <BaseAvatar {...args}>
+      <img width="100%" src="./images/avax-token.png" />
+    </BaseAvatar>
+    <BaseAvatar {...args}>A</BaseAvatar>
+    <BaseAvatar
+      {...args}
+      backgroundColor={COLORS.INFO_MUTED}
+      borderColor={COLORS.INFO_MUTED}
+    >
+      <i
+        className="fa fa-user"
+        style={{ color: 'var(--color-info-default)' }}
+      />
+    </BaseAvatar>
+  </Box>
+);
+
+export const BackgroundAndBorderColor = (args) => (
+  <Box display={DISPLAY.FLEX} gap={1}>
+    <BaseAvatar {...args}>B</BaseAvatar>
+    <BaseAvatar
+      {...args}
+      backgroundColor={COLORS.KOVAN}
+      borderColor={COLORS.KOVAN}
+    >
+      K
+    </BaseAvatar>
+    <BaseAvatar
+      {...args}
+      backgroundColor={COLORS.RINKEBY}
+      borderColor={COLORS.RINKEBY}
+    >
+      R
+    </BaseAvatar>
+    <BaseAvatar
+      {...args}
+      backgroundColor={COLORS.GOERLI}
+      borderColor={COLORS.GOERLI}
+    >
+      G
+    </BaseAvatar>
+    <BaseAvatar
+      {...args}
+      backgroundColor={COLORS.ROPSTEN}
+      borderColor={COLORS.ROPSTEN}
+    >
+      R
+    </BaseAvatar>
+  </Box>
+);

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

@@ -0,0 +1,28 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { BaseAvatar } from './base-avatar';
+
+describe('BaseAvatar', () => {
+  it('should render correctly', () => {
+    const { getByTestId } = render(<BaseAvatar data-testid="base-avatar" />);
+    expect(getByTestId('base-avatar')).toBeDefined();
+  });
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <BaseAvatar size="xs" data-testid="base-avatar-xs" />
+        <BaseAvatar size="sm" data-testid="base-avatar-sm" />
+        <BaseAvatar size="md" data-testid="base-avatar-md" />
+        <BaseAvatar size="lg" data-testid="base-avatar-lg" />
+        <BaseAvatar size="xl" data-testid="base-avatar-xl" />
+      </>,
+    );
+    expect(getByTestId('base-avatar-xs')).toHaveClass('base-avatar--size-xs');
+    expect(getByTestId('base-avatar-sm')).toHaveClass('base-avatar--size-sm');
+    expect(getByTestId('base-avatar-md')).toHaveClass('base-avatar--size-md');
+    expect(getByTestId('base-avatar-lg')).toHaveClass('base-avatar--size-lg');
+    expect(getByTestId('base-avatar-xl')).toHaveClass('base-avatar--size-xl');
+  });
+});

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

@@ -0,0 +1 @@
+export { BaseAvatar } from './base-avatar';

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

@@ -0,0 +1,2 @@
+/** Please import your files in alphabetical order **/
+@import 'base-avatar/base-avatar';

ui/components/ui/box/box.js

@@ -74,8 +74,8 @@ export const BorderColors = [
 
 const ValidSize = PropTypes.oneOf(Sizes);
 const ValidSizeAndAuto = PropTypes.oneOf([...Sizes, 'auto']);
-const ValidBackgroundColors = PropTypes.oneOf(BackgroundColors);
-const ValidBorderColors = PropTypes.oneOf(BorderColors);
+export const ValidBackgroundColors = PropTypes.oneOf(BackgroundColors);
+export const ValidBorderColors = PropTypes.oneOf(BorderColors);
 
 const ArrayOfValidSizes = PropTypes.arrayOf(ValidSize);
 export const MultipleSizes = PropTypes.oneOfType([

ui/components/ui/box/index.js

@@ -1 +1,7 @@
-export { default, MultipleSizes, MultipleSizesAndAuto } from './box';
+export {
+  default,
+  MultipleSizes,
+  MultipleSizesAndAuto,
+  ValidBackgroundColors,
+  ValidBorderColors,
+} from './box';

ui/css/index.scss

@@ -8,6 +8,7 @@
 @import './design-system/index';
 @import './utilities/colors.scss';
 @import './base-styles.scss';
+@import '../components/component-library/component-library-components.scss';
 @import '../components/app/app-components';
 @import '../components/ui/ui-components';
 @import '../pages/pages';