m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

AvatarWithBadge Housekeeping (#16985)

Browse Source 
* updated classnames

* updated readme and tests for avatar with badge

* updated constants in root

* replacing BADGE_POSITIONS with AVATAR_WITH_BADGE_BADGE_POSITIONS
This commit is contained in:
Nidhi Kumari 2022-12-22 00:36:40 +05:30 committed by GitHub
parent 5d320ceec6
commit f8881a01db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 107 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/components/component-library/avatar-with-badge/README.mdx
View File

@ -12,7 +12,7 @@ The `AvatarWithBadge` is a wrapper component that adds badge display options to
## Props
The `AvatarWithBadge` accepts all props below
The `AvatarWithBadge` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story) component props.
<ArgsTable of={AvatarWithBadge} />
@ -24,9 +24,47 @@ Use the `badgePosition` prop to set the position of the badge, it can have two v
<Story id="ui-components-component-library-avatar-with-badge-avatar-with-badge-stories-js--badge-position" />
</Canvas>
```jsx
import { AvatarWithBadge } from '../ui/component-library';
<AvatarWithBadge
badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
badge={
<AvatarNetwork
size={SIZES.XS}
name="Arbitrum One"
src="./images/arbitrum.svg"
/>
}
>
<AvatarAccount
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
size={SIZES.MD}
type={TYPES.JAZZICON}
/>
</AvatarWithBadge>
<AvatarWithBadge
badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
badge={
<AvatarNetwork
size={SIZES.XS}
name="Arbitrum One"
src="./images/arbitrum.svg"
/>
}
>
<AvatarAccount
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
size={SIZES.MD}
type={TYPES.JAZZICON}
/>
</AvatarWithBadge>
```
### Badge
Used to define the badge component to be rendered inside the `AvatarWithBadge`
Used to define the badge component to be rendered inside the `AvatarWithBadge`.
### Badge Props
@ -34,4 +72,4 @@ The required props to be passed to the badge.
### Children
The children to be rendered inside the AvatarWithBadge. Generally used with the `AvatarAccount`
The children to be rendered inside the AvatarWithBadge. Generally used with the `AvatarAccount`

