@homefile/components-v2 2.63.0 → 2.63.1

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

@@ -19,3 +19,5 @@ export declare const SignInPage: {
     }): 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

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 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,
@@ -38,6 +39,7 @@ 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,
@@ -56,5 +58,55 @@ export const SignInConnect = {
         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,12 +1,14 @@
-import { Meta, StoryObj } 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;
+    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>;

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

@@ -11,6 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
 import { expect, fn, within } from '@storybook/test';
 import { TwoFactor } from '../../../components';
+import { PHONE, expectCardAtTop, expectCardFullWidth, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: TwoFactor,
@@ -22,13 +23,13 @@ export default {
         onReset: (code) => alert(`Code submitted: ${code}`),
         onResend: () => alert('Resend code clicked'),
     },
-    decorators: [
-        (Story) => (_jsx(Box, { p: "base", children: _jsx(Story, {}) })),
-    ],
 };
 export const TwoFactorPage = (args) => {
     return _jsx(TwoFactor, Object.assign({}, args));
 };
+// The default page keeps its framed look; the connect stories render full-screen.
+const framed = (Story) => (_jsx(Box, { p: "base", children: _jsx(Story, {}) }));
+TwoFactorPage.decorators = [framed];
 TwoFactorPage.play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
     const canvas = within(canvasElement);
     // The default page is unchanged: its own title, subtitle and button.
@@ -37,43 +38,99 @@ TwoFactorPage.play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvas
     yield expect(canvas.getByRole('button', { name: 'Submit' })).toBeVisible();
 });
 const CONNECT_HEADING = 'Check your email';
-const CONNECT_LINE = 'We sent a 6-digit code to j•••••@example.com. Enter it to connect (512) 555-0147.';
-const CONNECT_WARNING = 'If someone sent you this link and asked you to log in, don’t enter the code.';
+const CONNECT_LINE = 'We sent a 6-digit code to j•••••@example.com. Enter it to connect (512) 555-0147. Keep this page open while you get your code.';
+// Matt, 2026-10-08: one calm line in normal type, in place of the bold warning.
+const CONNECT_NOTE = 'Only enter the code if (512) 555-0147 is your phone.';
 const WRONG_CODE = 'That code didn’t work. Check the email and try again.';
+// Matt, 2026-10-08T03:00:39Z: a press of "Resend new code" past the two resends
+// a link allows shows this line under the button; the button stays.
+const RESEND_LIMIT = "You've asked for 2 new codes. Text Homi for a new link if this one doesn't arrive.";
+// On a phone: full screen, no bar on top, 13px sides.
+const expectPhoneLayout = (canvasElement) => __awaiter(void 0, void 0, void 0, function* () {
+    const canvas = within(canvasElement);
+    const card = getCard(canvasElement);
+    yield expectCardAtTop(card);
+    yield expectCardFullWidth(card);
+    yield expectSides(card, {
+        'code field': canvas.getByPlaceholderText('Enter your code here'),
+        'Connect phone button': canvas.getByRole('button', { name: 'Connect phone' }),
+    });
+});
+// The calm line is on every state of the screen: in normal type, above the code
+// field, and on the screen without scrolling on a phone (Ken, v4.10 (d)).
+const expectCalmNote = (canvasElement) => __awaiter(void 0, void 0, void 0, function* () {
+    const canvas = within(canvasElement);
+    const note = canvas.getByText(CONNECT_NOTE);
+    yield expect(note).toBeVisible();
+    yield expect(Number(getComputedStyle(note).fontWeight), 'note weight').toBe(400);
+    const noteBottom = note.getBoundingClientRect().bottom;
+    const codeField = canvas.getByPlaceholderText('Enter your code here');
+    yield expect(noteBottom, 'note above the code field').toBeLessThanOrEqual(codeField.getBoundingClientRect().top);
+    yield expect(noteBottom, 'note on screen').toBeLessThanOrEqual(window.innerHeight);
+});
 const connectArgs = {
     twoFactorMethod: 'email',
     heading: CONNECT_HEADING,
     description: CONNECT_LINE,
-    warning: CONNECT_WARNING,
+    note: CONNECT_NOTE,
     submitLabel: 'Connect phone',
     onReset: fn(),
     onResend: fn(),
 };
 // The code step of the page a texter reaches from Homi's link.
 export const TwoFactorConnect = {
+    parameters: PHONE,
     args: connectArgs,
     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();
-        const warning = canvas.getByText(CONNECT_WARNING);
-        yield expect(warning).toBeVisible();
-        yield expect(Number(getComputedStyle(warning).fontWeight)).toBeGreaterThanOrEqual(600);
+        yield expectCalmNote(canvasElement);
         yield expect(canvas.getByRole('button', { name: 'Connect phone' })).toBeVisible();
         yield expect(canvas.getByRole('button', { name: 'Resend new code' })).toBeVisible();
         yield expect(canvas.queryByText('Please validate your identity to log in.')).toBeNull();
         yield expect(canvas.queryByRole('button', { name: 'Submit' })).toBeNull();
+        // No line under "Resend new code" unless the page passes one.
+        yield expect(canvas.queryByText(RESEND_LIMIT)).toBeNull();
+        yield expectPhoneLayout(canvasElement);
     }),
 };
