avatar base component housekeeping (#16583)
* replace base avatar with avatar base component * updated tests * updated description for props * updated docs and background colors * updated snapshot * replaced size with avatar size constant * added tests and fixed indentation * fixed indentation in readmefeature/default_network_editable
Nidhi Kumari
2 years ago
committed by
GitHub
parent
1bdfb952bd
commit
67bfd446fc
@ -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 |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--default-story" /> |
||||
</Canvas> |
||||
|
||||
## 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. |
||||
|
||||
<ArgsTable of={AvatarBase} /> |
||||
|
||||
### 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` |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--size" /> |
||||
</Canvas> |
||||
|
||||
```jsx |
||||
import { AVATAR_BASE_SIZES } from '../ui/component-library/avatar-base'; |
||||
import { AvatarBase } from '../../component-library'; |
||||
<AvatarBase size={AVATAR_BASE_SIZES.XS} /> |
||||
<AvatarBase size={AVATAR_BASE_SIZES.SM} /> |
||||
<AvatarBase size={AVATAR_BASE_SIZES.MD} /> |
||||
<AvatarBase size={AVATAR_BASE_SIZES.LG} /> |
||||
<AvatarBase size={AVATAR_BASE_SIZES.XL} /> |
||||
``` |
||||
|
||||
### Children |
||||
|
||||
The `AvatarBase` component can contain images, icons or text |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--children" /> |
||||
</Canvas> |
||||
|
||||
```jsx |
||||
import { AvatarBase } from '../../component-library'; |
||||
<AvatarBase> |
||||
<img src="./images/eth_logo.svg" /> |
||||
</AvatarBase> |
||||
<AvatarBase> |
||||
<img width="100%" src="./images/arbitrum.svg" /> |
||||
</AvatarBase> |
||||
<AvatarBase> |
||||
<img width="100%" src="./images/avax-token.png" /> |
||||
</AvatarBase> |
||||
<AvatarBase>A</AvatarBase> |
||||
``` |
||||
|
||||
### 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`. |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-component-library-avatar-base-avatar-base-stories-js--color-background-color-and-border-color" /> |
||||
</Canvas> |
||||
|
||||
```jsx |
||||
import { COLORS } from '../../../helpers/constants/design-system'; |
||||
import { AvatarBase } from '../../component-library'; |
||||
<AvatarBase>B</AvatarBase> |
||||
<AvatarBase |
||||
backgroundColor={COLORS.GOERLI} |
||||
borderColor={COLORS.GOERLI} |
||||
color={COLORS.PRIMARY_INVERSE} |
||||
> |
||||
G |
||||
</AvatarBase> |
||||
<AvatarBase |
||||
backgroundColor={COLORS.SEPOLIA} |
||||
borderColor={COLORS.SEPOLIA} |
||||
color={COLORS.PRIMARY_INVERSE} |
||||
> |
||||
S |
||||
</AvatarBase> |
||||
``` |
||||
@ -0,0 +1,10 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`AvatarBase should render correctly 1`] = ` |
||||
<div> |
||||
<div |
||||
class="box mm-avatar-base mm-avatar-base--size-md box--flex-direction-row box--color-text-default box--background-color-background-alternative box--border-color-border-default box--border-style-solid box--border-width-1" |
||||
data-testid="avatar-base" |
||||
/> |
||||
</div> |
||||
`; |
||||
@ -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, |
||||
}; |
||||
@ -1,4 +1,4 @@ |
||||
.base-avatar { |
||||
.mm-avatar-base { |
||||
--avatar-size: var(--size, 16px); |
||||
|
||||
&--size-xs { |
||||
@ -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( |
||||
<AvatarBase data-testid="avatar-base" />, |
||||
); |
||||
expect(getByTestId('avatar-base')).toBeDefined(); |
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
it('should render with different size classes', () => { |
||||
const { getByTestId } = render( |
||||
<> |
||||
<AvatarBase size="xs" data-testid="avatar-base-xs" /> |
||||
<AvatarBase size="sm" data-testid="avatar-base-sm" /> |
||||
<AvatarBase size="md" data-testid="avatar-base-md" /> |
||||
<AvatarBase size="lg" data-testid="avatar-base-lg" /> |
||||
<AvatarBase size="xl" data-testid="avatar-base-xl" /> |
||||
</>, |
||||
); |
||||
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( |
||||
<AvatarBase data-testid="avatar-base" className="test-class" />, |
||||
); |
||||
expect(getByTestId('avatar-base')).toHaveClass('test-class'); |
||||
}); |
||||
// children
|
||||
it('should render children', () => { |
||||
render( |
||||
<AvatarBase data-testid="avatar-base"> |
||||
<img width="100%" src="./images/arbitrum.svg" /> |
||||
</AvatarBase>, |
||||
); |
||||
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( |
||||
<> |
||||
<AvatarBase |
||||
color={COLORS.SUCCESS_DEFAULT} |
||||
data-testid={COLORS.SUCCESS_DEFAULT} |
||||
/> |
||||
<AvatarBase |
||||
color={COLORS.ERROR_DEFAULT} |
||||
data-testid={COLORS.ERROR_DEFAULT} |
||||
/> |
||||
</>, |
||||
); |
||||
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( |
||||
<> |
||||
<AvatarBase |
||||
backgroundColor={COLORS.SUCCESS_DEFAULT} |
||||
data-testid={COLORS.SUCCESS_DEFAULT} |
||||
/> |
||||
<AvatarBase |
||||
backgroundColor={COLORS.ERROR_DEFAULT} |
||||
data-testid={COLORS.ERROR_DEFAULT} |
||||
/> |
||||
</>, |
||||
); |
||||
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( |
||||
<> |
||||
<AvatarBase |
||||
borderColor={COLORS.SUCCESS_DEFAULT} |
||||
data-testid={COLORS.SUCCESS_DEFAULT} |
||||
/> |
||||
<AvatarBase |
||||
borderColor={COLORS.ERROR_DEFAULT} |
||||
data-testid={COLORS.ERROR_DEFAULT} |
||||
/> |
||||
</>, |
||||
); |
||||
expect(getByTestId(COLORS.SUCCESS_DEFAULT)).toHaveClass( |
||||
`box--border-color-${COLORS.SUCCESS_DEFAULT}`, |
||||
); |
||||
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass( |
||||
`box--border-color-${COLORS.ERROR_DEFAULT}`, |
||||
); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,2 @@ |
||||
export { AvatarBase } from './avatar-base'; |
||||
export { AVATAR_BASE_SIZES } from './avatar-base.constants'; |
||||
@ -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 |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--default-story" /> |
||||
</Canvas> |
||||
|
||||
## Props |
||||
|
||||
The `BaseAvatar` accepts all props below as well as all [Box](/ui-components-ui-box-box-stories-js--default-story) component props. |
||||
|
||||
<ArgsTable of={BaseAvatar} /> |
||||
|
||||
### 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` |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--size" /> |
||||
</Canvas> |
||||
|
||||
### Children |
||||
|
||||
The `BaseAvatar` component can contain images, icons or text |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--children" /> |
||||
</Canvas> |
||||
|
||||
### 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`. |
||||
|
||||
<Canvas> |
||||
<Story id="ui-components-component-library-base-avatar-base-avatar-stories-js--color-background-color-and-border-color" /> |
||||
</Canvas> |
||||
@ -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(<BaseAvatar data-testid="base-avatar" />); |
||||
expect(getByTestId('base-avatar')).toBeDefined(); |
||||
}); |
||||
it('should render with different size classes', () => { |
||||
const { getByTestId } = render( |
||||
<> |
||||
<BaseAvatar size="xs" data-testid="base-avatar-xs" /> |
||||
<BaseAvatar size="sm" data-testid="base-avatar-sm" /> |
||||
<BaseAvatar size="md" data-testid="base-avatar-md" /> |
||||
<BaseAvatar size="lg" data-testid="base-avatar-lg" /> |
||||
<BaseAvatar size="xl" data-testid="base-avatar-xl" /> |
||||
</>, |
||||
); |
||||
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'); |
||||
}); |
||||
}); |
||||
@ -1 +0,0 @@ |
||||
export { BaseAvatar } from './base-avatar'; |
||||
Loading…
Reference in new issue