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/picker-network/README.mdx
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

47 lines
1.3 KiB
Plaintext

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { PickerNetwork } from './picker-network';
# PickerNetwork
The `PickerNetwork` is used for the action of changing a network.
<Canvas>
<Story id="ui-components-component-library-picker-network-picker-network-stories-js--default-story" />
</Canvas>
## Props
The `PickerNetwork` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
<ArgsTable of={PickerNetwork} />
### Src
Use the `src` prop with an image url to render the `AvatarNetwork`.
<Canvas>
<Story id="ui-components-component-library-picker-network-picker-network-stories-js--src" />
</Canvas>
```jsx
import { PickerNetwork } from '../../ui/component-library/picker-network';
<PickerNetwork src="./images/arbitrum.svg" />
<PickerNetwork src="./images/matic-token.png" />
<PickerNetwork src="./images/optimism.svg" />
```
### Label
Use the `label` prop for the text content of the `PickerNetwork` component
<Canvas>
<Story id="ui-components-component-library-picker-network-picker-network-stories-js--label" />
</Canvas>
```jsx
import { PickerNetwork } from '../../ui/component-library/picker-network';
<PickerNetwork label="Arbitrum One" />
<PickerNetwork label="Polygon Mainnet" />
<PickerNetwork label="Optimism" />
```