diff --git a/ui/components/component-library/avatar-account/avatar-account.js b/ui/components/component-library/avatar-account/avatar-account.js index 032703718..516aec919 100644 --- a/ui/components/component-library/avatar-account/avatar-account.js +++ b/ui/components/component-library/avatar-account/avatar-account.js @@ -3,14 +3,14 @@ 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 { BaseAvatar } from '../base-avatar'; +import { AvatarBase } from '../avatar-base'; import { SIZES } from '../../../helpers/constants/design-system'; import { DIAMETERS, TYPES } from './avatar-account.constants'; export const AvatarAccount = ({ size, address, className, type, ...props }) => { return ( - { borderRadius="50%" /> )} - + ); }; diff --git a/ui/components/component-library/avatar-base/README.mdx b/ui/components/component-library/avatar-base/README.mdx new file mode 100644 index 000000000..018cf8311 --- /dev/null +++ b/ui/components/component-library/avatar-base/README.mdx @@ -0,0 +1,97 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; + +import { AvatarBase } from './avatar-base'; + +### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components + +# AvatarBase + +The `AvatarBase` is a wrapper component responsible for enforcing dimensions and border radius for Avatar components + + + + + +## Props + +The `AvatarBase` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props. + + + +### Size + +Use the `size` prop to set the size of the `AvatarBase`. + +Possible sizes include: + +- `xs` 16px +- `sm` 24px +- `md` 32px +- `lg` 40px +- `xl` 48px + +Defaults to `md` + + + + + +```jsx +import { AVATAR_BASE_SIZES } from '../ui/component-library/avatar-base'; +import { AvatarBase } from '../../component-library'; + + + + + +``` + +### Children + +The `AvatarBase` component can contain images, icons or text + + + + + +```jsx +import { AvatarBase } from '../../component-library'; + + + + + + + + + +A +``` + +### 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 `AvatarBase`. + + + + + +```jsx +import { COLORS } from '../../../helpers/constants/design-system'; +import { AvatarBase } from '../../component-library'; +B + + G + + + S + +``` diff --git a/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap b/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap new file mode 100644 index 000000000..004fa7ead --- /dev/null +++ b/ui/components/component-library/avatar-base/__snapshots__/avatar-base.test.js.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AvatarBase should render correctly 1`] = ` +
+
+
+`; diff --git a/ui/components/component-library/avatar-base/avatar-base.constants.js b/ui/components/component-library/avatar-base/avatar-base.constants.js new file mode 100644 index 000000000..690b84363 --- /dev/null +++ b/ui/components/component-library/avatar-base/avatar-base.constants.js @@ -0,0 +1,9 @@ +import { SIZES } from '../../../helpers/constants/design-system'; + +export const AVATAR_BASE_SIZES = { + XS: SIZES.XS, + SM: SIZES.SM, + MD: SIZES.MD, + LG: SIZES.LG, + XL: SIZES.XL, +}; diff --git a/ui/components/component-library/base-avatar/base-avatar.js b/ui/components/component-library/avatar-base/avatar-base.js similarity index 54% rename from ui/components/component-library/base-avatar/base-avatar.js rename to ui/components/component-library/avatar-base/avatar-base.js index a412f474d..927181a58 100644 --- a/ui/components/component-library/base-avatar/base-avatar.js +++ b/ui/components/component-library/avatar-base/avatar-base.js @@ -3,10 +3,11 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Box from '../../ui/box/box'; -import { COLORS, SIZES } from '../../../helpers/constants/design-system'; +import { COLORS } from '../../../helpers/constants/design-system'; +import { AVATAR_BASE_SIZES } from './avatar-base.constants'; -export const BaseAvatar = ({ - size = SIZES.MD, +export const AvatarBase = ({ + size = AVATAR_BASE_SIZES.MD, children, backgroundColor = COLORS.BACKGROUND_ALTERNATIVE, borderColor = COLORS.BORDER_DEFAULT, @@ -16,8 +17,8 @@ export const BaseAvatar = ({ }) => ( ); -BaseAvatar.propTypes = { +AvatarBase.propTypes = { /** - * The size of the BaseAvatar. - * Possible values could be 'SIZES.XS', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG', 'SIZES.XL' - * Defaults to SIZES.MD + * The size of the AvatarBase. + * Possible values could be 'AVATAR_BASE_SIZES.XS'(16px), 'AVATAR_BASE_SIZES.SM'(24px), 'AVATAR_BASE_SIZES.MD'(32px), 'AVATAR_BASE_SIZES.LG'(40px), 'AVATAR_BASE_SIZES.XL'(48px) + * Defaults to AVATAR_BASE_SIZES.MD */ - size: PropTypes.oneOf(Object.values(SIZES)), + size: PropTypes.oneOf(Object.values(AVATAR_BASE_SIZES)), /** - * The children to be rendered inside the BaseAvatar + * The children to be rendered inside the AvatarBase */ children: PropTypes.node, /** - * The background color of the BaseAvatar + * The background color of the AvatarBase * Defaults to COLORS.BACKGROUND_ALTERNATIVE */ backgroundColor: Box.propTypes.backgroundColor, /** - * The background color of the BaseAvatar + * The background color of the AvatarBase * Defaults to COLORS.BORDER_DEFAULT */ borderColor: Box.propTypes.borderColor, /** - * The color of the text inside the BaseAvatar + * The color of the text inside the AvatarBase * Defaults to COLORS.TEXT_DEFAULT */ color: Box.propTypes.color, @@ -57,7 +58,7 @@ BaseAvatar.propTypes = { */ className: PropTypes.string, /** - * BaseAvatar also accepts all Box props including but not limited to + * AvatarBase also accepts all Box props including but not limited to * className, as(change root element of HTML element) and margin props */ ...Box.propTypes, diff --git a/ui/components/component-library/base-avatar/base-avatar.scss b/ui/components/component-library/avatar-base/avatar-base.scss similarity index 96% rename from ui/components/component-library/base-avatar/base-avatar.scss rename to ui/components/component-library/avatar-base/avatar-base.scss index cf558da6f..257a897c7 100644 --- a/ui/components/component-library/base-avatar/base-avatar.scss +++ b/ui/components/component-library/avatar-base/avatar-base.scss @@ -1,4 +1,4 @@ -.base-avatar { +.mm-avatar-base { --avatar-size: var(--size, 16px); &--size-xs { diff --git a/ui/components/component-library/base-avatar/base-avatar.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.js similarity index 71% rename from ui/components/component-library/base-avatar/base-avatar.stories.js rename to ui/components/component-library/avatar-base/avatar-base.stories.js index defdb9fa9..4fe763551 100644 --- a/ui/components/component-library/base-avatar/base-avatar.stories.js +++ b/ui/components/component-library/avatar-base/avatar-base.stories.js @@ -3,7 +3,6 @@ import { ALIGN_ITEMS, COLORS, DISPLAY, - SIZES, TEXT_COLORS, BACKGROUND_COLORS, BORDER_COLORS, @@ -12,7 +11,8 @@ import { import Box from '../../ui/box/box'; import README from './README.mdx'; -import { BaseAvatar } from './base-avatar'; +import { AvatarBase } from './avatar-base'; +import { AVATAR_BASE_SIZES } from './avatar-base.constants'; const marginSizeKnobOptions = [ 0, @@ -32,9 +32,9 @@ const marginSizeKnobOptions = [ ]; export default { - title: 'Components/ComponentLibrary/BaseAvatar', + title: 'Components/ComponentLibrary/AvatarBase', id: __filename, - component: BaseAvatar, + component: AvatarBase, parameters: { docs: { page: README, @@ -43,7 +43,7 @@ export default { argTypes: { size: { control: 'select', - options: Object.values(SIZES), + options: Object.values(AVATAR_BASE_SIZES), }, color: { options: Object.values(TEXT_COLORS), @@ -85,40 +85,40 @@ export default { }, }, args: { - size: SIZES.MD, + size: AVATAR_BASE_SIZES.MD, color: COLORS.TEXT_DEFAULT, backgroundColor: COLORS.BACKGROUND_ALTERNATIVE, borderColor: COLORS.BORDER_DEFAULT, }, }; -export const DefaultStory = (args) => B; +export const DefaultStory = (args) => B; DefaultStory.storyName = 'Default'; export const Size = (args) => ( - - - - - + + + + + ); export const Children = (args) => ( - + - - + + - - + + - - A - + A + ( className="fa fa-user" style={{ color: 'var(--color-info-default)' }} /> - + ); export const ColorBackgroundColorAndBorderColor = (args) => ( - B - B + G - - + S - + ); diff --git a/ui/components/component-library/avatar-base/avatar-base.test.js b/ui/components/component-library/avatar-base/avatar-base.test.js new file mode 100644 index 000000000..8f14599d7 --- /dev/null +++ b/ui/components/component-library/avatar-base/avatar-base.test.js @@ -0,0 +1,124 @@ +/* eslint-disable jest/require-top-level-describe */ +import { render, screen } from '@testing-library/react'; +import React from 'react'; + +import { COLORS } from '../../../helpers/constants/design-system'; + +import { AvatarBase } from './avatar-base'; + +describe('AvatarBase', () => { + it('should render correctly', () => { + const { getByTestId, container } = render( + , + ); + expect(getByTestId('avatar-base')).toBeDefined(); + expect(container).toMatchSnapshot(); + }); + it('should render with different size classes', () => { + const { getByTestId } = render( + <> + + + + + + , + ); + expect(getByTestId('avatar-base-xs')).toHaveClass( + 'mm-avatar-base--size-xs', + ); + expect(getByTestId('avatar-base-sm')).toHaveClass( + 'mm-avatar-base--size-sm', + ); + expect(getByTestId('avatar-base-md')).toHaveClass( + 'mm-avatar-base--size-md', + ); + expect(getByTestId('avatar-base-lg')).toHaveClass( + 'mm-avatar-base--size-lg', + ); + expect(getByTestId('avatar-base-xl')).toHaveClass( + 'mm-avatar-base--size-xl', + ); + }); + // className + it('should render with custom className', () => { + const { getByTestId } = render( + , + ); + expect(getByTestId('avatar-base')).toHaveClass('test-class'); + }); + // children + it('should render children', () => { + render( + + + , + ); + const image = screen.getByRole('img'); + expect(image).toBeDefined(); + expect(image).toHaveAttribute('src', './images/arbitrum.svg'); + }); + // 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-base/index.js b/ui/components/component-library/avatar-base/index.js new file mode 100644 index 000000000..5cd6109d9 --- /dev/null +++ b/ui/components/component-library/avatar-base/index.js @@ -0,0 +1,2 @@ +export { AvatarBase } from './avatar-base'; +export { AVATAR_BASE_SIZES } from './avatar-base.constants'; diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js index 2f460685f..d04a4d66b 100644 --- a/ui/components/component-library/avatar-favicon/avatar-favicon.js +++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { BaseAvatar } from '../base-avatar'; +import { AvatarBase } from '../avatar-base'; import Box from '../../ui/box/box'; import { ICON_NAMES, Icon } from '../icon'; import { @@ -23,7 +23,7 @@ export const AvatarFavicon = ({ ...props }) => { return ( - )} - + ); }; diff --git a/ui/components/component-library/avatar-network/avatar-network.js b/ui/components/component-library/avatar-network/avatar-network.js index e90013913..d133b3f01 100644 --- a/ui/components/component-library/avatar-network/avatar-network.js +++ b/ui/components/component-library/avatar-network/avatar-network.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { BaseAvatar } from '../base-avatar'; +import { AvatarBase } from '../avatar-base'; import Box from '../../ui/box/box'; import { @@ -36,7 +36,7 @@ export const AvatarNetwork = ({ }; return ( - )} - + ); }; 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 cbb96e63f..9d53ccfa9 100644 --- a/ui/components/component-library/avatar-network/avatar-network.stories.js +++ b/ui/components/component-library/avatar-network/avatar-network.stories.js @@ -94,14 +94,14 @@ export const ColorBackgroundColorAndBorderColor = (args) => ( backgroundColor={COLORS.GOERLI} borderColor={COLORS.GOERLI} networkName="G" - color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar + 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 /> ); diff --git a/ui/components/component-library/avatar-token/avatar-token.js b/ui/components/component-library/avatar-token/avatar-token.js index c29430abc..214d40e23 100644 --- a/ui/components/component-library/avatar-token/avatar-token.js +++ b/ui/components/component-library/avatar-token/avatar-token.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import classnames from 'classnames'; import PropTypes from 'prop-types'; import Box from '../../ui/box/box'; -import { BaseAvatar } from '../base-avatar'; +import { AvatarBase } from '../avatar-base'; import { COLORS, @@ -36,7 +36,7 @@ export const AvatarToken = ({ const fallbackString = tokenName && tokenName[0] ? tokenName[0] : '?'; return ( - )} - + ); }; 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 5c097599c..7fbac2b4c 100644 --- a/ui/components/component-library/avatar-token/avatar-token.stories.js +++ b/ui/components/component-library/avatar-token/avatar-token.stories.js @@ -94,14 +94,14 @@ export const ColorBackgroundColorAndBorderColor = (args) => ( backgroundColor={COLORS.GOERLI} borderColor={COLORS.GOERLI} tokenName="G" - color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar + 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 /> ); diff --git a/ui/components/component-library/base-avatar/README.mdx b/ui/components/component-library/base-avatar/README.mdx deleted file mode 100644 index c30f0ab08..000000000 --- a/ui/components/component-library/base-avatar/README.mdx +++ /dev/null @@ -1,53 +0,0 @@ -import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; - -import { BaseAvatar } from './base-avatar'; - -### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components - -# BaseAvatar - -The `BaseAvatar` is a wrapper component responsible for enforcing dimensions and border radius for Avatar components - - - - - -## Props - -The `BaseAvatar` accepts all props below as well as all [Box](/ui-components-ui-box-box-stories-js--default-story) component props. - - - -### Size - -Use the `size` prop to set the size of the `BaseAvatar`. - -Possible sizes include: - -- `xs` 16px -- `sm` 24px -- `md` 32px -- `lg` 40px -- `xl` 48px - -Defaults to `md` - - - - - -### Children - -The `BaseAvatar` component can contain images, icons or text - - - - - -### 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 s of the `BaseAvatar`. - - - - diff --git a/ui/components/component-library/base-avatar/base-avatar.test.js b/ui/components/component-library/base-avatar/base-avatar.test.js deleted file mode 100644 index 5c37030f6..000000000 --- a/ui/components/component-library/base-avatar/base-avatar.test.js +++ /dev/null @@ -1,28 +0,0 @@ -/* eslint-disable jest/require-top-level-describe */ -import { render } from '@testing-library/react'; -import React from 'react'; - -import { BaseAvatar } from './base-avatar'; - -describe('BaseAvatar', () => { - it('should render correctly', () => { - const { getByTestId } = render(); - expect(getByTestId('base-avatar')).toBeDefined(); - }); - it('should render with different size classes', () => { - const { getByTestId } = render( - <> - - - - - - , - ); - expect(getByTestId('base-avatar-xs')).toHaveClass('base-avatar--size-xs'); - expect(getByTestId('base-avatar-sm')).toHaveClass('base-avatar--size-sm'); - expect(getByTestId('base-avatar-md')).toHaveClass('base-avatar--size-md'); - expect(getByTestId('base-avatar-lg')).toHaveClass('base-avatar--size-lg'); - expect(getByTestId('base-avatar-xl')).toHaveClass('base-avatar--size-xl'); - }); -}); diff --git a/ui/components/component-library/base-avatar/index.js b/ui/components/component-library/base-avatar/index.js deleted file mode 100644 index b37a9d558..000000000 --- a/ui/components/component-library/base-avatar/index.js +++ /dev/null @@ -1 +0,0 @@ -export { BaseAvatar } from './base-avatar'; diff --git a/ui/components/component-library/component-library-components.scss b/ui/components/component-library/component-library-components.scss index 07a1fe4f9..02e900189 100644 --- a/ui/components/component-library/component-library-components.scss +++ b/ui/components/component-library/component-library-components.scss @@ -9,7 +9,7 @@ @import 'icon/icon'; @import 'label/label'; @import 'tag/tag'; -@import 'base-avatar/base-avatar'; +@import 'avatar-base/avatar-base'; @import 'avatar-account/avatar-account'; @import 'avatar-favicon/avatar-favicon'; @import 'avatar-network/avatar-network'; diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js index 5093c6a29..2ace6c6d4 100644 --- a/ui/components/component-library/index.js +++ b/ui/components/component-library/index.js @@ -3,7 +3,7 @@ export { AvatarFavicon } from './avatar-favicon'; export { AvatarNetwork } from './avatar-network'; export { AvatarToken } from './avatar-token'; export { AvatarWithBadge } from './avatar-with-badge'; -export { BaseAvatar } from './base-avatar'; +export { AvatarBase } from './avatar-base'; export { Button } from './button'; export { ButtonBase } from './button-base'; export { ButtonIcon } from './button-icon'; 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 b064e413c..1b4f6dadd 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/tag-url/__snapshots__/tag-url.test.js.snap b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap index 8c8865383..771eda22c 100644 --- a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap +++ b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap @@ -7,7 +7,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = ` data-testid="tag-url" >