Richie
d915443b8c
Token foundation: fix 16 palette colours to match official ADS_COLORS, add 5 new palettes (teal, brown, purple, fuchsia, yellow), realign semantic tokens (primary=navy, info=bright blue), fix border radii to 8px base, add responsive heading typography. Component migration: swap primary/info references across all existing components, update Button (44px/semibold), Switch (green/compact), Chip (30px/8px radius + colour variants), SideNav (80px rail), Tag (11 colours). New components: SideNav, TopBar, Avatar, Tabs, PageHeader, Slider, RangeSlider, FileInput, DataTable, List, Autocomplete. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { List, ListItem, ListSubheader, ListDivider } from './List'
|
|
|
|
const HomeIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>
|
|
)
|
|
const StarIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></svg>
|
|
)
|
|
const SettingsIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z" /></svg>
|
|
)
|
|
|
|
const meta: Meta<typeof List> = {
|
|
title: 'Atoms/List',
|
|
component: List,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'padded' },
|
|
}
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof List>
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<List className="w-80 rounded-default shadow-default">
|
|
<ListItem icon={<HomeIcon />}>Real-Time</ListItem>
|
|
<ListItem icon={<StarIcon />}>Audience</ListItem>
|
|
<ListItem icon={<SettingsIcon />}>Conversions</ListItem>
|
|
</List>
|
|
),
|
|
}
|
|
|
|
export const WithActive: Story = {
|
|
name: 'With active item',
|
|
render: () => (
|
|
<List className="w-80 rounded-default shadow-default">
|
|
<ListItem icon={<HomeIcon />} active>Real-Time</ListItem>
|
|
<ListItem icon={<StarIcon />}>Audience</ListItem>
|
|
<ListItem icon={<SettingsIcon />}>Conversions</ListItem>
|
|
</List>
|
|
),
|
|
}
|
|
|
|
export const WithSubheaders: Story = {
|
|
name: 'With subheaders',
|
|
render: () => (
|
|
<List className="w-80 rounded-default shadow-default">
|
|
<ListSubheader>Reports</ListSubheader>
|
|
<ListItem icon={<HomeIcon />}>Real-Time</ListItem>
|
|
<ListItem icon={<StarIcon />}>Audience</ListItem>
|
|
<ListDivider />
|
|
<ListSubheader>Settings</ListSubheader>
|
|
<ListItem icon={<SettingsIcon />}>Preferences</ListItem>
|
|
</List>
|
|
),
|
|
}
|