@homefile/components-v2 2.62.0 → 2.63.1

package/dist/stories/onboarding/PageTitle.stories.js

@@ -1,4 +1,14 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, within } from '@storybook/test';
 import { PageTitle } from '../../components';
 export default {
     title: 'Components/Onboarding',
@@ -10,3 +20,24 @@ export const PageTitleComponent = (args) => {
 PageTitleComponent.args = {
     title: "Page's title",
 };
+const DESCRIPTION = 'Log in to your Homefile account to connect this phone. Then Homi will know it’s you.';
+export const PageTitleWithDescription = {
+    args: {
+        title: 'Connect (512) 555-0147',
+        description: DESCRIPTION,
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const title = canvas.getByText('Connect (512) 555-0147');
+        const description = canvas.getByText(DESCRIPTION);
+        // The line sits under the title, centred like it, and is never cut off.
+        yield expect(description.getBoundingClientRect().top).toBeGreaterThanOrEqual(title.getBoundingClientRect().bottom);
+        yield expect(getComputedStyle(description).textAlign).toBe('center');
+        const descriptionStyle = getComputedStyle(description);
+        yield expect(descriptionStyle.getPropertyValue('-webkit-line-clamp')).toBe('none');
+        yield expect(descriptionStyle.overflow).toBe('visible');
+        // Centred text wraps into even lines; line height at most 4px over the font size.
+        yield expect(descriptionStyle.getPropertyValue('text-wrap-style')).toBe('balance');
+        yield expect(parseFloat(descriptionStyle.lineHeight) - parseFloat(descriptionStyle.fontSize)).toBeLessThanOrEqual(4);
+    }),
+};

package/dist/stories/onboarding/pages/ActivateAccount.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { ActivateAccountI } from '../../../interfaces';
 declare const _default: Meta<ActivateAccountI>;
 export default _default;
@@ -9,3 +9,5 @@ export declare const ActivateAccountPage: {
         isLoading: boolean;
     };
 };
+export declare const ActivateAccountPhone: StoryObj<ActivateAccountI>;
+export declare const ActivateAccountSmallTablet: StoryObj<ActivateAccountI>;

package/dist/stories/onboarding/pages/ActivateAccount.stories.js

@@ -1,6 +1,17 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
+import { fn, within } from '@storybook/test';
 import { ActivateAccount } from '../../../components';
+import { PHONE, SMALL_TABLET, expectCardAtTop, expectCardBelowTopGap, expectCardFullWidth, expectPageFillsScreen, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: ActivateAccount,
@@ -12,3 +23,33 @@ ActivateAccountPage.args = {
     name: 'Matthew',
     isLoading: true,
 };
+// Activate account on a phone: like sign in, the card starts at the top, spans
+// the screen and runs down to the bottom of it; its text keeps 13px from the
+// sides.
+export const ActivateAccountPhone = {
+    parameters: PHONE,
+    args: {
+        name: 'Jordan',
+        isLoading: false,
+        handleActivateBt: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            instruction: canvas.getByText('To complete your Homefile registration process, please click on the button below to confirm and activate your account.'),
+            signature: canvas.getByText('Your Homefile Crew'),
+        });
+        yield expectPageFillsScreen(card);
+    }),
+};
+// Activate account on a small tablet (744px): the card keeps the top gap.
+export const ActivateAccountSmallTablet = {
+    parameters: SMALL_TABLET,
+    args: ActivateAccountPhone.args,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        yield expectCardBelowTopGap(getCard(canvasElement));
+    }),
+};

package/dist/stories/onboarding/pages/EmailValidation.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { EmailValidationI } from '../../../interfaces';
 declare const _default: Meta<EmailValidationI>;
 export default _default;
@@ -9,3 +9,5 @@ export declare const EmailValidationPage: {
         isLoading: boolean;
     };
 };
+export declare const EmailValidationPhone: StoryObj<EmailValidationI>;
+export declare const EmailValidationSmallTablet: StoryObj<EmailValidationI>;

package/dist/stories/onboarding/pages/EmailValidation.stories.js

@@ -1,6 +1,17 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
+import { fn, within } from '@storybook/test';
 import { EmailValidation } from '../../../components';
