import React from 'react';
import {
Size,
DISPLAY,
AlignItems,
TextColor,
BackgroundColor,
BorderColor,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import {
AvatarNetwork,
BUTTON_LINK_SIZES,
BadgeWrapper,
ButtonLink,
Text,
} from '..';
import README from './README.mdx';
import { AvatarToken } from './avatar-token';
import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
export default {
title: 'Components/ComponentLibrary/AvatarToken',
component: AvatarToken,
parameters: {
docs: {
page: README,
},
},
argTypes: {
size: {
control: 'select',
options: Object.values(AVATAR_TOKEN_SIZES),
},
color: {
options: Object.values(TextColor),
control: 'select',
},
backgroundColor: {
options: Object.values(BackgroundColor),
control: 'select',
},
borderColor: {
options: Object.values(BorderColor),
control: 'select',
},
name: {
control: 'text',
},
src: {
control: 'text',
},
showHalo: {
control: 'boolean',
},
},
args: {
name: 'eth',
src: './images/eth_logo.png',
size: Size.MD,
showHalo: false,
},
};
const Template = (args) => {
return ;
};
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const SizeStory = (args) => (
<>
Sizes with{' '}
AvatarNetwork
{' '}
and{' '}
BadgeWrapper
{' '}
components
}
>
}
>
}
>
}
>
}
>
}
>
}
>
}
>
}
>
}
>
>
);
SizeStory.storyName = 'Size';
export const Name = Template.bind({});
Name.args = {
src: '',
};
export const Src = (args) => (
);
export const ShowHalo = Template.bind({});
ShowHalo.args = {
showHalo: true,
};
export const ColorBackgroundColorAndBorderColor = (args) => (
);
ColorBackgroundColorAndBorderColor.args = {
src: '',
};