1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-30 16:18:07 +01:00
metamask-extension/ui/components/component-library/picker-network/README.mdx
Nidhi Kumari c5368c152b
Added storybook check to CI (#17092)
* added storybook test runner

* added test runner in ci

* updated test for ci and fixed lint error

* updated lavamoat policy

* updated test command

* updated playwright

* changed command to storybook;ci

* updated command

* updated instance for test-storybook

* updated playwright

* added playwright step

* replaced concurrently with start-server-and-test

* updated the static storybook directory

* replaced first with last

* updated lock file

* replaced first with last

* updated test-storybook with maxworkers

* updated .depchechrc

* updated yml

* removed id from banner base

* replaced broken stories with .stories-to-do.js extesnsion

* updated token allowance story

* removed duplicacies from yarn

* fixed lavamoat

* removed filename comment

* updated links for docs

* fixed file extension for stories

* updated path for stories.json

* updated stories.json path

* yarn updated

* updated stories

* updated yarn

* updated wait on
2023-01-21 00:57:46 +05:30

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="components-componentlibrary-pickernetwork--default-story" />
</Canvas>
## Props
The `PickerNetwork` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props.
<ArgsTable of={PickerNetwork} />
### Label
Use the `label` prop for the text content of the `PickerNetwork` component
<Canvas>
<Story id="components-componentlibrary-pickernetwork--label" />
</Canvas>
```jsx
import { PickerNetwork } from '../../ui/component-library';
<PickerNetwork label="Arbitrum One" />
<PickerNetwork label="Polygon Mainnet" />
<PickerNetwork label="Optimism" />
```
### Src
Use the `src` prop with an image url to render the `AvatarNetwork`. Use the `avatarNetworkProps` to pass additional props to the `AvatarNetwork` component.
<Canvas>
<Story id="components-componentlibrary-pickernetwork--src" />
</Canvas>
```jsx
import { PickerNetwork } from '../../ui/component-library';
<PickerNetwork src="./images/arbitrum.svg" />
<PickerNetwork src="./images/matic-token.png" />
<PickerNetwork src="./images/optimism.svg" />
```