+import { PHONE, SMALL_TABLET, expectCardAtTop, expectCardBelowTopGap, expectCardFullWidth, expectContentSides, expectPageFillsScreen, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: EmailValidation,
@@ -12,3 +23,35 @@ EmailValidationPage.args = {
     email: 'user@user.com.br',
     isLoading: true,
 };
+// The check-your-email page on a phone: like sign in, the card starts at the
+// top, spans the screen and runs down to the bottom of it; the title and the
+// button keep 13px from its sides.
+export const EmailValidationPhone = {
+    parameters: PHONE,
+    args: {
+        email: 'jordan@example.com',
+        isLoading: false,
+        handleResendBt: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectContentSides(card, {
+            title: canvas.getByText('jordan@example.com').parentElement,
+        });
+        yield expectSides(card, {
+            'Resend button': canvas.getByRole('button', { name: 'Resend Email Verification' }),
+        });
+        yield expectPageFillsScreen(card);
+    }),
+};
+// The check-your-email page on a small tablet (744px): the card keeps the top gap.
+export const EmailValidationSmallTablet = {
+    parameters: SMALL_TABLET,
+    args: EmailValidationPhone.args,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        yield expectCardBelowTopGap(getCard(canvasElement));
+    }),
+};

package/dist/stories/onboarding/pages/MessagePage.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MessagePageI } from '../../../interfaces';
+declare const _default: Meta<MessagePageI>;
+export default _default;
+export declare const Connected: StoryObj<MessagePageI>;
+export declare const Expired: StoryObj<MessagePageI>;
+export declare const TooManyTries: StoryObj<MessagePageI>;
+export declare const ConnectedElsewhere: StoryObj<MessagePageI>;
+export declare const Support: StoryObj<MessagePageI>;

package/dist/stories/onboarding/pages/MessagePage.stories.js

@@ -0,0 +1,73 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { expect, within } from '@storybook/test';
+import { MessagePage } from '../../../components';
+import { PHONE, expectCardAtTop, expectCardFullWidth, expectSides, getCard, } from '../phoneLayout';
+export default {
+    title: 'Pages/Onboarding/Message Page',
+    component: MessagePage,
+    // A whole page on a phone: edge to edge, at 390x844.
+    parameters: PHONE,
+};
+const BACK_TO_TEXTS = { actionLabel: 'Back to my texts', actionHref: 'sms:' };
+// Every message page shows its whole title and line; the button only when it has
+// both a label and a link, and then it opens the texting app.
+const play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement, args }) {
+    var _b;
+    const canvas = within(canvasElement);
+    const title = canvas.getByText(args.title);
+    yield expect(title).toBeVisible();
+    yield expect(getComputedStyle(title).getPropertyValue('-webkit-line-clamp')).toBe('none');
+    yield expect(getComputedStyle(title).overflow).toBe('visible');
+    yield expect(canvas.getByText(args.description)).toBeVisible();
+    const links = canvas.queryAllByRole('link');
+    if (args.actionLabel && args.actionHref) {
+        yield expect(links).toHaveLength(1);
+        yield expect(links[0]).toHaveTextContent(args.actionLabel);
+        yield expect((_b = links[0].getAttribute('href')) === null || _b === void 0 ? void 0 : _b.startsWith('sms:')).toBe(true);
+    }
+    else {
+        yield expect(links).toHaveLength(0);
+        yield expect(canvas.queryAllByRole('button')).toHaveLength(0);
+    }
+    // On a phone: full screen, no bar on top, and the button 13px from the sides.
+    const card = getCard(canvasElement);
+    yield expectCardAtTop(card);
+    yield expectCardFullWidth(card);
+    if (links.length > 0) {
+        yield expectSides(card, { [`${args.actionLabel} button`]: links[0] });
+    }
+});
+export const Connected = {
+    args: Object.assign({ title: '(512) 555-0147 is connected', description: 'Go back to your texts. Homi will know it’s you now.' }, BACK_TO_TEXTS),
+    play,
+};
+export const Expired = {
+    args: Object.assign({ title: 'This link has expired', description: 'Text Homi and ask for a new one.' }, BACK_TO_TEXTS),
+    play,
+};
+export const TooManyTries = {
+    args: Object.assign({ title: 'Too many tries', description: 'Text Homi for a new link later.' }, BACK_TO_TEXTS),
+    play,
+};
+export const ConnectedElsewhere = {
+    args: {
+        title: 'This phone is already connected to a different Homefile account',
+        description: 'If that’s wrong, contact support@homefile.com.',
+    },
+    play,
+};
+export const Support = {
+    args: {
+        title: 'We can’t connect this phone here',
+        description: 'Contact support@homefile.com and we’ll help.',
+    },
+    play,
+};

