m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Fix/18885 migrate avatar token (#19080)

Browse Source 
* Migrate AvatarToken
---------

Co-authored-by: garrettbear <gwhisten@gmail.com>
This commit is contained in:
Binij Shrestha 2023-07-26 20:35:53 +05:45 committed by GitHub
parent 6c294ba006
commit d3c9d4a55a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 268 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/avatar-network/avatar-network.types.ts
View File

@ -13,7 +13,7 @@ export enum AvatarNetworkSize {
* Props for the AvatarNetwork component
*/
export interface AvatarNetworkStyleUtilityProps
extends Omit<AvatarBaseStyleUtilityProps, 'size'> {
extends Omit<AvatarBaseStyleUtilityProps, 'size' | 'children'> {
/**
* The name accepts the string to render the first alphabet of the Avatar Name
*/

32
ui/components/component-library/avatar-token/README.mdx
View File

@ -12,23 +12,23 @@ The `AvatarToken` is a component responsible for display of the image of a given
## Props
The `AvatarToken` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
The `AvatarToken` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
<ArgsTable of={AvatarToken} />
### Size
Use the `size` prop to set the size of the `AvatarToken`.
Use the `size` prop and the `AvatarTokenSize` enum to change the size of `AvatarToken`. Defaults to `IconSize.Sm`
Possible sizes include:
- `xs` 16px
- `sm` 24px
- `md` 32px
- `lg` 40px
- `xl` 48px
- `AvatarTokenSize.Xs` 16px
- `AvatarTokenSize.Sm` 24px
- `AvatarTokenSize.Md` 32px
- `AvatarTokenSize.Lg` 40px
- `AvatarTokenSize.Xl` 48px
Defaults to `md`
Defaults to `AvatarTokenSize.Md`
The fallback display of the `AvatarToken` is a circle with the initial letter of the network name. The size of the initial letter is calculated based on the size of the `AvatarToken` component.
@ -37,13 +37,13 @@ The fallback display of the `AvatarToken` is a circle with the initial letter of
</Canvas>
```jsx
import { AvatarToken } from '../../component-library';
import { AvatarToken, AvatarTokenSize } from '../../component-library';
<AvatarToken size={Size.XS} />
<AvatarToken size={Size.SM} />
<AvatarToken size={Size.MD} />
<AvatarToken size={Size.LG} />
<AvatarToken size={Size.XL} />
<AvatarToken size={AvatarTokenSize.Xs} />
<AvatarToken size={AvatarTokenSize.Sm} />
<AvatarToken size={AvatarTokenSize.Md} />
<AvatarToken size={AvatarTokenSize.Lg} />
<AvatarToken size={AvatarTokenSize.Xl} />
```
### Name
@ -104,9 +104,7 @@ Use the `color`, `backgroundColor` and `borderColor` props to set the text color
</Canvas>
```jsx
import { TextColor,
BackgroundColor,
BorderColor, } from '../../../helpers/constants/design-system';
import { TextColor, BackgroundColor, BorderColor, } from '../../../helpers/constants/design-system';
import { AvatarToken } from '../../component-library';
<AvatarToken

0
ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.js.snap → ui/components/component-library/avatar-token/__snapshots__/avatar-token.test.tsx.snap
View File

9
ui/components/component-library/avatar-token/avatar-token.constants.js
View File

@ -1,9 +0,0 @@
import { Size } from '../../../helpers/constants/design-system';
export const AVATAR_TOKEN_SIZES = {
XS: Size.XS,
SM: Size.SM,
MD: Size.MD,
LG: Size.LG,
XL: Size.XL,
};

133
ui/components/component-library/avatar-token/avatar-token.js
View File

@ -1,133 +0,0 @@
import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Box from '../../ui/box/box';
import { AvatarBase } from '../avatar-base';
import {
Size,
DISPLAY,
AlignItems,
JustifyContent,
TextColor,
BorderColor,
BackgroundColor,
} from '../../../helpers/constants/design-system';
import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
export const AvatarToken = React.forwardRef(
(
{
size = Size.MD,
name,
src,
showHalo,
color = TextColor.textDefault,
backgroundColor = BackgroundColor.backgroundAlternative,
borderColor = BorderColor.transparent,
className,
...props
},
ref,
) => {
const [showFallback, setShowFallback] = useState(false);
useEffect(() => {
setShowFallback(!src);
}, [src]);
const handleOnError = () => {
setShowFallback(true);
};
const fallbackString = name && name[0] ? name[0] : '?';
return (
<AvatarBase
ref={ref}
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames(
'mm-avatar-token',
showHalo && 'mm-avatar-token--with-halo',
className,
)}
{...{ backgroundColor, borderColor, color, ...props }}
>
{showFallback ? (
fallbackString
) : (
<>
{showHalo && (
<img
src={src}
className={
showHalo ? 'mm-avatar-token__token-image--blurred' : ''
}
aria-hidden="true"
/>
)}
<img
className={
showHalo
? 'mm-avatar-token__token-image--size-reduced'
: 'mm-avatar-token__token-image'
}
onError={handleOnError}
src={src}
alt={`${name} logo` || 'token logo'}
/>
</>
)}
</AvatarBase>
);
},
);
AvatarToken.propTypes = {
/**
* 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
*/
name: PropTypes.string,
/**
* The src accepts the string of the image to be rendered
*/
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(16px), SIZES.SM(24px), SIZES.MD(32px), SIZES.LG(40px), SIZES.XL(48px)
* Defaults to SIZES.MD
*/
size: PropTypes.oneOf(Object.values(AVATAR_TOKEN_SIZES)),
/**
* The background color of the AvatarToken
* Defaults to Color.backgroundAlternative
*/
backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
/**
* The background color of the AvatarToken
* Defaults to Color.borderDefault
*/
borderColor: PropTypes.oneOf(Object.values(BorderColor)),
/**
* The color of the text inside the AvatarToken
* Defaults to Color.textDefault
*/
color: PropTypes.oneOf(Object.values(TextColor)),
/**
* Additional classNames to be added to the AvatarToken
*/
className: PropTypes.string,
/**
* AvatarToken also accepts all Box props including but not limited to
* className, as(change root element of HTML element) and margin props
*/
...Box.propTypes,
};
AvatarToken.displayName = 'AvatarToken';

114
ui/components/component-library/avatar-token/avatar-token.stories.js → ui/components/component-library/avatar-token/avatar-token.stories.tsx
View File

@ -1,32 +1,26 @@
import React from 'react';
import { StoryFn, Meta } from '@storybook/react';
import {
Size,
DISPLAY,
Display,
AlignItems,
TextColor,
BackgroundColor,
BorderColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import {
AvatarNetwork,
AvatarNetworkSize,
BUTTON_LINK_SIZES,
BadgeWrapper,
Box,
ButtonLink,
BUTTON_LINK_SIZES,
Text,
} from '..';
import README from './README.mdx';
import { AvatarToken } from './avatar-token';
import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
import { AvatarToken, AvatarTokenSize } from '.';
export default {
title: 'Components/ComponentLibrary/AvatarToken',
component: AvatarToken,
parameters: {
docs: {
@ -36,7 +30,7 @@ export default {
argTypes: {
size: {
control: 'select',
options: Object.values(AVATAR_TOKEN_SIZES),
options: Object.values(AvatarTokenSize),
},
color: {
options: Object.values(TextColor),
@ -63,43 +57,43 @@ export default {
args: {
name: 'eth',
src: './images/eth_logo.png',
size: Size.MD,
size: AvatarTokenSize.Md,
showHalo: false,
},
};
} as Meta<typeof AvatarToken>;
const Template = (args) => {
const Template: StoryFn<typeof AvatarToken> = (args) => {
return <AvatarToken {...args} />;
};
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const SizeStory = (args) => (
export const SizeStory: StoryFn<typeof AvatarToken> = (args) => (
<>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.baseline}
gap={2}
marginBottom={4}
>
<AvatarToken {...args} size={Size.XS} />
<AvatarToken {...args} size={Size.SM} />
<AvatarToken {...args} size={Size.MD} />
<AvatarToken {...args} size={Size.LG} />
<AvatarToken {...args} size={Size.XL} />
<AvatarToken {...args} size={AvatarTokenSize.Xs} />
<AvatarToken {...args} size={AvatarTokenSize.Sm} />
<AvatarToken {...args} size={AvatarTokenSize.Md} />
<AvatarToken {...args} size={AvatarTokenSize.Lg} />
<AvatarToken {...args} size={AvatarTokenSize.Xl} />
</Box>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.flexEnd}
gap={2}
marginBottom={4}
>
<AvatarToken {...args} src="" size={Size.XS} />
<AvatarToken {...args} src="" size={Size.SM} />
<AvatarToken {...args} src="" size={Size.MD} />
<AvatarToken {...args} src="" size={Size.LG} />
<AvatarToken {...args} src="" size={Size.XL} />
<AvatarToken {...args} src="" size={AvatarTokenSize.Xs} />
<AvatarToken {...args} src="" size={AvatarTokenSize.Sm} />
<AvatarToken {...args} src="" size={AvatarTokenSize.Md} />
<AvatarToken {...args} src="" size={AvatarTokenSize.Lg} />
<AvatarToken {...args} src="" size={AvatarTokenSize.Xl} />
</Box>
<Text marginBottom={4}>
Sizes with{' '}
@ -119,7 +113,7 @@ export const SizeStory = (args) => (
components
</Text>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.flexEnd}
gap={2}
marginBottom={4}
@ -130,12 +124,12 @@ export const SizeStory = (args) => (
src="./images/eth_logo.png"
name="ETH"
size={AvatarNetworkSize.Xs}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.XS} />
<AvatarToken {...args} name="ETH" size={AvatarTokenSize.Xs} />
</BadgeWrapper>
<BadgeWrapper
badge={
@ -143,12 +137,12 @@ export const SizeStory = (args) => (
src="./images/eth_logo.png"
name="ETH"
size={AvatarNetworkSize.Xs}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.SM} />
<AvatarToken {...args} name="ETH" size={AvatarTokenSize.Sm} />
</BadgeWrapper>
<BadgeWrapper
badge={
@ -156,12 +150,12 @@ export const SizeStory = (args) => (
src="./images/eth_logo.png"
name="ETH"
size={AvatarNetworkSize.Xs}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.MD} />
<AvatarToken {...args} name="ETH" size={AvatarTokenSize.Md} />
</BadgeWrapper>
<BadgeWrapper
badge={
@ -169,12 +163,12 @@ export const SizeStory = (args) => (
src="./images/eth_logo.png"
name="ETH"
size={AvatarNetworkSize.Xs}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.LG} />
<AvatarToken {...args} name="ETH" size={AvatarTokenSize.Lg} />
</BadgeWrapper>
<BadgeWrapper
badge={
@ -182,21 +176,21 @@ export const SizeStory = (args) => (
src="./images/eth_logo.png"
name="ETH"
size={AvatarNetworkSize.Sm}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
>
<AvatarToken {...args} name="ETH" size={Size.XL} />
<AvatarToken {...args} name="ETH" size={AvatarTokenSize.Xl} />
</BadgeWrapper>
</Box>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={2}>
<Box display={Display.Flex} alignItems={AlignItems.flexEnd} gap={2}>
<BadgeWrapper
badge={
<AvatarNetwork
name="ETH"
size={AvatarNetworkSize.Xs}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
@ -205,9 +199,9 @@ export const SizeStory = (args) => (
{...args}
src=""
name="ETH"
size={Size.XS}
size={AvatarTokenSize.Xs}
borderColor={BorderColor.borderDefault}
borderSize={2}
borderWidth={2}
/>
</BadgeWrapper>
<BadgeWrapper
@ -215,7 +209,7 @@ export const SizeStory = (args) => (
<AvatarNetwork
name="ETH"
size={AvatarNetworkSize.Xs}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
@ -224,9 +218,9 @@ export const SizeStory = (args) => (
{...args}
name="ETH"
src=""
size={Size.SM}
size={AvatarTokenSize.Sm}
borderColor={BorderColor.borderDefault}
borderSize={2}
borderWidth={2}
/>
</BadgeWrapper>
<BadgeWrapper
@ -234,7 +228,7 @@ export const SizeStory = (args) => (
<AvatarNetwork
name="ETH"
size={AvatarNetworkSize.Xs}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
@ -243,9 +237,9 @@ export const SizeStory = (args) => (
{...args}
name="ETH"
src=""
size={Size.MD}
size={AvatarTokenSize.Md}
borderColor={BorderColor.borderDefault}
borderSize={2}
borderWidth={2}
/>
</BadgeWrapper>
<BadgeWrapper
@ -253,7 +247,7 @@ export const SizeStory = (args) => (
<AvatarNetwork
name="ETH"
size={AvatarNetworkSize.Xs}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
@ -262,9 +256,9 @@ export const SizeStory = (args) => (
{...args}
name="ETH"
src=""
size={Size.LG}
size={AvatarTokenSize.Lg}
borderColor={BorderColor.borderDefault}
borderSize={2}
borderWidth={2}
/>
</BadgeWrapper>
<BadgeWrapper
@ -272,7 +266,7 @@ export const SizeStory = (args) => (
<AvatarNetwork
name="ETH"
size={AvatarNetworkSize.Sm}
borderColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.backgroundDefault}
borderWidth={2}
/>
}
@ -281,9 +275,9 @@ export const SizeStory = (args) => (
{...args}
name="ETH"
src=""
size={Size.XL}
size={AvatarTokenSize.Xl}
borderColor={BorderColor.borderDefault}
borderSize={2}
borderWidth={2}
/>
</BadgeWrapper>
</Box>
@ -296,8 +290,8 @@ Name.args = {
src: '',
};
export const Src = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
export const Src: StoryFn<typeof AvatarToken> = (args) => (
<Box display={Display.Flex} gap={1}>
<AvatarToken {...args} src="./images/eth_logo.png" />
<AvatarToken {...args} src="./images/arbitrum.svg" />
<AvatarToken {...args} src="./images/bnb.png" />
@ -325,8 +319,10 @@ ShowHalo.args = {
showHalo: true,
};
export const ColorBackgroundColorAndBorderColor = (args) => (
<Box display={DISPLAY.FLEX} gap={1}>
export const ColorBackgroundColorAndBorderColor: StoryFn<typeof AvatarToken> = (
args,
) => (
<Box display={Display.Flex} gap={1}>
<AvatarToken
{...args}
backgroundColor={BackgroundColor.goerli}

55
ui/components/component-library/avatar-token/avatar-token.test.js → ui/components/component-library/avatar-token/avatar-token.test.tsx
View File

@ -1,14 +1,12 @@
/* eslint-disable jest/require-top-level-describe */
import { render, screen } from '@testing-library/react';
import React from 'react';
import {
BackgroundColor,
BorderColor,
TextColor,
} from '../../../helpers/constants/design-system';
import { AvatarToken } from './avatar-token';
import { AvatarToken, AvatarTokenSize } from '.';
describe('AvatarToken', () => {
const args = {
@ -58,6 +56,53 @@ describe('AvatarToken', () => {
);
expect(getByTestId('avatar-token')).toHaveClass('test-class');
});
// size
it('should render with different AvatarTokenSize', () => {
const { getByTestId } = render(
<>
<AvatarToken
{...args}
size={AvatarTokenSize.Xs}
data-testid={AvatarTokenSize.Xs}
/>
<AvatarToken
{...args}
size={AvatarTokenSize.Sm}
data-testid={AvatarTokenSize.Sm}
/>
<AvatarToken
{...args}
size={AvatarTokenSize.Md}
data-testid={AvatarTokenSize.Md}
/>
<AvatarToken
{...args}
size={AvatarTokenSize.Lg}
data-testid={AvatarTokenSize.Lg}
/>
<AvatarToken
{...args}
size={AvatarTokenSize.Xl}
data-testid={AvatarTokenSize.Xl}
/>
</>,
);
expect(getByTestId(AvatarTokenSize.Xs)).toHaveClass(
`mm-avatar-base--size-${AvatarTokenSize.Xs}`,
);
expect(getByTestId(AvatarTokenSize.Sm)).toHaveClass(
`mm-avatar-base--size-${AvatarTokenSize.Sm}`,
);
expect(getByTestId(AvatarTokenSize.Md)).toHaveClass(
`mm-avatar-base--size-${AvatarTokenSize.Md}`,
);
expect(getByTestId(AvatarTokenSize.Lg)).toHaveClass(
`mm-avatar-base--size-${AvatarTokenSize.Lg}`,
);
expect(getByTestId(AvatarTokenSize.Xl)).toHaveClass(
`mm-avatar-base--size-${AvatarTokenSize.Xl}`,
);
});
// color
it('should render with different colors', () => {
const { getByTestId } = render(
@ -122,9 +167,11 @@ describe('AvatarToken', () => {
);
});
it('should forward a ref to the root html element', () => {
const ref = React.createRef();
const ref = React.createRef<HTMLDivElement>();
render(<AvatarToken ref={ref} />);
expect(ref.current).not.toBeNull();
if (ref.current) {
expect(ref.current.nodeName).toBe('DIV');
}
});
});

90
ui/components/component-library/avatar-token/avatar-token.tsx Normal file
View File

@ -0,0 +1,90 @@
import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { AvatarBase, AvatarBaseProps } from '../avatar-base';
import {
Display,
AlignItems,
JustifyContent,
TextColor,
BorderColor,
BackgroundColor,
} from '../../../helpers/constants/design-system';
import type { PolymorphicRef } from '../box';
import type { AvatarTokenComponent } from './avatar-token.types';
import { AvatarTokenProps, AvatarTokenSize } from './avatar-token.types';
export const AvatarToken: AvatarTokenComponent = React.forwardRef(
<C extends React.ElementType = 'div'>(
{
size = AvatarTokenSize.Md,
name,
src,
showHalo,
color = TextColor.textDefault,
backgroundColor = BackgroundColor.backgroundAlternative,
borderColor = BorderColor.transparent,
className = '',
...props
}: AvatarTokenProps<C>,
ref: PolymorphicRef<C>,
) => {
const [showFallback, setShowFallback] = useState(false);
useEffect(() => {
setShowFallback(!src);
}, [src]);
const handleOnError = () => {
setShowFallback(true);
};
const fallbackString = name?.[0] ?? '?';
return (
<AvatarBase
ref={ref}
size={size}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames(
'mm-avatar-token',
showHalo ? 'mm-avatar-token--with-halo' : '',
className,
)}
{...{
backgroundColor,
borderColor,
color,
...(props as AvatarBaseProps<C>),
}}
>
{showFallback ? (
fallbackString
) : (
<>
{showHalo && (
<img
src={src}
className={
showHalo ? 'mm-avatar-token__token-image--blurred' : ''
}
aria-hidden="true"
/>
)}
<img
className={
showHalo
? 'mm-avatar-token__token-image--size-reduced'
: 'mm-avatar-token__token-image'
}
onError={handleOnError}
src={src}
alt={`${name} logo` || 'token logo'}
/>
</>
)}
</AvatarBase>
);
},
);

42
ui/components/component-library/avatar-token/avatar-token.types.ts Normal file
View File

@ -0,0 +1,42 @@
import type { PolymorphicComponentPropWithRef } from '../box';
import type { AvatarBaseStyleUtilityProps } from '../avatar-base/avatar-base.types';
export enum AvatarTokenSize {
Xs = 'xs',
Sm = 'sm',
Md = 'md',
Lg = 'lg',
Xl = 'xl',
}
/**
* Props for the AvatarToken component
*/
export interface AvatarTokenStyleUtilityProps
extends Omit<AvatarBaseStyleUtilityProps, 'size' | 'children'> {
/**
* 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
*/
name?: string;
/**
* The src accepts the string of the image to be rendered
*/
src?: string;
/**
* The showHalo accepts a boolean prop to render the image with halo effect
*/
showHalo?: boolean;
/**
* The size of the AvatarToken.
* Possible values could be 'AvatarTokenSize.Xs' 16px, 'AvatarTokenSize.Sm' 24px, 'AvatarTokenSize.Md' 32px, 'AvatarTokenSize.Lg' 40px, 'AvatarTokenSize.Xl' 48px
* Defaults to AvatarTokenSize.Md
*/
size?: AvatarTokenSize;
}
export type AvatarTokenProps<C extends React.ElementType> =
PolymorphicComponentPropWithRef<C, AvatarTokenStyleUtilityProps>;
export type AvatarTokenComponent = <C extends React.ElementType = 'span'>(
props: AvatarTokenProps<C>,
) => React.ReactElement | null;

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

@ -1 +0,0 @@
export { AvatarToken } from './avatar-token';

3
ui/components/component-library/avatar-token/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { AvatarToken } from './avatar-token';
export { AvatarTokenSize } from './avatar-token.types';
export type { AvatarTokenProps } from './avatar-token.types';

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

@ -7,8 +7,8 @@ export {
export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
export { AvatarNetwork, AvatarNetworkSize } from './avatar-network';
export { AvatarToken } from './avatar-token';
export { AvatarBase } from './avatar-base';
export { AvatarToken, AvatarTokenSize } from './avatar-token';
export { AvatarBase, AvatarBaseSize } from './avatar-base';
export {
BadgeWrapper,
BadgeWrapperPosition,