mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
67bfd446fc
* replace base avatar with avatar base component * updated tests * updated description for props * updated docs and background colors * updated snapshot * replaced size with avatar size constant * added tests and fixed indentation * fixed indentation in readme
66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
import Box from '../../ui/box/box';
|
|
import { COLORS } from '../../../helpers/constants/design-system';
|
|
import { AVATAR_BASE_SIZES } from './avatar-base.constants';
|
|
|
|
export const AvatarBase = ({
|
|
size = AVATAR_BASE_SIZES.MD,
|
|
children,
|
|
backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
|
|
borderColor = COLORS.BORDER_DEFAULT,
|
|
color = COLORS.TEXT_DEFAULT,
|
|
className,
|
|
...props
|
|
}) => (
|
|
<Box
|
|
className={classnames(
|
|
'mm-avatar-base',
|
|
`mm-avatar-base--size-${size}`,
|
|
className,
|
|
)}
|
|
{...{ backgroundColor, borderColor, color, ...props }}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
|
|
AvatarBase.propTypes = {
|
|
/**
|
|
* The size of the AvatarBase.
|
|
* Possible values could be 'AVATAR_BASE_SIZES.XS'(16px), 'AVATAR_BASE_SIZES.SM'(24px), 'AVATAR_BASE_SIZES.MD'(32px), 'AVATAR_BASE_SIZES.LG'(40px), 'AVATAR_BASE_SIZES.XL'(48px)
|
|
* Defaults to AVATAR_BASE_SIZES.MD
|
|
*/
|
|
size: PropTypes.oneOf(Object.values(AVATAR_BASE_SIZES)),
|
|
/**
|
|
* The children to be rendered inside the AvatarBase
|
|
*/
|
|
children: PropTypes.node,
|
|
/**
|
|
* The background color of the AvatarBase
|
|
* Defaults to COLORS.BACKGROUND_ALTERNATIVE
|
|
*/
|
|
backgroundColor: Box.propTypes.backgroundColor,
|
|
/**
|
|
* The background color of the AvatarBase
|
|
* Defaults to COLORS.BORDER_DEFAULT
|
|
*/
|
|
borderColor: Box.propTypes.borderColor,
|
|
/**
|
|
* The color of the text inside the AvatarBase
|
|
* Defaults to COLORS.TEXT_DEFAULT
|
|
*/
|
|
color: Box.propTypes.color,
|
|
/**
|
|
* Additional classNames to be added to the AvatarToken
|
|
*/
|
|
className: PropTypes.string,
|
|
/**
|
|
* AvatarBase also accepts all Box props including but not limited to
|
|
* className, as(change root element of HTML element) and margin props
|
|
*/
|
|
...Box.propTypes,
|
|
};
|