richie/ADS3-Design-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganise components into atoms/molecules/organisms and fix Input icon colours

Browse Source 
Moved all 17 components from ui/ into atomic design tiers: atoms (Button,
IconButton, Input, Textarea, Select, Checkbox, Radio, Switch, Badge, Tag,
Chip, Tooltip) and molecules (Alert, Accordion, Card, Dialog, Popover).
Updated all Storybook titles and cross-component imports. Changed Input
icons to primary-dark and replaced palette token references with semantic
tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Richie
2026-05-22 09:10:12 +10:00
parent d696619e4e
commit 722475215d
51 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/components/molecules/Alert/Alert.stories.tsx Normal file
View File

@@ -0,0 +1,174 @@
import { useState } from 'react'
import type { Meta, StoryObj } from '@storybook/react-vite'
import { Alert } from './Alert'
import { Button } from '@/components/atoms/Button'
const meta: Meta<typeof Alert> = {
title: 'Molecules/Alert',
component: Alert,
tags: ['autodocs'],
argTypes: {
variant: {
control: 'select',
options: ['info', 'warning', 'error', 'success', 'neutral'],
},
},
decorators: [
(Story) => (
<div className="max-w-xl">
<Story />
</div>
),
],
}
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
title: 'Information',
children: 'Your submission has been received and is being reviewed.',
},
}
// --- Variants ---
export const Info: Story = {
args: {
variant: 'info',
title: 'Alert title',
children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
},
}
export const Warning: Story = {
args: {
variant: 'warning',
title: 'Alert title',
children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
},
}
export const Error: Story = {
args: {
variant: 'error',
title: 'Alert title',
children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
},
}
export const Success: Story = {
args: {
variant: 'success',
title: 'Alert title',
children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
},
}
export const Neutral: Story = {
args: {
variant: 'neutral',
title: 'Alert title',
children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
},
}
// --- With close ---
export const Dismissible: Story = {
render: () => {
const [visible, setVisible] = useState(true)
if (!visible) return <Button size="compact" onClick={() => setVisible(true)}>Show alert</Button>
return (
<Alert variant="info" title="New feature available" onClose={() => setVisible(false)}>
You can now export your synthesis results as a PDF report.
</Alert>
)
},
}
// --- With action ---
export const WithAction: Story = {
render: () => (
<Alert
variant="warning"
title="Incomplete submission"
action={
<Button size="compact">Complete now</Button>
}
>
Your ethics application is missing required attachments. Please upload them before the deadline.
</Alert>
),
}
// --- With close and action ---
export const WithCloseAndAction: Story = {
render: () => (
<Alert
variant="error"
title="Upload failed"
onClose={() => {}}
action={
<Button size="compact" intent="danger">Retry upload</Button>
}
>
The file could not be uploaded due to a network error. Please check your connection and try again.
</Alert>
),
}
// --- Title only ---
export const TitleOnly: Story = {
args: {
variant: 'success',
title: 'Changes saved successfully.',
},
}
// --- Content only ---
export const ContentOnly: Story = {
args: {
variant: 'neutral',
children: 'This project is in read-only mode. Contact the project owner to request edit access.',
},
}
// --- All variants ---
export const AllVariants: Story = {
render: () => (
<div className="flex flex-col gap-4">
<Alert variant="info" title="Alert title" onClose={() => {}}
action={<Button size="compact">Optional action</Button>}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</Alert>
<Alert variant="warning" title="Alert title" onClose={() => {}}
action={<Button size="compact">Optional action</Button>}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</Alert>
<Alert variant="error" title="Alert title" onClose={() => {}}
action={<Button size="compact">Optional action</Button>}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</Alert>
<Alert variant="success" title="Alert title" onClose={() => {}}
action={<Button size="compact">Optional action</Button>}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</Alert>
<Alert variant="neutral" title="Alert title" onClose={() => {}}
action={<Button size="compact">Optional action</Button>}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
</Alert>
</div>
),
}