ars9
89016b01d2
- add Card header prop (primary/secondary variants) and footer prop (sticks to bottom) - add Breadcrumbs to all 5 pages; remove duplicate h1 headings - add pageToolbar layout for breadcrumbs + danger button aligned right - add DescriptionList component replacing raw dl/dt/dd markup; supports truncate+tooltip - rewrite ContextMenu to render dropdown via React portal to avoid clip/overflow issues - update EnvironmentCard to use Card header (primary), footer (Timestamp), and truncated DescriptionList - fix cog button contrast, square sizing, and right-edge alignment on colored header - add border to Timestamp pill for dark-mode visibility - add id badge pill styling to environment card header
86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { Card } from '../../src/ui/Card/Card';
|
|
import { Badge } from '../../src/ui/Badge/Badge';
|
|
import { Button } from '../../src/ui/Button/Button';
|
|
|
|
const meta: Meta<typeof Card> = {
|
|
title: 'UI/Card',
|
|
component: Card,
|
|
parameters: { layout: 'centered' },
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
(Story) => (
|
|
<div style={{ width: 360 }}>
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
argTypes: {
|
|
padding: { control: 'select', options: ['sm', 'md', 'lg'] },
|
|
headerVariant: { control: 'select', options: ['primary', 'secondary'] },
|
|
},
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<typeof Card>;
|
|
|
|
export const Default: Story = {
|
|
args: { children: 'Card content goes here.', padding: 'md' },
|
|
};
|
|
|
|
export const WithPrimaryHeader: Story = {
|
|
args: {
|
|
header: 'Section Title',
|
|
headerVariant: 'primary',
|
|
children: 'Card content with a primary header.',
|
|
},
|
|
};
|
|
|
|
export const WithSecondaryHeader: Story = {
|
|
args: {
|
|
header: 'Section Title',
|
|
headerVariant: 'secondary',
|
|
children: 'Card content with a secondary header.',
|
|
},
|
|
};
|
|
|
|
export const WithFooter: Story = {
|
|
args: {
|
|
header: 'My Card',
|
|
headerVariant: 'primary',
|
|
children: 'Card body content.',
|
|
footer: 'Last updated 2 minutes ago',
|
|
},
|
|
};
|
|
|
|
export const ScenarioCard: Story = {
|
|
render: () => (
|
|
<Card>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
marginBottom: 8,
|
|
}}
|
|
>
|
|
<span style={{ fontWeight: 600, fontSize: 14 }}>Login flow</span>
|
|
<Badge variant="success" dot>
|
|
Passed
|
|
</Badge>
|
|
</div>
|
|
<p style={{ margin: '0 0 16px', fontSize: 13, color: 'var(--color-text-muted)' }}>
|
|
Last run 2 minutes ago · 4 steps
|
|
</p>
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|
<Button size="sm" variant="primary">
|
|
Run
|
|
</Button>
|
|
<Button size="sm" variant="ghost">
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
),
|
|
};
|