1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/component-library/picker-network/picker-network.stories.js
Nidhi Kumari ce9af8aac3
Added Picker Network Component (#16340)
* added file structure for picker-network

* updated accessory prop with props

* added tests and documentation to picker network

* updated picker network classnames

* updated custom tests for picker network

* updated css in picker network

* updated readme and stories

* added snapshot testing

* changed behaviour to button

* updated snapshot for button

* updated label as per src
2022-11-09 16:31:51 -08:00

57 lines
1.3 KiB
JavaScript

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';