25
ui/components/component-library/avatar-with-badge/__snapshots__/avatar-with-badge.test.js.snap Normal file
View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AvatarWithBadge should render correctly 1`] = `
<div>
<div
class="box mm-avatar-with-badge box--flex-direction-row"
data-testid="avatar-with-badge"
>
<div
class="box mm-avatar-with-badge__badge-wrapper--position-bottom box--flex-direction-row"
>
<div
class="box mm-avatar-base mm-avatar-base--size-md mm-avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-transparent box--border-style-solid box--border-width-1"
data-testid="badge"
>
<img
alt="Arbitrum One logo"
class="mm-avatar-network__network-image"
src="./images/arbitrum.svg"
/>
</div>
</div>
</div>
</div>
`;

2
ui/components/component-library/avatar-with-badge/avatar-with-badge.constants.js
View File

@ -1,4 +1,4 @@
export const BADGE_POSITIONS = {
export const AVATAR_WITH_BADGE_POSTIONS = {
TOP: 'top',
BOTTOM: 'bottom',
};

14
ui/components/component-library/avatar-with-badge/avatar-with-badge.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Box from '../../ui/box/box';
import { BADGE_POSITIONS } from './avatar-with-badge.constants';
import { AVATAR_WITH_BADGE_POSTIONS } from './avatar-with-badge.constants';
export const AvatarWithBadge = ({
children,
@ -13,14 +13,14 @@ export const AvatarWithBadge = ({
...props
}) => {
return (
<Box className={classnames('avatar-with-badge', className)} {...props}>
<Box className={classnames('mm-avatar-with-badge', className)} {...props}>
{/* Generally the AvatarAccount */}
{children}
<Box
className={
badgePosition === 'top'
? 'avatar-with-badge__badge-wrapper--position-top'
: 'avatar-with-badge__badge-wrapper--position-bottom'
? 'mm-avatar-with-badge__badge-wrapper--position-top'
: 'mm-avatar-with-badge__badge-wrapper--position-bottom'
}
{...badgeWrapperProps}
>
@ -36,7 +36,7 @@ AvatarWithBadge.propTypes = {
* The position of the Badge
* Possible values could be 'top', 'bottom',
*/
badgePosition: PropTypes.oneOf(Object.values(BADGE_POSITIONS)),
badgePosition: PropTypes.oneOf(Object.values(AVATAR_WITH_BADGE_POSTIONS)),
/**
* The Badge Wrapper props of the component. All Box props can be used
*/
@ -53,4 +53,8 @@ AvatarWithBadge.propTypes = {
* Add custom css class
*/
className: PropTypes.string,
/**
* AvatarWithBadge accepts all the props from Box
*/
...Box.propTypes,
};

2
ui/components/component-library/avatar-with-badge/avatar-with-badge.scss
View File

@ -1,4 +1,4 @@
.avatar-with-badge {
.mm-avatar-with-badge {
position: relative;
width: fit-content;

10
ui/components/component-library/avatar-with-badge/avatar-with-badge.stories.js
View File

@ -8,7 +8,7 @@ import {
DISPLAY,
SIZES,
} from '../../../helpers/constants/design-system';
import { BADGE_POSITIONS } from './avatar-with-badge.constants';
import { AVATAR_WITH_BADGE_POSTIONS } from './avatar-with-badge.constants';
import README from './README.mdx';
import { AvatarWithBadge } from './avatar-with-badge';
@ -23,12 +23,12 @@ export default {
},
argTypes: {
badgePosition: {
options: Object.values(BADGE_POSITIONS),
options: Object.values(AVATAR_WITH_BADGE_POSTIONS),
control: 'select',
},
},
args: {
badgePosition: BADGE_POSITIONS.top,
badgePosition: AVATAR_WITH_BADGE_POSTIONS.top,
},
};
@ -55,7 +55,7 @@ DefaultStory.storyName = 'Default';
export const BadgePosition = () => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<AvatarWithBadge
badgePosition={BADGE_POSITIONS.BOTTOM}
badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
badge={
<AvatarNetwork
size={SIZES.XS}
@ -72,7 +72,7 @@ export const BadgePosition = () => (
</AvatarWithBadge>
<AvatarWithBadge
badgePosition={BADGE_POSITIONS.TOP}
badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
badge={
<AvatarNetwork
size={SIZES.XS}

28
ui/components/component-library/avatar-with-badge/avatar-with-badge.test.js
View File

@ -4,13 +4,13 @@ import React from 'react';
import { AvatarNetwork } from '../avatar-network/avatar-network';
import { COLORS } from '../../../helpers/constants/design-system';
import { AvatarWithBadge } from './avatar-with-badge';
import { BADGE_POSITIONS } from './avatar-with-badge.constants';
import { AVATAR_WITH_BADGE_POSTIONS } from './avatar-with-badge.constants';
describe('AvatarWithBadge', () => {
it('should render correctly', () => {
const { getByTestId } = render(
const { getByTestId, container } = render(
<AvatarWithBadge
badgePosition={BADGE_POSITIONS.BOTTOM}
badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
data-testid="avatar-with-badge"
badge={
<AvatarNetwork
@ -23,13 +23,14 @@ describe('AvatarWithBadge', () => {
);
expect(getByTestId('avatar-with-badge')).toBeDefined();
expect(getByTestId('badge')).toBeDefined();
expect(container).toMatchSnapshot();
});
it('should render badge network with bottom right position correctly', () => {
const { container } = render(
<AvatarWithBadge
data-testid="avatar-with-badge"
badgePosition={BADGE_POSITIONS.BOTTOM}
badgePosition={AVATAR_WITH_BADGE_POSTIONS.BOTTOM}
badge={
<AvatarNetwork
name="Arbitrum One"
@ -42,7 +43,7 @@ describe('AvatarWithBadge', () => {
expect(
container.getElementsByClassName(
'avatar-with-badge__badge-wrapper--position-bottom',
'mm-avatar-with-badge__badge-wrapper--position-bottom',
),
).toHaveLength(1);
});
@ -51,7 +52,7 @@ describe('AvatarWithBadge', () => {
const { container } = render(
<AvatarWithBadge
data-testid="avatar-with-badge"
badgePosition={BADGE_POSITIONS.TOP}
badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
badge={
<AvatarNetwork
name="Arbitrum One"
@ -64,7 +65,7 @@ describe('AvatarWithBadge', () => {
expect(
container.getElementsByClassName(
'avatar-with-badge__badge-wrapper--position-top',
'mm-avatar-with-badge__badge-wrapper--position-top',
),
).toHaveLength(1);
});
@ -72,7 +73,7 @@ describe('AvatarWithBadge', () => {
const container = (
<AvatarWithBadge
data-testid="avatar-with-badge"
badgePosition={BADGE_POSITIONS.TOP}
badgePosition={AVATAR_WITH_BADGE_POSTIONS.TOP}
badgeWrapperProps={{ borderColor: COLORS.ERROR_DEFAULT }}
badge={
<AvatarNetwork
@ -87,4 +88,15 @@ describe('AvatarWithBadge', () => {
'error-default',
);
});
// className
it('should render with custom className', () => {
const { getByTestId } = render(
<AvatarWithBadge
data-testid="avatar-with-badge"
className="test-class"
/>,
);
expect(getByTestId('avatar-with-badge')).toHaveClass('test-class');
});
});

1
ui/components/component-library/avatar-with-badge/index.js
View File

@ -1 +1,2 @@
export { AvatarWithBadge } from './avatar-with-badge';
export { AVATAR_WITH_BADGE_POSTIONS } from './avatar-with-badge.constants';

5
ui/components/component-library/index.js
View File

@ -3,7 +3,10 @@ export { AvatarFavicon } from './avatar-favicon';
export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
export { AvatarNetwork, AVATAR_NETWORK_SIZES } from './avatar-network';
export { AvatarToken } from './avatar-token';
export { AvatarWithBadge } from './avatar-with-badge';
export {
AvatarWithBadge,
AVATAR_WITH_BADGE_POSTIONS,
} from './avatar-with-badge';
export { AvatarBase } from './avatar-base';
export { Button } from './button';
export { ButtonBase } from './button-base';