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
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
|
|
|
import { Badge } from './Badge.tsx'
|
|
|
|
const meta: Meta<typeof Badge> = {
|
|
title: 'Core Components/Badge',
|
|
component: Badge,
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof Badge>
|
|
|
|
export const Default: Story = {}
|
|
|
|
export const XS: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
<Badge number={3} color="primary" size="20" />
|
|
<Badge number={3} color="green" size="20" />
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const Small: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
<Badge number={3} color="primary" size="24" />
|
|
<Badge number={3} color="green" size="24" />
|
|
</div>
|
|
),
|
|
}
|
|
export const Medium: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
<Badge number={3} color="primary" size="28" />
|
|
<Badge number={3} color="green" size="28" />
|
|
</div>
|
|
),
|
|
}
|
|
export const Large: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
<Badge number={3} color="primary" size="32" />
|
|
<Badge number={3} color="green" size="32" />
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const XL: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
|
<Badge number={3} color="primary" size="36" />
|
|
<Badge number={3} color="green" size="36" />
|
|
</div>
|
|
),
|
|
}
|