mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-04 23:14:56 +01:00
0fe3633e4d
* 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
57 lines
1.4 KiB
JavaScript
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,
|
|
};
|