mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
3117890b30
* Updating AvatarBase to use Text component instead of Box and adding font size logic based on avatar size * Updating snaps
94 lines
2.5 KiB
JavaScript
94 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
import {
|
|
BackgroundColor,
|
|
BorderColor,
|
|
TextColor,
|
|
DISPLAY,
|
|
JustifyContent,
|
|
AlignItems,
|
|
BorderRadius,
|
|
TextVariant,
|
|
TEXT_TRANSFORM,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import { Text } from '../text';
|
|
|
|
import { AVATAR_BASE_SIZES } from './avatar-base.constants';
|
|
|
|
export const AvatarBase = ({
|
|
size = AVATAR_BASE_SIZES.MD,
|
|
children,
|
|
backgroundColor = BackgroundColor.backgroundAlternative,
|
|
borderColor = BorderColor.borderDefault,
|
|
color = TextColor.textDefault,
|
|
className,
|
|
...props
|
|
}) => {
|
|
let fallbackTextVariant;
|
|
|
|
if (size === AVATAR_BASE_SIZES.LG || size === AVATAR_BASE_SIZES.XL) {
|
|
fallbackTextVariant = TextVariant.bodyLgMedium;
|
|
} else if (size === AVATAR_BASE_SIZES.SM || size === AVATAR_BASE_SIZES.MD) {
|
|
fallbackTextVariant = TextVariant.bodySm;
|
|
} else {
|
|
fallbackTextVariant = TextVariant.bodyXs;
|
|
}
|
|
return (
|
|
<Text
|
|
className={classnames(
|
|
'mm-avatar-base',
|
|
`mm-avatar-base--size-${size}`,
|
|
className,
|
|
)}
|
|
as="div"
|
|
display={DISPLAY.FLEX}
|
|
justifyContent={JustifyContent.center}
|
|
alignItems={AlignItems.center}
|
|
borderRadius={BorderRadius.full}
|
|
variant={fallbackTextVariant}
|
|
textTransform={TEXT_TRANSFORM.UPPERCASE}
|
|
{...{ backgroundColor, borderColor, color, ...props }}
|
|
>
|
|
{children}
|
|
</Text>
|
|
);
|
|
};
|
|
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 Color.backgroundAlternative
|
|
*/
|
|
backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
|
|
/**
|
|
* The background color of the AvatarBase
|
|
* Defaults to Color.borderDefault
|
|
*/
|
|
borderColor: PropTypes.oneOf(Object.values(BorderColor)),
|
|
/**
|
|
* The color of the text inside the AvatarBase
|
|
* Defaults to TextColor.textDefault
|
|
*/
|
|
color: PropTypes.oneOf(Object.values(TextColor)),
|
|
/**
|
|
* Additional classNames to be added to the AvatarToken
|
|
*/
|
|
className: PropTypes.string,
|
|
/**
|
|
* AvatarBase also accepts all Text props including variant and all Box props
|
|
*/
|
|
...Text.propTypes,
|
|
};
|