From 5d5fa242c39b35eef47770309b6019f43a44f15b Mon Sep 17 00:00:00 2001 From: George Marshall Date: Fri, 10 Mar 2023 12:12:55 -0800 Subject: [PATCH] Updating AvatarAccount objects to enums (#17727) * Updating object to enums * lint fix * Improving test coverage * Updating filename to .types.ts --- .../avatar-account/README.mdx | 51 ++++----- .../avatar-account.constants.js | 22 ---- .../avatar-account/avatar-account.js | 71 ++++++------ .../avatar-account/avatar-account.stories.js | 48 ++++----- .../avatar-account/avatar-account.test.js | 102 ++++++++++-------- .../avatar-account/avatar-account.types.ts | 22 ++++ .../component-library/avatar-account/index.js | 8 +- ui/components/component-library/index.js | 6 +- .../text-field/text-field.stories.js | 6 +- 9 files changed, 170 insertions(+), 166 deletions(-) delete mode 100644 ui/components/component-library/avatar-account/avatar-account.constants.js create mode 100644 ui/components/component-library/avatar-account/avatar-account.types.ts diff --git a/ui/components/component-library/avatar-account/README.mdx b/ui/components/component-library/avatar-account/README.mdx index 096c842ba..5207f6421 100644 --- a/ui/components/component-library/avatar-account/README.mdx +++ b/ui/components/component-library/avatar-account/README.mdx @@ -24,49 +24,45 @@ component props ### Size -Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `AvatarAccount` - -Optional: `AVATAR_ACCOUNT_SIZES` from `./ui/components/component-library` object can be used instead of `Size` +Use the `size` prop and the `AvatarAccountSize` enum from `../../component-library` to change the size of `AvatarAccount` Possible sizes include: -- `Size.XS` 16px -- `Size.SM` 24px -- `Size.MD` 32px -- `Size.LG` 40px -- `Size.XL` 48px +- `AvatarAccountSize.Xs` 16px +- `AvatarAccountSize.Sm` 24px +- `AvatarAccountSize.Md` 32px +- `AvatarAccountSize.Lg` 40px +- `AvatarAccountSize.Xl` 48px -Defaults to `Size.MD` +Defaults to `AvatarAccountSize.MD` - + ```jsx -import { Size } from '../../../helpers/constants/design-system'; -import { AvatarAccount } from '../ui/component-library'; +import { AvatarAccount, AvatarAccountSize } from '../ui/component-library'; - - - - - + + + + + ``` -### Type +### Variant -Use the `type` prop for the avatar to be rendered, it can either be a Jazzicon or a Blockie +Use the `variant` prop and the `AvatarAccountVariant` enum from `../../component-library` to change between jazzicon and blockies variants. - + ```jsx -import { TYPES } from './avatar-account.constants'; -import { AvatarAccount } from '../ui/component-library'; +import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library'; - - + + ``` ### Address @@ -78,9 +74,8 @@ Use the required `address` for generating images ```jsx -import { TYPES } from './avatar-account.constants'; -import { AvatarAccount } from '../ui/component-library'; +import { AvatarAccount, AvatarAccountVariant } from '../ui/component-library'; - - + + ``` diff --git a/ui/components/component-library/avatar-account/avatar-account.constants.js b/ui/components/component-library/avatar-account/avatar-account.constants.js deleted file mode 100644 index 3fc746a30..000000000 --- a/ui/components/component-library/avatar-account/avatar-account.constants.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Size } from '../../../helpers/constants/design-system'; - -export const AVATAR_ACCOUNT_DIAMETERS = { - xs: '16', - sm: '24', - md: '32', - lg: '40', - xl: '48', -}; - -export const AVATAR_ACCOUNT_TYPES = { - JAZZICON: 'Jazzicon', - BLOCKIES: 'Blockie', -}; - -export const AVATAR_ACCOUNT_SIZES = { - XS: Size.XS, - SM: Size.SM, - MD: Size.MD, - LG: Size.LG, - XL: Size.XL, -}; diff --git a/ui/components/component-library/avatar-account/avatar-account.js b/ui/components/component-library/avatar-account/avatar-account.js index d5ebe6512..fd1fee73a 100644 --- a/ui/components/component-library/avatar-account/avatar-account.js +++ b/ui/components/component-library/avatar-account/avatar-account.js @@ -3,58 +3,55 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import Jazzicon from '../../ui/jazzicon/jazzicon.component'; import BlockieIdenticon from '../../ui/identicon/blockieIdenticon/blockieIdenticon.component'; -import { AvatarBase } from '../avatar-base'; -import { Size } from '../../../helpers/constants/design-system'; + import Box from '../../ui/box/box'; +import { AvatarBase } from '../avatar-base'; import { - AVATAR_ACCOUNT_DIAMETERS, - AVATAR_ACCOUNT_TYPES, - AVATAR_ACCOUNT_SIZES, -} from './avatar-account.constants'; + AvatarAccountDiameter, + AvatarAccountVariant, + AvatarAccountSize, +} from './avatar-account.types'; export const AvatarAccount = ({ - size = Size.MD, + size = AvatarAccountSize.Md, address, className, - type, + variant = AvatarAccountVariant.Jazzicon, ...props -}) => { - return ( - - {type === 'Jazzicon' ? ( - - ) : ( - - )} - - ); -}; +}) => ( + + {variant === AvatarAccountVariant.Jazzicon ? ( + + ) : ( + + )} + +); AvatarAccount.propTypes = { /** * The size of the AvatarAccount. - * Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL' - * Defaults to SIZES.MD + * Possible values could be 'AvatarAccountSize.Xs', 'AvatarAccountSize.Sm', 'AvatarAccountSize.Md', 'AvatarAccountSize.Lg', 'AvatarAccountSize.Xl' + * Defaults to AvatarAccountSize.Md */ - size: PropTypes.oneOf(Object.values(AVATAR_ACCOUNT_SIZES)), + size: PropTypes.oneOf(Object.values(AvatarAccountSize)), /** - * The type of the avatar to be rendered, it can render either a Jazzicon or a Blockie + * The variant of the avatar to be rendered, it can render either a AvatarAccountVariant.Jazzicon or a AvatarAccountVariant.Blockie */ - type: PropTypes.oneOf(Object.values(AVATAR_ACCOUNT_TYPES)), + variant: PropTypes.oneOf(Object.values(AvatarAccountVariant)), /** * Address used for generating random image */ diff --git a/ui/components/component-library/avatar-account/avatar-account.stories.js b/ui/components/component-library/avatar-account/avatar-account.stories.js index f54ae21c7..6041e5944 100644 --- a/ui/components/component-library/avatar-account/avatar-account.stories.js +++ b/ui/components/component-library/avatar-account/avatar-account.stories.js @@ -1,21 +1,16 @@ import React from 'react'; import Box from '../../ui/box/box'; -import { - AlignItems, - DISPLAY, - Size, -} from '../../../helpers/constants/design-system'; +import { AlignItems, DISPLAY } from '../../../helpers/constants/design-system'; import { AvatarAccount } from './avatar-account'; import { - AVATAR_ACCOUNT_TYPES, - AVATAR_ACCOUNT_SIZES, -} from './avatar-account.constants'; + AvatarAccountVariant, + AvatarAccountSize, +} from './avatar-account.types'; import README from './README.mdx'; export default { title: 'Components/ComponentLibrary/AvatarAccount', - component: AvatarAccount, parameters: { docs: { @@ -25,18 +20,20 @@ export default { argTypes: { size: { control: 'select', - options: Object.values(AVATAR_ACCOUNT_SIZES), + options: Object.values(AvatarAccountSize).map( + (value) => value.toLowerCase(), // Removes reverse mapping from enum this is a temporary fix until we are using typescript for everything + ), }, address: { control: 'text' }, - type: { + variant: { control: 'select', - options: Object.values(AVATAR_ACCOUNT_TYPES), + options: Object.values(AvatarAccountVariant), }, }, args: { address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1', - size: Size.MD, - type: AVATAR_ACCOUNT_TYPES.JAZZICON, + size: AvatarAccountSize.Md, + variant: AvatarAccountVariant.Jazzicon, }, }; @@ -44,21 +41,20 @@ export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; -export const SizeStory = (args) => ( +export const Size = (args) => ( - - - - - + + + + + ); -SizeStory.storyName = 'Size'; -export const Type = (args) => ( +export const Variant = (args) => ( - - + + ); @@ -66,12 +62,12 @@ export const Address = (args) => ( diff --git a/ui/components/component-library/avatar-account/avatar-account.test.js b/ui/components/component-library/avatar-account/avatar-account.test.js index 770d6e4e6..1350daa01 100644 --- a/ui/components/component-library/avatar-account/avatar-account.test.js +++ b/ui/components/component-library/avatar-account/avatar-account.test.js @@ -1,103 +1,115 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { AvatarAccount, AVATAR_ACCOUNT_SIZES } from '.'; +import { AvatarAccount, AvatarAccountSize, AvatarAccountVariant } from '.'; import 'jest-canvas-mock'; describe('AvatarAccount', () => { - const args = { - address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1', - type: 'Jazzicon', - }; it('should render correctly', () => { const { getByTestId, container } = render( - , + , ); expect(getByTestId('avatar-account')).toBeDefined(); + expect(container.querySelector('svg')).toBeDefined(); + expect( + container.getElementsByClassName('mm-avatar-account__jazzicon'), + ).toBeDefined(); expect(container).toMatchSnapshot(); }); it('should render Jazzicon correctly', () => { - const container = ( - + const { container } = render( + , ); - expect(container.props.type).toStrictEqual('Jazzicon'); + expect(container.querySelector('svg')).toBeDefined(); }); - it('should render Blockie correctly', () => { - const container = ( - + it('should render Blockies correctly', () => { + const { container } = render( + , ); - expect(container.props.type).toStrictEqual('Blockie'); + expect(container.querySelector('canvas')).toBeDefined(); + expect(container.querySelector('img')).toBeDefined(); }); it('should render with custom classname', () => { const { getByTestId } = render( , ); - expect(getByTestId('classname')).toHaveClass('mm-avatar-account--test'); + expect(getByTestId('test')).toHaveClass('mm-avatar-account--test'); }); it('should render with address', () => { const container = ( ); - expect(container.props.address).toStrictEqual('0x0'); + expect(container.props.address).toStrictEqual( + '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1', + ); }); it('should render with different size classes', () => { const { getByTestId } = render( <> , ); - expect(getByTestId(AVATAR_ACCOUNT_SIZES.XS)).toHaveClass( - `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.XS}`, + expect(getByTestId(AvatarAccountSize.Xs)).toHaveClass( + 'mm-avatar-base--size-xs', ); - expect(getByTestId(AVATAR_ACCOUNT_SIZES.SM)).toHaveClass( - `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.SM}`, + expect(getByTestId(AvatarAccountSize.Sm)).toHaveClass( + 'mm-avatar-base--size-sm', ); - expect(getByTestId(AVATAR_ACCOUNT_SIZES.MD)).toHaveClass( - `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.MD}`, + expect(getByTestId(AvatarAccountSize.Md)).toHaveClass( + 'mm-avatar-base--size-md', ); - expect(getByTestId(AVATAR_ACCOUNT_SIZES.LG)).toHaveClass( - `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.LG}`, + expect(getByTestId(AvatarAccountSize.Lg)).toHaveClass( + 'mm-avatar-base--size-lg', ); - expect(getByTestId(AVATAR_ACCOUNT_SIZES.XL)).toHaveClass( - `mm-avatar-base--size-${AVATAR_ACCOUNT_SIZES.XL}`, + expect(getByTestId(AvatarAccountSize.Xl)).toHaveClass( + 'mm-avatar-base--size-xl', ); }); }); diff --git a/ui/components/component-library/avatar-account/avatar-account.types.ts b/ui/components/component-library/avatar-account/avatar-account.types.ts new file mode 100644 index 000000000..cde1d9a9c --- /dev/null +++ b/ui/components/component-library/avatar-account/avatar-account.types.ts @@ -0,0 +1,22 @@ +import { Size } from '../../../helpers/constants/design-system'; + +export enum AvatarAccountVariant { + Jazzicon = 'jazzicon', + Blockies = 'blockies', +} + +export enum AvatarAccountSize { + Xs = Size.XS, + Sm = Size.SM, + Md = Size.MD, + Lg = Size.LG, + Xl = Size.XL, +} + +export const AvatarAccountDiameter = { + [AvatarAccountSize.Xs]: 16, + [AvatarAccountSize.Sm]: 24, + [AvatarAccountSize.Md]: 32, + [AvatarAccountSize.Lg]: 40, + [AvatarAccountSize.Xl]: 48, +} as const; diff --git a/ui/components/component-library/avatar-account/index.js b/ui/components/component-library/avatar-account/index.js index 819be4061..dfab0a38e 100644 --- a/ui/components/component-library/avatar-account/index.js +++ b/ui/components/component-library/avatar-account/index.js @@ -1,6 +1,6 @@ export { AvatarAccount } from './avatar-account'; export { - AVATAR_ACCOUNT_SIZES, - AVATAR_ACCOUNT_TYPES, - AVATAR_ACCOUNT_DIAMETERS, -} from './avatar-account.constants'; + AvatarAccountSize, + AvatarAccountVariant, + AvatarAccountDiameter, +} from './avatar-account.types'; diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js index b26ea86ca..fbf0282f8 100644 --- a/ui/components/component-library/index.js +++ b/ui/components/component-library/index.js @@ -1,8 +1,8 @@ export { AvatarAccount, - AVATAR_ACCOUNT_SIZES, - AVATAR_ACCOUNT_TYPES, - AVATAR_ACCOUNT_DIAMETERS, + AvatarAccountSize, + AvatarAccountVariant, + AvatarAccountDiameter, } from './avatar-account'; export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon'; export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon'; diff --git a/ui/components/component-library/text-field/text-field.stories.js b/ui/components/component-library/text-field/text-field.stories.js index 11009b24e..9e5419cef 100644 --- a/ui/components/component-library/text-field/text-field.stories.js +++ b/ui/components/component-library/text-field/text-field.stories.js @@ -16,6 +16,7 @@ import Box from '../../ui/box/box'; import { AvatarAccount, + AvatarAccountSize, AvatarToken, Button, ButtonIcon, @@ -305,7 +306,10 @@ export const StartAccessoryEndAccessory = (args) => { truncate startAccessory={ value.accountAddress && ( - + ) } endAccessory={