AvatarWithBadge Housekeeping (#16985)

* updated classnames

* updated readme and tests for avatar with badge

* updated constants in root

* replacing BADGE_POSITIONS with AVATAR_WITH_BADGE_BADGE_POSITIONS

ui/components/component-library/avatar-with-badge/README.mdx

@@ -12,7 +12,7 @@ The `AvatarWithBadge` is a wrapper component that adds badge display options to
 
 ## Props
 
-The `AvatarWithBadge` accepts all props below 
+The `AvatarWithBadge` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props.
 
 <ArgsTable of={AvatarWithBadge} />
 
@@ -24,9 +24,47 @@ Use the `badgePosition` prop to set the position of the badge, it can have two v
   <Story id="ui-components-component-library-avatar-with-badge-avatar-with-badge-stories-js--badge-position" />
 </Canvas>
 
+```jsx
+import { AvatarWithBadge } from '../ui/component-library';
+
+<AvatarWithBadge
+  badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
+  badge={
+    <AvatarNetwork
+      size={SIZES.XS}
+      name="Arbitrum One"
+      src="./images/arbitrum.svg"
+    />
+  }
+>
+  <AvatarAccount
+    address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+    size={SIZES.MD}
+    type={TYPES.JAZZICON}
+  />
+</AvatarWithBadge>
+
+<AvatarWithBadge
+  badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
+  badge={
+    <AvatarNetwork
+      size={SIZES.XS}
+      name="Arbitrum One"
+      src="./images/arbitrum.svg"
+    />
+  }
+>
+  <AvatarAccount
+    address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+    size={SIZES.MD}
+    type={TYPES.JAZZICON}
+  />
+</AvatarWithBadge>
+```
+
 ### Badge
 
-Used to define the badge component to be rendered inside the `AvatarWithBadge`
+Used to define the badge component to be rendered inside the `AvatarWithBadge`.
 
 ### Badge Props
 

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarWithBadge should render correctly 1`] = `
+<div>
+  <div
+    class="box mm-avatar-with-badge box--flex-direction-row"
+    data-testid="avatar-with-badge"
+  >
+    <div
+      class="box mm-avatar-with-badge__badge-wrapper--position-bottom box--flex-direction-row"
+    >
+      <div
+        class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
+        data-testid="badge"
+      >
+        <img
+          alt="Arbitrum One logo"
+          class="mm-avatar-network__network-image"
+          src="./images/arbitrum.svg"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -1,4 +1,4 @@
-export const BADGE_POSITIONS = {
+export const AVATAR_WITH_BADGE_POSTIONS = {
   TOP: 'top',
   BOTTOM: 'bottom',
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Box from '../../ui/box/box';
-import { BADGE_POSITIONS } from './avatar-with-badge.constants';
+import { AVATAR_WITH_BADGE_POSTIONS } from './avatar-with-badge.constants';
 
 export const AvatarWithBadge = ({
   children,
@@ -13,14 +13,14 @@ export const AvatarWithBadge = ({
   ...props
 }) => {
   return (
-    <Box className={classnames('avatar-with-badge', className)} {...props}>
+    <Box className={classnames('mm-avatar-with-badge', className)} {...props}>
       {/* Generally the AvatarAccount */}
       {children}
       <Box
         className={
           badgePosition === 'top'
-            ? 'avatar-with-badge__badge-wrapper--position-top'
-            : 'avatar-with-badge__badge-wrapper--position-bottom'
+            ? 'mm-avatar-with-badge__badge-wrapper--position-top'
+            : 'mm-avatar-with-badge__badge-wrapper--position-bottom'
         }
         {...badgeWrapperProps}
       >
@@ -36,7 +36,7 @@ AvatarWithBadge.propTypes = {
    * The position of the Badge
    * Possible values could be 'top', 'bottom',
    */
-  badgePosition: PropTypes.oneOf(Object.values(BADGE_POSITIONS)),
+  badgePosition: PropTypes.oneOf(Object.values(AVATAR_WITH_BADGE_POSTIONS)),
   /**
    * The Badge Wrapper props of the component. All Box props can be used
    */
@@ -53,4 +53,8 @@ AvatarWithBadge.propTypes = {
    * Add custom css class
    */
   className: PropTypes.string,
+  /**
+   * AvatarWithBadge accepts all the props from Box
+   */
+  ...Box.propTypes,
 };

ui/components/component-library/avatar-with-badge/avatar-with-badge.scss

@@ -1,4 +1,4 @@
-.avatar-with-badge {
+.mm-avatar-with-badge {
   position: relative;
   width: fit-content;
 

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

@@ -8,7 +8,7 @@ import {
   DISPLAY,
   SIZES,
 } from '../../../helpers/constants/design-system';
-import { BADGE_POSITIONS } from './avatar-with-badge.constants';
+import { AVATAR_WITH_BADGE_POSTIONS } from './avatar-with-badge.constants';
 import README from './README.mdx';
 import { AvatarWithBadge } from './avatar-with-badge';
 
@@ -23,12 +23,12 @@ export default {
   },
   argTypes: {
     badgePosition: {
-      options: Object.values(BADGE_POSITIONS),
+      options: Object.values(AVATAR_WITH_BADGE_POSTIONS),
       control: 'select',
     },
   },
   args: {
-    badgePosition: BADGE_POSITIONS.top,
+    badgePosition: AVATAR_WITH_BADGE_POSTIONS.top,
   },
 };
 
@@ -55,7 +55,7 @@ DefaultStory.storyName = 'Default';
 export const BadgePosition = () => (
   <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
     <AvatarWithBadge
-      badgePosition={BADGE_POSITIONS.BOTTOM}
+      badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
       badge={
         <AvatarNetwork
           size={SIZES.XS}
@@ -72,7 +72,7 @@ export const BadgePosition = () => (
     </AvatarWithBadge>
 
     <AvatarWithBadge
-      badgePosition={BADGE_POSITIONS.TOP}
+      badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
       badge={
         <AvatarNetwork
           size={SIZES.XS}

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

@@ -4,13 +4,13 @@ import React from 'react';
 import { AvatarNetwork } from '../avatar-network/avatar-network';
 import { COLORS } from '../../../helpers/constants/design-system';
 import { AvatarWithBadge } from './avatar-with-badge';
-import { BADGE_POSITIONS } from './avatar-with-badge.constants';
+import { AVATAR_WITH_BADGE_POSTIONS } from './avatar-with-badge.constants';
 
 describe('AvatarWithBadge', () => {
   it('should render correctly', () => {
-    const { getByTestId } = render(
+    const { getByTestId, container } = render(
       <AvatarWithBadge
-        badgePosition={BADGE_POSITIONS.BOTTOM}
+        badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
         data-testid="avatar-with-badge"
         badge={
           <AvatarNetwork
@@ -23,13 +23,14 @@ describe('AvatarWithBadge', () => {
     );
     expect(getByTestId('avatar-with-badge')).toBeDefined();
     expect(getByTestId('badge')).toBeDefined();
+    expect(container).toMatchSnapshot();
   });
 
   it('should render badge network with bottom right position correctly', () => {
     const { container } = render(
       <AvatarWithBadge
         data-testid="avatar-with-badge"
-        badgePosition={BADGE_POSITIONS.BOTTOM}
+        badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
         badge={
           <AvatarNetwork
             name="Arbitrum One"
@@ -42,7 +43,7 @@ describe('AvatarWithBadge', () => {
 
     expect(
       container.getElementsByClassName(
-        'avatar-with-badge__badge-wrapper--position-bottom',
+        'mm-avatar-with-badge__badge-wrapper--position-bottom',
       ),
     ).toHaveLength(1);
   });
@@ -51,7 +52,7 @@ describe('AvatarWithBadge', () => {
     const { container } = render(
       <AvatarWithBadge
         data-testid="avatar-with-badge"
-        badgePosition={BADGE_POSITIONS.TOP}
+        badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
         badge={
           <AvatarNetwork
             name="Arbitrum One"
@@ -64,7 +65,7 @@ describe('AvatarWithBadge', () => {
 
     expect(
       container.getElementsByClassName(
-        'avatar-with-badge__badge-wrapper--position-top',
+        'mm-avatar-with-badge__badge-wrapper--position-top',
       ),
     ).toHaveLength(1);
   });
@@ -72,7 +73,7 @@ describe('AvatarWithBadge', () => {
     const container = (
       <AvatarWithBadge
         data-testid="avatar-with-badge"
-        badgePosition={BADGE_POSITIONS.TOP}
+        badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
         badgeWrapperProps={{ borderColor: COLORS.ERROR_DEFAULT }}
         badge={
           <AvatarNetwork
@@ -87,4 +88,15 @@ describe('AvatarWithBadge', () => {
       'error-default',
     );
   });
+
+  // className
+  it('should render with custom className', () => {
+    const { getByTestId } = render(
+      <AvatarWithBadge
+        data-testid="avatar-with-badge"
+        className="test-class"
+      />,
+    );
+    expect(getByTestId('avatar-with-badge')).toHaveClass('test-class');
+  });
 });

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

@@ -1 +1,2 @@
 export { AvatarWithBadge } from './avatar-with-badge';
+export { AVATAR_WITH_BADGE_POSTIONS } from './avatar-with-badge.constants';

ui/components/component-library/index.js

@@ -3,7 +3,10 @@ export { AvatarFavicon } from './avatar-favicon';
 export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
 export { AvatarNetwork, AVATAR_NETWORK_SIZES } from './avatar-network';
 export { AvatarToken } from './avatar-token';
-export { AvatarWithBadge } from './avatar-with-badge';
+export {
+  AvatarWithBadge,
+  AVATAR_WITH_BADGE_POSTIONS,
+} from './avatar-with-badge';
 export { AvatarBase } from './avatar-base';
 export { Button } from './button';
 export { ButtonBase } from './button-base';