m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00
Code

fix/AvatarFavicon to TS (#20430)

Browse Source 
* AvatarFavicon to TS

* documentation updates

* fix types import

* Some doc updates

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Dhruv 2023-08-16 03:05:18 +05:30 committed by GitHub
parent b8475f85d4
commit 73add90685
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 181 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/components/component-library/avatar-account/README.mdx
View File

@ -36,7 +36,7 @@ Defaults to `AvatarAccountSize.MD`
</Canvas>
```jsx
import { AvatarAccount, AvatarAccountSize } from '../ui/component-library';
import { AvatarAccount, AvatarAccountSize } from '../../component-library';
<AvatarAccount size={AvatarAccountSize.Xs} />
<AvatarAccount size={AvatarAccountSize.Sm} />
@ -54,7 +54,7 @@ Use the `variant` prop and the `AvatarAccountVariant` enum from `../../component
</Canvas>
```jsx
import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library';
import { AvatarAccount, AvatarAccountVariant } from '../../component-library';
<AvatarAccount variant={AvatarAccountVariant.Jazzicon} />
<AvatarAccount variant={AvatarAccountVariant.Blockies} />
@ -69,7 +69,7 @@ Use the required `address` for generating images
</Canvas>
```jsx
import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library';
import { AvatarAccount, AvatarAccountVariant } from '../../component-library';
<AvatarAccount variant={AvatarAccountVariant.Jazzicon} address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" />
<AvatarAccount variant={AvatarAccountVariant.Blockies} address="0x0" />

40
ui/components/component-library/avatar-favicon/README.mdx
View File

@ -6,7 +6,7 @@ import { AvatarFavicon } from './avatar-favicon';
# AvatarFavicon
The `AvatarFavicon` is an image component that renders an icon that is provided in the form of a URL.
The `AvatarFavicon` is an image component that represents a dapp or third party service
<Canvas>
<Story id="components-componentlibrary-avatarfavicon--default-story" />
@ -14,44 +14,34 @@ The `AvatarFavicon` is an image component that renders an icon that is provided
## Props
The `AvatarFavicon` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
<ArgsTable of={AvatarFavicon} />
`AvatarFavicon` accepts all [AvatarBase](components-componentlibrary-avatarbase--default-story))
component props
<ArgsTable of={AvatarBase} />
### Size
Use the `size` prop to set the size of the `AvatarFavicon`.
Optional: `AVATAR_FAVICON_SIZES` from `./ui/components/component-library` object can be used instead of `Size`
Use the `size` prop and the `AvatarFaviconSize` enum from `../../component-library` to change the size of `AvatarFavicon`
Possible sizes include:
- `Size.XS` 16px
- `Size.SM` 24px
- `Size.MD` 32px
- `Size.LG` 40px
- `Size.XL` 48px
- `AvatarFaviconSize.Xs` 16px
- `AvatarFaviconSize.Sm` 24px
- `AvatarFaviconSize.Md` 32px
- `AvatarFaviconSize.Lg` 40px
- `AvatarFaviconSize.Xl` 48px
Defaults to `Size.MD`
Defaults to `AvatarFaviconSize.MD`
<Canvas>
<Story id="components-componentlibrary-avatarfavicon--size-story" />
</Canvas>
```jsx
import { Size } from '../../../helpers/constants/design-system';
import { AvatarFavicon } from '../ui/component-library';
import { AvatarFavicon, AvatarFaviconSize } from '../../component-library';
<AvatarFavicon size={Size.XS} />
<AvatarFavicon size={Size.SM} />
<AvatarFavicon size={Size.MD} />
<AvatarFavicon size={Size.LG} />
<AvatarFavicon size={Size.XL} />
<AvatarFavicon size={AvatarFaviconSize.Xs} />
<AvatarFavicon size={AvatarFaviconSize.Sm} />
<AvatarFavicon size={AvatarFaviconSize.Md} />
<AvatarFavicon size={AvatarFaviconSize.Lg} />
<AvatarFavicon size={AvatarFaviconSize.Xl} />
```
### Src
@ -63,7 +53,7 @@ Use the `src` prop to set the image to be rendered of the `AvatarFavicon`.
</Canvas>
```jsx
import { AvatarFavicon } from '../ui/component-library';
import { AvatarFavicon } from '../../component-library';
<AvatarFavicon src="https://uniswap.org/favicon.ico" />
<AvatarFavicon src="https://1inch.exchange/assets/favicon/favicon-32x32.png" />

0
ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap → ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.tsx.snap
View File

9
ui/components/component-library/avatar-favicon/avatar-favicon.constants.js
View File

@ -1,9 +0,0 @@
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_FAVICON_SIZES = {
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

96
ui/components/component-library/avatar-favicon/avatar-favicon.js
View File

@ -1,96 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { AvatarBase } from '../avatar-base';
import Box from '../../ui/box/box';
import { IconName, Icon } from '../icon';
import {
BorderColor,
Size,
Display,
AlignItems,
JustifyContent,
IconColor,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
export const AvatarFavicon = React.forwardRef(
(
{
size = Size.MD,
src,
name = 'avatar-favicon',
className,
fallbackIconProps,
borderColor = BorderColor.transparent,
...props
},
ref,
) => {
const t = useI18nContext();
return (
<AvatarBase
ref={ref}
size={size}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames('mm-avatar-favicon', className)}
{...{ borderColor, ...props }}
>
{src ? (
<img
className="mm-avatar-favicon__image"
src={src}
alt={t('logo', [name])}
/>
) : (
<Icon
name={IconName.Global}
color={IconColor.iconDefault}
size={size}
{...fallbackIconProps}
/>
)}
</AvatarBase>
);
},
);
AvatarFavicon.propTypes = {
/**
* The src accepts the string of the image to be rendered
*/
src: PropTypes.string,
/**
* The alt text for the favicon avatar to be rendered
*/
name: PropTypes.string.isRequired,
/**
* Props for the fallback icon. All Icon props can be used
*/
fallbackIconProps: PropTypes.object,
/**
* The size of the AvatarFavicon
* Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px
* Defaults to Size.MD
*/
size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)),
/**
* The border color of the AvatarFavicon
* Defaults to Color.transparent
*/
borderColor: PropTypes.oneOf(Object.values(BorderColor)),
/**
* Additional classNames to be added to the AvatarFavicon
*/
className: PropTypes.string,
/**
* AvatarFavicon also accepts all Box props including but not limited to
* className, as(change root element of HTML element) and margin props
*/
...Box.propTypes,
};
AvatarFavicon.displayName = 'AvatarFavicon';

29
ui/components/component-library/avatar-favicon/avatar-favicon.stories.js → ui/components/component-library/avatar-favicon/avatar-favicon.stories.tsx
View File

@ -1,19 +1,18 @@
import React from 'react';
import { Meta, StoryFn } from '@storybook/react';
import {
Display,
AlignItems,
BorderColor,
Size,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { Box } from '../box';
import README from './README.mdx';
import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';
import { AvatarFavicon, AvatarFaviconSize } from '.';
export default {
title: 'Components/ComponentLibrary/AvatarFavicon',
component: AvatarFavicon,
parameters: {
docs: {
@ -23,7 +22,7 @@ export default {
argTypes: {
size: {
control: 'select',
options: Object.values(AVATAR_FAVICON_SIZES),
options: Object.values(AvatarFaviconSize),
},
src: {
control: 'text',
@ -38,30 +37,30 @@ export default {
},
args: {
src: 'https://uniswap.org/favicon.ico',
size: Size.MD,
size: AvatarFaviconSize.Md,
name: 'Uniswap',
},
};
} as Meta<typeof AvatarFavicon>;
const Template = (args) => {
const Template: StoryFn<typeof AvatarFavicon> = (args) => {
return <AvatarFavicon {...args} />;
};
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const SizeStory = (args) => (
export const SizeStory: StoryFn<typeof AvatarFavicon> = (args) => (
<Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
<AvatarFavicon {...args} size={Size.XS} />
<AvatarFavicon {...args} size={Size.SM} />
<AvatarFavicon {...args} size={Size.MD} />
<AvatarFavicon {...args} size={Size.LG} />
<AvatarFavicon {...args} size={Size.XL} />
<AvatarFavicon {...args} size={AvatarFaviconSize.Xs} />
<AvatarFavicon {...args} size={AvatarFaviconSize.Sm} />
<AvatarFavicon {...args} size={AvatarFaviconSize.Md} />
<AvatarFavicon {...args} size={AvatarFaviconSize.Lg} />
<AvatarFavicon {...args} size={AvatarFaviconSize.Xl} />
</Box>
);
SizeStory.storyName = 'Size';
export const Src = (args) => (
export const Src: StoryFn<typeof AvatarFavicon> = (args) => (
<Box display={Display.Flex} alignItems={AlignItems.flexStart} gap={1}>
<AvatarFavicon {...args} src="https://uniswap.org/favicon.ico" />
<AvatarFavicon

43
ui/components/component-library/avatar-favicon/avatar-favicon.test.js → ui/components/component-library/avatar-favicon/avatar-favicon.test.tsx
View File

@ -2,7 +2,8 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { AvatarFavicon, AVATAR_FAVICON_SIZES } from '.';
import { AvatarFaviconSize } from './avatar-favicon.types';
import { AvatarFavicon } from '.';
describe('AvatarFavicon', () => {
const args = {
@ -51,46 +52,46 @@ describe('AvatarFavicon', () => {
const { getByTestId } = render(
<>
<AvatarFavicon
size={AVATAR_FAVICON_SIZES.XS}
data-testid={AVATAR_FAVICON_SIZES.XS}
size={AvatarFaviconSize.Xs}
data-testid={AvatarFaviconSize.Xs}
{...args}
/>
<AvatarFavicon
size={AVATAR_FAVICON_SIZES.SM}
data-testid={AVATAR_FAVICON_SIZES.SM}
size={AvatarFaviconSize.Sm}
data-testid={AvatarFaviconSize.Sm}
{...args}
/>
<AvatarFavicon
size={AVATAR_FAVICON_SIZES.MD}
data-testid={AVATAR_FAVICON_SIZES.MD}
size={AvatarFaviconSize.Md}
data-testid={AvatarFaviconSize.Md}
{...args}
/>
<AvatarFavicon
size={AVATAR_FAVICON_SIZES.LG}
data-testid={AVATAR_FAVICON_SIZES.LG}
size={AvatarFaviconSize.Lg}
data-testid={AvatarFaviconSize.Lg}
{...args}
/>
<AvatarFavicon
size={AVATAR_FAVICON_SIZES.XL}
data-testid={AVATAR_FAVICON_SIZES.XL}
size={AvatarFaviconSize.Xl}
data-testid={AvatarFaviconSize.Xl}
{...args}
/>
</>,
);
expect(getByTestId(AVATAR_FAVICON_SIZES.XS)).toHaveClass(
`mm-avatar-base--size-${AVATAR_FAVICON_SIZES.XS}`,
expect(getByTestId(AvatarFaviconSize.Xs)).toHaveClass(
`mm-avatar-base--size-${AvatarFaviconSize.Xs}`,
);
expect(getByTestId(AVATAR_FAVICON_SIZES.SM)).toHaveClass(
`mm-avatar-base--size-${AVATAR_FAVICON_SIZES.SM}`,
expect(getByTestId(AvatarFaviconSize.Sm)).toHaveClass(
`mm-avatar-base--size-${AvatarFaviconSize.Sm}`,
);
expect(getByTestId(AVATAR_FAVICON_SIZES.MD)).toHaveClass(
`mm-avatar-base--size-${AVATAR_FAVICON_SIZES.MD}`,
expect(getByTestId(AvatarFaviconSize.Md)).toHaveClass(
`mm-avatar-base--size-${AvatarFaviconSize.Md}`,
);
expect(getByTestId(AVATAR_FAVICON_SIZES.LG)).toHaveClass(
`mm-avatar-base--size-${AVATAR_FAVICON_SIZES.LG}`,
expect(getByTestId(AvatarFaviconSize.Lg)).toHaveClass(
`mm-avatar-base--size-${AvatarFaviconSize.Lg}`,
);
expect(getByTestId(AVATAR_FAVICON_SIZES.XL)).toHaveClass(
`mm-avatar-base--size-${AVATAR_FAVICON_SIZES.XL}`,
expect(getByTestId(AvatarFaviconSize.Xl)).toHaveClass(
`mm-avatar-base--size-${AvatarFaviconSize.Xl}`,
);
});

61
ui/components/component-library/avatar-favicon/avatar-favicon.tsx Normal file
View File

@ -0,0 +1,61 @@
import React from 'react';
import classnames from 'classnames';
import { AvatarBase, AvatarBaseProps } from '../avatar-base';
import { IconName, Icon, IconSize } from '../icon';
import {
BorderColor,
Display,
AlignItems,
JustifyContent,
IconColor,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { PolymorphicRef } from '../box';
import {
AvatarFaviconComponent,
AvatarFaviconProps,
AvatarFaviconSize,
} from './avatar-favicon.types';
export const AvatarFavicon: AvatarFaviconComponent = React.forwardRef(
<C extends React.ElementType = 'div'>(
{
size = AvatarFaviconSize.Md,
src,
name = 'avatar-favicon',
className = '',
fallbackIconProps,
borderColor = BorderColor.transparent,
...props
}: AvatarFaviconProps<C>,
ref?: PolymorphicRef<C>,
) => {
const t = useI18nContext();
return (
<AvatarBase
ref={ref}
size={size}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames('mm-avatar-favicon', className)}
{...{ borderColor, ...(props as AvatarBaseProps<C>) }}
>
{src ? (
<img
className="mm-avatar-favicon__image"
src={src}
alt={t('logo', [name])}
/>
) : (
<Icon
name={IconName.Global}
color={IconColor.iconDefault}
size={IconSize.Md}
{...fallbackIconProps}
/>
)}
</AvatarBase>
);
},
);

50
ui/components/component-library/avatar-favicon/avatar-favicon.types.ts Normal file
View File

@ -0,0 +1,50 @@
import { BorderColor } from '../../../helpers/constants/design-system';
import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types';
import { PolymorphicComponentPropWithRef } from '../box';
import { IconProps } from '../icon';
export enum AvatarFaviconSize {
Xs = 'xs',
Sm = 'sm',
Md = 'md',
Lg = 'lg',
Xl = 'xl',
}
export interface AvatarFaviconStyleUtilityProps
extends Omit<AvatarBaseStyleUtilityProps, 'size'> {
/**
* The src accepts the string of the image to be rendered
*/
src?: string;
/**
* The alt text for the favicon avatar to be rendered
*/
name: string;
/**
* Props for the fallback icon. All Icon props can be used
*/
fallbackIconProps?: IconProps<'span'>;
/**
* The size of the AvatarFavicon
* Possible values could be 'AvatarFaviconSize.Xs' 16px, 'AvatarFaviconSize.Sm' 24px, 'AvatarFaviconSize.Md' 32px, 'AvatarFaviconSize.Lg' 40px, 'AvatarFaviconSize.Xs' 48px
* Defaults to AvatarFaviconSize.Md
*/
size?: AvatarFaviconSize;
/**
* The border color of the AvatarFavicon
* Defaults to Color.transparent
*/
borderColor?: BorderColor;
/**
* Additional classNames to be added to the AvatarFavicon
*/
className?: string;
}
export type AvatarFaviconProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, AvatarFaviconStyleUtilityProps>;
export type AvatarFaviconComponent = <C extends React.ElementType = 'span'>(
props: AvatarFaviconProps<C>,
) => React.ReactElement | null;

2
ui/components/component-library/avatar-favicon/index.js
View File

@ -1,2 +0,0 @@
export { AvatarFavicon } from './avatar-favicon';
export { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';

3
ui/components/component-library/avatar-favicon/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { AvatarFavicon } from './avatar-favicon';
export { AvatarFaviconSize } from './avatar-favicon.types';
export type { AvatarFaviconProps } from './avatar-favicon.types';

6
ui/components/component-library/avatar-icon/README.mdx
View File

@ -41,7 +41,7 @@ Defaults to `AvatarIconSize.Md`
</Canvas>
```jsx
import { AvatarIcon, AvatarIconSize } from '../ui/component-library';
import { AvatarIcon, AvatarIconSize } from '../../component-library';
<AvatarIcon {...args} size={AvatarIconSize.Xs} />
<AvatarIcon {...args} size={AvatarIconSize.Sm} />
@ -61,7 +61,7 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
</Canvas>
```jsx
import { AvatarIcon, IconName } from '../ui/component-library';
import { AvatarIcon, IconName } from '../../component-library';
<AvatarIcon iconName={IconName.SwapHorizontal} />
<AvatarIcon iconName={IconName.Confirmation} />
@ -83,7 +83,7 @@ Use the `color` and `backgroundColor` props with the `IconColor` and `Background
```jsx
import { BackgroundColor, IconColor } from '../../../helpers/constants/design-system';
import { AvatarIcon } from '../ui/component-library';
import { AvatarIcon } from '../../component-library';
<AvatarIcon color={IconColor.primaryDefault} backgroundColor={BackgroundColor.primaryMuted} />
<AvatarIcon color={IconColor.primaryInverse} backgroundColor={BackgroundColor.primaryDefault} />

18
ui/components/component-library/button/README.mdx
View File

@ -67,7 +67,7 @@ Possible sizes include:
```jsx
import { Size } from '../../../helpers/constants/design-system';
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
<Button size={Size.inherit} />
<Button size={Size.SM} />
@ -84,7 +84,7 @@ Use the `danger` boolean prop to change the `Button` to danger color.
</Canvas>
```jsx
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
<Button>Normal</Button>
<Button danger>Danger</Button>
@ -99,7 +99,7 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
</Canvas>
```jsx
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
<Button href="/">Anchor Element</Button>;
```
@ -114,7 +114,7 @@ Use boolean `block` prop to quickly enable a full width block button
```jsx
import { DISPLAY } from '../../../helpers/constants/design-system';
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
<Button>Default Button</Button>
<Button block>Block Button</Button>
@ -136,7 +136,7 @@ Button `as` options:
</Canvas>
```jsx
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
<Button as="button">Button Element</Button>
@ -154,7 +154,7 @@ Use the boolean `disabled` prop to disable button
</Canvas>
```jsx
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
<Button disabled>Disabled Button</Button>;
```
@ -168,7 +168,7 @@ Use the boolean `loading` prop to set loading spinner
</Canvas>
```jsx
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
<Button loading>Loading Button</Button>;
```
@ -184,7 +184,7 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
</Canvas>
```jsx
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
import { IconName } from '../icon';
<Button startIconName={IconName.AddSquare}>Button</Button>;
@ -195,7 +195,7 @@ import { IconName } from '../icon';
</Canvas>
```jsx
import { Button } from '../ui/component-library';
import { Button } from '../../component-library';
import { IconName } from '../icon';
<Button endIconName={IconName.Arrow2Right}>Button</Button>;

2
ui/components/component-library/index.js
View File

@ -4,7 +4,7 @@ export {
AvatarAccountVariant,
AvatarAccountDiameter,
} from './avatar-account';
export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
export { AvatarFavicon, AvatarFaviconSize } from './avatar-favicon';
export { AvatarIcon, AvatarIconSize } from './avatar-icon';
export { AvatarNetwork, AvatarNetworkSize } from './avatar-network';
export { AvatarToken, AvatarTokenSize } from './avatar-token';