From d468e2fdb8349c620f031f124edc4dec79b70e71 Mon Sep 17 00:00:00 2001 From: Binij Shrestha Date: Mon, 8 May 2023 12:25:12 +0545 Subject: [PATCH 1/4] Migrate AvatarToken fix lint fixing error replace BoxTextAlign with TextAlign using AvatarTokenSize fix avatar-base-type --- ...est.js.snap => avatar-token.test.tsx.snap} | 0 .../avatar-token/avatar-token.constants.js | 9 -- .../avatar-token/avatar-token.js | 133 ------------------ ...en.stories.js => avatar-token.stories.tsx} | 61 ++++---- ...ar-token.test.js => avatar-token.test.tsx} | 6 +- .../avatar-token/avatar-token.tsx | 85 +++++++++++ .../avatar-token/avatar-token.types.ts | 62 ++++++++ .../component-library/avatar-token/index.js | 1 - .../component-library/avatar-token/index.ts | 3 + ui/components/component-library/index.js | 2 +- ui/components/ui/box/box.d.ts | 2 +- 11 files changed, 187 insertions(+), 177 deletions(-) rename ui/components/component-library/avatar-token/__snapshots__/{avatar-token.test.js.snap => avatar-token.test.tsx.snap} (100%) delete mode 100644 ui/components/component-library/avatar-token/avatar-token.constants.js delete mode 100644 ui/components/component-library/avatar-token/avatar-token.js rename ui/components/component-library/avatar-token/{avatar-token.stories.js => avatar-token.stories.tsx} (81%) rename ui/components/component-library/avatar-token/{avatar-token.test.js => avatar-token.test.tsx} (97%) create mode 100644 ui/components/component-library/avatar-token/avatar-token.tsx create mode 100644 ui/components/component-library/avatar-token/avatar-token.types.ts delete mode 100644 ui/components/component-library/avatar-token/index.js create mode 100644 ui/components/component-library/avatar-token/index.ts diff --git a/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap b/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.tsx.snap similarity index 100% rename from ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap rename to ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.tsx.snap diff --git a/ui/components/component-library/avatar-token/avatar-token.constants.js b/ui/components/component-library/avatar-token/avatar-token.constants.js deleted file mode 100644 index b9d1e10a42c7..000000000000 --- a/ui/components/component-library/avatar-token/avatar-token.constants.js +++ /dev/null @@ -1,9 +0,0 @@ -import { Size } from '../../../helpers/constants/design-system'; - -export const AVATAR_TOKEN_SIZES = { - XS: Size.XS, - SM: Size.SM, - MD: Size.MD, - LG: Size.LG, - XL: Size.XL, -}; diff --git a/ui/components/component-library/avatar-token/avatar-token.js b/ui/components/component-library/avatar-token/avatar-token.js deleted file mode 100644 index 9cc951011035..000000000000 --- a/ui/components/component-library/avatar-token/avatar-token.js +++ /dev/null @@ -1,133 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import classnames from 'classnames'; -import PropTypes from 'prop-types'; -import Box from '../../ui/box/box'; -import { AvatarBase } from '../avatar-base'; -import { - Size, - DISPLAY, - AlignItems, - JustifyContent, - TextColor, - BorderColor, - BackgroundColor, -} from '../../../helpers/constants/design-system'; -import { AVATAR_TOKEN_SIZES } from './avatar-token.constants'; - -export const AvatarToken = React.forwardRef( - ( - { - size = Size.MD, - name, - src, - showHalo, - color = TextColor.textDefault, - backgroundColor = BackgroundColor.backgroundAlternative, - borderColor = BorderColor.transparent, - className, - ...props - }, - ref, - ) => { - const [showFallback, setShowFallback] = useState(false); - - useEffect(() => { - setShowFallback(!src); - }, [src]); - - const handleOnError = () => { - setShowFallback(true); - }; - - const fallbackString = name && name[0] ? name[0] : '?'; - - return ( - - {showFallback ? ( - fallbackString - ) : ( - <> - {showHalo && ( - - )} - {`${name} - - )} - - ); - }, -); - -AvatarToken.propTypes = { - /** - * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src - */ - name: PropTypes.string, - /** - * The src accepts the string of the image to be rendered - */ - src: PropTypes.string, - /** - * The showHalo accepts a boolean prop to render the image with halo effect - */ - showHalo: PropTypes.bool, - /** - * The size of the AvatarToken. - * Possible values could be SIZES.XS(16px), SIZES.SM(24px), SIZES.MD(32px), SIZES.LG(40px), SIZES.XL(48px) - * Defaults to SIZES.MD - */ - size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)), - /** - * The background color of the AvatarToken - * Defaults to Color.backgroundAlternative - */ - backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)), - /** - * The background color of the AvatarToken - * Defaults to Color.borderDefault - */ - borderColor: PropTypes.oneOf(Object.values(BorderColor)), - /** - * The color of the text inside the AvatarToken - * Defaults to Color.textDefault - */ - color: PropTypes.oneOf(Object.values(TextColor)), - /** - * Additional classNames to be added to the AvatarToken - */ - className: PropTypes.string, - /** - * AvatarToken also accepts all Box props including but not limited to - * className, as(change root element of HTML element) and margin props - */ - ...Box.propTypes, -}; - -AvatarToken.displayName = 'AvatarToken'; diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.js b/ui/components/component-library/avatar-token/avatar-token.stories.tsx similarity index 81% rename from ui/components/component-library/avatar-token/avatar-token.stories.js rename to ui/components/component-library/avatar-token/avatar-token.stories.tsx index ed8cfc53bff9..dd3d00b90477 100644 --- a/ui/components/component-library/avatar-token/avatar-token.stories.js +++ b/ui/components/component-library/avatar-token/avatar-token.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import { - Size, DISPLAY, AlignItems, TextColor, @@ -22,11 +22,10 @@ import { import README from './README.mdx'; import { AvatarToken } from './avatar-token'; -import { AVATAR_TOKEN_SIZES } from './avatar-token.constants'; +import { AvatarTokenSize } from './avatar-token.types'; export default { title: 'Components/ComponentLibrary/AvatarToken', - component: AvatarToken, parameters: { docs: { @@ -36,7 +35,7 @@ export default { argTypes: { size: { control: 'select', - options: Object.values(AVATAR_TOKEN_SIZES), + options: Object.values(AvatarTokenSize), }, color: { options: Object.values(TextColor), @@ -63,19 +62,19 @@ export default { args: { name: 'eth', src: './images/eth_logo.png', - size: Size.MD, + size: AvatarTokenSize.Md, showHalo: false, }, -}; +} as ComponentMeta; -const Template = (args) => { +const Template: ComponentStory = (args) => { return ; }; export const DefaultStory = Template.bind({}); DefaultStory.storyName = 'Default'; -export const SizeStory = (args) => ( +export const SizeStory: ComponentStory = (args) => ( <> ( gap={2} marginBottom={4} > - - - - - + + + + + ( gap={2} marginBottom={4} > - - - - - + + + + + Sizes with{' '} @@ -135,7 +134,7 @@ export const SizeStory = (args) => ( /> } > - + ( /> } > - + ( /> } > - + ( /> } > - + ( /> } > - + @@ -205,7 +204,7 @@ export const SizeStory = (args) => ( {...args} src="" name="ETH" - size={Size.XS} + size={AvatarTokenSize.Xs} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -224,7 +223,7 @@ export const SizeStory = (args) => ( {...args} name="ETH" src="" - size={Size.SM} + size={AvatarTokenSize.Sm} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -243,7 +242,7 @@ export const SizeStory = (args) => ( {...args} name="ETH" src="" - size={Size.MD} + size={AvatarTokenSize.Md} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -262,7 +261,7 @@ export const SizeStory = (args) => ( {...args} name="ETH" src="" - size={Size.LG} + size={AvatarTokenSize.Lg} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -281,7 +280,7 @@ export const SizeStory = (args) => ( {...args} name="ETH" src="" - size={Size.XL} + size={AvatarTokenSize.Xl} borderColor={BorderColor.borderDefault} borderSize={2} /> @@ -296,7 +295,7 @@ Name.args = { src: '', }; -export const Src = (args) => ( +export const Src: ComponentStory = (args) => ( @@ -325,7 +324,9 @@ ShowHalo.args = { showHalo: true, }; -export const ColorBackgroundColorAndBorderColor = (args) => ( +export const ColorBackgroundColorAndBorderColor: ComponentStory< + typeof AvatarToken +> = (args) => ( { ); }); it('should forward a ref to the root html element', () => { - const ref = React.createRef(); + const ref = React.createRef(); render(); expect(ref.current).not.toBeNull(); - expect(ref.current.nodeName).toBe('DIV'); + if (ref.current) { + expect(ref.current.nodeName).toBe('DIV'); + } }); }); diff --git a/ui/components/component-library/avatar-token/avatar-token.tsx b/ui/components/component-library/avatar-token/avatar-token.tsx new file mode 100644 index 000000000000..6a96ac9e53d7 --- /dev/null +++ b/ui/components/component-library/avatar-token/avatar-token.tsx @@ -0,0 +1,85 @@ +import React, { useState, useEffect, Ref } from 'react'; +import classnames from 'classnames'; +import { AvatarBase, AvatarBaseSize } from '../avatar-base'; +import { + DISPLAY, + AlignItems, + JustifyContent, + TextColor, + BorderColor, + BackgroundColor, +} from '../../../helpers/constants/design-system'; +import { AvatarTokenProps, AvatarTokenSize } from './avatar-token.types'; + +export const AvatarToken = React.forwardRef( + ( + { + size = AvatarTokenSize.Md, + name, + src, + showHalo, + color = TextColor.textDefault, + backgroundColor = BackgroundColor.backgroundAlternative, + borderColor = BorderColor.transparent, + className = '', + ...props + }: AvatarTokenProps, + ref: Ref, + ) => { + const [showFallback, setShowFallback] = useState(false); + + useEffect(() => { + setShowFallback(!src); + }, [src]); + + const handleOnError = () => { + setShowFallback(true); + }; + + const fallbackString = name?.[0] ?? '?'; + + return ( + + {showFallback ? ( + fallbackString + ) : ( + <> + {showHalo && ( + + )} + {`${name} + + )} + + ); + }, +); + +AvatarToken.displayName = 'AvatarToken'; diff --git a/ui/components/component-library/avatar-token/avatar-token.types.ts b/ui/components/component-library/avatar-token/avatar-token.types.ts new file mode 100644 index 000000000000..312df071ae88 --- /dev/null +++ b/ui/components/component-library/avatar-token/avatar-token.types.ts @@ -0,0 +1,62 @@ +import { ValidTag } from '../text'; +import type { BoxProps } from '../../ui/box/box.d'; +import { + BackgroundColor, + BorderColor, + TextColor, +} from 'ui/helpers/constants/design-system'; + +export enum AvatarTokenSize { + Xs = 'xs', + Sm = 'sm', + Md = 'md', + Lg = 'lg', + Xl = 'xl', +} + +/** + * Props for the AvatarToken component + */ +export interface AvatarTokenProps extends BoxProps { + /** + * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src + */ + name?: string; + /** + * The src accepts the string of the image to be rendered + */ + src?: string; + /** + * The showHalo accepts a boolean prop to render the image with halo effect + */ + showHalo?: boolean; + /** + * The size of the AvatarToken. + * Possible values could be 'AvatarTokenSize.Xs' 16px, 'AvatarTokenSize.Sm' 24px, 'AvatarTokenSize.Md' 32px, 'AvatarTokenSize.Lg' 40px, 'AvatarTokenSize.Xl' 48px + * Defaults to AvatarTokenSize.Md + */ + size?: AvatarTokenSize; + /** + * The background color of the AvatarToken + * Defaults to Color.backgroundAlternative + */ + backgroundColor?: BackgroundColor; + /** + * The background color of the AvatarToken + * Defaults to Color.borderDefault + */ + borderColor?: BorderColor; + /** + * The color of the text inside the AvatarToken + * Defaults to Color.textDefault + */ + color?: TextColor; + /** + * Additional classNames to be added to the AvatarToken + */ + className?: string; + /** + * Changes the root html element tag of the Text component. + */ + as?: ValidTag; +} diff --git a/ui/components/component-library/avatar-token/index.js b/ui/components/component-library/avatar-token/index.js deleted file mode 100644 index 17c1e649a251..000000000000 --- a/ui/components/component-library/avatar-token/index.js +++ /dev/null @@ -1 +0,0 @@ -export { AvatarToken } from './avatar-token'; diff --git a/ui/components/component-library/avatar-token/index.ts b/ui/components/component-library/avatar-token/index.ts new file mode 100644 index 000000000000..4743bbbe901d --- /dev/null +++ b/ui/components/component-library/avatar-token/index.ts @@ -0,0 +1,3 @@ +export { AvatarToken } from './avatar-token'; +export { AvatarTokenSize } from './avatar-token.types'; +export type { AvatarTokenProps } from './avatar-token.types'; diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js index f7d25c3ef2bf..e4c72fb2f6a5 100644 --- a/ui/components/component-library/index.js +++ b/ui/components/component-library/index.js @@ -7,7 +7,7 @@ export { export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon'; export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon'; export { AvatarNetwork, AvatarNetworkSize } from './avatar-network'; -export { AvatarToken } from './avatar-token'; +export { AvatarToken, AvatarTokenSize } from './avatar-token'; export { AvatarBase } from './avatar-base'; export { BadgeWrapper, diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts index 763127fd841e..8e8530f7e228 100644 --- a/ui/components/ui/box/box.d.ts +++ b/ui/components/ui/box/box.d.ts @@ -407,4 +407,4 @@ export interface BoxProps extends React.HTMLAttributes { * {@link https://github.com/MetaMask/metamask-extension/issues/19526} */ declare const Box: React.FC; -export default Box; +export default Box; \ No newline at end of file From b0468e89c5546f9edccf655cf966796d6eb592d7 Mon Sep 17 00:00:00 2001 From: garrettbear Date: Mon, 24 Jul 2023 15:38:13 -0700 Subject: [PATCH 2/4] Migrate AvatarToken fix lint fixing error replace BoxTextAlign with TextAlign using AvatarTokenSize fix avatar-base-type Added union AvatarTokenSize TokenProps extends BaseProps remove children prop from BaseProps replace deprecated lint fix --- .../avatar-token/avatar-token.stories.tsx | 30 ++++++++--------- .../avatar-token/avatar-token.tsx | 8 ++--- .../avatar-token/avatar-token.types.ts | 33 ++----------------- ui/components/ui/box/box.d.ts | 2 +- 4 files changed, 22 insertions(+), 51 deletions(-) diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.tsx b/ui/components/component-library/avatar-token/avatar-token.stories.tsx index dd3d00b90477..7654e365af3a 100644 --- a/ui/components/component-library/avatar-token/avatar-token.stories.tsx +++ b/ui/components/component-library/avatar-token/avatar-token.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryFn, Meta } from '@storybook/react'; import { - DISPLAY, + Display, AlignItems, TextColor, BackgroundColor, @@ -65,19 +65,19 @@ export default { size: AvatarTokenSize.Md, showHalo: false, }, -} as ComponentMeta; +} as Meta; -const Template: ComponentStory = (args) => { +const Template: StoryFn = (args) => { return ; }; export const DefaultStory = Template.bind({}); DefaultStory.storyName = 'Default'; -export const SizeStory: ComponentStory = (args) => ( +export const SizeStory: StoryFn = (args) => ( <> = (args) => ( = (args) => ( components = (args) => ( - + = (args) => ( - +export const Src: StoryFn = (args) => ( + @@ -324,10 +324,10 @@ ShowHalo.args = { showHalo: true, }; -export const ColorBackgroundColorAndBorderColor: ComponentStory< - typeof AvatarToken -> = (args) => ( - +export const ColorBackgroundColorAndBorderColor: StoryFn = ( + args, +) => ( + { /** * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src */ @@ -36,27 +30,4 @@ export interface AvatarTokenProps extends BoxProps { * Defaults to AvatarTokenSize.Md */ size?: AvatarTokenSize; - /** - * The background color of the AvatarToken - * Defaults to Color.backgroundAlternative - */ - backgroundColor?: BackgroundColor; - /** - * The background color of the AvatarToken - * Defaults to Color.borderDefault - */ - borderColor?: BorderColor; - /** - * The color of the text inside the AvatarToken - * Defaults to Color.textDefault - */ - color?: TextColor; - /** - * Additional classNames to be added to the AvatarToken - */ - className?: string; - /** - * Changes the root html element tag of the Text component. - */ - as?: ValidTag; } diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts index 8e8530f7e228..763127fd841e 100644 --- a/ui/components/ui/box/box.d.ts +++ b/ui/components/ui/box/box.d.ts @@ -407,4 +407,4 @@ export interface BoxProps extends React.HTMLAttributes { * {@link https://github.com/MetaMask/metamask-extension/issues/19526} */ declare const Box: React.FC; -export default Box; \ No newline at end of file +export default Box; From f15f67f746daa99149260e4e93c73d46a784cfae Mon Sep 17 00:00:00 2001 From: garrettbear Date: Tue, 25 Jul 2023 14:46:12 -0700 Subject: [PATCH 3/4] update TS types --- .../avatar-token/avatar-token.tsx | 21 ++++++++++++------- .../avatar-token/avatar-token.types.ts | 13 ++++++++++-- ui/components/component-library/index.js | 2 +- 3 files changed, 26 insertions(+), 10 deletions(-) diff --git a/ui/components/component-library/avatar-token/avatar-token.tsx b/ui/components/component-library/avatar-token/avatar-token.tsx index 085b6b87ceda..5f5767f1c11a 100644 --- a/ui/components/component-library/avatar-token/avatar-token.tsx +++ b/ui/components/component-library/avatar-token/avatar-token.tsx @@ -1,6 +1,6 @@ -import React, { useState, useEffect, Ref } from 'react'; +import React, { useState, useEffect } from 'react'; import classnames from 'classnames'; -import { AvatarBase } from '../avatar-base'; +import { AvatarBase, AvatarBaseProps } from '../avatar-base'; import { Display, AlignItems, @@ -9,10 +9,12 @@ import { BorderColor, BackgroundColor, } from '../../../helpers/constants/design-system'; +import type { PolymorphicRef } from '../box'; +import type { AvatarTokenComponent } from './avatar-token.types'; import { AvatarTokenProps, AvatarTokenSize } from './avatar-token.types'; -export const AvatarToken = React.forwardRef( - ( +export const AvatarToken: AvatarTokenComponent = React.forwardRef( + ( { size = AvatarTokenSize.Md, name, @@ -23,8 +25,8 @@ export const AvatarToken = React.forwardRef( borderColor = BorderColor.transparent, className = '', ...props - }: AvatarTokenProps, - ref: Ref, + }: AvatarTokenProps, + ref: PolymorphicRef, ) => { const [showFallback, setShowFallback] = useState(false); @@ -50,7 +52,12 @@ export const AvatarToken = React.forwardRef( showHalo ? 'mm-avatar-token--with-halo' : '', className, )} - {...{ backgroundColor, borderColor, color, ...props }} + {...{ + backgroundColor, + borderColor, + color, + ...(props as AvatarBaseProps), + }} > {showFallback ? ( fallbackString diff --git a/ui/components/component-library/avatar-token/avatar-token.types.ts b/ui/components/component-library/avatar-token/avatar-token.types.ts index 0c37b08fe6d6..ebd9e2c9a7aa 100644 --- a/ui/components/component-library/avatar-token/avatar-token.types.ts +++ b/ui/components/component-library/avatar-token/avatar-token.types.ts @@ -1,4 +1,5 @@ -import { AvatarBaseProps } from '../avatar-base'; +import type { PolymorphicComponentPropWithRef } from '../box'; +import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types'; export enum AvatarTokenSize { Xs = 'xs', @@ -11,7 +12,8 @@ export enum AvatarTokenSize { /** * Props for the AvatarToken component */ -export interface AvatarTokenProps extends Omit { +export interface AvatarTokenStyleUtilityProps + extends Omit { /** * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src */ @@ -31,3 +33,10 @@ export interface AvatarTokenProps extends Omit { */ size?: AvatarTokenSize; } + +export type AvatarTokenProps = + PolymorphicComponentPropWithRef; + +export type AvatarTokenComponent = ( + props: AvatarTokenProps, +) => React.ReactElement | null; diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js index e4c72fb2f6a5..ce22748150bb 100644 --- a/ui/components/component-library/index.js +++ b/ui/components/component-library/index.js @@ -8,7 +8,7 @@ export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon'; export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon'; export { AvatarNetwork, AvatarNetworkSize } from './avatar-network'; export { AvatarToken, AvatarTokenSize } from './avatar-token'; -export { AvatarBase } from './avatar-base'; +export { AvatarBase, AvatarBaseSize } from './avatar-base'; export { BadgeWrapper, BadgeWrapperPosition, From 7a1140faaca69764c28dc120bf2d8798efd042d5 Mon Sep 17 00:00:00 2001 From: garrettbear Date: Tue, 25 Jul 2023 15:56:21 -0700 Subject: [PATCH 4/4] fix types and children issue --- .../avatar-network/avatar-network.types.ts | 2 +- .../component-library/avatar-token/README.mdx | 48 +++++++++-------- .../avatar-token/avatar-token.stories.tsx | 41 +++++++-------- .../avatar-token/avatar-token.test.tsx | 51 +++++++++++++++++-- .../avatar-token/avatar-token.tsx | 2 - .../avatar-token/avatar-token.types.ts | 2 +- 6 files changed, 91 insertions(+), 55 deletions(-) diff --git a/ui/components/component-library/avatar-network/avatar-network.types.ts b/ui/components/component-library/avatar-network/avatar-network.types.ts index d0d049143612..c4caea3f65fa 100644 --- a/ui/components/component-library/avatar-network/avatar-network.types.ts +++ b/ui/components/component-library/avatar-network/avatar-network.types.ts @@ -13,7 +13,7 @@ export enum AvatarNetworkSize { * Props for the AvatarNetwork component */ export interface AvatarNetworkStyleUtilityProps - extends Omit { + extends Omit { /** * The name accepts the string to render the first alphabet of the Avatar Name */ diff --git a/ui/components/component-library/avatar-token/README.mdx b/ui/components/component-library/avatar-token/README.mdx index fb39789bf6f9..435a2fbf168e 100644 --- a/ui/components/component-library/avatar-token/README.mdx +++ b/ui/components/component-library/avatar-token/README.mdx @@ -12,23 +12,23 @@ The `AvatarToken` is a component responsible for display of the image of a given ## Props -The `AvatarToken` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props +The `AvatarToken` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props ### Size -Use the `size` prop to set the size of the `AvatarToken`. +Use the `size` prop and the `AvatarTokenSize` enum to change the size of `AvatarToken`. Defaults to `IconSize.Sm` Possible sizes include: -- `xs` 16px -- `sm` 24px -- `md` 32px -- `lg` 40px -- `xl` 48px +- `AvatarTokenSize.Xs` 16px +- `AvatarTokenSize.Sm` 24px +- `AvatarTokenSize.Md` 32px +- `AvatarTokenSize.Lg` 40px +- `AvatarTokenSize.Xl` 48px -Defaults to `md` +Defaults to `AvatarTokenSize.Md` The fallback display of the `AvatarToken` is a circle with the initial letter of the network name. The size of the initial letter is calculated based on the size of the `AvatarToken` component. @@ -37,13 +37,13 @@ The fallback display of the `AvatarToken` is a circle with the initial letter of ```jsx -import { AvatarToken } from '../../component-library'; +import { AvatarToken, AvatarTokenSize } from '../../component-library'; - - - - - + + + + + ``` ### Name @@ -104,24 +104,22 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color ```jsx -import { TextColor, - BackgroundColor, - BorderColor, } from '../../../helpers/constants/design-system'; +import { TextColor, BackgroundColor, BorderColor, } from '../../../helpers/constants/design-system'; import { AvatarToken } from '../../component-library'; G S diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.tsx b/ui/components/component-library/avatar-token/avatar-token.stories.tsx index 7654e365af3a..12d94a170ee9 100644 --- a/ui/components/component-library/avatar-token/avatar-token.stories.tsx +++ b/ui/components/component-library/avatar-token/avatar-token.stories.tsx @@ -7,22 +7,17 @@ import { BackgroundColor, BorderColor, } from '../../../helpers/constants/design-system'; - -import Box from '../../ui/box/box'; - import { AvatarNetwork, AvatarNetworkSize, - BUTTON_LINK_SIZES, BadgeWrapper, + Box, ButtonLink, + BUTTON_LINK_SIZES, Text, } from '..'; - import README from './README.mdx'; - -import { AvatarToken } from './avatar-token'; -import { AvatarTokenSize } from './avatar-token.types'; +import { AvatarToken, AvatarTokenSize } from '.'; export default { title: 'Components/ComponentLibrary/AvatarToken', @@ -129,7 +124,7 @@ export const SizeStory: StoryFn = (args) => ( src="./images/eth_logo.png" name="ETH" size={AvatarNetworkSize.Xs} - borderColor={BackgroundColor.backgroundDefault} + borderColor={BorderColor.backgroundDefault} borderWidth={2} /> } @@ -142,7 +137,7 @@ export const SizeStory: StoryFn = (args) => ( src="./images/eth_logo.png" name="ETH" size={AvatarNetworkSize.Xs} - borderColor={BackgroundColor.backgroundDefault} + borderColor={BorderColor.backgroundDefault} borderWidth={2} /> } @@ -155,7 +150,7 @@ export const SizeStory: StoryFn = (args) => ( src="./images/eth_logo.png" name="ETH" size={AvatarNetworkSize.Xs} - borderColor={BackgroundColor.backgroundDefault} + borderColor={BorderColor.backgroundDefault} borderWidth={2} /> } @@ -168,7 +163,7 @@ export const SizeStory: StoryFn = (args) => ( src="./images/eth_logo.png" name="ETH" size={AvatarNetworkSize.Xs} - borderColor={BackgroundColor.backgroundDefault} + borderColor={BorderColor.backgroundDefault} borderWidth={2} /> } @@ -181,7 +176,7 @@ export const SizeStory: StoryFn = (args) => ( src="./images/eth_logo.png" name="ETH" size={AvatarNetworkSize.Sm} - borderColor={BackgroundColor.backgroundDefault} + borderColor={BorderColor.backgroundDefault} borderWidth={2} /> } @@ -195,7 +190,7 @@ export const SizeStory: StoryFn = (args) => ( } @@ -206,7 +201,7 @@ export const SizeStory: StoryFn = (args) => ( name="ETH" size={AvatarTokenSize.Xs} borderColor={BorderColor.borderDefault} - borderSize={2} + borderWidth={2} /> = (args) => ( } @@ -225,7 +220,7 @@ export const SizeStory: StoryFn = (args) => ( src="" size={AvatarTokenSize.Sm} borderColor={BorderColor.borderDefault} - borderSize={2} + borderWidth={2} /> = (args) => ( } @@ -244,7 +239,7 @@ export const SizeStory: StoryFn = (args) => ( src="" size={AvatarTokenSize.Md} borderColor={BorderColor.borderDefault} - borderSize={2} + borderWidth={2} /> = (args) => ( } @@ -263,7 +258,7 @@ export const SizeStory: StoryFn = (args) => ( src="" size={AvatarTokenSize.Lg} borderColor={BorderColor.borderDefault} - borderSize={2} + borderWidth={2} /> = (args) => ( } @@ -282,7 +277,7 @@ export const SizeStory: StoryFn = (args) => ( src="" size={AvatarTokenSize.Xl} borderColor={BorderColor.borderDefault} - borderSize={2} + borderWidth={2} /> diff --git a/ui/components/component-library/avatar-token/avatar-token.test.tsx b/ui/components/component-library/avatar-token/avatar-token.test.tsx index 8e76d55f5615..90a714505fb3 100644 --- a/ui/components/component-library/avatar-token/avatar-token.test.tsx +++ b/ui/components/component-library/avatar-token/avatar-token.test.tsx @@ -1,14 +1,12 @@ /* eslint-disable jest/require-top-level-describe */ import { render, screen } from '@testing-library/react'; import React from 'react'; - import { BackgroundColor, BorderColor, TextColor, } from '../../../helpers/constants/design-system'; - -import { AvatarToken } from './avatar-token'; +import { AvatarToken, AvatarTokenSize } from '.'; describe('AvatarToken', () => { const args = { @@ -58,6 +56,53 @@ describe('AvatarToken', () => { ); expect(getByTestId('avatar-token')).toHaveClass('test-class'); }); + // size + it('should render with different AvatarTokenSize', () => { + const { getByTestId } = render( + <> + + + + + + , + ); + expect(getByTestId(AvatarTokenSize.Xs)).toHaveClass( + `mm-avatar-base--size-${AvatarTokenSize.Xs}`, + ); + expect(getByTestId(AvatarTokenSize.Sm)).toHaveClass( + `mm-avatar-base--size-${AvatarTokenSize.Sm}`, + ); + expect(getByTestId(AvatarTokenSize.Md)).toHaveClass( + `mm-avatar-base--size-${AvatarTokenSize.Md}`, + ); + expect(getByTestId(AvatarTokenSize.Lg)).toHaveClass( + `mm-avatar-base--size-${AvatarTokenSize.Lg}`, + ); + expect(getByTestId(AvatarTokenSize.Xl)).toHaveClass( + `mm-avatar-base--size-${AvatarTokenSize.Xl}`, + ); + }); // color it('should render with different colors', () => { const { getByTestId } = render( diff --git a/ui/components/component-library/avatar-token/avatar-token.tsx b/ui/components/component-library/avatar-token/avatar-token.tsx index 5f5767f1c11a..bece3c2aeb53 100644 --- a/ui/components/component-library/avatar-token/avatar-token.tsx +++ b/ui/components/component-library/avatar-token/avatar-token.tsx @@ -88,5 +88,3 @@ export const AvatarToken: AvatarTokenComponent = React.forwardRef( ); }, ); - -AvatarToken.displayName = 'AvatarToken'; diff --git a/ui/components/component-library/avatar-token/avatar-token.types.ts b/ui/components/component-library/avatar-token/avatar-token.types.ts index ebd9e2c9a7aa..c36c15b768a8 100644 --- a/ui/components/component-library/avatar-token/avatar-token.types.ts +++ b/ui/components/component-library/avatar-token/avatar-token.types.ts @@ -13,7 +13,7 @@ export enum AvatarTokenSize { * Props for the AvatarToken component */ export interface AvatarTokenStyleUtilityProps - extends Omit { + extends Omit { /** * The name accepts the string to render the first letter of the AvatarToken. This will be used as the fallback display if no image url is passed to the src */