mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Migrates avatar base to TypeScript (#18494)
* 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>
This commit is contained in:
Suryansh Anand
GitHub
parent
924df55e89
commit
c92d7380df
@ -39,13 +39,13 @@ The text styles of the `AvatarBase` is based on the `size` prop. To override thi
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { AVATAR_BASE_SIZES } from '../ui/component-library/avatar-base';
|
||||
import { AvatarBase } from '../../component-library';
|
||||
<AvatarBase size={AVATAR_BASE_SIZES.XS} />
|
||||
<AvatarBase size={AVATAR_BASE_SIZES.SM} />
|
||||
<AvatarBase size={AVATAR_BASE_SIZES.MD} />
|
||||
<AvatarBase size={AVATAR_BASE_SIZES.LG} />
|
||||
<AvatarBase size={AVATAR_BASE_SIZES.XL} />
|
||||
import { AvatarBaseSize } from '../ui/component-library/avatar-base/avatar-base.types';
|
||||
import { AvatarBase } from '../../component-library/avatar-base';
|
||||
<AvatarBase size={AvatarBaseSize.XS} />
|
||||
<AvatarBase size={AvatarBaseSize.SM} />
|
||||
<AvatarBase size={AvatarBaseSize.MD} />
|
||||
<AvatarBase size={AvatarBaseSize.LG} />
|
||||
<AvatarBase size={AvatarBaseSize.XL} />
|
||||
```
|
||||
|
||||
### Children
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import { Size } from '../../../helpers/constants/design-system';
|
||||
|
||||
export const AVATAR_BASE_SIZES = {
|
||||
XS: Size.XS,
|
||||
SM: Size.SM,
|
||||
MD: Size.MD,
|
||||
LG: Size.LG,
|
||||
XL: Size.XL,
|
||||
};
|
||||
@ -1,106 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import {
|
||||
BackgroundColor,
|
||||
BorderColor,
|
||||
TextColor,
|
||||
IconColor,
|
||||
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 = React.forwardRef(
|
||||
(
|
||||
{
|
||||
size = AVATAR_BASE_SIZES.MD,
|
||||
children,
|
||||
backgroundColor = BackgroundColor.backgroundAlternative,
|
||||
borderColor = BorderColor.borderDefault,
|
||||
color = TextColor.textDefault,
|
||||
className,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
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,
|
||||
)}
|
||||
ref={ref}
|
||||
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),
|
||||
...Object.values(IconColor),
|
||||
]),
|
||||
/**
|
||||
* 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,
|
||||
};
|
||||
|
||||
AvatarBase.displayName = 'AvatarBase';
|
||||
@ -1,3 +1,4 @@
|
||||
import { ComponentMeta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import {
|
||||
AlignItems,
|
||||
@ -5,7 +6,7 @@ import {
|
||||
TextColor,
|
||||
BackgroundColor,
|
||||
BorderColor,
|
||||
Color,
|
||||
IconColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../ui/box/box';
|
||||
@ -13,7 +14,7 @@ import Box from '../../ui/box/box';
|
||||
import { Icon, IconName } from '..';
|
||||
import README from './README.mdx';
|
||||
import { AvatarBase } from './avatar-base';
|
||||
import { AVATAR_BASE_SIZES } from './avatar-base.constants';
|
||||
import { AvatarBaseProps, AvatarBaseSize } from './avatar-base.types';
|
||||
|
||||
const marginSizeKnobOptions = [
|
||||
0,
|
||||
@ -44,7 +45,7 @@ export default {
|
||||
argTypes: {
|
||||
size: {
|
||||
control: 'select',
|
||||
options: Object.values(AVATAR_BASE_SIZES),
|
||||
options: Object.values(AvatarBaseSize),
|
||||
},
|
||||
color: {
|
||||
options: Object.values(TextColor),
|
||||
@ -85,29 +86,29 @@ export default {
|
||||
},
|
||||
},
|
||||
args: {
|
||||
size: AVATAR_BASE_SIZES.MD,
|
||||
size: AvatarBaseSize.Md,
|
||||
color: TextColor.textDefault,
|
||||
backgroundColor: BackgroundColor.backgroundAlternative,
|
||||
borderColor: BorderColor.borderDefault,
|
||||
children: 'B',
|
||||
},
|
||||
};
|
||||
} as ComponentMeta<typeof AvatarBase>;
|
||||
|
||||
export const DefaultStory = (args) => <AvatarBase {...args} />;
|
||||
export const DefaultStory = (args: AvatarBaseProps) => <AvatarBase {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Size = (args) => (
|
||||
export const Size = (args: AvatarBaseProps) => (
|
||||
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
|
||||
<AvatarBase {...args} size={AVATAR_BASE_SIZES.XS} />
|
||||
<AvatarBase {...args} size={AVATAR_BASE_SIZES.SM} />
|
||||
<AvatarBase {...args} size={AVATAR_BASE_SIZES.MD} />
|
||||
<AvatarBase {...args} size={AVATAR_BASE_SIZES.LG} />
|
||||
<AvatarBase {...args} size={AVATAR_BASE_SIZES.XL} />
|
||||
<AvatarBase {...args} size={AvatarBaseSize.Xs} />
|
||||
<AvatarBase {...args} size={AvatarBaseSize.Sm} />
|
||||
<AvatarBase {...args} size={AvatarBaseSize.Md} />
|
||||
<AvatarBase {...args} size={AvatarBaseSize.Lg} />
|
||||
<AvatarBase {...args} size={AvatarBaseSize.Xl} />
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Children = (args) => (
|
||||
export const Children = (args: AvatarBaseProps) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<AvatarBase {...args}>
|
||||
<img src="./images/eth_logo.png" />
|
||||
@ -124,12 +125,12 @@ export const Children = (args) => (
|
||||
backgroundColor={BackgroundColor.infoMuted}
|
||||
borderColor={BorderColor.infoMuted}
|
||||
>
|
||||
<Icon name={IconName.User} color={Color.infoDefault} />
|
||||
<Icon name={IconName.User} color={IconColor.infoDefault} />
|
||||
</AvatarBase>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const ColorBackgroundColorAndBorderColor = (args) => (
|
||||
export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<AvatarBase {...args}>B</AvatarBase>
|
||||
<AvatarBase
|
||||
@ -2,9 +2,15 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Color, TextColor } from '../../../helpers/constants/design-system';
|
||||
import {
|
||||
BackgroundColor,
|
||||
BorderColor,
|
||||
Color,
|
||||
TextColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import { AvatarBase } from './avatar-base';
|
||||
import { AvatarBaseSize } from './avatar-base.types';
|
||||
|
||||
describe('AvatarBase', () => {
|
||||
it('should render correctly', () => {
|
||||
@ -17,11 +23,11 @@ describe('AvatarBase', () => {
|
||||
it('should render with different size classes', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<AvatarBase size="xs" data-testid="avatar-base-xs" />
|
||||
<AvatarBase size="sm" data-testid="avatar-base-sm" />
|
||||
<AvatarBase size="md" data-testid="avatar-base-md" />
|
||||
<AvatarBase size="lg" data-testid="avatar-base-lg" />
|
||||
<AvatarBase size="xl" data-testid="avatar-base-xl" />
|
||||
<AvatarBase size={AvatarBaseSize.Xs} data-testid="avatar-base-xs" />
|
||||
<AvatarBase size={AvatarBaseSize.Sm} data-testid="avatar-base-sm" />
|
||||
<AvatarBase size={AvatarBaseSize.Md} data-testid="avatar-base-md" />
|
||||
<AvatarBase size={AvatarBaseSize.Lg} data-testid="avatar-base-lg" />
|
||||
<AvatarBase size={AvatarBaseSize.Xl} data-testid="avatar-base-xl" />
|
||||
</>,
|
||||
);
|
||||
expect(getByTestId('avatar-base-xs')).toHaveClass(
|
||||
@ -84,11 +90,11 @@ describe('AvatarBase', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<AvatarBase
|
||||
backgroundColor={TextColor.successDefault}
|
||||
backgroundColor={BackgroundColor.successDefault}
|
||||
data-testid={Color.successDefault}
|
||||
/>
|
||||
<AvatarBase
|
||||
backgroundColor={TextColor.errorDefault}
|
||||
backgroundColor={BackgroundColor.errorDefault}
|
||||
data-testid={Color.errorDefault}
|
||||
/>
|
||||
</>,
|
||||
@ -105,11 +111,11 @@ describe('AvatarBase', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<AvatarBase
|
||||
borderColor={Color.successDefault}
|
||||
borderColor={BorderColor.successDefault}
|
||||
data-testid={Color.successDefault}
|
||||
/>
|
||||
<AvatarBase
|
||||
borderColor={Color.errorDefault}
|
||||
borderColor={BorderColor.errorDefault}
|
||||
data-testid={Color.errorDefault}
|
||||
/>
|
||||
</>,
|
||||
63
ui/components/component-library/avatar-base/avatar-base.tsx
Normal file
63
ui/components/component-library/avatar-base/avatar-base.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
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>
|
||||
);
|
||||
},
|
||||
);
|
||||
@ -0,0 +1,47 @@
|
||||
import {
|
||||
BackgroundColor,
|
||||
BorderColor,
|
||||
TextColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import { TextProps } from '../text';
|
||||
|
||||
export enum AvatarBaseSize {
|
||||
Xs = 'xs',
|
||||
Sm = 'sm',
|
||||
Md = 'md',
|
||||
Lg = 'lg',
|
||||
Xl = 'xl',
|
||||
}
|
||||
|
||||
export interface AvatarBaseProps extends TextProps {
|
||||
/**
|
||||
* The size of the AvatarBase.
|
||||
* Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px),
|
||||
* 'AvatarBaseSize.Md'(32px), 'AvatarBaseSize.Lg'(40px), 'AvatarBaseSize.Xl'(48px)
|
||||
* Defaults to AvatarBaseSize.Md
|
||||
*/
|
||||
size?: AvatarBaseSize;
|
||||
/**
|
||||
* The children to be rendered inside the AvatarBase
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* The background color of the AvatarBase
|
||||
* Defaults to Color.backgroundAlternative
|
||||
*/
|
||||
backgroundColor?: BackgroundColor;
|
||||
/**
|
||||
* The background color of the AvatarBase
|
||||
* Defaults to Color.borderDefault
|
||||
*/
|
||||
borderColor?: BorderColor;
|
||||
/**
|
||||
* The color of the text inside the AvatarBase
|
||||
* Defaults to TextColor.textDefault
|
||||
*/
|
||||
color?: TextColor;
|
||||
/**
|
||||
* Additional classNames to be added to the AvatarBase
|
||||
*/
|
||||
className?: string;
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
export { AvatarBase } from './avatar-base';
|
||||
export { AVATAR_BASE_SIZES } from './avatar-base.constants';
|
||||
3
ui/components/component-library/avatar-base/index.ts
Normal file
3
ui/components/component-library/avatar-base/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { AvatarBase } from './avatar-base';
|
||||
export { AvatarBaseSize } from './avatar-base.types';
|
||||
export type { AvatarBaseProps } from './avatar-base.types';
|
||||
Loading…
Reference in New Issue
Block a user