m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Updating AvatarAccount objects to enums (#17727)

Browse Source 
* Updating object to enums

* lint fix

* Improving test coverage

* Updating filename to .types.ts
This commit is contained in:
George Marshall 2023-03-10 12:12:55 -08:00 committed by GitHub
parent fde18dec0c
commit 5d5fa242c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 170 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/components/component-library/avatar-account/README.mdx
View File

@ -24,49 +24,45 @@ component props
### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarAccount`
Optional: `AVATAR_ACCOUNT_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
Use the `size` prop and the `AvatarAccountSize` enum from `../../component-library` to change the size of `AvatarAccount`
Possible sizes include:
- `Size.XS` 16px
- `Size.SM` 24px
- `Size.MD` 32px
- `Size.LG` 40px
- `Size.XL` 48px
- `AvatarAccountSize.Xs` 16px
- `AvatarAccountSize.Sm` 24px
- `AvatarAccountSize.Md` 32px
- `AvatarAccountSize.Lg` 40px
- `AvatarAccountSize.Xl` 48px
Defaults to `Size.MD`
Defaults to `AvatarAccountSize.MD`
<Canvas>
<Story id="components-componentlibrary-avataraccount--size-story" />
<Story id="components-componentlibrary-avataraccount--size" />
</Canvas>
```jsx
import { Size } from '../../../helpers/constants/design-system';
import { AvatarAccount } from '../ui/component-library';
import { AvatarAccount, AvatarAccountSize } from '../ui/component-library';
<AvatarAccount size={Size.XS} />
<AvatarAccount size={Size.SM} />
<AvatarAccount size={Size.MD} />
<AvatarAccount size={Size.LG} />
<AvatarAccount size={Size.XL} />
<AvatarAccount size={AvatarAccountSize.Xs} />
<AvatarAccount size={AvatarAccountSize.Sm} />
<AvatarAccount size={AvatarAccountSize.Md} />
<AvatarAccount size={AvatarAccountSize.Lg} />
<AvatarAccount size={AvatarAccountSize.Xl} />
```
### Type
### Variant
Use the `type` prop for the avatar to be rendered, it can either be a Jazzicon or a Blockie
Use the `variant` prop and the `AvatarAccountVariant` enum from `../../component-library` to change between jazzicon and blockies variants.
<Canvas>
<Story id="components-componentlibrary-avataraccount--type" />
<Story id="components-componentlibrary-avataraccount--variant" />
</Canvas>
```jsx
import { TYPES } from './avatar-account.constants';
import { AvatarAccount } from '../ui/component-library';
import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library';
<AvatarAccount type={TYPES.JAZZICON} />
<AvatarAccount type={TYPES.BLOCKIES} />
<AvatarAccount variant={AvatarAccountVariant.Jazzicon} />
<AvatarAccount variant={AvatarAccountVariant.Blockies} />
```
### Address
@ -78,9 +74,8 @@ Use the required `address` for generating images
</Canvas>
```jsx
import { TYPES } from './avatar-account.constants';
import { AvatarAccount } from '../ui/component-library';
import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library';
<AvatarAccount type={TYPES.JAZZICON} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" />
<AvatarAccount type={TYPES.BLOCKIES} address="0x0" />
<AvatarAccount variant={AvatarAccountVariant.Jazzicon} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" />
<AvatarAccount variant={AvatarAccountVariant.Blockies} address="0x0" />
```

22
ui/components/component-library/avatar-account/avatar-account.constants.js
View File

@ -1,22 +0,0 @@
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_ACCOUNT_DIAMETERS = {
xs: '16',
sm: '24',
md: '32',
lg: '40',
xl: '48',
};
export const AVATAR_ACCOUNT_TYPES = {
JAZZICON: 'Jazzicon',
BLOCKIES: 'Blockie',
};
export const AVATAR_ACCOUNT_SIZES = {
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

37
ui/components/component-library/avatar-account/avatar-account.js
View File

@ -3,58 +3,55 @@ import classnames from 'classnames';
import PropTypes from 'prop-types';
import Jazzicon from '../../ui/jazzicon/jazzicon.component';
import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component';
import { AvatarBase } from '../avatar-base';
import { Size } from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { AvatarBase } from '../avatar-base';
import {
AVATAR_ACCOUNT_DIAMETERS,
AVATAR_ACCOUNT_TYPES,
AVATAR_ACCOUNT_SIZES,
} from './avatar-account.constants';
AvatarAccountDiameter,
AvatarAccountVariant,
AvatarAccountSize,
} from './avatar-account.types';
export const AvatarAccount = ({
size = Size.MD,
size = AvatarAccountSize.Md,
address,
className,
type,
variant = AvatarAccountVariant.Jazzicon,
...props
}) => {
return (
}) => (
<AvatarBase
size={size}
className={classnames('mm-avatar-account', className)}
{...props}
>
{type === 'Jazzicon' ? (
{variant === AvatarAccountVariant.Jazzicon ? (
<Jazzicon
className={classnames('mm-avatar-account__jazzicon')}
address={address}
diameter={Number(AVATAR_ACCOUNT_DIAMETERS[size])}
diameter={AvatarAccountDiameter[size]}
/>
) : (
<BlockieIdenticon
className={classnames('mm-avatar-account__blockie')}
address={address}
diameter={Number(AVATAR_ACCOUNT_DIAMETERS[size])}
diameter={AvatarAccountDiameter[size]}
borderRadius="50%"
/>
)}
</AvatarBase>
);
};
AvatarAccount.propTypes = {
/**
* The size of the AvatarAccount.
* Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
* Defaults to SIZES.MD
* Possible values could be 'AvatarAccountSize.Xs', 'AvatarAccountSize.Sm', 'AvatarAccountSize.Md', 'AvatarAccountSize.Lg', 'AvatarAccountSize.Xl'
* Defaults to AvatarAccountSize.Md
*/
size: PropTypes.oneOf(Object.values(AVATAR_ACCOUNT_SIZES)),
size: PropTypes.oneOf(Object.values(AvatarAccountSize)),
/**
* The type of the avatar to be rendered, it can render either a Jazzicon or a Blockie
* The variant of the avatar to be rendered, it can render either a AvatarAccountVariant.Jazzicon or a AvatarAccountVariant.Blockie
*/
type: PropTypes.oneOf(Object.values(AVATAR_ACCOUNT_TYPES)),
variant: PropTypes.oneOf(Object.values(AvatarAccountVariant)),
/**
* Address used for generating random image
*/

48
ui/components/component-library/avatar-account/avatar-account.stories.js
View File

@ -1,21 +1,16 @@
import React from 'react';
import Box from '../../ui/box/box';
import {
AlignItems,
DISPLAY,
Size,
} from '../../../helpers/constants/design-system';
import { AlignItems, DISPLAY } from '../../../helpers/constants/design-system';
import { AvatarAccount } from './avatar-account';
import {
AVATAR_ACCOUNT_TYPES,
AVATAR_ACCOUNT_SIZES,
} from './avatar-account.constants';
AvatarAccountVariant,
AvatarAccountSize,
} from './avatar-account.types';
import README from './README.mdx';
export default {
title: 'Components/ComponentLibrary/AvatarAccount',
component: AvatarAccount,
parameters: {
docs: {
@ -25,18 +20,20 @@ export default {
argTypes: {
size: {
control: 'select',
options: Object.values(AVATAR_ACCOUNT_SIZES),
options: Object.values(AvatarAccountSize).map(
(value) => value.toLowerCase(), // Removes reverse mapping from enum this is a temporary fix until we are using typescript for everything
),
},
address: { control: 'text' },
type: {
variant: {
control: 'select',
options: Object.values(AVATAR_ACCOUNT_TYPES),
options: Object.values(AvatarAccountVariant),
},
},
args: {
address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
size: Size.MD,
type: AVATAR_ACCOUNT_TYPES.JAZZICON,
size: AvatarAccountSize.Md,
variant: AvatarAccountVariant.Jazzicon,
},
};
@ -44,21 +41,20 @@ export const DefaultStory = (args) => <AvatarAccount {...args} />;
DefaultStory.storyName = 'Default';
export const SizeStory = (args) => (
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<AvatarAccount {...args} size={Size.XS} />
<AvatarAccount {...args} size={Size.SM} />
<AvatarAccount {...args} size={Size.MD} />
<AvatarAccount {...args} size={Size.LG} />
<AvatarAccount {...args} size={Size.XL} />
<AvatarAccount {...args} size={AvatarAccountSize.Xs} />
<AvatarAccount {...args} size={AvatarAccountSize.Sm} />
<AvatarAccount {...args} size={AvatarAccountSize.Md} />
<AvatarAccount {...args} size={AvatarAccountSize.Lg} />
<AvatarAccount {...args} size={AvatarAccountSize.Xl} />
</Box>
);
SizeStory.storyName = 'Size';
export const Type = (args) => (
export const Variant = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
<AvatarAccount {...args} type={AVATAR_ACCOUNT_TYPES.JAZZICON} />
<AvatarAccount {...args} type={AVATAR_ACCOUNT_TYPES.BLOCKIES} />
<AvatarAccount {...args} variant={AvatarAccountVariant.Jazzicon} />
<AvatarAccount {...args} variant={AvatarAccountVariant.Blockies} />
</Box>
);
@ -66,12 +62,12 @@ export const Address = (args) => (
<Box display={DISPLAY.FLEX} alignItems={AlignItems.BASELINE} gap={1}>
<AvatarAccount
{...args}
type={AVATAR_ACCOUNT_TYPES.JAZZICON}
variant={AvatarAccountVariant.Jazzicon}
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>
<AvatarAccount
{...args}
type={AVATAR_ACCOUNT_TYPES.BLOCKIES}
variant={AvatarAccountVariant.Blockies}
address="0x0"
/>
</Box>

102
ui/components/component-library/avatar-account/avatar-account.test.js
View File

@ -1,103 +1,115 @@
/* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react';
import React from 'react';
import { AvatarAccount, AVATAR_ACCOUNT_SIZES } from '.';
import { AvatarAccount, AvatarAccountSize, AvatarAccountVariant } from '.';
import 'jest-canvas-mock';
describe('AvatarAccount', () => {
const args = {
address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
type: 'Jazzicon',
};
it('should render correctly', () => {
const { getByTestId, container } = render(
<AvatarAccount data-testid="avatar-account" {...args} />,
<AvatarAccount
data-testid="avatar-account"
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>,
);
expect(getByTestId('avatar-account')).toBeDefined();
expect(container.querySelector('svg')).toBeDefined();
expect(
container.getElementsByClassName('mm-avatar-account__jazzicon'),
).toBeDefined();
expect(container).toMatchSnapshot();
});
it('should render Jazzicon correctly', () => {
const container = (
<AvatarAccount data-testid="avatar-account" {...args} type="Jazzicon" />
const { container } = render(
<AvatarAccount
data-testid="avatar-account"
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
variant={AvatarAccountVariant.Jazzicon}
/>,
);
expect(container.props.type).toStrictEqual('Jazzicon');
expect(container.querySelector('svg')).toBeDefined();
});
it('should render Blockie correctly', () => {
const container = (
<AvatarAccount data-testid="avatar-account" {...args} type="Blockie" />
it('should render Blockies correctly', () => {
const { container } = render(
<AvatarAccount
data-testid="avatar-account"
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
variant={AvatarAccountVariant.Blockies}
/>,
);
expect(container.props.type).toStrictEqual('Blockie');
expect(container.querySelector('canvas')).toBeDefined();
expect(container.querySelector('img')).toBeDefined();
});
it('should render with custom classname', () => {
const { getByTestId } = render(
<AvatarAccount
className="mm-avatar-account--test"
data-testid="classname"
{...args}
data-testid="test"
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>,
);
expect(getByTestId('classname')).toHaveClass('mm-avatar-account--test');
expect(getByTestId('test')).toHaveClass('mm-avatar-account--test');
});
it('should render with address', () => {
const container = (
<AvatarAccount
className="mm-avatar-account--test"
data-testid="classname"
{...args}
address="0x0"
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>
);
expect(container.props.address).toStrictEqual('0x0');
expect(container.props.address).toStrictEqual(
'0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
);
});
it('should render with different size classes', () => {
const { getByTestId } = render(
<>
<AvatarAccount
size={AVATAR_ACCOUNT_SIZES.XS}
data-testid={AVATAR_ACCOUNT_SIZES.XS}
{...args}
size={AvatarAccountSize.Xs}
data-testid={AvatarAccountSize.Xs}
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>
<AvatarAccount
size={AVATAR_ACCOUNT_SIZES.SM}
data-testid={AVATAR_ACCOUNT_SIZES.SM}
{...args}
size={AvatarAccountSize.Sm}
data-testid={AvatarAccountSize.Sm}
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>
<AvatarAccount
size={AVATAR_ACCOUNT_SIZES.MD}
data-testid={AVATAR_ACCOUNT_SIZES.MD}
{...args}
size={AvatarAccountSize.Md}
data-testid={AvatarAccountSize.Md}
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>
<AvatarAccount
size={AVATAR_ACCOUNT_SIZES.LG}
data-testid={AVATAR_ACCOUNT_SIZES.LG}
{...args}
size={AvatarAccountSize.Lg}
data-testid={AvatarAccountSize.Lg}
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>
<AvatarAccount
size={AVATAR_ACCOUNT_SIZES.XL}
data-testid={AVATAR_ACCOUNT_SIZES.XL}
{...args}
size={AvatarAccountSize.Xl}
data-testid={AvatarAccountSize.Xl}
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
/>
</>,
);
expect(getByTestId(AVATAR_ACCOUNT_SIZES.XS)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.XS}`,
expect(getByTestId(AvatarAccountSize.Xs)).toHaveClass(
'mm-avatar-base--size-xs',
);
expect(getByTestId(AVATAR_ACCOUNT_SIZES.SM)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.SM}`,
expect(getByTestId(AvatarAccountSize.Sm)).toHaveClass(
'mm-avatar-base--size-sm',
);
expect(getByTestId(AVATAR_ACCOUNT_SIZES.MD)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.MD}`,
expect(getByTestId(AvatarAccountSize.Md)).toHaveClass(
'mm-avatar-base--size-md',
);
expect(getByTestId(AVATAR_ACCOUNT_SIZES.LG)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.LG}`,
expect(getByTestId(AvatarAccountSize.Lg)).toHaveClass(
'mm-avatar-base--size-lg',
);
expect(getByTestId(AVATAR_ACCOUNT_SIZES.XL)).toHaveClass(
`mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.XL}`,
expect(getByTestId(AvatarAccountSize.Xl)).toHaveClass(
'mm-avatar-base--size-xl',
);
});
});

22
ui/components/component-library/avatar-account/avatar-account.types.ts Normal file
View File

@ -0,0 +1,22 @@
import { Size } from '../../../helpers/constants/design-system';
export enum AvatarAccountVariant {
Jazzicon = 'jazzicon',
Blockies = 'blockies',
}
export enum AvatarAccountSize {
Xs = Size.XS,
Sm = Size.SM,
Md = Size.MD,
Lg = Size.LG,
Xl = Size.XL,
}
export const AvatarAccountDiameter = {
[AvatarAccountSize.Xs]: 16,
[AvatarAccountSize.Sm]: 24,
[AvatarAccountSize.Md]: 32,
[AvatarAccountSize.Lg]: 40,
[AvatarAccountSize.Xl]: 48,
} as const;

8
ui/components/component-library/avatar-account/index.js
View File

@ -1,6 +1,6 @@
export { AvatarAccount } from './avatar-account';
export {
AVATAR_ACCOUNT_SIZES,
AVATAR_ACCOUNT_TYPES,
AVATAR_ACCOUNT_DIAMETERS,
} from './avatar-account.constants';
AvatarAccountSize,
AvatarAccountVariant,
AvatarAccountDiameter,
} from './avatar-account.types';

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

@ -1,8 +1,8 @@
export {
AvatarAccount,
AVATAR_ACCOUNT_SIZES,
AVATAR_ACCOUNT_TYPES,
AVATAR_ACCOUNT_DIAMETERS,
AvatarAccountSize,
AvatarAccountVariant,
AvatarAccountDiameter,
} from './avatar-account';
export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';

6
ui/components/component-library/text-field/text-field.stories.js
View File

@ -16,6 +16,7 @@ import Box from '../../ui/box/box';
import {
AvatarAccount,
AvatarAccountSize,
AvatarToken,
Button,
ButtonIcon,
@ -305,7 +306,10 @@ export const StartAccessoryEndAccessory = (args) => {
truncate
startAccessory={
value.accountAddress && (
<AvatarAccount size={Size.SM} address={value.accountAddress} />
<AvatarAccount
size={AvatarAccountSize.SM}
address={value.accountAddress}
/>
)
}
endAccessory={