-// After a wrong code: the error sits above the code field, and the warning stays.
+// After a wrong code: the error sits above the code field, and the calm line stays.
 export const TwoFactorConnectWrongCode = {
+    parameters: PHONE,
     args: Object.assign(Object.assign({}, connectArgs), { errorMessage: WRONG_CODE }),
     play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
         const canvas = within(canvasElement);
         const error = canvas.getByText(WRONG_CODE);
         yield expect(error).toBeVisible();
-        yield expect(canvas.getByText(CONNECT_WARNING)).toBeVisible();
+        yield expectCalmNote(canvasElement);
         const codeField = canvas.getByPlaceholderText('Enter your code here');
         yield expect(error.getBoundingClientRect().bottom).toBeLessThanOrEqual(codeField.getBoundingClientRect().top);
+        yield expect(canvas.queryByText(RESEND_LIMIT)).toBeNull();
+        yield expectPhoneLayout(canvasElement);
+    }),
+};
+// A press past the resend limit: a calm line under "Resend new code", in normal
+// type and without error styling; the button and the calm note stay.
+const resendLimitArgs = Object.assign(Object.assign({}, connectArgs), { resendNote: RESEND_LIMIT });
+export const TwoFactorConnectResendLimit = {
+    parameters: PHONE,
+    args: resendLimitArgs,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const line = canvas.getByText(RESEND_LIMIT);
+        yield expect(line).toBeVisible();
+        const resend = canvas.getByRole('button', { name: 'Resend new code' });
+        yield expect(resend).toBeVisible();
+        yield expect(line.getBoundingClientRect().top, 'line under the resend button').toBeGreaterThanOrEqual(resend.getBoundingClientRect().bottom);
+        yield expect(line.getBoundingClientRect().bottom, 'line on screen').toBeLessThanOrEqual(window.innerHeight);
+        const style = getComputedStyle(line);
+        const note = getComputedStyle(canvas.getByText(CONNECT_NOTE));
+        yield expect(Number(style.fontWeight), 'line weight').toBe(400);
+        yield expect(style.color, 'line colour (no error styling)').toBe(note.color);
+        yield expect(line.closest('[role="alert"], .chakra-form__error-message')).toBeNull();
+        yield expect(line.children).toHaveLength(0);
+        yield expectCalmNote(canvasElement);
+        yield expectPhoneLayout(canvasElement);
     }),
 };

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

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { WelcomePageI } from '../../../interfaces';
 declare const _default: Meta<WelcomePageI>;
 export default _default;
@@ -9,3 +9,4 @@ export declare const WelcomePage: {
         videoUrl: string;
     };
 };
+export declare const WelcomePhone: StoryObj<WelcomePageI>;

package/dist/stories/onboarding/pages/Welcome.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 { Welcome } from '../../../components';
+import { PHONE, expectCardFullWidth, expectSides, getCard } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: Welcome,
@@ -12,3 +23,21 @@ WelcomePage.args = {
     name: 'Sam',
     videoUrl: 'https://www.youtube.com/embed/rkt_YtZYRDI',
 };
+// The welcome page on a phone: the card spans the screen, and its text keeps
+// 13px from the sides.
+export const WelcomePhone = {
+    parameters: PHONE,
+    args: {
+        name: 'Jordan',
+        handleClick: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            message: canvas.getByText('We hope you enjoy your time with Homefile.'),
+            signature: canvas.getByText('Your Homefile Crew'),
+        });
+    }),
+};

package/dist/stories/onboarding/phoneLayout.d.ts

@@ -0,0 +1,20 @@
+export declare const PHONE: {
+    layout: string;
+    viewport: {
+        defaultViewport: string;
+    };
+};
+export declare const SMALL_TABLET: {
+    layout: string;
+    viewport: {
+        defaultViewport: string;
+    };
+};
+export declare const getCard: (canvasElement: HTMLElement) => HTMLElement;
+export declare const expectCardFullWidth: (card: HTMLElement) => Promise<void>;
+export declare const expectCardAtTop: (card: HTMLElement) => Promise<void>;
+export declare const expectCardBelowTopGap: (card: HTMLElement) => Promise<void>;
+export declare const expectNoCardShadow: (card: HTMLElement) => Promise<void>;
+export declare const expectPageFillsScreen: (card: HTMLElement) => Promise<void>;
+export declare const expectSides: (card: HTMLElement, elements: Record<string, Element | [Element, Element]>) => Promise<void>;
+export declare const expectContentSides: (card: HTMLElement, elements: Record<string, HTMLElement>) => Promise<void>;

