import { Meta, StoryObj } from '@storybook/react-webpack5'; import Circle from './Circle'; import { Profile } from '@transferwise/icons'; import { CircleProps } from '.'; import Body from '../../body'; import { withVariantConfig } from '../../../.storybook/helpers'; export default { title: 'Internal/Circle', component: Circle, tags: ['!manifest'], } satisfies Meta; type Story = StoryObj; export const Basic: Story = { args: { children: 'NP', size: 40, as: 'div', className: 'bg-neutral', }, render: (args) => { return ; }, }; export const Sizes: Story = { render: () => { const content = ; const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72]; return (

{sizes.map((size) => ( {content} ))}

); }, ...withVariantConfig(['light', 'dark']), }; export const FixedSize: Story = { render: () => { const size = 72; const content = ; return (

Dynamic Size (--size-{size}) Fixed Size ({size}px) {content} {content}

); }, ...withVariantConfig(['400%']), };