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

Avatar Token HouseKeeping (#16662)

Browse Source 
* Avatar Token HouseKeeping

* updated props

* fixed indentation and avatar size

* fixed lint issues

* updated sizes

* fixed alignment of avatar token halo stories

* updated story for src

* updated avatar token

* updated README

* updated Readme
This commit is contained in:
Nidhi Kumari 2022-12-15 22:59:24 +05:30 committed by GitHub
parent 4fcbaae32f
commit 88af4b3c36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 233 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
ui/components/component-library/avatar-token/README.mdx
View File

@ -34,30 +34,64 @@ Defaults to `md`
<Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--size" />
</Canvas>
### Token Name
```jsx
import { AvatarToken } from '../../component-library';
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.
<AvatarToken size={SIZES.XS} />
<AvatarToken size={SIZES.SM} />
<AvatarToken size={SIZES.MD} />
<AvatarToken size={SIZES.LG} />
<AvatarToken size={SIZES.XL} />
```
### Name
Use the `name` 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 `src` prop.
<Canvas>
<Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--token-name" />
<Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--name" />
</Canvas>
### Token Image Url
```jsx
import { AvatarToken } from '../../component-library';
<AvatarToken name="eth" />
```
Use the `tokenImageUrl` prop to set the image to be rendered of the `AvatarToken`.
### Src
Use the `src` prop to set the image to be rendered of the `AvatarToken`.
<Canvas>
<Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--token-image-url" />
<Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--src" />
</Canvas>
```jsx
import { AvatarToken } from '../../component-library';
<AvatarToken src="./images/eth_logo.svg" />
<AvatarToken src="./images/arbitrum.svg" />
<AvatarToken src="./images/bnb.png" />
<AvatarToken src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png" />
<AvatarToken src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x0d8775f648430679a709e98d2b0cb6250d2887ef.png" />
<AvatarToken src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0.png" />
<AvatarToken src="https://i.seadn.io/gae/lSm8ChaI-3RqC9MTpi0j3KBXdfdPd57PN5UeQLY49JA3twy9wSt2dpaa22sSc6oyiXi2OEUR6GeFX8jwkZHEMADu6_Bd4EwTJ-rg?w=500&auto=format" />
```
### Show Halo
If we want to display the component with halo effect. Only works if an image url is supplied to `tokenImageUrl`
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-token-avatar-token-stories-js--show-halo" />
</Canvas>
```jsx
import { AvatarToken } from '../../component-library';
<AvatarToken src="./images/eth_logo.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`.
@ -65,3 +99,25 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color
<Canvas>
<Story id="ui-components-component-library-avatar-token-avatar-token-stories-js--color-background-color-and-border-color" />
</Canvas>
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { AvatarToken } from '../../component-library';
<AvatarToken
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
name="G"
color={COLORS.PRIMARY_INVERSE}
>
G
</AvatarToken>
<AvatarToken
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
name="S"
color={COLORS.PRIMARY_INVERSE}
>
S
</AvatarToken>
```

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

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AvatarToken should render correctly 1`] = `
<div>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-token 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-token"
>
<img
alt="ast logo"
class="mm-avatar-token__token-image"
src="./AST.png"
/>
</div>
</div>
`;

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

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

44
ui/components/component-library/avatar-token/avatar-token.js
View File