package/dist/stories/onboarding/phoneLayout.js

@@ -0,0 +1,89 @@
+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 } from '@storybook/test';
+// Onboarding pages on a phone (Matt, 2026-10-07): the card fills the screen
+// from side to side, and its fields and buttons keep 13px from each side.
+// The full-screen pages also start at the very top, with no bar above the card.
+export const PHONE = {
+    layout: 'fullscreen',
+    viewport: { defaultViewport: 'iphone12' }, // 390x844
+};
+// A small tablet, between the 480px and 768px breakpoints (iPad mini, 744x1133).
+export const SMALL_TABLET = {
+    layout: 'fullscreen',
+    viewport: { defaultViewport: 'ipadmini' },
+};
+const SIDE = 13;
+// The onboarding top gap ('onboarding.top', 3.125rem).
+const TOP_GAP = 50;
+// The page's card: the first Chakra Container in the story.
+export const getCard = (canvasElement) => canvasElement.querySelector('.chakra-container');
+// The card spans the screen from side to side.
+export const expectCardFullWidth = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    const box = card.getBoundingClientRect();
+    yield expect(Math.round(box.left), 'card left').toBe(0);
+    yield expect(Math.round(box.right), 'card right').toBe(document.documentElement.clientWidth);
+});
+// The card starts at the very top of the screen: no bar above it.
+export const expectCardAtTop = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    yield expect(Math.round(card.getBoundingClientRect().top), 'card top').toBe(0);
+});
+// The card sits below the onboarding top gap, and is still a card: it has a
+// shadow and is narrower than the screen (tablets and desktops).
+export const expectCardBelowTopGap = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    yield expect(Math.round(card.getBoundingClientRect().top), 'card top').toBe(TOP_GAP);
+    yield expect(getComputedStyle(card).boxShadow, 'card shadow').not.toBe('none');
+    yield expect(Math.round(card.getBoundingClientRect().width), 'card width').toBeLessThan(document.documentElement.clientWidth);
+});
+// The card has no shadow: on a phone it is the page, not a card on it.
+export const expectNoCardShadow = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    yield expect(getComputedStyle(card).boxShadow, 'card shadow').toBe('none');
+});
+// The page ends at the bottom of the screen, as sign in does on a phone: the
+// card grows down to the copyright, and the copyright sits at the bottom of the
+// screen. A page without the copyright: the card reaches the bottom.
+export const expectPageFillsScreen = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    const cardBottom = card.getBoundingClientRect().bottom;
+    const footer = card.nextElementSibling;
+    if (!footer) {
+        yield expect(Math.round(cardBottom), 'card bottom').toBe(window.innerHeight);
+        return;
+    }
+    const box = footer.getBoundingClientRect();
+    const style = getComputedStyle(footer);
+    yield expect(Math.round(box.bottom + parseFloat(style.marginBottom)), 'page bottom').toBe(window.innerHeight);
+    yield expect(Math.round(cardBottom + parseFloat(style.marginTop)), 'card bottom').toBe(Math.round(box.top));
+});
+// Each element sits 13px in from both sides of the card. A row given as
+// [first, last] is measured from its first element's left side to its last
+// element's right side.
+export const expectSides = (card, elements) => __awaiter(void 0, void 0, void 0, function* () {
+    const box = card.getBoundingClientRect();
+    for (const [name, element] of Object.entries(elements)) {
+        const [first, last] = Array.isArray(element) ? element : [element, element];
+        const left = first.getBoundingClientRect().left;
+        const right = last.getBoundingClientRect().right;
+        yield expect(Math.round(left - box.left), `${name} left`).toBe(SIDE);
+        yield expect(Math.round(box.right - right), `${name} right`).toBe(SIDE);
+    }
+});
+// For a full-width block that sets the margin with its own padding (a centred
+// title): its content starts 13px in from both sides of the card.
+export const expectContentSides = (card, elements) => __awaiter(void 0, void 0, void 0, function* () {
+    const box = card.getBoundingClientRect();
+    for (const [name, element] of Object.entries(elements)) {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        const left = rect.left + parseFloat(style.borderLeftWidth) + parseFloat(style.paddingLeft);
+        const right = rect.right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+        yield expect(Math.round(left - box.left), `${name} left`).toBe(SIDE);
+        yield expect(Math.round(box.right - right), `${name} right`).toBe(SIDE);
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.63.0",
+  "version": "2.63.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",