From a1c52249977973b91371eef1c483b3b6261bdb31 Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Fri, 6 Jan 2023 05:00:42 +0530
Subject: [PATCH] housekeeping for picker-network (#16982)

* updated test in picker-network

* fixed import order in README

* fixed global import path

* fixed formatting
---
 .../picker-network/README.mdx                 | 38 +++++++++----------
 .../picker-network/picker-network.test.js     |  7 ++++
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/ui/components/component-library/picker-network/README.mdx b/ui/components/component-library/picker-network/README.mdx
index 19e90d02f..43bcbb253 100644
--- a/ui/components/component-library/picker-network/README.mdx
+++ b/ui/components/component-library/picker-network/README.mdx
@@ -16,21 +16,6 @@ The `PickerNetwork` accepts all props below as well as all [Box](/docs/ui-compon
 
 <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
@@ -40,8 +25,23 @@ Use the `label` prop for the text content of the `PickerNetwork` component
 </Canvas>
 
 ```jsx
-import { PickerNetwork } from '../../ui/component-library/picker-network';
-  <PickerNetwork label="Arbitrum One" />
-  <PickerNetwork label="Polygon Mainnet" />
-  <PickerNetwork label="Optimism" />
+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="ui-components-component-library-picker-network-picker-network-stories-js--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" />
 ```
\ No newline at end of file
diff --git a/ui/components/component-library/picker-network/picker-network.test.js b/ui/components/component-library/picker-network/picker-network.test.js
index 878b5b968..3a1d99399 100644
--- a/ui/components/component-library/picker-network/picker-network.test.js
+++ b/ui/components/component-library/picker-network/picker-network.test.js
@@ -54,4 +54,11 @@ describe('PickerNetwork', () => {
       'down-arrow-picker-icon',
     );
   });
+  // className
+  it('should render with custom className', () => {
+    const { getByTestId } = render(
+      <PickerNetwork data-testid="picker-network" className="test-class" />,
+    );
+    expect(getByTestId('picker-network')).toHaveClass('test-class');
+  });
 });