diff --git a/ui/components/component-library/avatar-network/README.mdx b/ui/components/component-library/avatar-network/README.mdx index e5b1b2243..7bac113d3 100644 --- a/ui/components/component-library/avatar-network/README.mdx +++ b/ui/components/component-library/avatar-network/README.mdx @@ -34,34 +34,88 @@ Defaults to `md` -### Network Name +```jsx +import { SIZES } from '../../../helpers/constants/design-system'; +import { AvatarNetwork } from '../../component-library'; + + + + + +``` -Use the `networkName` prop to set the initial alphabet of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `networkImageUrl` prop. +### Name + +Use the `name` prop to set the initial letter of the `AvatarNetwork`. This will be used as the fallback display if no image url is passed to the `src` prop. - + -### Network Image Url +```jsx +import { AvatarNetwork } from '../../component-library'; + +``` -Use the `networkImageUrl` prop to set the image to be rendered of the `AvatarNetwork`. +### Src + +Use the `src` prop to set the image to be rendered of the `AvatarNetwork`. - + +```jsx +import { AvatarNetwork } from '../../component-library'; + + + + + + + + + +``` + ### Show Halo -If we want to display the component with halo effect. Only works if an image url is supplied to `networkImageUrl` +Use the `showHalo` prop to display the component with halo effect. Only works if an image url is supplied to `src` +```jsx +import { AvatarNetwork } 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`. +Use the `color`, `backgroundColor` and `borderColor` props to set the text color, background-color and border-color of the `AvatarNetwork`. - \ No newline at end of file + + +```jsx +import { COLORS } from '../../../helpers/constants/design-system'; +import { AvatarNetwork } from '../../component-library'; + + G + + + S + +``` \ No newline at end of file diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap new file mode 100644 index 000000000..4ccac5bc5 --- /dev/null +++ b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AvatarNetwork should render correctly 1`] = ` +
+
+ ? +
+
+`; diff --git a/ui/components/component-library/avatar-network/avatar-network.constants.js b/ui/components/component-library/avatar-network/avatar-network.constants.js new file mode 100644 index 000000000..b24fd9552 --- /dev/null +++ b/ui/components/component-library/avatar-network/avatar-network.constants.js @@ -0,0 +1,9 @@ +import { SIZES } from '../../../helpers/constants/design-system'; + +export const AVATAR_NETWORK_SIZES = { + XS: SIZES.XS, + SM: SIZES.SM, + MD: SIZES.MD, + LG: SIZES.LG, + XL: SIZES.XL, +}; diff --git a/ui/components/component-library/avatar-network/avatar-network.js b/ui/components/component-library/avatar-network/avatar-network.js index d133b3f01..951a426fa 100644 --- a/ui/components/component-library/avatar-network/avatar-network.js +++ b/ui/components/component-library/avatar-network/avatar-network.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { AvatarBase } from '../avatar-base'; import Box from '../../ui/box/box'; - import { COLORS, SIZES, @@ -11,11 +10,12 @@ import { ALIGN_ITEMS, JUSTIFY_CONTENT, } from '../../../helpers/constants/design-system'; +import { AVATAR_NETWORK_SIZES } from './avatar-network.constants'; export const AvatarNetwork = ({ size = SIZES.MD, - networkName, - networkImageUrl, + name, + src, showHalo, color = COLORS.TEXT_DEFAULT, backgroundColor = COLORS.BACKGROUND_ALTERNATIVE, @@ -26,10 +26,10 @@ export const AvatarNetwork = ({ const [showFallback, setShowFallback] = useState(false); useEffect(() => { - setShowFallback(!networkImageUrl); - }, [networkImageUrl]); + setShowFallback(!src); + }, [src]); - const fallbackString = networkName && networkName[0] ? networkName[0] : '?'; + const fallbackString = name && name[0] ? name[0] : '?'; const handleOnError = () => { setShowFallback(true); @@ -42,8 +42,8 @@ export const AvatarNetwork = ({ alignItems={ALIGN_ITEMS.CENTER} justifyContent={JUSTIFY_CONTENT.CENTER} className={classnames( - 'avatar-network', - showHalo && 'avatar-network--with-halo', + 'mm-avatar-network', + showHalo && 'mm-avatar-network--with-halo', className, )} {...{ backgroundColor, borderColor, color, ...props }} @@ -54,9 +54,9 @@ export const AvatarNetwork = ({ <> {showHalo && ( @@ -64,12 +64,12 @@ export const AvatarNetwork = ({ {networkName )} @@ -79,23 +79,23 @@ export const AvatarNetwork = ({ AvatarNetwork.propTypes = { /** - * The networkName accepts the string to render the first alphabet of the Avatar Name + * The name accepts the string to render the first alphabet of the Avatar Name */ - networkName: PropTypes.string, + name: PropTypes.string, /** - * The networkImageUrl accepts the string of the image to be rendered + * The src accepts the string of the image to be rendered */ - networkImageUrl: 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 AvatarNetwork - * 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_NETWORK_SIZES)), /** * The background color of the AvatarNetwork * Defaults to COLORS.BACKGROUND_ALTERNATIVE diff --git a/ui/components/component-library/avatar-network/avatar-network.scss b/ui/components/component-library/avatar-network/avatar-network.scss index 959edc11e..562d4a7b7 100644 --- a/ui/components/component-library/avatar-network/avatar-network.scss +++ b/ui/components/component-library/avatar-network/avatar-network.scss @@ -1,4 +1,4 @@ -.avatar-network { +.mm-avatar-network { &--with-halo { position: relative; } diff --git a/ui/components/component-library/avatar-network/avatar-network.stories.js b/ui/components/component-library/avatar-network/avatar-network.stories.js index 9d53ccfa9..88c201acf 100644 --- a/ui/components/component-library/avatar-network/avatar-network.stories.js +++ b/ui/components/component-library/avatar-network/avatar-network.stories.js @@ -13,6 +13,7 @@ import Box from '../../ui/box/box'; import README from './README.mdx'; import { AvatarNetwork } from './avatar-network'; +import { AVATAR_NETWORK_SIZES } from './avatar-network.constants'; export default { title: 'Components/ComponentLibrary/AvatarNetwork', @@ -26,7 +27,7 @@ export default { argTypes: { size: { control: 'select', - options: Object.values(SIZES), + options: Object.values(AVATAR_NETWORK_SIZES), }, color: { options: Object.values(TEXT_COLORS), @@ -40,10 +41,10 @@ export default { options: Object.values(BORDER_COLORS), control: 'select', }, - networkName: { + name: { control: 'text', }, - networkImageUrl: { + src: { control: 'text', }, showHalo: { @@ -51,8 +52,8 @@ export default { }, }, args: { - networkName: 'Arbitrum One', - networkImageUrl: './images/arbitrum.svg', + name: 'Arbitrum One', + src: './images/arbitrum.svg', size: SIZES.MD, showHalo: false, }, @@ -75,12 +76,24 @@ export const Size = (args) => ( ); -export const NetworkName = Template.bind({}); -NetworkName.args = { - networkImageUrl: '', +export const Name = Template.bind({}); +Name.args = { + src: '', }; -export const NetworkImageUrl = Template.bind({}); +export const Src = (args) => ( + + + + + + + + + + + +); export const ShowHalo = Template.bind({}); ShowHalo.args = { @@ -93,18 +106,18 @@ export const ColorBackgroundColorAndBorderColor = (args) => ( {...args} backgroundColor={COLORS.GOERLI} borderColor={COLORS.GOERLI} - networkName="G" - color={COLORS.PRIMARY_INVERSE} // 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 = { - networkImageUrl: '', + src: '', }; diff --git a/ui/components/component-library/avatar-network/avatar-network.test.js b/ui/components/component-library/avatar-network/avatar-network.test.js index ce9aced85..f18feba4b 100644 --- a/ui/components/component-library/avatar-network/avatar-network.test.js +++ b/ui/components/component-library/avatar-network/avatar-network.test.js @@ -2,36 +2,35 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; +import { COLORS } from '../../../helpers/constants/design-system'; + import { AvatarNetwork } from './avatar-network'; describe('AvatarNetwork', () => { const args = { - networkName: 'ethereum', - networkImageUrl: './images/eth_logo.svg', + name: 'ethereum', + src: './images/eth_logo.svg', showHalo: false, }; it('should render correctly', () => { - const { getByTestId } = render( + const { getByTestId, container } = render( , ); expect(getByTestId('avatar-network')).toBeDefined(); + expect(container).toMatchSnapshot(); }); it('should render image of Avatar Network', () => { render(); const image = screen.getByRole('img'); expect(image).toBeDefined(); - expect(image).toHaveAttribute('src', args.networkImageUrl); + expect(image).toHaveAttribute('src', args.src); }); - it('should render the first letter of the networkName prop if no networkImageUrl is provided', () => { + it('should render the first letter of the name prop if no src is provided', () => { const { getByText } = render( - , + , ); expect(getByText('e')).toBeDefined(); }); @@ -39,18 +38,85 @@ describe('AvatarNetwork', () => { 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-network__network-image--size-reduced'); + expect(image[1]).toHaveClass( + 'mm-avatar-network__network-image--size-reduced', + ); }); - it('should render the first letter of the networkName 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('e')).toBeDefined(); }); + // className + it('should render with custom className', () => { + const { getByTestId } = render( + , + ); + expect(getByTestId('avatar-network')).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}`, + ); + }); }); diff --git a/ui/components/component-library/avatar-network/index.js b/ui/components/component-library/avatar-network/index.js index 8ee3e741d..538d36758 100644 --- a/ui/components/component-library/avatar-network/index.js +++ b/ui/components/component-library/avatar-network/index.js @@ -1 +1,2 @@ export { AvatarNetwork } from './avatar-network'; +export { AVATAR_NETWORK_SIZES } from './avatar-network.constants'; diff --git a/ui/components/component-library/avatar-with-badge/README.mdx b/ui/components/component-library/avatar-with-badge/README.mdx index 17989b178..a0d386277 100644 --- a/ui/components/component-library/avatar-with-badge/README.mdx +++ b/ui/components/component-library/avatar-with-badge/README.mdx @@ -21,7 +21,7 @@ The `AvatarWithBadge` accepts all props below Use the `badgePosition` prop to set the position of the badge, it can have two values `Top` and `Bottom` - + ### Badge diff --git a/ui/components/component-library/avatar-with-badge/avatar-with-badge.stories.js b/ui/components/component-library/avatar-with-badge/avatar-with-badge.stories.js index b489c3671..1d08158bf 100644 --- a/ui/components/component-library/avatar-with-badge/avatar-with-badge.stories.js +++ b/ui/components/component-library/avatar-with-badge/avatar-with-badge.stories.js @@ -37,8 +37,8 @@ export const DefaultStory = (args) => ( badge={ } {...args} @@ -59,8 +59,8 @@ export const BadgePosition = () => ( badge={ } > @@ -76,8 +76,8 @@ export const BadgePosition = () => ( badge={ } > diff --git a/ui/components/component-library/avatar-with-badge/avatar-with-badge.test.js b/ui/components/component-library/avatar-with-badge/avatar-with-badge.test.js index b8a317a88..6ea646834 100644 --- a/ui/components/component-library/avatar-with-badge/avatar-with-badge.test.js +++ b/ui/components/component-library/avatar-with-badge/avatar-with-badge.test.js @@ -14,8 +14,8 @@ describe('AvatarWithBadge', () => { data-testid="avatar-with-badge" badge={ } @@ -32,8 +32,8 @@ describe('AvatarWithBadge', () => { badgePosition={BADGE_POSITIONS.BOTTOM} badge={ } @@ -54,8 +54,8 @@ describe('AvatarWithBadge', () => { badgePosition={BADGE_POSITIONS.TOP} badge={ } @@ -76,8 +76,8 @@ describe('AvatarWithBadge', () => { badgeWrapperProps={{ borderColor: COLORS.ERROR_DEFAULT }} badge={ } diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js index 547d29f69..49ee85b25 100644 --- a/ui/components/component-library/index.js +++ b/ui/components/component-library/index.js @@ -1,7 +1,7 @@ export { AvatarAccount } from './avatar-account'; export { AvatarFavicon } from './avatar-favicon'; export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon'; -export { AvatarNetwork } from './avatar-network'; +export { AvatarNetwork, AVATAR_NETWORK_SIZES } from './avatar-network'; export { AvatarToken } from './avatar-token'; export { AvatarWithBadge } from './avatar-with-badge'; export { AvatarBase } from './avatar-base'; diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap index 4f08ff2be..2364103f9 100644 --- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap +++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap @@ -7,7 +7,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = ` data-testid="picker-network" >
I
diff --git a/ui/components/component-library/picker-network/picker-network.js b/ui/components/component-library/picker-network/picker-network.js index 1c4858681..f60882008 100644 --- a/ui/components/component-library/picker-network/picker-network.js +++ b/ui/components/component-library/picker-network/picker-network.js @@ -37,8 +37,8 @@ export const PickerNetwork = ({ >