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

housekeeping for avatar network (#16663)

Browse Source 
* added housekeeping for avatar network

* fixed alt

* updated story in Readme

* fixed indentation and added network src

* updated SIZES for avatar network

* updated snapshot

* updated docs and props

* updated name of avatar

* removed comments

* updated avatar network component

* updated readme

* updated story for badge

* added constants to the root
This commit is contained in:
Nidhi Kumari 2022-12-15 22:58:42 +05:30 committed by GitHub
parent df73d1887d
commit 4fcbaae32f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 236 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
ui/components/component-library/avatar-network/README.mdx
View File

@ -34,34 +34,88 @@ Defaults to `md`
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--size" />
</Canvas>
### Network Name
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork size={SIZES.XS} />
<AvatarNetwork size={SIZES.SM} />
<AvatarNetwork size={SIZES.MD} />
<AvatarNetwork size={SIZES.LG} />
<AvatarNetwork size={SIZES.XL} />
```
Use the `networkName` prop to set the initial alphabet of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `networkImageUrl` prop.
### Name
Use the `name` prop to set the initial letter of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `src` prop.
<Canvas>
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--network-name" />
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--name" />
</Canvas>
### Network Image Url
```jsx
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork name="Arbitrum One" />
```
Use the `networkImageUrl` prop to set the image to be rendered of the `AvatarNetwork`.
### Src
Use the `src` prop to set the image to be rendered of the `AvatarNetwork`.
<Canvas>
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--network-image-url" />
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--src" />
</Canvas>
```jsx
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork src="./images/matic-token.png" />
<AvatarNetwork src="./images/arbitrum.svg" />
<AvatarNetwork src="./images/optimism.svg" />
<AvatarNetwork src="./images/avax-token.png" />
<AvatarNetwork src="./images/palm.svg" />
<AvatarNetwork src="./images/bsc-filled.svg" />
<AvatarNetwork src="./images/fantom-opera.svg" />
<AvatarNetwork src="./images/harmony-one.svg" />
<AvatarNetwork src="./images/aurora.png" />
```
### Show Halo
If we want to display the component with halo effect. Only works if an image url is supplied to `networkImageUrl`
Use the `showHalo` prop to display the component with halo effect. Only works if an image url is supplied to `src`
<Canvas>
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--show-halo" />
</Canvas>
```jsx
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork src="./images/arbitrum.svg" showHalo/>
```
### Color, Background Color And Border Color
Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarToken`.
Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarNetwork`.
<Canvas>
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--color-background-color-and-border-color" />
</Canvas>
</Canvas>
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { AvatarNetwork } from '../../component-library';
<AvatarNetwork
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
name="G"
color={COLORS.PRIMARY_INVERSE}
>
G
</AvatarNetwork>
<AvatarNetwork
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
name="S"
color={COLORS.PRIMARY_INVERSE}
>
S
</AvatarNetwork>
```

12
ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap Normal file
View File

@ -0,0 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AvatarNetwork should render correctly 1`] = `
<div>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="avatar-network"
>
?
</div>
</div>
`;

9
ui/components/component-library/avatar-network/avatar-network.constants.js Normal file
View File

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

40
ui/components/component-library/avatar-network/avatar-network.js
View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { AvatarBase } from '../avatar-base';
import Box from '../../ui/box/box';
import {
COLORS,
SIZES,
@ -11,11 +10,12 @@ import {
ALIGN_ITEMS,
JUSTIFY_CONTENT,
} from '../../../helpers/constants/design-system';
import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
export const AvatarNetwork = ({
size = SIZES.MD,
networkName,
networkImageUrl,
name,
src,
showHalo,
color = COLORS.TEXT_DEFAULT,
backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
@ -26,10 +26,10 @@ export const AvatarNetwork = ({
const [showFallback, setShowFallback] = useState(false);
useEffect(() => {
setShowFallback(!networkImageUrl);
}, [networkImageUrl]);
setShowFallback(!src);
}, [src]);
const fallbackString = networkName && networkName[0] ? networkName[0] : '?';
const fallbackString = name && name[0] ? name[0] : '?';
const handleOnError = () => {
setShowFallback(true);
@ -42,8 +42,8 @@ export const AvatarNetwork = ({
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
className={classnames(
'avatar-network',
showHalo && 'avatar-network--with-halo',
'mm-avatar-network',
showHalo && 'mm-avatar-network--with-halo',
className,
)}
{...{ backgroundColor, borderColor, color, ...props }}
@ -54,9 +54,9 @@ export const AvatarNetwork = ({
<>
{showHalo && (
<img
src={networkImageUrl}
src={src}
className={
showHalo ? 'avatar-network__network-image--blurred' : ''
showHalo ? 'mm-avatar-network__network-image--blurred' : ''
}
aria-hidden="true"
/>
@ -64,12 +64,12 @@ export const AvatarNetwork = ({
<img
className={
showHalo
? 'avatar-network__network-image--size-reduced'
: 'avatar-network__network-image'
? 'mm-avatar-network__network-image--size-reduced'
: 'mm-avatar-network__network-image'
}
onError={handleOnError}
src={networkImageUrl}
alt={networkName || 'network avatar'}
src={src}
alt={`${name} logo` || 'network logo'}
/>
</>
)}
@ -79,23 +79,23 @@ export const AvatarNetwork = ({
AvatarNetwork.propTypes = {
/**
* The networkName accepts the string to render the first alphabet of the Avatar Name
* The name accepts the string to render the first alphabet of the Avatar Name
*/
networkName: PropTypes.string,
name: PropTypes.string,
/**
* The networkImageUrl accepts the string of the image to be rendered
* The src accepts the string of the image to be rendered
*/
networkImageUrl: PropTypes.string,
src: PropTypes.string,
/**
* The showHalo accepts a boolean prop to render the image with halo effect
*/
showHalo: PropTypes.bool,
/**
* The size of the AvatarNetwork
* Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL'
* 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(SIZES)),
size: PropTypes.oneOf(Object.values(AVATAR_NETWORK_SIZES)),
/**
* The background color of the AvatarNetwork
* Defaults to COLORS.BACKGROUND_ALTERNATIVE

2
ui/components/component-library/avatar-network/avatar-network.scss
View File

@ -1,4 +1,4 @@
.avatar-network {
.mm-avatar-network {
&--with-halo {
position: relative;
}

41
ui/components/component-library/avatar-network/avatar-network.stories.js
View File

@ -13,6 +13,7 @@ import Box from '../../ui/box/box';
import README from './README.mdx';
import { AvatarNetwork } from './avatar-network';
import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
export default {
title: 'Components/ComponentLibrary/AvatarNetwork',
@ -26,7 +27,7 @@ export default {
argTypes: {
size: {
control: 'select',
options: Object.values(SIZES),
options: Object.values(AVATAR_NETWORK_SIZES),
},
color: {
options: Object.values(TEXT_COLORS),
@ -40,10 +41,10 @@ export default {
options: Object.values(BORDER_COLORS),
control: 'select',
},
networkName: {
name: {
control: 'text',
},
networkImageUrl: {
src: {
control: 'text',
},
showHalo: {
@ -51,8 +52,8 @@ export default {
},
},
args: {
networkName: 'Arbitrum One',
networkImageUrl: './images/arbitrum.svg',
name: 'Arbitrum One',
src: './images/arbitrum.svg',
size: SIZES.MD,
showHalo: false,
},
@ -75,12 +76,24 @@ export const Size = (args) => (
</Box>
);
export const NetworkName = Template.bind({});
NetworkName.args = {
networkImageUrl: '',
export const Name = Template.bind({});
Name.args = {
src: '',
};
export const NetworkImageUrl = Template.bind({});
export const Src = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<AvatarNetwork {...args} src="./images/matic-token.png" />
<AvatarNetwork {...args} src="./images/arbitrum.svg" />
<AvatarNetwork {...args} src="./images/optimism.svg" />
<AvatarNetwork {...args} src="./images/avax-token.png" />
<AvatarNetwork {...args} src="./images/palm.svg" />
<AvatarNetwork {...args} src="./images/bsc-filled.svg" />
<AvatarNetwork {...args} src="./images/fantom-opera.svg" />
<AvatarNetwork {...args} src="./images/harmony-one.svg" />
<AvatarNetwork {...args} src="./images/aurora.png" />
</Box>
);
export const ShowHalo = Template.bind({});
ShowHalo.args = {
@ -93,18 +106,18 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
{...args}
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
networkName="G"
color={COLORS.PRIMARY_INVERSE} // This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar
name="G"
color={COLORS.PRIMARY_INVERSE} // TODO: update it to COLORS.GOERLI_INVERSE
/>
<AvatarNetwork
{...args}
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
networkName="G"
color={COLORS.PRIMARY_INVERSE} // This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar
name="S"
color={COLORS.PRIMARY_INVERSE} // TODO: update it to COLORS.GOERLI_INVERSE
/>
</Box>
);
ColorBackgroundColorAndBorderColor.args = {
networkImageUrl: '',
src: '',
};

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

@ -2,36 +2,35 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { COLORS } from '../../../helpers/constants/design-system';
import { AvatarNetwork } from './avatar-network';
describe('AvatarNetwork', () => {
const args = {
networkName: 'ethereum',
networkImageUrl: './images/eth_logo.svg',
name: 'ethereum',
src: './images/eth_logo.svg',
showHalo: false,
};
it('should render correctly', () => {
const { getByTestId } = render(
const { getByTestId, container } = render(
<AvatarNetwork data-testid="avatar-network" />,
);
expect(getByTestId('avatar-network')).toBeDefined();
expect(container).toMatchSnapshot();
});
it('should render image of Avatar Network', () => {
render(<AvatarNetwork data-testid="avatar-network" {...args} />);
const image = screen.getByRole('img');
expect(image).toBeDefined();
expect(image).toHaveAttribute('src', args.networkImageUrl);
expect(image).toHaveAttribute('src', args.src);
});
it('should render the first letter of the networkName prop if no networkImageUrl is provided', () => {
it('should render the first letter of the name prop if no src is provided', () => {
const { getByText } = render(
<AvatarNetwork
data-testid="avatar-network"
{...args}
networkImageUrl=""
/>,
<AvatarNetwork data-testid="avatar-network" {...args} src="" />,
);
expect(getByText('e')).toBeDefined();
});
@ -39,18 +38,85 @@ describe('AvatarNetwork', () => {
it('should render halo effect if showHalo is true and image url is there', () => {
render(<AvatarNetwork data-testid="avatar-network" {...args} showHalo />);
const image = screen.getAllByRole('img', { hidden: true });
expect(image[1]).toHaveClass('avatar-network__network-image--size-reduced');
expect(image[1]).toHaveClass(
'mm-avatar-network__network-image--size-reduced',
);
});
it('should render the first letter of the networkName prop when showHalo is true and no image url is provided', () => {
it('should render the first letter of the name prop when showHalo is true and no image url is provided', () => {
const { getByText } = render(
<AvatarNetwork
{...args}
networkImageUrl=""
data-testid="avatar-network"
showHalo
/>,
<AvatarNetwork {...args} src="" data-testid="avatar-network" showHalo />,
);
expect(getByText('e')).toBeDefined();
});
// className
it('should render with custom className', () => {
const { getByTestId } = render(
<AvatarNetwork data-testid="avatar-network" className="test-class" />,
);
expect(getByTestId('avatar-network')).toHaveClass('test-class');
});
// color
it('should render with different colors', () => {
const { getByTestId } = render(
<>
<AvatarNetwork
color={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
/>
<AvatarNetwork
color={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--color-${COLORS.SUCCESS_DEFAULT}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--color-${COLORS.ERROR_DEFAULT}`,
);
});
// background color
it('should render with different background colors', () => {
const { getByTestId } = render(
<>
<AvatarNetwork
backgroundColor={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
/>
<AvatarNetwork
backgroundColor={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--background-color-${COLORS.SUCCESS_DEFAULT}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--background-color-${COLORS.ERROR_DEFAULT}`,
);
});
// border color
it('should render with different border colors', () => {
const { getByTestId } = render(
<>
<AvatarNetwork
borderColor={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
/>
<AvatarNetwork
borderColor={COLORS.ERROR_DEFAULT}
data-testid={COLORS.ERROR_DEFAULT}
/>
</>,
);
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass(
`box--border-color-${COLORS.SUCCESS_DEFAULT}`,
);
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
`box--border-color-${COLORS.ERROR_DEFAULT}`,
);
});
});

1
ui/components/component-library/avatar-network/index.js
View File

@ -1 +1,2 @@
export { AvatarNetwork } from './avatar-network';
export { AVATAR_NETWORK_SIZES } from './avatar-network.constants';

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

@ -21,7 +21,7 @@ The `AvatarWithBadge` accepts all props below
Use the `badgePosition` prop to set the position of the badge, it can have two values `Top` and `Bottom`
<Canvas>
<Story id="ui-components-component-library-avatar-with-badge-avatar-with-badge-stories-js--badge-positions" />
<Story id="ui-components-component-library-avatar-with-badge-avatar-with-badge-stories-js--badge-position" />
</Canvas>
### Badge

12
ui/components/component-library/avatar-with-badge/avatar-with-badge.stories.js
View File

@ -37,8 +37,8 @@ export const DefaultStory = (args) => (
badge={
<AvatarNetwork
size={SIZES.XS}
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
name="Arbitrum One"
src="./images/arbitrum.svg"
/>
}
{...args}
@ -59,8 +59,8 @@ export const BadgePosition = () => (
badge={
<AvatarNetwork
size={SIZES.XS}
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
name="Arbitrum One"
src="./images/arbitrum.svg"
/>
}
>
@ -76,8 +76,8 @@ export const BadgePosition = () => (
badge={
<AvatarNetwork
size={SIZES.XS}
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
name="Arbitrum One"
src="./images/arbitrum.svg"
/>
}
>

16
ui/components/component-library/avatar-with-badge/avatar-with-badge.test.js
View File

@ -14,8 +14,8 @@ describe('AvatarWithBadge', () => {
data-testid="avatar-with-badge"
badge={
<AvatarNetwork
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
name="Arbitrum One"
src="./images/arbitrum.svg"
data-testid="badge"
/>
}
@ -32,8 +32,8 @@ describe('AvatarWithBadge', () => {
badgePosition={BADGE_POSITIONS.BOTTOM}
badge={
<AvatarNetwork
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
name="Arbitrum One"
src="./images/arbitrum.svg"
data-testid="badge"
/>
}
@ -54,8 +54,8 @@ describe('AvatarWithBadge', () => {
badgePosition={BADGE_POSITIONS.TOP}
badge={
<AvatarNetwork
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
name="Arbitrum One"
src="./images/arbitrum.svg"
data-testid="badge"
/>
}
@ -76,8 +76,8 @@ describe('AvatarWithBadge', () => {
badgeWrapperProps={{ borderColor: COLORS.ERROR_DEFAULT }}
badge={
<AvatarNetwork
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
name="Arbitrum One"
src="./images/arbitrum.svg"
data-testid="badge"
/>
}

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

@ -1,7 +1,7 @@
export { AvatarAccount } from './avatar-account';
export { AvatarFavicon } from './avatar-favicon';
export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
export { AvatarNetwork } from './avatar-network';
export { AvatarNetwork, AVATAR_NETWORK_SIZES } from './avatar-network';
export { AvatarToken } from './avatar-token';
export { AvatarWithBadge } from './avatar-with-badge';
export { AvatarBase } from './avatar-base';

2
ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
data-testid="picker-network"
>
<div
class="box mm-avatar-base mm-avatar-base--size-xs avatar-network mm-picker-network__avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
class="box mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-picker-network__avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
>
I
</div>

4
ui/components/component-library/picker-network/picker-network.js
View File

@ -37,8 +37,8 @@ export const PickerNetwork = ({
>
<AvatarNetwork
className="mm-picker-network__avatar-network"
networkImageUrl={src}
networkName={label}
src={src}
name={label}
size={SIZES.XS}
{...avatarNetworkProps}
/>