mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Fix-Migrate Picker-Network to TS (#20365)
* migrating PickerNetwork to TS * deleting js file * deleting js snapshot * fixing e2e tests and updating snapshot * updating snapshot * Some small updates to docs and types --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net> Co-authored-by: Garrett Bear <gwhisten@gmail.com>
This commit is contained in:
Dhruv
GitHub
parent
8c2e85bb8e
commit
658ceb90d1
@ -12,8 +12,6 @@ The `PickerNetwork` is used for the action of changing a network.
|
||||
|
||||
## 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
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
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-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
|
||||
class="mm-box mm-picker-network mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
|
||||
data-testid="picker-network"
|
||||
>
|
||||
<div
|
||||
@ -1 +0,0 @@
|
||||
export { PickerNetwork } from './picker-network';
|
||||
5
ui/components/component-library/picker-network/index.ts
Normal file
5
ui/components/component-library/picker-network/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export { PickerNetwork } from './picker-network';
|
||||
export type {
|
||||
PickerNetworkProps,
|
||||
PickerNetworkComponent,
|
||||
} from './picker-network.types';
|
||||
@ -1,89 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
AlignItems,
|
||||
DISPLAY,
|
||||
BorderRadius,
|
||||
TextVariant,
|
||||
IconColor,
|
||||
BackgroundColor,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box';
|
||||
import {
|
||||
AvatarNetwork,
|
||||
AvatarNetworkSize,
|
||||
IconName,
|
||||
Icon,
|
||||
IconSize,
|
||||
Text,
|
||||
} from '..';
|
||||
|
||||
export const PickerNetwork = ({
|
||||
className,
|
||||
avatarNetworkProps,
|
||||
iconProps,
|
||||
label,
|
||||
src,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
className={classnames('mm-picker-network', className)}
|
||||
as="button"
|
||||
backgroundColor={BackgroundColor.backgroundAlternative}
|
||||
alignItems={AlignItems.center}
|
||||
paddingLeft={2}
|
||||
paddingRight={4}
|
||||
gap={2}
|
||||
borderRadius={BorderRadius.pill}
|
||||
display={DISPLAY.FLEX}
|
||||
{...props}
|
||||
>
|
||||
<AvatarNetwork
|
||||
className="mm-picker-network__avatar-network"
|
||||
src={src}
|
||||
name={label}
|
||||
size={AvatarNetworkSize.Xs}
|
||||
{...avatarNetworkProps}
|
||||
/>
|
||||
<Text ellipsis variant={TextVariant.bodySm}>
|
||||
{label}
|
||||
</Text>
|
||||
<Icon
|
||||
className="mm-picker-network__arrow-down-icon"
|
||||
name={IconName.ArrowDown}
|
||||
color={IconColor.iconDefault}
|
||||
size={IconSize.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.object,
|
||||
/**
|
||||
* It accepts all the props from Icon
|
||||
*/
|
||||
iconProps: PropTypes.object,
|
||||
/**
|
||||
* The text content of the PickerNetwork component
|
||||
*/
|
||||
label: PropTypes.string.isRequired,
|
||||
/**
|
||||
* PickerNetwork accepts all the props from Box
|
||||
*/
|
||||
...Box.propTypes,
|
||||
};
|
||||
@ -1,16 +1,16 @@
|
||||
import React from 'react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import {
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
Display,
|
||||
FlexDirection,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
import Box from '../../ui/box';
|
||||
import { Box } from '..';
|
||||
import README from './README.mdx';
|
||||
import { PickerNetwork } from './picker-network';
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/PickerNetwork',
|
||||
|
||||
component: PickerNetwork,
|
||||
parameters: {
|
||||
docs: {
|
||||
@ -29,12 +29,12 @@ export default {
|
||||
label: 'Avalanche C-Chain',
|
||||
src: './images/avax-token.png',
|
||||
},
|
||||
};
|
||||
} as Meta<typeof PickerNetwork>;
|
||||
|
||||
export const DefaultStory = (args) => <PickerNetwork {...args} />;
|
||||
|
||||
export const Label = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
|
||||
export const Label: StoryFn<typeof PickerNetwork> = (args) => (
|
||||
<Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
|
||||
<PickerNetwork {...args} label="Arbitrum One" />
|
||||
<PickerNetwork {...args} label="Polygon Mainnet" />
|
||||
<PickerNetwork {...args} label="Optimism" />
|
||||
@ -46,8 +46,8 @@ export const Label = (args) => (
|
||||
</Box>
|
||||
);
|
||||
|
||||
export const Src = (args) => (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
|
||||
export const Src: StoryFn<typeof PickerNetwork> = (args) => (
|
||||
<Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
|
||||
<PickerNetwork {...args} label="Arbitrum One" src="./images/arbitrum.svg" />
|
||||
<PickerNetwork
|
||||
{...args}
|
||||
@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
AlignItems,
|
||||
BorderRadius,
|
||||
TextVariant,
|
||||
IconColor,
|
||||
BackgroundColor,
|
||||
Display,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import {
|
||||
AvatarNetwork,
|
||||
AvatarNetworkSize,
|
||||
Box,
|
||||
IconName,
|
||||
Icon,
|
||||
IconSize,
|
||||
Text,
|
||||
} from '..';
|
||||
import { BoxProps, PolymorphicRef } from '../box';
|
||||
import {
|
||||
PickerNetworkComponent,
|
||||
PickerNetworkProps,
|
||||
} from './picker-network.types';
|
||||
|
||||
export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
|
||||
<C extends React.ElementType = 'button'>(
|
||||
{
|
||||
className = '',
|
||||
avatarNetworkProps,
|
||||
iconProps,
|
||||
label,
|
||||
src,
|
||||
...props
|
||||
}: PickerNetworkProps<C>,
|
||||
ref?: PolymorphicRef<C>,
|
||||
) => {
|
||||
return (
|
||||
<Box
|
||||
className={classnames('mm-picker-network', className)}
|
||||
ref={ref}
|
||||
as="button"
|
||||
backgroundColor={BackgroundColor.backgroundAlternative}
|
||||
alignItems={AlignItems.center}
|
||||
paddingLeft={2}
|
||||
paddingRight={4}
|
||||
gap={2}
|
||||
borderRadius={BorderRadius.pill}
|
||||
display={Display.Flex}
|
||||
{...(props as BoxProps<C>)}
|
||||
>
|
||||
<AvatarNetwork
|
||||
className="mm-picker-network__avatar-network"
|
||||
src={src}
|
||||
name={label}
|
||||
size={AvatarNetworkSize.Xs}
|
||||
{...avatarNetworkProps}
|
||||
/>
|
||||
<Text ellipsis variant={TextVariant.bodySm}>
|
||||
{label}
|
||||
</Text>
|
||||
<Icon
|
||||
className="mm-picker-network__arrow-down-icon"
|
||||
name={IconName.ArrowDown}
|
||||
color={IconColor.iconDefault}
|
||||
size={IconSize.Xs}
|
||||
{...iconProps}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
);
|
||||
@ -0,0 +1,36 @@
|
||||
import type {
|
||||
PolymorphicComponentPropWithRef,
|
||||
StyleUtilityProps,
|
||||
} from '../box';
|
||||
import { IconProps } from '../icon/icon.types';
|
||||
import { AvatarNetworkProps } from '../avatar-network/avatar-network.types';
|
||||
|
||||
export interface PickerNetworkStyleUtilityProps extends StyleUtilityProps {
|
||||
/**
|
||||
* The src accepts the string of the image to be rendered
|
||||
*/
|
||||
src?: string;
|
||||
/**
|
||||
* An additional className to apply to the PickerNetwork.
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* It accepts all the props from AvatarNetwork
|
||||
*/
|
||||
avatarNetworkProps?: AvatarNetworkProps<'span'>;
|
||||
/**
|
||||
* It accepts all the props from Icon
|
||||
*/
|
||||
iconProps?: IconProps<'span'>;
|
||||
/**
|
||||
* The text content of the PickerNetwork component
|
||||
*/
|
||||
label: string;
|
||||
}
|
||||
|
||||
export type PickerNetworkProps<C extends React.ElementType> =
|
||||
PolymorphicComponentPropWithRef<C, PickerNetworkStyleUtilityProps>;
|
||||
|
||||
export type PickerNetworkComponent = <C extends React.ElementType = 'button'>(
|
||||
props: PickerNetworkProps<C>,
|
||||
) => React.ReactElement | null;
|
||||
@ -207,7 +207,7 @@ exports[`App Header should match snapshot 1`] = `
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
class="box mm-picker-network multichain-app-header__contents__network-picker box--margin-2 box--padding-right-4 box--padding-left-2 box--display-none box--sm:display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-alternative box--rounded-pill"
|
||||
class="mm-box mm-picker-network multichain-app-header__contents__network-picker mm-box--margin-2 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-none mm-box--sm:display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-alternative mm-box--rounded-pill"
|
||||
data-testid="network-display"
|
||||
disabled=""
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user