/* eslint-disable react/jsx-key */ import { Meta, StoryObj } from '@storybook/react-webpack5'; import AvatarLayout, { AvatarLayoutProps } from '.'; import { Freeze } from '@transferwise/icons'; import { Flag } from '@wise/art'; import Body from '../body'; import SentimentSurface from '../sentimentSurface'; export default { title: 'Content/AvatarLayout', component: AvatarLayout, } satisfies Meta; type Story = StoryObj; const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72]; export const Diagonal: Story = { render: () => (

{sizes.map((size) => ( {size} ))} {sizes.map((size) => ( }, { asset: }]} /> ))} {sizes.map((size) => ( }, { asset: }]} /> ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( ))} {sizes.map((size) => ( }, { asset: }]} /> ))} {sizes.map((size) => ( }, { asset: }]} /> ))} {sizes.map((size) => ( ))}

), }; export const Horizontal: Story = { render: () => (

), }; /** * Like [AvatarView](?path=/docs/content-avatarview--docs#sentiment-awareness), `AvatarLayout` 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: `interactive` are not supported. * Also `AvatarLayout` isn't supported on `"elevated"` state of `SentimentSurface`. */ export const SentimentAwareness: Story = { parameters: { docs: { canvas: { sourceState: 'hidden', }, }, }, render: (args) => ( <> {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map((sentiment) => ( }, { asset: }]} /> }, { asset: }]} /> ))} ), decorators: [ (Story: () => JSX.Element) => (

), ], };