banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(back-button): add dark variant and update tests for BackButton component

Browse Source
This commit is contained in:
chenhang
2026-07-13 16:10:10 +08:00
parent 3362fafa1c
commit 19857e8b9b
4 changed files with 40 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/_components/__tests__/tailwind-components.test.tsx
+7
View File
@@ -13,6 +13,9 @@ describe("shared Tailwind components", () => {
const actionHtml = renderToStaticMarkup(
<BackButton onClick={() => undefined} variant="ghost" />,
);
const darkHtml = renderToStaticMarkup(
<BackButton href="/splash" variant="dark" ariaLabel="Back to home" />,
);
expect(linkHtml).toContain('href="/chat"');
expect(linkHtml).toContain('aria-label="Back to chat"');
@@ -22,6 +25,10 @@ describe("shared Tailwind components", () => {
expect(actionHtml).toContain("<button");
expect(actionHtml).toContain("size-8");
expect(actionHtml).toContain("hover:opacity-70");
expect(darkHtml).toContain('href="/splash"');
expect(darkHtml).toContain('aria-label="Back to home"');
expect(darkHtml).toContain("bg-[rgba(13,11,20,0.7)]");
expect(darkHtml).toContain("text-white");
});
it("renders CharacterAvatar with dynamic sizing and image utilities", () => {
src/app/_components/back-button.tsx
+3 -1
View File
@@ -7,7 +7,7 @@ interface BackButtonBaseProps {
className?: string;
ariaLabel?: string;
iconSize?: number;
variant?: "floating" | "soft" | "ghost";
variant?: "floating" | "soft" | "ghost" | "dark";
}
type BackButtonLinkProps = BackButtonBaseProps & {
@@ -32,6 +32,8 @@ const VARIANT_CLASS_NAMES = {
"size-(--responsive-icon-button-size,42px) border border-[rgba(25,19,22,0.08)] bg-[rgba(255,255,255,0.82)] text-[#21191d] shadow-[0_10px_22px_rgba(50,30,40,0.08)] hover:-translate-y-px hover:bg-white hover:shadow-[0_14px_26px_rgba(50,30,40,0.12)] active:translate-y-px",
ghost:
"size-8 bg-transparent text-black hover:opacity-70 active:scale-96",
dark:
"size-(--responsive-icon-button-size,42px) border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-white shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md hover:bg-[rgba(28,24,39,0.82)] active:scale-96",
} satisfies Record<NonNullable<BackButtonBaseProps["variant"]>, string>;
export function BackButton({