From 88af4b3c36411299c627083cefaf5caff3896203 Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Thu, 15 Dec 2022 22:59:24 +0530 Subject: [PATCH] Avatar Token HouseKeeping (#16662) * Avatar Token HouseKeeping * updated props * fixed indentation and avatar size * fixed lint issues * updated sizes * fixed alignment of avatar token halo stories * updated story for src * updated avatar token * updated README * updated Readme --- .../component-library/avatar-token/README.mdx | 70 +++++++++++-- .../__snapshots__/avatar-token.test.js.snap | 16 +++ .../avatar-token/avatar-token.constants.js | 9 ++ .../avatar-token/avatar-token.js | 44 +++++---- .../avatar-token/avatar-token.scss | 2 +- .../avatar-token/avatar-token.stories.js | 51 +++++++--- .../avatar-token/avatar-token.test.js | 98 ++++++++++++++++--- 7 files changed, 233 insertions(+), 57 deletions(-) create mode 100644 ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap create mode 100644 ui/components/component-library/avatar-token/avatar-token.constants.js diff --git a/ui/components/component-library/avatar-token/README.mdx b/ui/components/component-library/avatar-token/README.mdx index 800a7aef6..aec705b5b 100644 --- a/ui/components/component-library/avatar-token/README.mdx +++ b/ui/components/component-library/avatar-token/README.mdx @@ -34,30 +34,64 @@ Defaults to `md` -### Token Name +```jsx +import { AvatarToken } from '../../component-library'; -Use the `tokenName` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `tokenImageUrl` prop. + + + + + +``` + +### Name + +Use the `name` prop to set the initial letter of the `AvatarToken`. This will be used as the fallback display if no image url is passed to the `src` prop. - + -### Token Image Url +```jsx +import { AvatarToken } from '../../component-library'; + +``` -Use the `tokenImageUrl` prop to set the image to be rendered of the `AvatarToken`. +### Src + +Use the `src` prop to set the image to be rendered of the `AvatarToken`. - + +```jsx +import { AvatarToken } from '../../component-library'; + + + + + + + + +``` + ### Show Halo -If we want to display the component with halo effect. Only works if an image url is supplied to `tokenImageUrl` +Use the `showHalo` prop to display the component with halo effect. Only works if an image url is supplied to `src` +```jsx +import { AvatarToken } from '../../component-library'; + + + +``` + ### Color, Background Color And Border Color Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarToken`. @@ -65,3 +99,25 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color + +```jsx +import { COLORS } from '../../../helpers/constants/design-system'; +import { AvatarToken } from '../../component-library'; + + + G + + + S + +``` 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.js.snap new file mode 100644 index 000000000..23dd22341 --- /dev/null +++ b/ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AvatarToken should render correctly 1`] = ` +
+
+ ast logo +
+
+`; diff --git a/ui/components/component-library/avatar-token/avatar-token.constants.js b/ui/components/component-library/avatar-token/avatar-token.constants.js new file mode 100644 index 000000000..492ac3aa1 --- /dev/null +++ b/ui/components/component-library/avatar-token/avatar-token.constants.js @@ -0,0 +1,9 @@ +import { SIZES } from '../../../helpers/constants/design-system'; + +export const AVATAR_TOKEN_SIZES = { + XS: SIZES.XS, + SM: SIZES.SM, + MD: SIZES.MD, + LG: SIZES.LG, + XL: SIZES.XL, +}; diff --git a/ui/components/component-library/avatar-token/avatar-token.js b/ui/components/component-library/avatar-token/avatar-token.js index 214d40e23..c16095da6 100644 --- a/ui/components/component-library/avatar-token/avatar-token.js +++ b/ui/components/component-library/avatar-token/avatar-token.js @@ -3,19 +3,19 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import Box from '../../ui/box/box'; import { AvatarBase } from '../avatar-base'; - import { - COLORS, SIZES, + COLORS, DISPLAY, ALIGN_ITEMS, JUSTIFY_CONTENT, } from '../../../helpers/constants/design-system'; +import { AVATAR_TOKEN_SIZES } from './avatar-token.constants'; export const AvatarToken = ({ size = SIZES.MD, - tokenName, - tokenImageUrl, + name, + src, showHalo, color = COLORS.TEXT_DEFAULT, backgroundColor = COLORS.BACKGROUND_ALTERNATIVE, @@ -26,14 +26,14 @@ export const AvatarToken = ({ const [showFallback, setShowFallback] = useState(false); useEffect(() => { - setShowFallback(!tokenImageUrl); - }, [tokenImageUrl]); + setShowFallback(!src); + }, [src]); const handleOnError = () => { setShowFallback(true); }; - const fallbackString = tokenName && tokenName[0] ? tokenName[0] : '?'; + const fallbackString = name && name[0] ? name[0] : '?'; return ( {showHalo && ( )} {tokenName )} @@ -77,23 +79,23 @@ export const AvatarToken = ({ AvatarToken.propTypes = { /** - * The tokenName 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 tokenImageUrl + * 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 */ - tokenName: PropTypes.string, + name: PropTypes.string, /** - * The tokenImageUrl accepts the string of the image to be rendered + * The src accepts the string of the image to be rendered */ - tokenImageUrl: PropTypes.string, + 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', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL' + * 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(SIZES)), + size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)), /** * The background color of the AvatarToken * Defaults to COLORS.BACKGROUND_ALTERNATIVE diff --git a/ui/components/component-library/avatar-token/avatar-token.scss b/ui/components/component-library/avatar-token/avatar-token.scss index 02ae431af..297cabf63 100644 --- a/ui/components/component-library/avatar-token/avatar-token.scss +++ b/ui/components/component-library/avatar-token/avatar-token.scss @@ -1,4 +1,4 @@ -.avatar-token { +.mm-avatar-token { &--with-halo { position: relative; } diff --git a/ui/components/component-library/avatar-token/avatar-token.stories.js b/ui/components/component-library/avatar-token/avatar-token.stories.js index 7fbac2b4c..4ef1a8b4b 100644 --- a/ui/components/component-library/avatar-token/avatar-token.stories.js +++ b/ui/components/component-library/avatar-token/avatar-token.stories.js @@ -13,6 +13,7 @@ import Box from '../../ui/box/box'; import README from './README.mdx'; import { AvatarToken } from './avatar-token'; +import { AVATAR_TOKEN_SIZES } from './avatar-token.constants'; export default { title: 'Components/ComponentLibrary/AvatarToken', @@ -26,7 +27,7 @@ export default { argTypes: { size: { control: 'select', - options: Object.values(SIZES), + options: Object.values(AVATAR_TOKEN_SIZES), }, color: { options: Object.values(TEXT_COLORS), @@ -40,10 +41,10 @@ export default { options: Object.values(BORDER_COLORS), control: 'select', }, - tokenName: { + name: { control: 'text', }, - tokenImageUrl: { + src: { control: 'text', }, showHalo: { @@ -51,8 +52,8 @@ export default { }, }, args: { - tokenName: 'ast', - tokenImageUrl: './AST.png', + name: 'eth', + src: './images/eth_logo.svg', size: SIZES.MD, showHalo: false, }, @@ -75,12 +76,34 @@ export const Size = (args) => ( ); -export const TokenName = Template.bind({}); -TokenName.args = { - tokenImageUrl: '', +export const Name = Template.bind({}); +Name.args = { + src: '', }; -export const TokenImageUrl = Template.bind({}); +export const Src = (args) => ( + + + + + + + + + +); export const ShowHalo = Template.bind({}); ShowHalo.args = { @@ -93,18 +116,18 @@ export const ColorBackgroundColorAndBorderColor = (args) => ( {...args} backgroundColor={COLORS.GOERLI} borderColor={COLORS.GOERLI} - tokenName="G" - color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the AvatarBase component as a prop so we can change the color of the text and to the base avatar + name="G" + color={COLORS.PRIMARY_INVERSE} // TODO: update it to COLORS.GOERLI_INVERSE /> ); ColorBackgroundColorAndBorderColor.args = { - tokenImageUrl: '', + src: '', }; diff --git a/ui/components/component-library/avatar-token/avatar-token.test.js b/ui/components/component-library/avatar-token/avatar-token.test.js index fe6c3b597..ca386a90e 100644 --- a/ui/components/component-library/avatar-token/avatar-token.test.js +++ b/ui/components/component-library/avatar-token/avatar-token.test.js @@ -2,30 +2,35 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; +import { COLORS } from '../../../helpers/constants/design-system'; + import { AvatarToken } from './avatar-token'; describe('AvatarToken', () => { const args = { - tokenName: 'ast', - tokenImageUrl: './AST.png', + name: 'ast', + src: './AST.png', showHalo: false, }; it('should render correctly', () => { - const { getByTestId } = render(); + const { getByTestId, container } = render( + , + ); expect(getByTestId('avatar-token')).toBeDefined(); + expect(container).toMatchSnapshot(); }); it('should render image Avatar', () => { render(); const image = screen.getByRole('img'); expect(image).toBeDefined(); - expect(image).toHaveAttribute('src', args.tokenImageUrl); + expect(image).toHaveAttribute('src', args.src); }); - it('should render the first letter of the tokenName prop if no tokenImageUrl is provided', () => { + it('should render the first letter of the name prop if no src is provided', () => { const { getByText } = render( - , + , ); expect(getByText('a')).toBeDefined(); }); @@ -33,18 +38,83 @@ describe('AvatarToken', () => { it('should render halo effect if showHalo is true and image url is there', () => { render(); const image = screen.getAllByRole('img', { hidden: true }); - expect(image[1]).toHaveClass('avatar-token__token-image--size-reduced'); + expect(image[1]).toHaveClass('mm-avatar-token__token-image--size-reduced'); }); - it('should render the first letter of the tokenName prop when showHalo is true and no image url is provided', () => { + it('should render the first letter of the name prop when showHalo is true and no image url is provided', () => { const { getByText } = render( - , + , ); expect(getByText('a')).toBeDefined(); }); + // className + it('should render with custom className', () => { + const { getByTestId } = render( + , + ); + expect(getByTestId('avatar-token')).toHaveClass('test-class'); + }); + // color + it('should render with different colors', () => { + const { getByTestId } = render( + <> + + + , + ); + expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass( + `box--color-${COLORS.SUCCESS_DEFAULT}`, + ); + expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass( + `box--color-${COLORS.ERROR_DEFAULT}`, + ); + }); + // background color + it('should render with different background colors', () => { + const { getByTestId } = render( + <> + + + , + ); + expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass( + `box--background-color-${COLORS.SUCCESS_DEFAULT}`, + ); + expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass( + `box--background-color-${COLORS.ERROR_DEFAULT}`, + ); + }); + // border color + it('should render with different border colors', () => { + const { getByTestId } = render( + <> + + + , + ); + expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass( + `box--border-color-${COLORS.SUCCESS_DEFAULT}`, + ); + expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass( + `box--border-color-${COLORS.ERROR_DEFAULT}`, + ); + }); });