ca6cc5ab6c
feat(SW-3636): Storybook structure * New sections in Storybook sidebar * Group Storybook content files and add token files for spacing, border radius and shadows Approved-by: Joakim Jäderberg
114 lines
2.5 KiB
TypeScript
114 lines
2.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
|
|
|
import { Avatar } from '.'
|
|
import { config } from './variants'
|
|
|
|
const meta: Meta<typeof Avatar> = {
|
|
title: 'Core Components/Avatar',
|
|
component: Avatar,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
size: {
|
|
control: { type: 'select' },
|
|
options: Object.keys(config.variants.size),
|
|
},
|
|
},
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof Avatar>
|
|
const imageFile = './img/profile-picture.png' as const
|
|
export const WithImage: Story = {
|
|
args: {
|
|
src: imageFile,
|
|
alt: 'Profile photo',
|
|
size: 'md',
|
|
},
|
|
}
|
|
|
|
export const WithInitials: Story = {
|
|
args: {
|
|
initials: 'FR',
|
|
size: 'md',
|
|
},
|
|
}
|
|
|
|
export const Fallback: Story = {
|
|
args: {
|
|
size: 'md',
|
|
},
|
|
}
|
|
|
|
export const SmallSize: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
<Avatar src={imageFile} alt="Profile photo" size="sm" />
|
|
<Avatar initials="FR" size="sm" />
|
|
<Avatar size="sm" />
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const MediumSize: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
<Avatar src={imageFile} alt="Profile photo" size="md" />
|
|
<Avatar initials="FR" size="md" />
|
|
<Avatar size="md" />
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const LargeSize: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
<Avatar src={imageFile} alt="Profile photo" size="lg" />
|
|
<Avatar initials="FR" size="lg" />
|
|
<Avatar size="lg" />
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const AllSizes: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Avatar initials="FR" size="sm" />
|
|
<span style={{ fontSize: '12px' }}>Small (20px)</span>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Avatar initials="FR" size="md" />
|
|
<span style={{ fontSize: '12px' }}>Medium (32px)</span>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Avatar initials="FR" size="lg" />
|
|
<span style={{ fontSize: '12px' }}>Large (55px)</span>
|
|
</div>
|
|
</div>
|
|
),
|
|
}
|