feat(auth-panel): enhance BackButton layout with Tailwind classes
This commit is contained in:
@@ -6,6 +6,7 @@ import { AuthEmailPanel } from "../auth-email-panel";
|
||||
import { AuthErrorMessage } from "../auth-error-message";
|
||||
import { AuthFacebookPanel } from "../auth-facebook-panel";
|
||||
import { AuthLegalText } from "../auth-legal-text";
|
||||
import { AuthPanel } from "../auth-panel";
|
||||
import { AuthPrimaryButton } from "../auth-primary-button";
|
||||
import { AuthSocialButton } from "../auth-social-button";
|
||||
import { AuthTextField } from "../auth-text-field";
|
||||
@@ -23,6 +24,10 @@ vi.mock("@/stores/auth/auth-context", () => ({
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("@/router/use-app-navigator", () => ({
|
||||
useAppNavigator: () => ({ back: vi.fn() }),
|
||||
}));
|
||||
|
||||
describe("auth Tailwind components", () => {
|
||||
it("renders AuthErrorMessage only when a message is present", () => {
|
||||
expect(renderToStaticMarkup(<AuthErrorMessage message={null} />)).toBe("");
|
||||
@@ -76,6 +81,15 @@ describe("auth Tailwind components", () => {
|
||||
expect(html).toContain("%2Fimages%2Fauth%2Fbg-login.png");
|
||||
});
|
||||
|
||||
it("positions the back button from the auth screen top-left inset", () => {
|
||||
const html = renderToStaticMarkup(<AuthPanel />);
|
||||
|
||||
expect(html).toContain('data-analytics-key="auth.back"');
|
||||
expect(html).toContain("absolute left-0 top-0 z-2");
|
||||
expect(html).toContain("size-(--responsive-icon-button-size,42px)");
|
||||
expect(html).not.toContain("left-[calc(var(--spacing-xl,20px)");
|
||||
});
|
||||
|
||||
it("renders AuthSocialButton with Tailwind button layout", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<AuthSocialButton icon={<span>G</span>}>Continue</AuthSocialButton>,
|
||||
|
||||
@@ -29,7 +29,12 @@ export function AuthPanel() {
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-0 w-full flex-auto flex-col">
|
||||
<BackButton onClick={handleBack} analyticsKey="auth.back" />
|
||||
<BackButton
|
||||
onClick={handleBack}
|
||||
variant="soft"
|
||||
className="absolute left-0 top-0 z-2"
|
||||
analyticsKey="auth.back"
|
||||
/>
|
||||
|
||||
{state.authPanelMode === "facebook" ? (
|
||||
<AuthFacebookPanel onSwitchToEmail={switchToEmail} />
|
||||
|
||||
Reference in New Issue
Block a user