From ce9af8aac31ab3ca015230bf0c12de601e8c3768 Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Thu, 10 Nov 2022 06:01:51 +0530
Subject: [PATCH] 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
---
 .../component-library-components.scss         |  1 +
 .../picker-network/README.mdx                 | 47 +++++++++++
 .../__snapshots__/picker-network.test.js.snap | 25 ++++++
 .../component-library/picker-network/index.js |  1 +
 .../picker-network/picker-network.js          | 84 +++++++++++++++++++
 .../picker-network/picker-network.scss        |  6 ++
 .../picker-network/picker-network.stories.js  | 56 +++++++++++++
 .../picker-network/picker-network.test.js     | 57 +++++++++++++
 8 files changed, 277 insertions(+)
 create mode 100644 ui/components/component-library/picker-network/README.mdx
 create mode 100644 ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
 create mode 100644 ui/components/component-library/picker-network/index.js
 create mode 100644 ui/components/component-library/picker-network/picker-network.js
 create mode 100644 ui/components/component-library/picker-network/picker-network.scss
 create mode 100644 ui/components/component-library/picker-network/picker-network.stories.js
 create mode 100644 ui/components/component-library/picker-network/picker-network.test.js

diff --git a/ui/components/component-library/component-library-components.scss b/ui/components/component-library/component-library-components.scss
index 8b8ad55e6..33a83b7c3 100644
--- a/ui/components/component-library/component-library-components.scss
+++ b/ui/components/component-library/component-library-components.scss
@@ -12,6 +12,7 @@
 @import 'button-secondary/button-secondary';
 @import 'icon/icon';
 @import 'label/label';
+@import 'picker-network/picker-network';
 @import 'tag/tag';
 @import 'text/text';
 @import 'text-field/text-field';