package/dist/stories/onboarding/pages/NewPassword.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { NewPasswordI } from '../../../interfaces';
 declare const _default: Meta<NewPasswordI>;
 export default _default;
@@ -28,3 +28,5 @@ export declare const NewPasswordNoAnswer: {
         supportEmail: string;
     };
 };
+export declare const NewPasswordPhone: StoryObj<NewPasswordI>;
+export declare const NewPasswordSmallTablet: StoryObj<NewPasswordI>;

package/dist/stories/onboarding/pages/NewPassword.stories.js

@@ -1,5 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { fn, within } from '@storybook/test';
 import { NewPassword, CloudsAnimation } from '../../../components';
+import { PHONE, SMALL_TABLET, expectCardAtTop, expectCardBelowTopGap, expectCardFullWidth, expectPageFillsScreen, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: NewPassword,
@@ -28,3 +39,36 @@ NewPasswordNoAnswer.args = {
     errorMessage: "We couldn't reach Homefile. Check your connection, then press Reset Password.",
     supportEmail: 'support@homefile.com',
 };
+// New password on a phone: the card starts at the top, spans the screen and
+// runs down to the copyright at the bottom of the screen, like sign in; the
+// fields and the button keep 13px from its sides.
+export const NewPasswordPhone = {
+    parameters: PHONE,
+    args: {
+        isLoading: false,
+        userEmail: 'jordan@example.com',
+        handleReset: fn(),
+    },
+    render: (args) => (_jsx(CloudsAnimation, { children: _jsx(NewPassword, Object.assign({}, args)) })),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            'password field': canvasElement.querySelector('input#password'),
+            'confirm field': canvasElement.querySelector('input#confirmPassword'),
+            'Reset Password button': canvas.getByRole('button', { name: 'Reset Password' }),
+        });
+        yield expectPageFillsScreen(card);
+    }),
+};
+// New password on a small tablet (744px): the card keeps the top gap.
+export const NewPasswordSmallTablet = {
+    parameters: SMALL_TABLET,
+    args: NewPasswordPhone.args,
+    render: NewPasswordPhone.render,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        yield expectCardBelowTopGap(getCard(canvasElement));
+    }),
+};

package/dist/stories/onboarding/pages/ResendResetPassword.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { EmailValidationI } from '../../../interfaces';
 declare const _default: Meta<EmailValidationI>;
 export default _default;
@@ -9,3 +9,5 @@ export declare const ResendResetPasswordPage: {
         isLoading: boolean;
     };
 };
+export declare const ResendResetPasswordPhone: StoryObj<EmailValidationI>;
+export declare const ResendResetPasswordSmallTablet: StoryObj<EmailValidationI>;

package/dist/stories/onboarding/pages/ResendResetPassword.stories.js

@@ -1,5 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { fn, within } from '@storybook/test';
 import { ResendResetPassword, CloudsAnimation } from '../../../components';
+import { PHONE, SMALL_TABLET, expectCardAtTop, expectCardBelowTopGap, expectCardFullWidth, expectContentSides, expectPageFillsScreen, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: ResendResetPassword,
@@ -11,3 +22,39 @@ ResendResetPasswordPage.args = {
     email: 'user@user.com.br',
     isLoading: true,
 };
+// The reset-email-sent page on a phone: like sign in, the card starts at the
+// top and runs down to the bottom of the screen; its title and buttons keep
+// 13px from the sides.
+export const ResendResetPasswordPhone = {
+    parameters: PHONE,
+    args: {
+        email: 'jordan@example.com',
+        isLoading: false,
+        handleResendBt: fn(),
+        handleBack: fn(),
+    },
+    render: (args) => (_jsx(CloudsAnimation, { children: _jsx(ResendResetPassword, Object.assign({}, args)) })),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectContentSides(card, {
+            title: canvas.getByText('jordan@example.com').parentElement,
+        });
+        yield expectSides(card, {
+            'Resend button': canvas.getByRole('button', { name: 'Resend Reset Password Link' }),
+            'Back to Log In button': canvas.getByRole('button', { name: 'Back to Log In' }),
+        });
+        yield expectPageFillsScreen(card);
+    }),
+};
+// The reset-email-sent page on a small tablet (744px): the card keeps the top gap.
+export const ResendResetPasswordSmallTablet = {
+    parameters: SMALL_TABLET,
+    args: ResendResetPasswordPhone.args,
+    render: ResendResetPasswordPhone.render,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        yield expectCardBelowTopGap(getCard(canvasElement));
+    }),
+};

