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>
98 lines
2.2 KiB
TypeScript
98 lines
2.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { PageHeader } from './PageHeader'
|
|
|
|
const GridIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M3 3h8v8H3zm0 10h8v8H3zm10-10h8v8h-8zm0 10h8v8h-8z" />
|
|
</svg>
|
|
)
|
|
|
|
const BookIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z" />
|
|
</svg>
|
|
)
|
|
|
|
const meta: Meta<typeof PageHeader> = {
|
|
title: 'Organisms/PageHeader',
|
|
component: PageHeader,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'fullscreen' },
|
|
}
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof PageHeader>
|
|
|
|
export const Light: Story = {
|
|
render: () => (
|
|
<PageHeader
|
|
title="Resources"
|
|
subtitle="Essential resources for my work"
|
|
icon={<GridIcon />}
|
|
/>
|
|
),
|
|
}
|
|
|
|
export const Dark: Story = {
|
|
render: () => (
|
|
<PageHeader
|
|
title="Resources"
|
|
subtitle="Essential resources for my work"
|
|
icon={<GridIcon />}
|
|
theme="dark"
|
|
/>
|
|
),
|
|
}
|
|
|
|
export const NoIcon: Story = {
|
|
name: 'No icon',
|
|
render: () => (
|
|
<PageHeader
|
|
title="My Documents"
|
|
subtitle="View and manage your uploaded documents"
|
|
/>
|
|
),
|
|
}
|
|
|
|
export const Centered: Story = {
|
|
render: () => (
|
|
<PageHeader
|
|
title="Welcome to your PDP"
|
|
subtitle="Performance and Development Plan portal"
|
|
icon={<BookIcon />}
|
|
centered
|
|
/>
|
|
),
|
|
}
|
|
|
|
export const NoBackground: Story = {
|
|
name: 'No background',
|
|
render: () => (
|
|
<PageHeader
|
|
title="Settings"
|
|
subtitle="Manage your account preferences"
|
|
noBackground
|
|
/>
|
|
),
|
|
}
|
|
|
|
export const WithContent: Story = {
|
|
name: 'With content slot',
|
|
render: () => (
|
|
<PageHeader
|
|
title="Resources"
|
|
subtitle="Essential resources for my work"
|
|
icon={<GridIcon />}
|
|
>
|
|
<div className="flex gap-2">
|
|
<button className="rounded-full bg-primary px-5 py-2 text-small font-semibold text-white">
|
|
Browse all
|
|
</button>
|
|
<button className="rounded-full border-2 border-primary px-5 py-2 text-small font-semibold text-primary">
|
|
My favourites
|
|
</button>
|
|
</div>
|
|
</PageHeader>
|
|
),
|
|
}
|