m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Migrate AvatarIcon (#19107)

Browse Source 
Migrate AvatarIcon to TS


---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Binij Shrestha 2023-07-27 03:03:36 +05:45 committed by GitHub
parent bfe0323bd7
commit 6e5ab2a945
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 180 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/avatar-base/README.mdx
View File

@ -14,7 +14,7 @@ The `AvatarBase` is a wrapper component responsible for enforcing dimensions and
## Props
The `AvatarBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
The `AvatarBase` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props.
<ArgsTable of={AvatarBase} />

31
ui/components/component-library/avatar-icon/README.mdx
View File

@ -13,7 +13,7 @@ The `AvatarIcon` is an avatar component that renders only an icon inside and is
## Props
The `AvatarIcon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
The `AvatarIcon` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={AvatarIcon} />
@ -24,33 +24,30 @@ component props
### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarIcon`
Optional: `AVATAR_ICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
Use the `size` prop and the `AvatarIconSize` enum to change the size of `AvatarIcon`
Possible sizes include:
- `Size.XS` 16px
- `Size.SM` 24px
- `Size.MD` 32px
- `Size.LG` 40px
- `Size.XL` 48px
- `AvatarIconSize.Xs` 16px
- `AvatarIconSize.Sm` 24px
- `AvatarIconSize.Md` 32px
- `AvatarIconSize.Lg` 40px
- `AvatarIconSize.Xl` 48px
Defaults to `Size.MD`
Defaults to `AvatarIconSize.Md`
<Canvas>
<Story id="components-componentlibrary-avataricon--size-story" />
</Canvas>
```jsx
import { Size } from '../../../helpers/constants/design-system';
import { AvatarIcon, IconName } from '../ui/component-library';
import { AvatarIcon, AvatarIconSize } from '../ui/component-library';
<AvatarIcon {...args} size={Size.XS} />
<AvatarIcon {...args} size={Size.SM} />
<AvatarIcon {...args} size={Size.MD} />
<AvatarIcon {...args} size={Size.LG} />
<AvatarIcon {...args} size={Size.XL} />
<AvatarIcon {...args} size={AvatarIconSize.Xs} />
<AvatarIcon {...args} size={AvatarIconSize.Sm} />
<AvatarIcon {...args} size={AvatarIconSize.Md} />
<AvatarIcon {...args} size={AvatarIconSize.Lg} />
<AvatarIcon {...args} size={AvatarIconSize.Xl} />
```
### Icon Name<span style={{ color: 'red' }}>\*</span>

0
ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap → ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.tsx.snap
View File

9
ui/components/component-library/avatar-icon/avatar-icon.constants.js
View File

@ -1,9 +0,0 @@
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_ICON_SIZES = {
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

96
ui/components/component-library/avatar-icon/avatar-icon.js
View File

@ -1,96 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
BorderColor,
Size,
AlignItems,
JustifyContent,
BackgroundColor,
IconColor,
TextColor,
Display,
} from '../../../helpers/constants/design-system';
import { Box } from '../box';
import { IconName, Icon } from '../icon';
import { AvatarBase } from '../avatar-base';
import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
export const AvatarIcon = React.forwardRef(
(
{
size = Size.MD,
color = TextColor.primaryDefault,
backgroundColor = BackgroundColor.primaryMuted,
className,
iconProps,
iconName,
...props
},
ref,
) => (
<AvatarBase
ref={ref}
size={size}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
color={color}
backgroundColor={backgroundColor}
borderColor={BorderColor.transparent}
className={classnames('mm-avatar-icon', className)}
{...props}
>
<Icon
color={IconColor.inherit}
name={iconName}
size={size}
{...iconProps}
/>
</AvatarBase>
),
);
AvatarIcon.propTypes = {
/**
*
* The name of the icon to display. Should be one of IconName
*/
iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
/**
* Props for the icon inside AvatarIcon. All Icon props can be used
*/
iconProps: PropTypes.object,
/**
* The size of the AvatarIcon
* Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px
* Defaults to SIZES.MD
*/
size: PropTypes.oneOf(Object.values(AVATAR_ICON_SIZES)),
/**
* The background color of the AvatarIcon
* Defaults to BackgroundColor.primaryMuted
*/
backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
/**
* The color of the text inside the AvatarIcon
* Defaults to TextColor.primaryDefault
*/
color: PropTypes.oneOf([
...Object.values(TextColor),
...Object.values(IconColor),
]),
/**
* Additional classNames to be added to the AvatarIcon
*/
className: PropTypes.string,
/**
* AvatarIcon also accepts all Box props including but not limited to
* className, as(change root element of HTML element) and margin props
*/
...Box.propTypes,
};
AvatarIcon.displayName = 'AvatarIcon';

95
ui/components/component-library/avatar-icon/avatar-icon.stories.js → ui/components/component-library/avatar-icon/avatar-icon.stories.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import {
Size,
AlignItems,
BackgroundColor,
IconColor,
@ -13,25 +13,7 @@ import { Box } from '../box';
import { IconName } from '..';
import README from './README.mdx';
import { AvatarIcon, AVATAR_ICON_SIZES } from '.';
const marginSizeControlOptions = [
undefined,
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
'auto',
];
import { AvatarIcon, AvatarIconSize } from '.';
export default {
title: 'Components/ComponentLibrary/AvatarIcon',
@ -48,7 +30,7 @@ export default {
},
size: {
control: 'select',
options: Object.values(AVATAR_ICON_SIZES),
options: Object.values(AvatarIconSize),
},
backgroundColor: {
control: 'select',
@ -61,128 +43,105 @@ export default {
className: {
control: 'text',
},
marginTop: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginRight: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginBottom: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
marginLeft: {
options: marginSizeControlOptions,
control: 'select',
table: { category: 'box props' },
},
},
args: {
size: Size.MD,
size: AvatarIconSize.Md,
iconName: IconName.SwapHorizontal,
},
};
} as Meta<typeof AvatarIcon>;
const Template = (args) => {
return <AvatarIcon iconName={IconName.SwapHorizontal} {...args} />;
const Template: StoryFn<typeof AvatarIcon> = (args) => {
return <AvatarIcon {...args} />;
};
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const SizeStory = (args) => (
export const SizeStory: StoryFn<typeof AvatarIcon> = (args) => (
<Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
<AvatarIcon {...args} size={Size.XS} />
<AvatarIcon {...args} size={Size.SM} />
<AvatarIcon {...args} size={Size.MD} />
<AvatarIcon {...args} size={Size.LG} />
<AvatarIcon {...args} size={Size.XL} />
<AvatarIcon {...args} size={AvatarIconSize.Xs} />
<AvatarIcon {...args} size={AvatarIconSize.Sm} />
<AvatarIcon {...args} size={AvatarIconSize.Md} />
<AvatarIcon {...args} size={AvatarIconSize.Lg} />
<AvatarIcon {...args} size={AvatarIconSize.Xl} />
</Box>
);
SizeStory.storyName = 'Size';
SizeStory.args = {
iconName: IconName.Confirmation,
};
export const IconNameStory = (args) => (
export const IconNameStory: StoryFn<typeof AvatarIcon> = (args) => (
<Box display={Display.Flex} gap={1}>
<AvatarIcon
color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted}
iconName={IconName.SwapHorizontal}
{...args}
iconName={IconName.SwapHorizontal}
/>
<AvatarIcon
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
iconName={IconName.Confirmation}
{...args}
iconName={IconName.Confirmation}
/>
<AvatarIcon
color={IconColor.infoDefault}
backgroundColor={BackgroundColor.infoMuted}
iconName={IconName.Info}
{...args}
iconName={IconName.Info}
/>
<AvatarIcon
color={IconColor.warningDefault}
backgroundColor={BackgroundColor.warningMuted}
iconName={IconName.Warning}
{...args}
iconName={IconName.Warning}
/>
<AvatarIcon
color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted}
iconName={IconName.Danger}
{...args}
iconName={IconName.Danger}
/>
</Box>
);
IconNameStory.storyName = 'Icon Name';
export const ColorAndBackgroundColor = (args) => (
export const ColorAndBackgroundColor: StoryFn<typeof AvatarIcon> = (args) => (
<Box display={Display.Flex} gap={1}>
<AvatarIcon
color={IconColor.primaryDefault}
backgroundColor={BackgroundColor.primaryMuted}
iconName={IconName.SwapHorizontal}
{...args}
iconName={IconName.SwapHorizontal}
/>
<AvatarIcon
color={IconColor.primaryInverse}
backgroundColor={BackgroundColor.primaryDefault}
iconName={IconName.SwapHorizontal}
{...args}
iconName={IconName.SwapHorizontal}
/>
<AvatarIcon
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
iconName={IconName.Confirmation}
{...args}
iconName={IconName.Confirmation}
/>
<AvatarIcon
color={IconColor.infoDefault}
backgroundColor={BackgroundColor.infoMuted}
iconName={IconName.Info}
{...args}
iconName={IconName.Info}
/>
<AvatarIcon
color={IconColor.warningDefault}
backgroundColor={BackgroundColor.warningMuted}
iconName={IconName.Warning}
{...args}
iconName={IconName.Warning}
/>
<AvatarIcon
color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted}
iconName={IconName.Danger}
{...args}
iconName={IconName.Danger}
/>
</Box>
);

48
ui/components/component-library/avatar-icon/avatar-icon.test.js → ui/components/component-library/avatar-icon/avatar-icon.test.tsx
View File

@ -7,7 +7,7 @@ import {
BackgroundColor,
IconColor,
} from '../../../helpers/constants/design-system';
import { AvatarIcon, AVATAR_ICON_SIZES } from '.';
import { AvatarIcon, AvatarIconSize } from '.';
describe('AvatarIcon', () => {
it('should render correctly', () => {
@ -26,45 +26,45 @@ describe('AvatarIcon', () => {
<>
<AvatarIcon
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.XS}
data-testid={AVATAR_ICON_SIZES.XS}
size={AvatarIconSize.Xs}
data-testid={AvatarIconSize.Xs}
/>
<AvatarIcon
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.SM}
data-testid={AVATAR_ICON_SIZES.SM}
size={AvatarIconSize.Sm}
data-testid={AvatarIconSize.Sm}
/>
<AvatarIcon
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.MD}
data-testid={AVATAR_ICON_SIZES.MD}
size={AvatarIconSize.Md}
data-testid={AvatarIconSize.Md}
/>
<AvatarIcon
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.LG}
data-testid={AVATAR_ICON_SIZES.LG}
size={AvatarIconSize.Lg}
data-testid={AvatarIconSize.Lg}
/>
<AvatarIcon
iconName={IconName.SwapHorizontal}
size={AVATAR_ICON_SIZES.XL}
data-testid={AVATAR_ICON_SIZES.XL}
size={AvatarIconSize.Xl}
data-testid={AvatarIconSize.Xl}
/>
</>,
);
expect(getByTestId(AVATAR_ICON_SIZES.XS)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ICON_SIZES.XS}`,
expect(getByTestId(AvatarIconSize.Xs)).toHaveClass(
`mm-avatar-base--size-${AvatarIconSize.Xs}`,
);
expect(getByTestId(AVATAR_ICON_SIZES.SM)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ICON_SIZES.SM}`,
expect(getByTestId(AvatarIconSize.Sm)).toHaveClass(
`mm-avatar-base--size-${AvatarIconSize.Sm}`,
);
expect(getByTestId(AVATAR_ICON_SIZES.MD)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ICON_SIZES.MD}`,
expect(getByTestId(AvatarIconSize.Md)).toHaveClass(
`mm-avatar-base--size-${AvatarIconSize.Md}`,
);
expect(getByTestId(AVATAR_ICON_SIZES.LG)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ICON_SIZES.LG}`,
expect(getByTestId(AvatarIconSize.Lg)).toHaveClass(
`mm-avatar-base--size-${AvatarIconSize.Lg}`,
);
expect(getByTestId(AVATAR_ICON_SIZES.XL)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ICON_SIZES.XL}`,
expect(getByTestId(AvatarIconSize.Xl)).toHaveClass(
`mm-avatar-base--size-${AvatarIconSize.Xl}`,
);
});
@ -106,9 +106,11 @@ describe('AvatarIcon', () => {
);
});
it('should forward a ref to the root html element', () => {
const ref = React.createRef();
const ref = React.createRef<HTMLDivElement>();
render(<AvatarIcon iconName={IconName.SwapHorizontal} ref={ref} />);
expect(ref.current).not.toBeNull();
expect(ref.current.nodeName).toBe('DIV');
if (ref.current) {
expect(ref.current.nodeName).toBe('DIV');
}
});
});

