55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||
|
|
import { TeamOwnerBadge } from "./team-owner-badge";
|
||
|
|
|
||
|
|
const meta: Meta<typeof TeamOwnerBadge> = {
|
||
|
|
title: "UI/TeamOwnerBadge",
|
||
|
|
component: TeamOwnerBadge,
|
||
|
|
parameters: {
|
||
|
|
layout: "padded",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export default meta;
|
||
|
|
type Story = StoryObj<typeof TeamOwnerBadge>;
|
||
|
|
|
||
|
|
export const LeftAligned: Story = {
|
||
|
|
args: {
|
||
|
|
teamName: "Thunder Hawks",
|
||
|
|
ownerName: "Chris M.",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const RightAligned: Story = {
|
||
|
|
args: {
|
||
|
|
teamName: "Shadow Hawks",
|
||
|
|
ownerName: "Sarah J.",
|
||
|
|
align: "right",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const WithoutOwner: Story = {
|
||
|
|
args: {
|
||
|
|
teamName: "Iron Eagles",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const LongNames: Story = {
|
||
|
|
name: "Long Names (truncation)",
|
||
|
|
args: {
|
||
|
|
teamName: "The Incredibly Long Named Fantasy Team",
|
||
|
|
ownerName: "Alexander Hamilton-Washington",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const AllVariants: Story = {
|
||
|
|
name: "All Variants — Side by Side",
|
||
|
|
render: () => (
|
||
|
|
<div className="flex flex-col gap-4 max-w-xs">
|
||
|
|
<TeamOwnerBadge teamName="Thunder Hawks" ownerName="Chris M." />
|
||
|
|
<TeamOwnerBadge teamName="Shadow Hawks" ownerName="Sarah J." align="right" />
|
||
|
|
<TeamOwnerBadge teamName="Iron Eagles" />
|
||
|
|
<TeamOwnerBadge teamName="The Incredibly Long Named Fantasy Team" ownerName="Alexander Hamilton-Washington" />
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
};
|