1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/component-library/base-avatar/base-avatar.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

155 lines
3.5 KiB
JavaScript

import React from 'react';
import {
ALIGN_ITEMS,
COLORS,
DISPLAY,
SIZES,
TEXT_COLORS,
BACKGROUND_COLORS,
BORDER_COLORS,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import README from './README.mdx';
import { BaseAvatar } from './base-avatar';
const marginSizeKnobOptions = [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
'auto',
];
export default {
title: 'Components/ComponentLibrary/BaseAvatar',
id: __filename,
component: BaseAvatar,
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',
},
display: {
options: Object.values(DISPLAY),
control: 'select',
defaultValue: DISPLAY.FLEX,
table: { category: 'box props' },
},
marginTop: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'box props' },
},
marginRight: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'box props' },
},
marginBottom: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'box props' },
},
marginLeft: {
options: marginSizeKnobOptions,
control: 'select',
table: { category: 'box props' },
},
},
args: {
size: SIZES.MD,
color: COLORS.TEXT_DEFAULT,
backgroundColor: COLORS.BACKGROUND_ALTERNATIVE,
borderColor: COLORS.BORDER_DEFAULT,
},
};
export const DefaultStory = (args) => <BaseAvatar {...args}>B</BaseAvatar>;
DefaultStory.storyName = 'Default';
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<BaseAvatar {...args} size={SIZES.XS} />
<BaseAvatar {...args} size={SIZES.SM} />
<BaseAvatar {...args} size={SIZES.MD} />
<BaseAvatar {...args} size={SIZES.LG} />
<BaseAvatar {...args} size={SIZES.XL} />
</Box>
);
export const Children = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<BaseAvatar {...args}>
<img src="./images/eth_logo.svg" />
</BaseAvatar>
<BaseAvatar {...args}>
<img width="100%" src="./images/arbitrum.svg" />
</BaseAvatar>
<BaseAvatar {...args}>
<img width="100%" src="./images/avax-token.png" />
</BaseAvatar>
<BaseAvatar {...args}>A</BaseAvatar>
<BaseAvatar
{...args}
backgroundColor={COLORS.INFO_MUTED}
borderColor={COLORS.INFO_MUTED}
>
<i
className="fa fa-user"
style={{ color: 'var(--color-info-default)' }}
/>
</BaseAvatar>
</Box>
);
export const ColorBackgroundColorAndBorderColor = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
<BaseAvatar {...args}>B</BaseAvatar>
<BaseAvatar
{...args}
backgroundColor={COLORS.GOERLI}
borderColor={COLORS.GOERLI}
color={COLORS.PRIMARY_INVERSE} // TO DO: Update once test network colors have been added to design tokens
>
G
</BaseAvatar>
<BaseAvatar
{...args}
backgroundColor={COLORS.SEPOLIA}
borderColor={COLORS.SEPOLIA}
color={COLORS.PRIMARY_INVERSE} // TO DO: Update once test network colors have been added to design tokens
>
S
</BaseAvatar>
</Box>
);