mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
79b2deb194
snapshot updates fix snapshots add background colors fix snapshots |
||
---|---|---|
.. | ||
__snapshots__ | ||
avatar-token.constants.js | ||
avatar-token.js | ||
avatar-token.scss | ||
avatar-token.stories.js | ||
avatar-token.test.js | ||
index.js | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { AvatarToken } from './avatar-token'; # AvatarToken The `AvatarToken` is a component responsible for display of the image of a given token <Canvas> <Story id="components-componentlibrary-avatartoken--default-story" /> </Canvas> ## Props The `AvatarToken` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props <ArgsTable of={AvatarToken} /> ### Size Use the `size` prop to set the size of the `AvatarToken`. Possible sizes include: - `xs` 16px - `sm` 24px - `md` 32px - `lg` 40px - `xl` 48px Defaults to `md` The fallback display of the `AvatarToken` is a circle with the initial letter of the network name. The size of the initial letter is calculated based on the size of the `AvatarToken` component. <Canvas> <Story id="components-componentlibrary-avatartoken--size-story" /> </Canvas> ```jsx import { AvatarToken } from '../../component-library'; <AvatarToken size={Size.XS} /> <AvatarToken size={Size.SM} /> <AvatarToken size={Size.MD} /> <AvatarToken size={Size.LG} /> <AvatarToken size={Size.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. Use `Text` component props to change the `variant`, `font-weight`, `font-family`, etc. <Canvas> <Story id="components-componentlibrary-avatartoken--name" /> </Canvas> ```jsx import { AvatarToken } from '../../component-library'; <AvatarToken name="eth" />; ``` ### Src Use the `src` prop to set the image to be rendered of the `AvatarToken`. <Canvas> <Story id="components-componentlibrary-avatartoken--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 Use the `showHalo` prop to display the component with halo effect. Only works if an image url is supplied to `src` <Canvas> <Story id="components-componentlibrary-avatartoken--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`. <Canvas> <Story id="components-componentlibrary-avatartoken--color-background-color-and-border-color" /> </Canvas> ```jsx import { TextColor, BackgroundColor, BorderColor, } from '../../../helpers/constants/design-system'; import { AvatarToken } from '../../component-library'; <AvatarToken backgroundColor={BackgroundColor.goerli} borderColor={BorderColor.goerli} name="G" color={Color.primaryInverse} > G </AvatarToken> <AvatarToken backgroundColor={BackgroundColor.sepolia} borderColor={BorderColor.sepolia} name="S" color={Color.primaryInverse} > S </AvatarToken> ```