package/dist/stories/onboarding/pages/ResetPassword.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { ResetPasswordI } from '../../../interfaces';
 declare const _default: Meta<ResetPasswordI>;
 export default _default;
@@ -9,3 +9,5 @@ export declare const ResetPasswordPage: {
         resetError: boolean;
     };
 };
+export declare const ResetPasswordPhone: StoryObj<ResetPasswordI>;
+export declare const ResetPasswordSmallTablet: StoryObj<ResetPasswordI>;

package/dist/stories/onboarding/pages/ResetPassword.stories.js

@@ -1,5 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { fn, within } from '@storybook/test';
 import { ResetPassword, CloudsAnimation } from '../../../components';
+import { PHONE, SMALL_TABLET, expectCardAtTop, expectCardBelowTopGap, expectCardFullWidth, expectPageFillsScreen, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: ResetPassword,
@@ -11,3 +22,37 @@ ResetPasswordPage.args = {
     isLoading: false,
     resetError: false,
 };
+// Reset password on a phone: the card starts at the top, spans the screen and
+// runs down to the copyright at the bottom of the screen, like sign in; the
+// field, the button and the Log-in box keep 13px from its sides.
+export const ResetPasswordPhone = {
+    parameters: PHONE,
+    args: {
+        isLoading: false,
+        resetError: false,
+        handleReset: fn(),
+        handleSignIn: fn(),
+    },
+    render: (args) => (_jsx(CloudsAnimation, { children: _jsx(ResetPassword, Object.assign({}, args)) })),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            'email field': canvasElement.querySelector('input#email'),
+            'Reset Password button': canvas.getByRole('button', { name: 'Reset Password' }),
+            'Log-in box': canvas.getByRole('button', { name: 'Log in' }).parentElement,
+        });
+        yield expectPageFillsScreen(card);
+    }),
+};
+// Reset password on a small tablet (744px): the card keeps the top gap.
+export const ResetPasswordSmallTablet = {
+    parameters: SMALL_TABLET,
+    args: ResetPasswordPhone.args,
+    render: ResetPasswordPhone.render,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        yield expectCardBelowTopGap(getCard(canvasElement));
+    }),
+};

package/dist/stories/onboarding/pages/SignIn.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { SignInI } from '../../../interfaces';
 declare const _default: Meta;
 export default _default;
@@ -10,5 +10,14 @@ export declare const SignInPage: {
             email: string;
             password: string;
         };
+        handleForgotPassword: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        handleSignIn: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        handleSignUp: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
+    play({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }): Promise<void>;
 };
+export declare const SignInConnect: StoryObj<SignInI>;
+export declare const SignInPartnerPhone: StoryObj<SignInI>;
+export declare const SignInSmallTablet: StoryObj<SignInI>;

package/dist/stories/onboarding/pages/SignIn.stories.js

@@ -1,5 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, fn, within } from '@storybook/test';
 import { SignIn, CloudsAnimation } from '../../../components';
