/* eslint-disable react/jsx-key */ import { Meta, StoryObj } from '@storybook/react-webpack5'; import { Camera, Convert, FastFlag, Freeze, Leaf, Plane, QrCode, Target, Team, Transport, Wallet, Water, Bank, } from '@transferwise/icons'; import AvatarView, { AvatarViewProps } from '.'; import { Flag } from '@wise/art'; import { ProfileType } from '../common'; import Body from '../body'; import SentimentSurface from '../sentimentSurface'; export default { title: 'Content/AvatarView', component: AvatarView, } satisfies Meta; type Story = StoryObj; const profileName1 = 'Wolter White'; const profileName2 = 'Tyler Durden'; const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72]; const withComponentGrid = (Story: () => JSX.Element) => (
); export const Selected: Story = { render: () => { return (
{sizes.map((size) => ( {size} ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))}
); }, }; export const Badge: Story = { render: () => { const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY']; const icons = [ , , , , , , , ]; return (
{sizes.map((size) => ( {size} ))} {sizes.map((size, index) => ( {icons[index]} ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size, index) => ( {icons[index]} ))} {sizes.map((size, index) => ( {icons[index]} ))} {sizes.map((size, index) => ( {icons[index]} ))} {sizes.map((size, index) => ( {icons[index]} ))} {sizes.map((size, index) => ( }}> {icons[index]} ))} {sizes.map((size, index) => ( {icons[index]} ))} {sizes.map((size, index) => ( {icons[index]} ))} {sizes.map((size) => ( }} /> ))} {sizes.map((size) => ( }} /> ))} {sizes.map((size) => ( }} /> ))} {sizes.map((size) => (
), }} /> ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} ); }, }; export const Notification: Story = { render: () => (
{sizes.map((size) => ( {size} ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))}
), }; export const Online: Story = { tags: ['new'], render: () => (
{sizes.map((size) => ( {size} ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))}
), }; export const Images: Story = { render: () => { return (
{sizes.map((size) => ( {size} ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))}
); }, }; export const Profiles: Story = { render: () => { return (
{sizes.map((size) => ( {size} ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))}
); }, }; /** * `AvatarView` is sentiment-aware (note: not all features are supported) and will automatically adjust its colours if wrapped inside the * [SentimentSurface](?path=/docs/content-sentimentsurface--docs) component. * * Features like `online`, `notification`, `selected`, and `interactive` are not supported. * For badge (``) only `flagCode` is supported. * Also `AvatarView` isn't supported on `"elevated"` state of `SentimentSurface`. */ export const SentimentAwareness: Story = { parameters: { docs: { canvas: { sourceState: 'hidden', }, source: { type: 'code' }, }, }, render: () => { return ( <> {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map( (sentiment) => ( ), )} ); }, decorators: [withComponentGrid], };