Files
web/packages/design-system/lib/components/Badge/Badge.stories.tsx
Rasmus Langvad d0546926a9 Merged in fix/3697-prettier-configs (pull request #3396)
fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood
2026-01-07 12:45:50 +00:00

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>
),
}