adilalloandCursor
24a9615c0c
Method cards, chips, and the right rail now share the two-column shell; last options clear the footer fade, See all stays under the stack, and the left heading no longer jumps when the list expands. Co-authored-by: Cursor <cursoragent@cursor.com>
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
||
import {
|
||
CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
|
||
CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
|
||
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
|
||
CREATE_FLOW_WIDE_MAX_CLASS,
|
||
CREATE_FLOW_MD_CENTERED_MAIN_CLASS,
|
||
CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
|
||
CREATE_FLOW_PAGE_GUTTER_CLASS,
|
||
CREATE_FLOW_FIXED_TOP_BANNER_OFFSET_CLASS,
|
||
CREATE_FLOW_SCROLL_END_PAD_CLASS,
|
||
CREATE_FLOW_VIEWPORT_FRAME_CLASS,
|
||
getCreateFlowContentMaxClass,
|
||
} from "../../app/(app)/create/components/createFlowLayoutTokens";
|
||
|
||
describe("createFlowLayoutTokens", () => {
|
||
it("exports create-flow column and two-column max class strings", () => {
|
||
expect(CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS).toBe(
|
||
"w-full min-w-0 lg:max-w-[640px]",
|
||
);
|
||
expect(CREATE_FLOW_MD_UP_GRID_CELL_CLASS).toBe(
|
||
"w-full min-w-0 lg:mx-auto lg:max-w-[640px]",
|
||
);
|
||
expect(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS).toBe(
|
||
"w-full min-w-0 lg:max-w-[1328px]",
|
||
);
|
||
expect(CREATE_FLOW_WIDE_MAX_CLASS).toBe("w-full min-w-0 lg:max-w-[1440px]");
|
||
});
|
||
|
||
it("uses one gutter scale across the six viewport bands", () => {
|
||
expect(CREATE_FLOW_PAGE_GUTTER_CLASS).toBe("px-5 md:px-12 lg:px-16");
|
||
});
|
||
|
||
it("offsets fixed top banners below the create-flow header", () => {
|
||
expect(CREATE_FLOW_FIXED_TOP_BANNER_OFFSET_CLASS).toBe("top-14 md:top-16");
|
||
});
|
||
|
||
it("sizes the wizard frame with dynamic viewport height", () => {
|
||
expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("h-dvh");
|
||
expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("max-h-dvh");
|
||
});
|
||
|
||
it("pads option scrollports past the footer scrim", () => {
|
||
expect(CREATE_FLOW_SCROLL_END_PAD_CLASS).toBe("pb-12");
|
||
});
|
||
|
||
it("centers review lockup+card steps in the nav–footer band from md", () => {
|
||
expect(CREATE_FLOW_MD_CENTERED_MAIN_CLASS).toBe(
|
||
"items-start justify-center overflow-y-auto",
|
||
);
|
||
expect(CREATE_FLOW_MD_CENTERED_SHELL_CLASS).toBe("md:my-auto md:pt-0");
|
||
});
|
||
|
||
it("aligns the action bar max-width with the step content column", () => {
|
||
expect(getCreateFlowContentMaxClass({ step: "community-name" })).toBe(
|
||
CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
|
||
);
|
||
expect(getCreateFlowContentMaxClass({ step: "community-structure" })).toBe(
|
||
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
|
||
);
|
||
expect(
|
||
getCreateFlowContentMaxClass({ step: "communication-methods" }),
|
||
).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
|
||
expect(getCreateFlowContentMaxClass({ step: "final-review" })).toBe(
|
||
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
|
||
);
|
||
expect(
|
||
getCreateFlowContentMaxClass({
|
||
step: "informational",
|
||
isTemplateReview: true,
|
||
}),
|
||
).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
|
||
expect(
|
||
getCreateFlowContentMaxClass({
|
||
step: null,
|
||
isTemplatesPicker: true,
|
||
}),
|
||
).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
|
||
});
|
||
});
|