+import { PHONE, SMALL_TABLET, expectCardAtTop, expectCardFullWidth, expectNoCardShadow, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: SignIn,
@@ -13,4 +24,89 @@ export const SignInPage = (args) => {
 SignInPage.args = {
     isLoading: false,
     values: { email: 'damaprodutora@gmail.com', password: '123456' },
+    handleForgotPassword: fn(),
+    handleSignIn: fn(),
+    handleSignUp: fn(),
+};
+SignInPage.play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+    const canvas = within(canvasElement);
+    // The default page is unchanged: its own title and the Sign-up box.
+    yield expect(canvas.getByText('Please Log in')).toBeVisible();
+    yield expect(canvas.getByText('Don’t have a Homefile account?')).toBeVisible();
+    yield expect(canvas.getByRole('button', { name: 'Sign up' })).toBeVisible();
+});
+const CONNECT_HEADING = 'Connect (512) 555-0147';
+const CONNECT_LINE = 'Log in to your Homefile account to connect this phone. Then Homi will know it’s you.';
+// The page a texter reaches from Homi's link to connect their phone.
+export const SignInConnect = {
+    parameters: PHONE,
+    args: {
+        isLoading: false,
+        heading: CONNECT_HEADING,
+        description: CONNECT_LINE,
+        handleForgotPassword: fn(),
+        handleSignIn: fn(),
+        handleGoogleSignIn: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        yield expect(canvas.getByText(CONNECT_HEADING)).toBeVisible();
+        yield expect(canvas.getByText(CONNECT_LINE)).toBeVisible();
+        yield expect(canvas.getByRole('button', { name: 'Continue with Google' })).toBeVisible();
+        yield expect(canvas.getByRole('button', { name: 'Log in' })).toBeVisible();
+        // No way to make a new account here, and no Apple button.
+        yield expect(canvas.queryByText('Don’t have a Homefile account?')).toBeNull();
+        yield expect(canvas.queryByRole('button', { name: 'Sign up' })).toBeNull();
+        yield expect(canvas.queryByRole('button', { name: 'Continue with Apple' })).toBeNull();
+        // On a phone: full screen, no bar on top, 13px sides.
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            'Google button': canvas.getByRole('button', { name: 'Continue with Google' }),
+            'email field': canvasElement.querySelector('input#email'),
+            'password field': canvasElement.querySelector('input#password'),
+            'Log in button': canvas.getByRole('button', { name: 'Log in' }),
+        });
+    }),
+};
+// The partner sign-in on a phone: the partner header, the form and the Sign-up
+// box all keep 13px from the sides of the screen.
+export const SignInPartnerPhone = {
+    parameters: PHONE,
+    args: {
+        isPartner: true,
+        isLoading: false,
+        handleForgotPassword: fn(),
+        handleSignIn: fn(),
+        handleSignUp: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            'partner header': [
+                canvas.getByAltText('Homefile'),
+                canvas.getByText('Partner Admin'),
+            ],
+            'email field': canvasElement.querySelector('input#email'),
+            'password field': canvasElement.querySelector('input#password'),
+            'Log in button': canvas.getByRole('button', { name: 'Log in' }),
+            'Sign-up box': canvas.getByText('Don’t have a Homefile Partner account?'),
+        });
+    }),
+};
+// Sign in on a small tablet (744px): still the full-screen page below 768px,
+// as in 2.63.0 (Matt kept sign in as it is at every width, 2026-10-08).
+export const SignInSmallTablet = {
+    parameters: SMALL_TABLET,
+    args: SignInConnect.args,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectNoCardShadow(card);
+    }),
 };

package/dist/stories/onboarding/pages/SignUp.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { SignUpI } from '../../../interfaces';
 declare const _default: Meta<SignUpI>;
 export default _default;
@@ -14,3 +14,4 @@ export declare const SignUpPage: {
         };
     };
 };
+export declare const SignUpPhone: StoryObj<SignUpI>;

package/dist/stories/onboarding/pages/SignUp.stories.js

@@ -1,5 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { fn, within } from '@storybook/test';
 import { CloudsAnimation, SignUp } from '../../../components';
+import { PHONE, expectCardAtTop, expectCardFullWidth, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: SignUp,
@@ -20,3 +31,26 @@ SignUpPage.args = {
     showPromoCode: true,
     values: valuesFilled,
 };
+// Sign up on a phone: full screen, no bar on top, and the form and the Log-in
+// box keep 13px from the sides of the screen.
+export const SignUpPhone = {
+    parameters: PHONE,
+    args: {
+        isLoading: false,
+        handleCreateAccount: fn(),
+        handleSignIn: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardAtTop(card);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            'name field': canvasElement.querySelector('input#name'),
+            'email field': canvasElement.querySelector('input#email'),
+            'password field': canvasElement.querySelector('input#password'),
+            'Create account button': canvas.getByRole('button', { name: 'Create account' }),
+            'Log-in box': canvas.getByText('Already have an account?'),
+        });
+    }),
+};

package/dist/stories/onboarding/pages/TwoFactor.stories.d.ts

@@ -1,5 +1,14 @@
-import { Meta } from '@storybook/react';
+import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { TwoFactorI } from '../../../interfaces';
 declare const _default: Meta<TwoFactorI>;
 export default _default;
-export declare const TwoFactorPage: (args: TwoFactorI) => import("react/jsx-runtime").JSX.Element;
+export declare const TwoFactorPage: {
+    (args: TwoFactorI): import("react/jsx-runtime").JSX.Element;
+    decorators: Decorator[];
+    play({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }): Promise<void>;
+};
+export declare const TwoFactorConnect: StoryObj<TwoFactorI>;
+export declare const TwoFactorConnectWrongCode: StoryObj<TwoFactorI>;
+export declare const TwoFactorConnectResendLimit: StoryObj<TwoFactorI>;