78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import { Alert, AlertDescription, AlertTitle, Badge } from "@ai-ui/ui";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
|
|
function SparkIcon() {
|
|
return (
|
|
<svg aria-hidden="true" className="size-4" fill="none" viewBox="0 0 16 16">
|
|
<path
|
|
d="M8 1.75L9.45 5.2L12.9 6.65L9.45 8.1L8 11.55L6.55 8.1L3.1 6.65L6.55 5.2L8 1.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const meta = {
|
|
title: "Components/Alert",
|
|
component: Alert,
|
|
args: {
|
|
variant: "default"
|
|
},
|
|
argTypes: {
|
|
className: {
|
|
control: false
|
|
},
|
|
icon: {
|
|
control: false
|
|
},
|
|
variant: {
|
|
control: "radio",
|
|
options: ["default", "success", "warning", "destructive"]
|
|
}
|
|
},
|
|
parameters: {
|
|
layout: "centered"
|
|
},
|
|
tags: ["autodocs"]
|
|
} satisfies Meta<typeof Alert>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {
|
|
render: (args) => (
|
|
<Alert {...args} className="w-[460px]" icon={<SparkIcon />}>
|
|
<AlertTitle>Release status updated</AlertTitle>
|
|
<AlertDescription>
|
|
The approval chain changed. Review the new ownership before publishing.
|
|
</AlertDescription>
|
|
</Alert>
|
|
)
|
|
};
|
|
|
|
export const Variants: Story = {
|
|
render: () => (
|
|
<div className="grid w-[760px] gap-4">
|
|
<Alert icon={<SparkIcon />}>
|
|
<AlertTitle>Informational callout</AlertTitle>
|
|
<AlertDescription>
|
|
Pair with a <Badge className="ml-1">live</Badge> badge when status can change in real time.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<Alert icon={<SparkIcon />} variant="success">
|
|
<AlertTitle>Release approved</AlertTitle>
|
|
<AlertDescription>All reviewers signed off and rollout can begin.</AlertDescription>
|
|
</Alert>
|
|
<Alert icon={<SparkIcon />} variant="warning">
|
|
<AlertTitle>Missing follow-up</AlertTitle>
|
|
<AlertDescription>One checklist item is still unresolved for this launch.</AlertDescription>
|
|
</Alert>
|
|
<Alert icon={<SparkIcon />} variant="destructive">
|
|
<AlertTitle>Publishing blocked</AlertTitle>
|
|
<AlertDescription>Resolve validation issues before trying again.</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
)
|
|
};
|