59
ui/components/component-library/avatar-icon/avatar-icon.tsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
import classnames from 'classnames';
import {
BorderColor,
Display,
AlignItems,
JustifyContent,
BackgroundColor,
IconColor,
TextColor,
} from '../../../helpers/constants/design-system';
import { Icon } from '../icon';
import type { PolymorphicRef } from '../box';
import { AvatarBase, AvatarBaseProps } from '../avatar-base';
import type { AvatarIconComponent } from './avatar-icon.types';
import {
AvatarIconProps,
AvatarIconSize,
avatarIconSizeToIconSize,
} from './avatar-icon.types';
export const AvatarIcon: AvatarIconComponent = React.forwardRef(
<C extends React.ElementType = 'div'>(
{
size = AvatarIconSize.Md,
color = TextColor.primaryDefault,
backgroundColor = BackgroundColor.primaryMuted,
className = '',
iconProps,
iconName,
...props
}: AvatarIconProps<C>,
ref?: PolymorphicRef<C>,
) => {
const iconSize = avatarIconSizeToIconSize[size];
return (
<AvatarBase
ref={ref}
size={size}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
color={color as TextColor}
backgroundColor={backgroundColor}
borderColor={BorderColor.transparent}
className={classnames('mm-avatar-icon', className)}
{...(props as AvatarBaseProps<C>)}
>
<Icon
color={IconColor.inherit}
name={iconName}
size={iconSize}
{...iconProps}
/>
</AvatarBase>
);
},
);

