ff208460ac
- 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>
121 lines
3 KiB
TypeScript
121 lines
3 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { UpcomingEventsCard } from "./UpcomingEventsCard";
|
|
import type { CalendarPanelEvent } from "./UpcomingCalendarPanel";
|
|
|
|
const meta: Meta<typeof UpcomingEventsCard> = {
|
|
title: "Sport Season/UpcomingEventsCard",
|
|
component: UpcomingEventsCard,
|
|
parameters: { layout: "padded" },
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof UpcomingEventsCard>;
|
|
|
|
const tomorrowISO = "2026-04-15T17:00:00.000Z";
|
|
const nextWeekStr = "2026-04-22";
|
|
const inTwoWeeksStr = "2026-04-29";
|
|
|
|
const sampleEvents: CalendarPanelEvent[] = [
|
|
{
|
|
id: "event-1",
|
|
name: "NBA Playoffs Game 3",
|
|
matchLabel: "Lakers vs Celtics",
|
|
eventDate: null,
|
|
earliestGameTime: tomorrowISO,
|
|
eventType: "playoff_game",
|
|
sportsSeasonId: "ss-nba-1",
|
|
relevantParticipants: [
|
|
{ id: "p1", name: "LeBron James" },
|
|
{ id: "p2", name: "Jayson Tatum" },
|
|
],
|
|
sportName: "NBA",
|
|
sportSeasonName: "2025 NBA Season",
|
|
leagueName: "Alpha Dynasty",
|
|
leagueId: "league-abc-123",
|
|
sportsSeasonPageUrl: "/leagues/league-abc-123/sports-seasons/ss-nba-1",
|
|
},
|
|
{
|
|
id: "event-2",
|
|
name: "F1 Monaco Grand Prix",
|
|
matchLabel: null,
|
|
eventDate: nextWeekStr,
|
|
earliestGameTime: null,
|
|
eventType: "race",
|
|
sportsSeasonId: "ss-f1-1",
|
|
relevantParticipants: [
|
|
{ id: "p3", name: "Max Verstappen" },
|
|
{ id: "p4", name: "Charles Leclerc" },
|
|
{ id: "p5", name: "Fernando Alonso" },
|
|
],
|
|
sportName: "F1",
|
|
sportSeasonName: "2025 F1 Season",
|
|
leagueName: "Alpha Dynasty",
|
|
leagueId: "league-abc-123",
|
|
sportsSeasonPageUrl: "/leagues/league-abc-123/sports-seasons/ss-f1-1",
|
|
},
|
|
{
|
|
id: "event-3",
|
|
name: "Champions League Quarter-Final",
|
|
matchLabel: "Man City vs Real Madrid",
|
|
eventDate: inTwoWeeksStr,
|
|
earliestGameTime: null,
|
|
eventType: "playoff_game",
|
|
sportsSeasonId: "ss-ucl-1",
|
|
relevantParticipants: [
|
|
{ id: "p6", name: "Erling Haaland" },
|
|
],
|
|
sportName: "UCL",
|
|
sportSeasonName: "2024-25 UCL",
|
|
leagueName: "Hardcourt Elites",
|
|
leagueId: "league-xyz-999",
|
|
sportsSeasonPageUrl: "/leagues/league-xyz-999/sports-seasons/ss-ucl-1",
|
|
},
|
|
];
|
|
|
|
// Same event appearing in two leagues
|
|
const multiLeagueEvents: CalendarPanelEvent[] = [
|
|
...sampleEvents,
|
|
{
|
|
...sampleEvents[0],
|
|
leagueName: "Hardcourt Elites",
|
|
leagueId: "league-xyz-999",
|
|
relevantParticipants: [{ id: "p10", name: "Anthony Davis" }],
|
|
},
|
|
];
|
|
|
|
export const WithEvents: Story = {
|
|
args: {
|
|
events: sampleEvents,
|
|
limit: 8,
|
|
viewAllUrl: "/upcoming-events",
|
|
},
|
|
};
|
|
|
|
export const MultiLeagueGrouped: Story = {
|
|
args: {
|
|
events: multiLeagueEvents,
|
|
limit: 8,
|
|
viewAllUrl: "/upcoming-events",
|
|
},
|
|
};
|
|
|
|
export const WithLimit: Story = {
|
|
args: {
|
|
events: sampleEvents,
|
|
limit: 1,
|
|
viewAllUrl: "/upcoming-events",
|
|
},
|
|
};
|
|
|
|
export const Empty: Story = {
|
|
args: {
|
|
events: [],
|
|
viewAllUrl: "/upcoming-events",
|
|
},
|
|
};
|
|
|
|
export const NoViewAll: Story = {
|
|
args: {
|
|
events: sampleEvents,
|
|
},
|
|
};
|