1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/component-library/avatar-token/avatar-token.stories.js
ryanml 0bc1eeaf37
Deprecating the Rinkeby, Ropsten, and Kovan test networks (#15989)
* Deprecating Rinkeby, setting default debug network to Goerli

* Deprecating Ropsten and Kovan

* Conflict fix

* Remove unused localization, test fixes

* Add migration for moving used deprecated testnets to custom networks

* Fix migrator test

* Add more unit tests

* Migration updates provider type to rpc if deprecated network is selected

* Migration fully and correctly updates the provider if selected network is a deprecated testnet

* Continue to show deprecation warning on each of rinkeby, ropsten and kovan

* Add rpcUrl deprecation message to loading screen

* Removing mayBeFauceting prop

Co-authored-by: Dan Miller <danjm.com@gmail.com>
2022-09-28 20:26:01 -07:00

111 lines
2.6 KiB
JavaScript

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 { AvatarToken } from './avatar-token';
export default {
title: 'Components/ComponentLibrary/AvatarToken',
id: __filename,
component: AvatarToken,
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',
},
tokenName: {
control: 'text',
},
tokenImageUrl: {
control: 'text',
},
showHalo: {
control: 'boolean',
},
},
args: {
tokenName: 'ast',
tokenImageUrl: './AST.png',
size: SIZES.MD,
showHalo: false,
},
};
const Template = (args) => {
return <AvatarToken {...args} />;
};
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<AvatarToken {...args} size={SIZES.XS} />
<AvatarToken {...args} size={SIZES.SM} />
<AvatarToken {...args} size={SIZES.MD} />
<AvatarToken {...args} size={SIZES.LG} />
<AvatarToken {...args} size={SIZES.XL} />
</Box>
);
export const TokenName = Template.bind({});
TokenName.args = {
tokenImageUrl: '',
};
export const TokenImageUrl = Template.bind({});
export const ShowHalo = Template.bind({});
ShowHalo.args = {
showHalo: true,
};
export const ColorBackgroundColorAndBorderColor = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<AvatarToken
{...args}
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
tokenName="G"
color={COLORS.PRIMARY_INVERSE} // TODO: 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
/>
<AvatarToken
{...args}
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
tokenName="G"
color={COLORS.PRIMARY_INVERSE} // TODO: 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 = {
tokenImageUrl: '',
};