1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/picker-network/picker-network.stories.js

57 lines
1.3 KiB
JavaScript
Raw Normal View History

import React from 'react';
import {
DISPLAY,
FLEX_DIRECTION,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import README from './README.mdx';
import { PickerNetwork } from './picker-network';
export default {
title: 'Components/ComponentLibrary/PickerNetwork',
id: __filename,
component: PickerNetwork,
parameters: {
docs: {
page: README,
},
},
argTypes: {
label: {
control: 'text',
},
src: {
control: 'text',
},
},
args: {
label: 'Avalanche C-Chain',
src: './images/avax-token.png',
},
};
export const DefaultStory = (args) => <PickerNetwork {...args} />;
export const Label = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<PickerNetwork {...args} label="Arbitrum One" />
<PickerNetwork {...args} label="Polygon Mainnet" />
<PickerNetwork {...args} label="Optimism" />
</Box>
);
export const Src = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<PickerNetwork {...args} label="Arbitrum One" src="./images/arbitrum.svg" />
<PickerNetwork
{...args}
label="Polygon Mainnet"
src="./images/matic-token.png"
/>
<PickerNetwork {...args} label="Optimism" src="./images/optimism.svg" />
</Box>
);
DefaultStory.storyName = 'Default';