1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/component-library/picker-network/picker-network.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

85 lines
2.0 KiB
JavaScript

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,
};