1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/component-library/avatar-with-badge/avatar-with-badge.js
Nidhi Kumari 0fe3633e4d
Added AvatarBadge component (#15676)
* avatar badge component added

* resolved conflicts

* added badge prop

* updated avatar badge children/badge props

* updated badge token size to be 16px

* added AvatarBadge Test component

* added avatar badge test

* updated avatarBadge props

* added Readme and test files to AvatarWithBadge Component

* resolved conflicts

* removed unused change

* updated badge and badge props

* updated avatar badge stories

* updated constants for avatar badge

* updated avatar badge test

* replaced avatar-badge with avatar-with-badge

* updated avatar badge tests

* updated test for badgeProps
2022-10-12 23:49:12 +05:30

57 lines
1.4 KiB
JavaScript

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';
export const AvatarWithBadge = ({
children,
badgePosition,
className,
badge,
badgeWrapperProps,
...props
}) => {
return (
<Box className={classnames('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'
}
{...badgeWrapperProps}
>
{/* Generally the AvatarNetwork at SIZES.XS */}
{badge}
</Box>
</Box>
);
};
AvatarWithBadge.propTypes = {
/**
* The position of the Badge
* Possible values could be 'top', 'bottom',
*/
badgePosition: PropTypes.oneOf(Object.values(BADGE_POSITIONS)),
/**
* The Badge Wrapper props of the component. All Box props can be used
*/
badgeWrapperProps: PropTypes.shape(Box.PropTypes),
/**
* The children to be rendered inside the AvatarWithBadge
*/
children: PropTypes.node,
/**
* The badge to be rendered inside the AvatarWithBadge
*/
badge: PropTypes.object,
/**
* Add custom css class
*/
className: PropTypes.string,
};