mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-26 04:20:53 +01:00
c92d7380df
* Converted file extension from .js to .tsx * Updated README docs to match the enums. Resolved type errors * Updated AvatarBaseSizes enum values to string literals * Added TEXT_TRANSFORM.UPPERCASE as default value of textTransform in base file * lint fix * Solved liniting errors in avatar-base * Made enum more consistent, added desc for AvatarBaseProps * Updated snapshots of AvatarBase and exported AvatarBaseProps in index.ts * Made textTransform property accept right values in avatar-base.tsx * Adding temporary changed extensions * Reverted files back to tsx and resolved conflicts * Solved linting errors * AvatarBaseProps now extends TextProps * Changing extension to resolve conflict * Reverted extensions back to tsx after resolving conflicts * Added forwardRef in AvatarBase * Updated import name of AvatarBaseSize in README.mdx. Removed empty children attribute from AvatarBase storybook file --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: Brad Decker <bhdecker84@gmail.com>
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React, { forwardRef, Ref } from 'react';
|
|
import classnames from 'classnames';
|
|
|
|
import {
|
|
BackgroundColor,
|
|
BorderColor,
|
|
TextColor,
|
|
DISPLAY,
|
|
JustifyContent,
|
|
AlignItems,
|
|
BorderRadius,
|
|
TextVariant,
|
|
TextTransform,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import { Text, ValidTag } from '../text';
|
|
|
|
import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types';
|
|
|
|
export const AvatarBase = forwardRef(
|
|
(
|
|
{
|
|
size = AvatarBaseSize.Md,
|
|
children,
|
|
backgroundColor = BackgroundColor.backgroundAlternative,
|
|
borderColor = BorderColor.borderDefault,
|
|
color = TextColor.textDefault,
|
|
className = '',
|
|
...props
|
|
}: AvatarBaseProps,
|
|
ref: Ref<HTMLElement>,
|
|
) => {
|
|
let fallbackTextVariant;
|
|
|
|
if (size === AvatarBaseSize.Lg || size === AvatarBaseSize.Xl) {
|
|
fallbackTextVariant = TextVariant.bodyLgMedium;
|
|
} else if (size === AvatarBaseSize.Sm || size === AvatarBaseSize.Md) {
|
|
fallbackTextVariant = TextVariant.bodySm;
|
|
} else {
|
|
fallbackTextVariant = TextVariant.bodyXs;
|
|
}
|
|
return (
|
|
<Text
|
|
className={classnames(
|
|
'mm-avatar-base',
|
|
`mm-avatar-base--size-${size}`,
|
|
className,
|
|
)}
|
|
ref={ref}
|
|
as={ValidTag.Div}
|
|
display={DISPLAY.FLEX}
|
|
justifyContent={JustifyContent.center}
|
|
alignItems={AlignItems.center}
|
|
borderRadius={BorderRadius.full}
|
|
variant={fallbackTextVariant}
|
|
textTransform={TextTransform.Uppercase}
|
|
{...{ backgroundColor, borderColor, color, ...props }}
|
|
>
|
|
{children}
|
|
</Text>
|
|
);
|
|
},
|
|
);
|