@homefile/components-v2 2.63.0 → 2.64.0

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.64.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",