@ -3,19 +3,19 @@ import classnames from 'classnames';
import PropTypes from 'prop-types';
import Box from '../../ui/box/box';
import { AvatarBase } from '../avatar-base';
import {
COLORS,
SIZES,
COLORS,
DISPLAY,
ALIGN_ITEMS,
JUSTIFY_CONTENT,
} from '../../../helpers/constants/design-system';
import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
export const AvatarToken = ({
size = SIZES.MD,
tokenName,
tokenImageUrl,
name,
src,
showHalo,
color = COLORS.TEXT_DEFAULT,
backgroundColor = COLORS.BACKGROUND_ALTERNATIVE,
@ -26,14 +26,14 @@ export const AvatarToken = ({
const [showFallback, setShowFallback] = useState(false);
useEffect(() => {
setShowFallback(!tokenImageUrl);
}, [tokenImageUrl]);
setShowFallback(!src);
}, [src]);
const handleOnError = () => {
setShowFallback(true);
};
const fallbackString = tokenName && tokenName[0] ? tokenName[0] : '?';
const fallbackString = name && name[0] ? name[0] : '?';
return (
<AvatarBase
@ -42,8 +42,8 @@ export const AvatarToken = ({
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
className={classnames(
'avatar-token',
showHalo && 'avatar-token--with-halo',
'mm-avatar-token',
showHalo && 'mm-avatar-token--with-halo',
className,
)}
{...{ backgroundColor, borderColor, color, ...props }}
@ -54,20 +54,22 @@ export const AvatarToken = ({
<>
{showHalo && (
<img
src={tokenImageUrl}
className={showHalo ? 'avatar-token__token-image--blurred' : ''}
src={src}
className={
showHalo ? 'mm-avatar-token__token-image--blurred' : ''
}
aria-hidden="true"
/>
)}
<img
className={
showHalo
? 'avatar-token__token-image--size-reduced'
: 'avatar-token__token-image'
? 'mm-avatar-token__token-image--size-reduced'
: 'mm-avatar-token__token-image'
}
onError={handleOnError}
src={tokenImageUrl}
alt={tokenName || 'token avatar'}
src={src}
alt={`${name} logo` || 'token logo'}
/>
</>
)}
@ -77,23 +79,23 @@ export const AvatarToken = ({
AvatarToken.propTypes = {
/**
* The tokenName accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the tokenImageUrl
* The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src
*/
tokenName: PropTypes.string,
name: PropTypes.string,
/**
* The tokenImageUrl accepts the string of the image to be rendered
* The src accepts the string of the image to be rendered
*/
tokenImageUrl: 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 AvatarToken.
* 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_TOKEN_SIZES)),
/**
* The background color of the AvatarToken
* Defaults to COLORS.BACKGROUND_ALTERNATIVE

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

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

51
ui/components/component-library/avatar-token/avatar-token.stories.js
View File

@ -13,6 +13,7 @@ import Box from '../../ui/box/box';
import README from './README.mdx';
import { AvatarToken } from './avatar-token';
import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
export default {
title: 'Components/ComponentLibrary/AvatarToken',
@ -26,7 +27,7 @@ export default {
argTypes: {
size: {
control: 'select',
options: Object.values(SIZES),
options: Object.values(AVATAR_TOKEN_SIZES),
},
color: {
options: Object.values(TEXT_COLORS),
@ -40,10 +41,10 @@ export default {
options: Object.values(BORDER_COLORS),
control: 'select',
},
tokenName: {
name: {
control: 'text',
},
tokenImageUrl: {
src: {
control: 'text',
},
showHalo: {
@ -51,8 +52,8 @@ export default {
},
},
args: {
tokenName: 'ast',
tokenImageUrl: './AST.png',
name: 'eth',
src: './images/eth_logo.svg',
size: SIZES.MD,
showHalo: false,
},
@ -75,12 +76,34 @@ export const Size = (args) => (
</Box>
);
export const TokenName = Template.bind({});
TokenName.args = {
tokenImageUrl: '',
export const Name = Template.bind({});
Name.args = {
src: '',
};
export const TokenImageUrl = Template.bind({});
export const Src = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<AvatarToken {...args} src="./images/eth_logo.svg" />
<AvatarToken {...args} src="./images/arbitrum.svg" />
<AvatarToken {...args} src="./images/bnb.png" />
<AvatarToken
{...args}
src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x6b175474e89094c44da98b954eedeac495271d0f.png"
/>
<AvatarToken
{...args}
src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x0d8775f648430679a709e98d2b0cb6250d2887ef.png"
/>
<AvatarToken
{...args}
src="https://static.metaswap.codefi.network/api/v1/tokenIcons/1/0x7d1afa7b718fb893db30a3abc0cfc608aacfebb0.png"
/>
<AvatarToken
{...args}
src="https://i.seadn.io/gae/lSm8ChaI-3RqC9MTpi0j3KBXdfdPd57PN5UeQLY49JA3twy9wSt2dpaa22sSc6oyiXi2OEUR6GeFX8jwkZHEMADu6_Bd4EwTJ-rg?w=500&auto=format"
/>
</Box>
);
export const ShowHalo = Template.bind({});
ShowHalo.args = {
@ -93,18 +116,18 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
{...args}
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
tokenName="G"
color={COLORS.PRIMARY_INVERSE} // TODO: 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
/>
<AvatarToken
{...args}
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
tokenName="G"
color={COLORS.PRIMARY_INVERSE} // TODO: 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 = {
tokenImageUrl: '',
src: '',
};

98
ui/components/component-library/avatar-token/avatar-token.test.js
View File

@ -2,30 +2,35 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { COLORS } from '../../../helpers/constants/design-system';
import { AvatarToken } from './avatar-token';
describe('AvatarToken', () => {
const args = {
tokenName: 'ast',
tokenImageUrl: './AST.png',
name: 'ast',
src: './AST.png',
showHalo: false,
};
it('should render correctly', () => {
const { getByTestId } = render(<AvatarToken data-testid="avatar-token" />);
const { getByTestId, container } = render(
<AvatarToken {...args} data-testid="avatar-token" />,
);
expect(getByTestId('avatar-token')).toBeDefined();
expect(container).toMatchSnapshot();
});
it('should render image Avatar', () => {
render(<AvatarToken {...args} data-testid="avatar-token" />);
const image = screen.getByRole('img');
expect(image).toBeDefined();
expect(image).toHaveAttribute('src', args.tokenImageUrl);
expect(image).toHaveAttribute('src', args.src);
});
it('should render the first letter of the tokenName prop if no tokenImageUrl is provided', () => {
it('should render the first letter of the name prop if no src is provided', () => {
const { getByText } = render(
<AvatarToken {...args} data-testid="avatar-token" tokenImageUrl="" />,
<AvatarToken {...args} data-testid="avatar-token" src="" />,
);
expect(getByText('a')).toBeDefined();
});
@ -33,18 +38,83 @@ describe('AvatarToken', () => {
it('should render halo effect if showHalo is true and image url is there', () => {
render(<AvatarToken {...args} data-testid="avatar-token" showHalo />);
const image = screen.getAllByRole('img', { hidden: true });
expect(image[1]).toHaveClass('avatar-token__token-image--size-reduced');
expect(image[1]).toHaveClass('mm-avatar-token__token-image--size-reduced');
});
it('should render the first letter of the tokenName 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(
<AvatarToken
{...args}
tokenImageUrl=""
data-testid="avatar-token"
showHalo
/>,
<AvatarToken {...args} src="" data-testid="avatar-token" showHalo />,
);
expect(getByText('a')).toBeDefined();
});
// className
it('should render with custom className', () => {
const { getByTestId } = render(
<AvatarToken data-testid="avatar-token" className="test-class" />,
);
expect(getByTestId('avatar-token')).toHaveClass('test-class');
});
// color
it('should render with different colors', () => {
const { getByTestId } = render(
<>
<AvatarToken
color={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
/>
<AvatarToken
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(
<>
<AvatarToken
backgroundColor={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
/>
<AvatarToken
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(
<>
<AvatarToken
borderColor={COLORS.SUCCESS_DEFAULT}
data-testid={COLORS.SUCCESS_DEFAULT}
/>
<AvatarToken
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}`,
);
});
});