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 { AuthErrorMessage } from "../auth-error-message";
|
||||||
import { AuthFacebookPanel } from "../auth-facebook-panel";
|
import { AuthFacebookPanel } from "../auth-facebook-panel";
|
||||||
import { AuthLegalText } from "../auth-legal-text";
|
import { AuthLegalText } from "../auth-legal-text";
|
||||||
|
import { AuthPanel } from "../auth-panel";
|
||||||
import { AuthPrimaryButton } from "../auth-primary-button";
|
import { AuthPrimaryButton } from "../auth-primary-button";
|
||||||
import { AuthSocialButton } from "../auth-social-button";
|
import { AuthSocialButton } from "../auth-social-button";
|
||||||
import { AuthTextField } from "../auth-text-field";
|
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", () => {
|
describe("auth Tailwind components", () => {
|
||||||
it("renders AuthErrorMessage only when a message is present", () => {
|
it("renders AuthErrorMessage only when a message is present", () => {
|
||||||
expect(renderToStaticMarkup(<AuthErrorMessage message={null} />)).toBe("");
|
expect(renderToStaticMarkup(<AuthErrorMessage message={null} />)).toBe("");
|
||||||
@@ -76,6 +81,15 @@ describe("auth Tailwind components", () => {
|
|||||||
expect(html).toContain("%2Fimages%2Fauth%2Fbg-login.png");
|
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", () => {
|
it("renders AuthSocialButton with Tailwind button layout", () => {
|
||||||
const html = renderToStaticMarkup(
|
const html = renderToStaticMarkup(
|
||||||
<AuthSocialButton icon={<span>G</span>}>Continue</AuthSocialButton>,
|
<AuthSocialButton icon={<span>G</span>}>Continue</AuthSocialButton>,
|
||||||
|
|||||||
@@ -29,7 +29,12 @@ export function AuthPanel() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex min-h-0 w-full flex-auto flex-col">
|
<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" ? (
|
{state.authPanelMode === "facebook" ? (
|
||||||
<AuthFacebookPanel onSwitchToEmail={switchToEmail} />
|
<AuthFacebookPanel onSwitchToEmail={switchToEmail} />
|
||||||
|
|||||||
Reference in New Issue
Block a user