mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
added avatar network component (#15502)
* added avatar network component * reset showFallback if networkUrl changes * updated changed to avatar network * updated test cases for avatar network * updated story url in README * added avatar network class Name * updated readme for AvatarNetwork * updated avatar network * updated text changes to avatar Network and Avatar Token component * updated space between useState and useEffect * updated scss files in alphabetic order
This commit is contained in:
parent
94180e850e
commit
f2514c88cf
67
ui/components/component-library/avatar-network/README.mdx
Normal file
67
ui/components/component-library/avatar-network/README.mdx
Normal file
@ -0,0 +1,67 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import { AvatarNetwork } from './avatar-network';
|
||||
|
||||
# AvatarNetwork
|
||||
|
||||
The `AvatarNetwork` is a component responsible for display of the image of a given network
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--default-story" />
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
The `AvatarNetwork` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props
|
||||
|
||||
<ArgsTable of={AvatarNetwork} />
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to set the size of the `AvatarNetwork`.
|
||||
|
||||
Possible sizes include:
|
||||
|
||||
- `xs` 16px
|
||||
- `sm` 24px
|
||||
- `md` 32px
|
||||
- `lg` 40px
|
||||
- `xl` 48px
|
||||
|
||||
Defaults to `md`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--size" />
|
||||
</Canvas>
|
||||
|
||||
### Network Name
|
||||
|
||||
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.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--network-name" />
|
||||
</Canvas>
|
||||
|
||||
### Network Image Url
|
||||
|
||||
Use the `networkImageUrl` 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" />
|
||||
</Canvas>
|
||||
|
||||
### Show Halo
|
||||
|
||||
If we want to display the component with halo effect. Only works if an image url is supplied to `networkImageUrl`
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--show-halo" />
|
||||
</Canvas>
|
||||
|
||||
### 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`.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-avatar-network-avatar-network-stories-js--color-background-color-and-border-color" />
|
||||
</Canvas>
|
123
ui/components/component-library/avatar-network/avatar-network.js
Normal file
123
ui/components/component-library/avatar-network/avatar-network.js
Normal file
@ -0,0 +1,123 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { BaseAvatar } from '../base-avatar';
|
||||
import Box from '../../ui/box/box';
|
||||
|
||||
import {
|
||||
COLORS,
|
||||
SIZES,
|
||||
DISPLAY,
|
||||
ALIGN_ITEMS,
|
||||
JUSTIFY_CONTENT,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
export const AvatarNetwork = ({
|
||||
size = SIZES.MD,
|
||||
networkName,
|
||||
networkImageUrl,
|
||||
showHalo,
|
||||
color = COLORS.TEXT_DEFAULT,
|
||||
backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
|
||||
borderColor = COLORS.TRANSPARENT,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
const [showFallback, setShowFallback] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setShowFallback(!networkImageUrl);
|
||||
}, [networkImageUrl]);
|
||||
|
||||
const fallbackString = networkName && networkName[0] ? networkName[0] : '?';
|
||||
|
||||
const handleOnError = () => {
|
||||
setShowFallback(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseAvatar
|
||||
size={size}
|
||||
display={DISPLAY.FLEX}
|
||||
alignItems={ALIGN_ITEMS.CENTER}
|
||||
justifyContent={JUSTIFY_CONTENT.CENTER}
|
||||
className={classnames(
|
||||
'avatar-network',
|
||||
showHalo && 'avatar-network--with-halo',
|
||||
className,
|
||||
)}
|
||||
{...{ backgroundColor, borderColor, color, ...props }}
|
||||
>
|
||||
{showFallback ? (
|
||||
fallbackString
|
||||
) : (
|
||||
<>
|
||||
{showHalo && (
|
||||
<img
|
||||
src={networkImageUrl}
|
||||
className={
|
||||
showHalo ? 'avatar-network__network-image--blurred' : ''
|
||||
}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
className={
|
||||
showHalo
|
||||
? 'avatar-network__network-image--size-reduced'
|
||||
: 'avatar-network__network-image'
|
||||
}
|
||||
onError={handleOnError}
|
||||
src={networkImageUrl}
|
||||
alt={networkName || 'network avatar'}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</BaseAvatar>
|
||||
);
|
||||
};
|
||||
|
||||
AvatarNetwork.propTypes = {
|
||||
/**
|
||||
* The networkName accepts the string to render the first alphabet of the Avatar Name
|
||||
*/
|
||||
networkName: PropTypes.string,
|
||||
/**
|
||||
* The networkImageUrl accepts the string of the image to be rendered
|
||||
*/
|
||||
networkImageUrl: 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'
|
||||
* Defaults to SIZES.MD
|
||||
*/
|
||||
size: PropTypes.oneOf(Object.values(SIZES)),
|
||||
/**
|
||||
* The background color of the AvatarNetwork
|
||||
* Defaults to COLORS.BACKGROUND_ALTERNATIVE
|
||||
*/
|
||||
backgroundColor: Box.propTypes.backgroundColor,
|
||||
/**
|
||||
* The background color of the AvatarNetwork
|
||||
* Defaults to COLORS.BORDER_DEFAULT
|
||||
*/
|
||||
borderColor: Box.propTypes.borderColor,
|
||||
/**
|
||||
* The color of the text inside the AvatarNetwork
|
||||
* Defaults to COLORS.TEXT_DEFAULT
|
||||
*/
|
||||
color: Box.propTypes.color,
|
||||
/**
|
||||
* Additional classNames to be added to the AvatarNetwork
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
/**
|
||||
* AvatarNetwork also accepts all Box props including but not limited to
|
||||
* className, as(change root element of HTML element) and margin props
|
||||
*/
|
||||
...Box.propTypes,
|
||||
};
|
@ -0,0 +1,23 @@
|
||||
.avatar-network {
|
||||
&--with-halo {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__network-image {
|
||||
width: 100%;
|
||||
|
||||
&--blurred {
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
&--size-reduced {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 62.5%;
|
||||
height: 62.5%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,123 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
COLORS,
|
||||
SIZES,
|
||||
DISPLAY,
|
||||
ALIGN_ITEMS,
|
||||
TEXT_COLORS,
|
||||
BACKGROUND_COLORS,
|
||||
BORDER_COLORS,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../ui/box/box';
|
||||
|
||||
import README from './README.mdx';
|
||||
import { AvatarNetwork } from './avatar-network';
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/AvatarNetwork',
|
||||
id: __filename,
|
||||
component: AvatarNetwork,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
control: 'select',
|
||||
options: Object.values(SIZES),
|
||||
},
|
||||
color: {
|
||||
options: Object.values(TEXT_COLORS),
|
||||
control: 'select',
|
||||
},
|
||||
backgroundColor: {
|
||||
options: Object.values(BACKGROUND_COLORS),
|
||||
control: 'select',
|
||||
},
|
||||
borderColor: {
|
||||
options: Object.values(BORDER_COLORS),
|
||||
control: 'select',
|
||||
},
|
||||
networkName: {
|
||||
control: 'text',
|
||||
},
|
||||
networkImageUrl: {
|
||||
control: 'text',
|
||||
},
|
||||
showHalo: {
|
||||
control: 'boolean',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
networkName: 'Arbitrum One',
|
||||
networkImageUrl: './images/arbitrum.svg',
|
||||
size: SIZES.MD,
|
||||
showHalo: false,
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args) => {
|
||||
return <AvatarNetwork {...args} />;
|
||||
};
|
||||
export const DefaultStory = Template.bind({});
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const Size = (args) => (
|
||||
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
|
||||
<AvatarNetwork {...args} size={SIZES.XS} />
|
||||
<AvatarNetwork {...args} size={SIZES.SM} />
|
||||
<AvatarNetwork {...args} size={SIZES.MD} />
|
||||
<AvatarNetwork {...args} size={SIZES.LG} />
|
||||
<AvatarNetwork {...args} size={SIZES.XL} />
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const networkName = Template.bind({});
|
||||
networkName.args = {
|
||||
networkImageUrl: '',
|
||||
};
|
||||
|
||||
export const networkImageUrl = Template.bind({});
|
||||
|
||||
export const showHalo = Template.bind({});
|
||||
showHalo.args = {
|
||||
showHalo: true,
|
||||
};
|
||||
|
||||
export const ColorBackgroundColorAndBorderColor = (args) => (
|
||||
<Box display={DISPLAY.FLEX} gap={1}>
|
||||
<AvatarNetwork
|
||||
{...args}
|
||||
backgroundColor={COLORS.KOVAN}
|
||||
borderColor={COLORS.KOVAN}
|
||||
networkName="K"
|
||||
color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
|
||||
/>
|
||||
<AvatarNetwork
|
||||
{...args}
|
||||
backgroundColor={COLORS.RINKEBY}
|
||||
borderColor={COLORS.RINKEBY}
|
||||
networkName="R"
|
||||
color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
|
||||
/>
|
||||
<AvatarNetwork
|
||||
{...args}
|
||||
backgroundColor={COLORS.GOERLI}
|
||||
borderColor={COLORS.GOERLI}
|
||||
networkName="G"
|
||||
color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
|
||||
/>
|
||||
<AvatarNetwork
|
||||
{...args}
|
||||
backgroundColor={COLORS.ROPSTEN}
|
||||
borderColor={COLORS.ROPSTEN}
|
||||
networkName="R"
|
||||
color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
ColorBackgroundColorAndBorderColor.args = {
|
||||
networkImageUrl: '',
|
||||
};
|
@ -0,0 +1,56 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { AvatarNetwork } from './avatar-network';
|
||||
|
||||
describe('AvatarNetwork', () => {
|
||||
const args = {
|
||||
networkName: 'ethereum',
|
||||
networkImageUrl: './images/eth_logo.svg',
|
||||
showHalo: false,
|
||||
};
|
||||
|
||||
it('should render correctly', () => {
|
||||
const { getByTestId } = render(
|
||||
<AvatarNetwork data-testid="avatar-network" />,
|
||||
);
|
||||
expect(getByTestId('avatar-network')).toBeDefined();
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
it('should render the first letter of the networkName prop if no networkImageUrl is provided', () => {
|
||||
const { getByText } = render(
|
||||
<AvatarNetwork
|
||||
data-testid="avatar-network"
|
||||
{...args}
|
||||
networkImageUrl=""
|
||||
/>,
|
||||
);
|
||||
expect(getByText('e')).toBeDefined();
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
it('should render the first letter of the networkName prop when showHalo is true and no image url is provided', () => {
|
||||
const { getByText } = render(
|
||||
<AvatarNetwork
|
||||
{...args}
|
||||
networkImageUrl=""
|
||||
data-testid="avatar-network"
|
||||
showHalo
|
||||
/>,
|
||||
);
|
||||
expect(getByText('e')).toBeDefined();
|
||||
});
|
||||
});
|
1
ui/components/component-library/avatar-network/index.js
Normal file
1
ui/components/component-library/avatar-network/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { AvatarNetwork } from './avatar-network';
|
@ -36,7 +36,7 @@ Defaults to `md`
|
||||
|
||||
### Token Name
|
||||
|
||||
Use the ` tokenName` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `tokenImageUrl` prop.
|
||||
Use the `tokenName` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `tokenImageUrl` prop.
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--token-name" />
|
||||
|
@ -36,7 +36,7 @@ describe('AvatarToken', () => {
|
||||
expect(image[1]).toHaveClass('avatar-token__token-image--size-reduced');
|
||||
});
|
||||
|
||||
it('should render text showHalo is true and no image url is provided', () => {
|
||||
it('should render the first letter of the tokenName prop when showHalo is true and no image url is provided', () => {
|
||||
const { getByText } = render(
|
||||
<AvatarToken
|
||||
{...args}
|
||||
|
@ -1,4 +1,5 @@
|
||||
/** Please import your files in alphabetical order **/
|
||||
@import 'avatar-network/avatar-network';
|
||||
@import 'avatar-token/avatar-token';
|
||||
@import 'base-avatar/base-avatar';
|
||||
@import 'base-icon/base-icon';
|
||||
|
Loading…
Reference in New Issue
Block a user