3550b64032
In the pinned monitoring column (embedded), the single-line entry headers wrap badly. Add compact two-line variants gated on `embedded`: - HistoryEntry: line 1 = time + client/server badge + elapsed + status; line 2 = method (and target, truncated) on the left with the controls on the right, where Replay becomes an icon (new ReplayButton element) next to Pin/Expand. - NetworkEntry: line 1 = time + HTTP method + category + elapsed + status; line 2 = the URL in a horizontal ScrollArea (new Text `nowrap` variant) with the expand toggle on the right. The full-size (non-embedded) layouts are unchanged. `embedded` is threaded from the History/Network panels into the entries. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
19 lines
564 B
TypeScript
19 lines
564 B
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { expect, fn, within } from "storybook/test";
|
|
import { ReplayButton } from "./ReplayButton";
|
|
|
|
const meta: Meta<typeof ReplayButton> = {
|
|
title: "Elements/ReplayButton",
|
|
component: ReplayButton,
|
|
args: { onReplay: fn() },
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof ReplayButton>;
|
|
|
|
export const Default: Story = {
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
expect(canvas.getByRole("button", { name: "Replay" })).toBeInTheDocument();
|
|
},
|
|
};
|