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: '', };