62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
|
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||
|
|
import { PanelHeader } from "@shared/components/PanelHeader";
|
||
|
|
import { Button } from "@shared/components/Button";
|
||
|
|
import { StatusBadge } from "@shared/components/StatusBadge";
|
||
|
|
|
||
|
|
const meta: Meta<typeof PanelHeader> = {
|
||
|
|
title: "Primitives/PanelHeader",
|
||
|
|
component: PanelHeader,
|
||
|
|
tags: ["autodocs"],
|
||
|
|
parameters: { layout: "padded" },
|
||
|
|
args: {
|
||
|
|
title: "Pipeline detail",
|
||
|
|
subtitle: "COI Compliance · us-east-1",
|
||
|
|
},
|
||
|
|
argTypes: { onBack: { action: "back" } },
|
||
|
|
};
|
||
|
|
export default meta;
|
||
|
|
type Story = StoryObj<typeof PanelHeader>;
|
||
|
|
|
||
|
|
/** Toggle title / subtitle / onBack / actions in controls. */
|
||
|
|
export const Playground: Story = {};
|
||
|
|
|
||
|
|
export const WithActions: Story = {
|
||
|
|
args: {
|
||
|
|
subtitle: "Last deploy 14m ago · golden set 48/48",
|
||
|
|
actions: (
|
||
|
|
<>
|
||
|
|
<StatusBadge tone="success" pulse>
|
||
|
|
Healthy
|
||
|
|
</StatusBadge>
|
||
|
|
<Button size="sm" variant="outline">
|
||
|
|
Edit composition
|
||
|
|
</Button>
|
||
|
|
<Button size="sm" variant="gradient">
|
||
|
|
View runs
|
||
|
|
</Button>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Everything: Story = {
|
||
|
|
args: {
|
||
|
|
title: "Pipeline detail — COI Compliance",
|
||
|
|
subtitle: "Forked from Compliance Pack · 1,287 docs / 24h",
|
||
|
|
onBack: () => {},
|
||
|
|
actions: (
|
||
|
|
<>
|
||
|
|
<StatusBadge tone="success" pulse>
|
||
|
|
Healthy
|
||
|
|
</StatusBadge>
|
||
|
|
<Button size="sm" variant="outline">
|
||
|
|
Edit composition
|
||
|
|
</Button>
|
||
|
|
<Button size="sm" variant="gradient">
|
||
|
|
View runs
|
||
|
|
</Button>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
};
|