@remit/ui 0.0.66 → 0.0.68

package/src/components/folder-tree-picker.render.test.ts

@@ -2,20 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
-import {
-	type FolderTreeNode,
-	FolderTreePicker,
-	folderTreePickerInternals,
-} from "./folder-tree-picker.js";
-
-const {
-	orderFolderNodes,
-	filterFolderTree,
-	matchesQuery,
-	findFirstSelectable,
-	findLastSelectable,
-	findNextSelectable,
-} = folderTreePickerInternals;
+import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
 
 const node = (
 	id: string,
@@ -33,9 +20,6 @@ const folders: FolderTreeNode[] = [
 	node("trash", "Trash", "Deleted Messages"),
 ];
 
-const paths = (rows: readonly { folder: FolderTreeNode }[]): string[] =>
-	rows.map((row) => row.folder.path);
-
 /** The opening tag of the element carrying `needle`, attribute order aside. */
 const tagWith = (html: string, needle: string): string => {
 	const at = html.indexOf(needle);
@@ -43,132 +27,6 @@ const tagWith = (html: string, needle: string): string => {
 	return html.slice(html.lastIndexOf("<", at), html.indexOf(">", at) + 1);
 };
 
-describe("folder ordering", () => {
-	it("puts every child straight after its parent", () => {
-		assert.deepEqual(
-			orderFolderNodes(folders, "/").map((folder) => folder.path),
-			[
-				"INBOX",
-				"Archive",
-				"Travel",
-				"Travel/Hotels",
-				"Travel/Hotels/Receipts",
-				"Deleted Messages",
-			],
-		);
-	});
-
-	it("renders a folder whose parent is absent as a root", () => {
-		const orphaned = [
-			node("archive", "Archive", "Archive"),
-			node("apollo", "Apollo", "Work/Projects/Apollo"),
-		];
-		assert.deepEqual(
-			orderFolderNodes(orphaned, "/").map((folder) => folder.path),
-			["Archive", "Work/Projects/Apollo"],
-		);
-	});
-
-	it("nests on the provider's separator", () => {
-		const dotted = [
-			node("child", "Hotels", "Travel.Hotels"),
-			node("other", "Archive", "Archive"),
-			node("parent", "Travel", "Travel"),
-		];
-		assert.deepEqual(
-			orderFolderNodes(dotted, ".").map((folder) => folder.path),
-			["Archive", "Travel", "Travel.Hotels"],
-		);
-	});
-});
-
-describe("filtering", () => {
-	const ordered = orderFolderNodes(folders, "/");
-
-	it("matches on the label", () => {
-		assert.equal(matchesQuery(node("a", "Archive", "Archive"), "arch"), true);
-	});
-
-	it("matches on the path, so a role-labelled folder is still findable", () => {
-		assert.equal(
-			matchesQuery(node("t", "Trash", "Deleted Messages"), "deleted"),
-			true,
-		);
-	});
-
-	it("keeps the ancestors of a match on screen", () => {
-		const rows = filterFolderTree(ordered, "receipts", "/");
-		assert.deepEqual(paths(rows), [
-			"Travel",
-			"Travel/Hotels",
-			"Travel/Hotels/Receipts",
-		]);
-	});
-
-	it("marks an ancestor kept for context as no match of its own", () => {
-		const rows = filterFolderTree(ordered, "receipts", "/");
-		assert.deepEqual(
-			rows.map((row) => row.context),
-			[true, true, false],
-		);
-	});
-
-	it("keeps a matching ancestor a match", () => {
-		const rows = filterFolderTree(ordered, "travel", "/");
-		assert.deepEqual(
-			rows.map((row) => row.context),
-			[false, false, false],
-		);
-	});
-
-	it("carries the depth the row indents by", () => {
-		const rows = filterFolderTree(ordered, "", "/");
-		assert.deepEqual(
-			rows.map((row) => row.depth),
-			[0, 0, 0, 1, 2, 0],
-		);
-	});
-
-	it("narrows to nothing when the query matches no folder", () => {
-		assert.deepEqual(filterFolderTree(ordered, "zzz", "/"), []);
-	});
-});
-
-describe("roving focus", () => {
-	const rows = filterFolderTree(
-		orderFolderNodes(folders, "/"),
-		"receipts",
-		"/",
-	);
-
-	it("skips context rows when finding the first destination", () => {
-		assert.equal(findFirstSelectable(rows), 2);
-	});
-
-	it("finds the last destination", () => {
-		assert.equal(findLastSelectable(rows), 2);
-	});
-
-	it("skips the current folder", () => {
-		const all = filterFolderTree(orderFolderNodes(folders, "/"), "", "/");
-		assert.equal(findFirstSelectable(all), 1);
-		assert.equal(findNextSelectable(all, 5, 1), 1);
-		assert.equal(findNextSelectable(all, 1, -1), 5);
-	});
-
-	it("returns -1 when nothing is selectable", () => {
-		const only = filterFolderTree(
-			orderFolderNodes([node("inbox", "Inbox", "INBOX", true)], "/"),
-			"",
-			"/",
-		);
-		assert.equal(findFirstSelectable(only), -1);
-		assert.equal(findLastSelectable(only), -1);
-		assert.equal(findNextSelectable(only, 0, 1), -1);
-		assert.equal(findNextSelectable([], 0, 1), -1);
-	});
-});
-
 describe("FolderTreePicker render", () => {
 	const render = (props: Partial<Parameters<typeof FolderTreePicker>[0]>) =>
 		renderToString(
@@ -179,17 +37,15 @@ describe("FolderTreePicker render", () => {
 			}),
 		);
 
-	it("renders the folders as a tree with a level per row", () => {
+	it("starts at the top level, with every row closed and openable", () => {
 		const html = render({});
 		assert.match(html, /role="tree"/);
-		assert.equal(html.match(/role="treeitem"/g)?.length, 6);
-		assert.match(
-			tagWith(html, 'aria-label="Move to Hotels"'),
-			/aria-level="2"/,
-		);
+		assert.equal(html.match(/role="treeitem"/g)?.length, 4);
+		assert.equal(html.match(/aria-expanded="false"/g)?.length, 4);
+		assert.doesNotMatch(html, /aria-label="Move to Hotels"/);
 		assert.match(
-			tagWith(html, 'aria-label="Move to Receipts"'),
-			/aria-level="3"/,
+			tagWith(html, 'aria-label="Move to Travel"'),
+			/aria-level="1"/,
 		);
 	});
 
@@ -217,14 +73,24 @@ describe("FolderTreePicker render", () => {
 		assert.doesNotMatch(html, /New folder/);
 	});
 
-	it("offers a create row at the top and one per folder", () => {
+	it("pins one create action above the tree and none inside a closed list", () => {
 		const html = render({
 			onCreateFolder: () =>
 				Promise.resolve(node("made", "Made", "Travel/Made")),
 		});
-		assert.match(html, /New folder<\/button>/);
-		assert.match(html, /aria-label="New folder inside Travel"/);
-		assert.match(html, /aria-label="New folder inside Inbox"/);
+		assert.equal(html.match(/aria-label="New folder"/g)?.length, 1);
+		assert.doesNotMatch(html, /aria-label="New folder inside/);
+	});
+
+	it("gives the pinned create action the prominent treatment", () => {
+		const html = render({
+			onCreateFolder: () =>
+				Promise.resolve(node("made", "Made", "Travel/Made")),
+		});
+		assert.match(
+			tagWith(html, 'aria-label="New folder"'),
+			/data-prominence="prominent"/,
+		);
 	});
 
 	it("renders the empty state when no folder matches", () => {

package/src/components/folder-tree-picker.stories.tsx

@@ -127,8 +127,12 @@ function Picker({
 	);
 }
 
+/**
+ * The list at rest: top level only, one tap deep into anything, with the pinned
+ * "New folder" carrying the kit's dashed add affordance.
+ */
 export const Default: Story = {
-	name: "Default (browse the tree)",
+	name: "Default (collapsed to top level)",
 	render: () => <Picker />,
 };
 
@@ -198,12 +202,44 @@ const typeFolderName = (canvasElement: HTMLElement, name: string) => {
 
 const tick = () => new Promise((resolve) => setTimeout(resolve, 60));
 
+const expand = async (canvasElement: HTMLElement, ...labels: string[]) => {
+	for (const label of labels) {
+		clickAriaLabel(canvasElement, `Move to ${label}`);
+		await tick();
+	}
+};
+
+/**
+ * One tap picks the destination and opens it. The children arrive indented,
+ * with a quieter "New folder" at the end of them — the same action as the
+ * pinned one, subordinate to the folder it sits in.
+ */
+export const Expanded: Story = {
+	name: "A folder opened (children and its New folder)",
+	render: () => <Picker />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+	},
+};
+
 /**
- * "rec" matches two folders nested three levels down. Their parents stay on
- * screen so the branch still reads as a branch — dimmed, and not a destination.
+ * One open branch, three levels deep: the ancestors stay open because the
+ * folder you opened lives inside them.
+ */
+export const DeepExpansion: Story = {
+	name: "Opened three levels deep",
+	render: () => <Picker />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel", "Hotels", "Receipts");
+	},
+};
+
+/**
+ * "rec" matches two nested folders. Their parents open to put them on screen
+ * and read as the branches they are, not as an answer to what was typed.
  */
 export const Filtered: Story = {
-	name: "Filtered (ancestors kept for context)",
+	name: "Filtered (ancestors opened for context)",
 	render: () => <Picker />,
 	play: async ({ canvasElement }) => {
 		typeFilter(canvasElement, "rec");
@@ -214,20 +250,22 @@ export const CreateTopLevel: Story = {
 	name: "Create a top-level folder",
 	render: () => <Picker />,
 	play: async ({ canvasElement }) => {
-		clickText(canvasElement, "New folder");
+		clickAriaLabel(canvasElement, "New folder");
 		await tick();
 		typeFolderName(canvasElement, "Insurance");
 	},
 };
 
 /**
- * The row you tapped is the answer to "inside where": the form opens under it
- * and states the parent as text, so there is no second choice to make.
+ * The folder you opened is the answer to "inside where": the form takes the
+ * place of the action it came from, among that folder's children, and states
+ * the parent as text — so there is no second choice to make.
  */
 export const CreateSubfolder: Story = {
-	name: "Create a subfolder from a row",
+	name: "Create a folder inside an opened one",
 	render: () => <Picker />,
 	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
 		clickAriaLabel(canvasElement, "New folder inside Travel");
 		await tick();
 		typeFolderName(canvasElement, "Car hire");
@@ -242,6 +280,7 @@ export const CreatePending: Story = {
 	name: "Create — waiting for the server",
 	render: () => <Picker onCreateFolder={neverResolves} />,
 	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Finance");
 		clickAriaLabel(canvasElement, "New folder inside Finance");
 		await tick();
 		typeFolderName(canvasElement, "Mortgage");
@@ -261,6 +300,7 @@ export const CreateFailed: Story = {
 		/>
 	),
 	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Finance");
 		clickAriaLabel(canvasElement, "New folder inside Finance");
 		await tick();
 		typeFolderName(canvasElement, "Mortgage");
@@ -296,7 +336,7 @@ function WizardFolderStep() {
 				<p className="px-1 text-xs text-fg-muted">
 					{chosen
 						? `Moving to ${chosen.label}.`
-						: "Browse to a folder, or make a new one where you want it."}
+						: "Tap a folder to open it, or make a new one where you want it."}
 				</p>
 				<div className="flex min-h-0 flex-1 overflow-hidden rounded-lg border border-line bg-surface">
 					<FolderTreePicker
@@ -320,10 +360,16 @@ function WizardFolderStep() {
 	);
 }
 
-/** The pattern at the size it is used: the wizard's folder step on a phone. */
+/**
+ * The pattern at the size it is used: the wizard's folder step on a phone, with
+ * a folder open so both create actions are on screen at once.
+ */
 export const PhoneWizardStep: Story = {
 	name: "Phone — wizard folder step",
 	parameters: { layout: "fullscreen" },
 	globals: { viewport: { value: "mobile" } },
 	render: () => <WizardFolderStep />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+	},
 };