brackt/app/components/league/LeagueRow.stories.tsx
Chris Parsons ff208460ac Redesign home page with new layout and component system
- Two-column layout (My Leagues 2/3, Upcoming Events 1/3) with mobile stack
- LeagueRow: square avatar, gradient draft highlight, rank/points display, progress bar
- MyLeaguesCard, CreateLeagueCard with shared SectionCardHeader
- UpcomingEventsCard: vertical timeline with grouped multi-league events
- Shared gradient system: BracktGradients SVG defs, GradientIcon wrapper, brand.ts constants
- Button default variant updated to green→cyan gradient
- Navbar: plain nav links with gradient hover, support/admin icon buttons
- Accessibility fixes: semantic h2 headings, aria-label on LeagueAvatar and nav elements
- Storybook stories for all new components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-17 14:17:49 -07:00

99 lines
1.9 KiB
TypeScript

import type { Meta, StoryObj } from "@storybook/react-vite";
import { LeagueRow } from "./LeagueRow";
const meta: Meta<typeof LeagueRow> = {
title: "League/LeagueRow",
component: LeagueRow,
parameters: {
layout: "padded",
},
};
export default meta;
type Story = StoryObj<typeof LeagueRow>;
const baseLeague = {
leagueId: "league-abc-123",
leagueName: "Alpha Dynasty",
numSports: 2,
};
export const DraftInProgress: Story = {
args: {
...baseLeague,
status: "draft",
seasonId: "season-xyz-456",
},
};
export const ActiveRankUp: Story = {
args: {
...baseLeague,
leagueName: "Hardcourt Elites",
leagueId: "league-hce-999",
numSports: 1,
status: "active",
currentRank: 4,
previousRank: 6,
totalPoints: 1422.8,
},
};
export const ActiveRankDown: Story = {
args: {
...baseLeague,
leagueName: "Monday Night Madness",
leagueId: "league-mnm-777",
numSports: 3,
status: "active",
currentRank: 7,
previousRank: 5,
totalPoints: 987.5,
},
};
export const ActiveNoChange: Story = {
args: {
...baseLeague,
leagueName: "The Bracket Boys",
leagueId: "league-tbb-555",
numSports: 2,
status: "active",
currentRank: 1,
previousRank: 1,
totalPoints: 2810.0,
},
};
export const ActiveNoStanding: Story = {
args: {
...baseLeague,
leagueName: "Fresh Start",
leagueId: "league-fs-222",
numSports: 2,
status: "active",
},
};
export const PreDraft: Story = {
args: {
...baseLeague,
leagueName: "Summer Smash League",
leagueId: "league-ssl-333",
numSports: 4,
status: "pre_draft",
seasonId: "season-ssl-999",
},
};
export const Completed: Story = {
args: {
...baseLeague,
leagueName: "2023 World Tour",
leagueId: "league-wt-111",
numSports: 2,
status: "completed",
currentRank: 3,
totalPoints: 3150.2,
},
};