feat(client): add Card header/footer, DescriptionList, and portal ContextMenu
- 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
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { DescriptionList } from '../../src/ui/DescriptionList/DescriptionList';
|
||||
|
||||
const meta: Meta<typeof DescriptionList> = {
|
||||
title: 'UI/DescriptionList',
|
||||
component: DescriptionList,
|
||||
parameters: { layout: 'centered' },
|
||||
tags: ['autodocs'],
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ width: 360 }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
argTypes: {
|
||||
layout: { control: 'select', options: ['inline', 'compact'] },
|
||||
},
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof DescriptionList>;
|
||||
|
||||
const urlItems = [
|
||||
{ term: 'ID_URL', detail: 'https://id.example.com/' },
|
||||
{ term: 'CABINET_URL', detail: 'https://cabinet.example.com/messages' },
|
||||
{ term: 'ADMIN_URL', detail: 'https://admin.example.com/' },
|
||||
];
|
||||
|
||||
export const Inline: Story = {
|
||||
args: { items: urlItems, layout: 'inline' },
|
||||
};
|
||||
|
||||
export const Compact: Story = {
|
||||
args: { items: urlItems, layout: 'compact' },
|
||||
};
|
||||
|
||||
export const WithLinks: Story = {
|
||||
args: {
|
||||
layout: 'inline',
|
||||
items: urlItems.map(({ term, detail }) => ({
|
||||
term,
|
||||
detail: (
|
||||
<a href={detail as string} target="_blank" rel="noopener noreferrer">
|
||||
{detail}
|
||||
</a>
|
||||
),
|
||||
})),
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user