50
ui/components/component-library/avatar-icon/avatar-icon.types.ts Normal file
View File

@ -0,0 +1,50 @@
import { IconColor, TextColor } from '../../../helpers/constants/design-system';
import { IconName, IconSize, IconStyleUtilityProps } from '../icon';
import type { PolymorphicComponentPropWithRef } from '../box';
import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types';
export enum AvatarIconSize {
Xs = 'xs',
Sm = 'sm',
Md = 'md',
Lg = 'lg',
Xl = 'xl',
}
export const avatarIconSizeToIconSize: Record<AvatarIconSize, IconSize> = {
[AvatarIconSize.Xs]: IconSize.Xs,
[AvatarIconSize.Sm]: IconSize.Sm,
[AvatarIconSize.Md]: IconSize.Md,
[AvatarIconSize.Lg]: IconSize.Lg,
[AvatarIconSize.Xl]: IconSize.Xl,
};
export interface AvatarIconStyleUtilityProps
extends Omit<AvatarBaseStyleUtilityProps, 'size' | 'children' | 'color'> {
/**
* The name of the icon to display. Should be one of IconName
*/
iconName: IconName;
/**
* Props for the icon inside AvatarIcon. All Icon props can be used
*/
iconProps?: IconStyleUtilityProps;
/**
* The size of the AvatarIcon
* Possible values could be 'AvatarIconSize.Xs' 16px, 'AvatarIconSize.Sm' 24px, 'AvatarIconSize.Md' 32px, 'AvatarIconSize.Lg' 40px, 'AvatarIconSize.Xl' 48px
* Defaults to AvatarIconSize.Md
*/
size?: AvatarIconSize;
/**
* The color of the text inside the AvatarIcon
* Defaults to TextColor.primaryDefault
*/
color?: TextColor | IconColor;
}
export type AvatarIconProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, AvatarIconStyleUtilityProps>;
export type AvatarIconComponent = <C extends React.ElementType = 'span'>(
props: AvatarIconProps<C>,
) => React.ReactElement | null;

2
ui/components/component-library/avatar-icon/index.js
View File

@ -1,2 +0,0 @@
export { AvatarIcon } from './avatar-icon';
export { AVATAR_ICON_SIZES } from './avatar-icon.constants';

3
ui/components/component-library/avatar-icon/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { AvatarIcon } from './avatar-icon';
export { AvatarIconSize } from './avatar-icon.types';
export type { AvatarIconProps } from './avatar-icon.types';

2
ui/components/component-library/index.js
View File

@ -5,7 +5,7 @@ export {
AvatarAccountDiameter,
} from './avatar-account';
export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
export { AvatarIcon, AvatarIconSize } from './avatar-icon';
export { AvatarNetwork, AvatarNetworkSize } from './avatar-network';
export { AvatarToken, AvatarTokenSize } from './avatar-token';
export { AvatarBase, AvatarBaseSize } from './avatar-base';