diff --git a/ui/components/component-library/picker-network/README.mdx b/ui/components/component-library/picker-network/README.mdx
new file mode 100644
index 000000000..19e90d02f
--- /dev/null
+++ b/ui/components/component-library/picker-network/README.mdx
@@ -0,0 +1,47 @@
+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" />
+```
\ No newline at end of file
diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
new file mode 100644
index 000000000..5991eb25e
--- /dev/null
+++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = `
+<div>
+  <button
+    class="box mm-picker-network box--padding-right-4 box--padding-left-2 box--display-inline-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+    data-testid="picker-network"
+  >
+    <div
+      class="box base-avatar base-avatar--size-xs avatar-network mm-picker-network__avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
+    >
+      I
+    </div>
+    <p
+      class="box text text--body-sm text--color-text-default box--flex-direction-row"
+    >
+      Imported
+    </p>
+    <div
+      class="box mm-picker-network__arrow-down-icon icon icon--size-xs box--flex-direction-row box--color-icon-default"
+      style="mask-image: url('./images/icons/icon-undefined.svg;"
+    />
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/picker-network/index.js b/ui/components/component-library/picker-network/index.js
new file mode 100644
index 000000000..469bf6962
--- /dev/null
+++ b/ui/components/component-library/picker-network/index.js
@@ -0,0 +1 @@
+export { PickerNetwork } from './picker-network';
diff --git a/ui/components/component-library/picker-network/picker-network.js b/ui/components/component-library/picker-network/picker-network.js
new file mode 100644
index 000000000..1719630c7
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { AvatarNetwork } from '../avatar-network';
+import { Icon, ICON_NAMES } from '../icon';
+import { Text } from '../text';
+import Box from '../../ui/box';
+import {
+  ALIGN_ITEMS,
+  COLORS,
+  DISPLAY,
+  SIZES,
+  BORDER_RADIUS,
+  TEXT,
+} from '../../../helpers/constants/design-system';
+
+export const PickerNetwork = ({
+  className,
+  avatarNetworkProps,
+  iconProps,
+  label,
+  src,
+  ...props
+}) => {
+  return (
+    <Box
+      className={classnames('mm-picker-network', className)}
+      as="button"
+      backgroundColor={COLORS.BACKGROUND_DEFAULT}
+      borderColor={COLORS.BORDER_DEFAULT}
+      borderWidth={1}
+      alignItems={ALIGN_ITEMS.CENTER}
+      paddingLeft={2}
+      paddingRight={4}
+      gap={2}
+      borderRadius={BORDER_RADIUS.PILL}
+      display={DISPLAY.INLINE_FLEX}
+      {...props}
+    >
+      <AvatarNetwork
+        className="mm-picker-network__avatar-network"
+        networkImageUrl={src}
+        networkName={label}
+        size={SIZES.XS}
+        {...avatarNetworkProps}
+      />
+      <Text variant={TEXT.BODY_SM}>{label}</Text>
+      <Icon
+        className="mm-picker-network__arrow-down-icon"
+        name={ICON_NAMES.ARROW_DOWN}
+        color={COLORS.ICON_DEFAULT}
+        size={SIZES.XS}
+        {...iconProps}
+      />
+    </Box>
+  );
+};
+
+PickerNetwork.propTypes = {
+  /**
+   * The src accepts the string of the image to be rendered
+   */
+  src: PropTypes.string,
+  /**
+   * An additional className to apply to the PickerNetwork.
+   */
+  className: PropTypes.string,
+  /**
+   * It accepts all the props from AvatarNetwork
+   */
+  avatarNetworkProps: PropTypes.shape(AvatarNetwork.PropTypes),
+  /**
+   * It accepts all the props from Icon
+   */
+  iconProps: PropTypes.shape(Icon.PropTypes),
+  /**
+   * The text content of the PickerNetwork component
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * PickerNetwork accepts all the props from Box
+   */
+  ...Box.propTypes,
+};
diff --git a/ui/components/component-library/picker-network/picker-network.scss b/ui/components/component-library/picker-network/picker-network.scss
new file mode 100644
index 000000000..f96edf782
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.scss
@@ -0,0 +1,6 @@
+.mm-picker-network {
+  --picker-network-height: 32px;
+
+  max-width: fit-content;
+  height: var(--picker-network-height);
+}
diff --git a/ui/components/component-library/picker-network/picker-network.stories.js b/ui/components/component-library/picker-network/picker-network.stories.js
new file mode 100644
index 000000000..eb5b25c7e
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.stories.js
@@ -0,0 +1,56 @@
+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';
diff --git a/ui/components/component-library/picker-network/picker-network.test.js b/ui/components/component-library/picker-network/picker-network.test.js
new file mode 100644
index 000000000..878b5b968
--- /dev/null
+++ b/ui/components/component-library/picker-network/picker-network.test.js
@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { PickerNetwork } from './picker-network';
+
+describe('PickerNetwork', () => {
+  it('should render the label inside the PickerNetwork', () => {
+    const { getByTestId, container } = render(
+      <PickerNetwork data-testid="picker-network" label="Imported" />,
+    );
+    expect(getByTestId('picker-network')).toBeDefined();
+    expect(getByTestId('picker-network')).toHaveTextContent('Imported');
+    expect(container).toMatchSnapshot();
+  });
+  it('should render correct Avatar inside Picker Network', () => {
+    render(
+      <PickerNetwork
+        data-testid="picker-network"
+        label="Imported"
+        src="./images/matic-token.png"
+      />,
+    );
+    const image = screen.getByRole('img');
+    expect(image).toBeDefined();
+    expect(image).toHaveAttribute('src', './images/matic-token.png');
+  });
+  it('should render avatar network inside the PickerNetwork with custom props', () => {
+    const container = (
+      <PickerNetwork
+        data-testid="picker-network"
+        label="Imported"
+        avatarNetworkProps={{
+          name: 'matic network',
+        }}
+      />
+    );
+
+    expect(container.props.avatarNetworkProps.name).toStrictEqual(
+      'matic network',
+    );
+  });
+  it('should render down arrow icon inside the PickerNetwork with custom props', () => {
+    const container = (
+      <PickerNetwork
+        data-testid="picker-network"
+        label="Imported"
+        iconProps={{
+          name: 'down-arrow-picker-icon',
+        }}
+      />
+    );
+
+    expect(container.props.iconProps.name).toStrictEqual(
+      'down-arrow-picker-icon',
+    );
+  });
+});