@torpor/ui 0.0.16 → 0.1.0

package/test/NavMenu/components/NavMenuAccessibility.torp

@@ -0,0 +1,35 @@
+import {
+	NavMenu,
+	NavMenuLink,
+	NavMenuPopout,
+	NavMenuPopoutButton,
+	NavMenuPopoutContent,
+	NavMenuGroup,
+	NavMenuGroupHeader,
+	NavMenuSeparator
+} from "../../../src/NavMenu";
+
+export default function NavMenuAccessibility($props: any) {
+	@render {
+		<NavMenu ariaLabel="Site navigation">
+			<NavMenuLink href="/">Home</NavMenuLink>
+			<NavMenuLink href="/page1">Page</NavMenuLink>
+			<NavMenuLink href="/disabled" disabled>Disabled</NavMenuLink>
+			<NavMenuSeparator>/</NavMenuSeparator>
+			<NavMenuPopout>
+				<NavMenuPopoutButton>Subpages</NavMenuPopoutButton>
+				<NavMenuPopoutContent>
+					<NavMenu ariaLabel="Sub site navigation" orientation="vertical">
+						<NavMenuLink href="/sub/page1">Subpage 1</NavMenuLink>
+						<NavMenuLink href="/sub/page2">Subpage 2</NavMenuLink>
+						<NavMenuLink href="/sub/page3">Subpage 3</NavMenuLink>
+					</NavMenu>
+				</NavMenuPopoutContent>
+			</NavMenuPopout>
+			<NavMenuGroup>
+				<NavMenuGroupHeader as="h4">Group header</NavMenuGroupHeader>
+				<NavMenuLink href="/grouped-page">Grouped page</NavMenuLink>
+			</NavMenuGroup>
+		</NavMenu>
+	}
+}

package/test/TabGroup/accessibility.test.ts

@@ -0,0 +1,67 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import TabGroupAccessibility from "./components/TabGroupAccessibility.torp";
+
+describe("TabGroup", () => {
+	it("Accessibility", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, TabGroupAccessibility, { value: "0" });
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+
+		// The element that serves as the container for the set of tabs has role
+		// tablist
+		expect(queryByText(container, "Header 1")?.parentElement?.parentElement).toHaveAttribute(
+			"role",
+			"tablist",
+		);
+
+		// Each element that serves as a tab has role tab and is contained
+		// within the element with role tablist
+		expect(queryByText(container, "Header 1")).toHaveAttribute("role", "tab");
+
+		// Each element that contains the content panel for a tab has role
+		// tabpanel
+		expect(queryByText(container, "Body 1")).toHaveAttribute("role", "tabpanel");
+
+		// If the tab list has a visible label, the element with role tablist
+		// has aria-labelledby set to a value that refers to the labelling
+		// element. Otherwise, the tablist element has a label provided by
+		// aria-label
+		// NOTE: We only support aria-label and it's required
+		expect(queryByText(container, "Header 1")?.parentElement?.parentElement).toHaveAttribute(
+			"aria-label",
+			"Example tabs",
+		);
+
+		// Each element with role tab has the property aria-controls referring
+		// to its associated tabpanel element
+		const tabId = queryByText(container, "Header 1")?.id;
+		const contentId = queryByText(container, "Body 1")?.id;
+		expect(queryByText(container, "Header 1")).toHaveAttribute("aria-controls", contentId);
+
+		// The active tab element has the state aria-selected set to true and
+		// all other tab elements have it set to false
+		expect(queryByText(container, "Header 1")).toHaveAttribute("aria-selected", "true");
+		expect(queryByText(container, "Header 2")).toHaveAttribute("aria-selected", "false");
+		expect(queryByText(container, "Header 3")).toHaveAttribute("aria-selected", "false");
+
+		// Each element with role tabpanel has the property aria-labelledby
+		// referring to its associated tab element
+		expect(queryByText(container, "Body 1")).toHaveAttribute("aria-labelledby", tabId);
+
+		// If a tab element has a popup menu, it has the property aria-haspopup
+		// set to either menu or true
+
+		// If the tablist element is vertically oriented, it has the property
+		// aria-orientation set to vertical. The default value of
+		// aria-orientation for a tablist element is horizontal
+		expect(queryByText(container, "Header 1")?.parentElement?.parentElement).toHaveAttribute(
+			"aria-orientation",
+			"horizontal",
+		);
+	});
+});

package/test/TabGroup/components/TabGroupAccessibility.torp

@@ -0,0 +1,28 @@
+import {
+	TabGroup,
+	TabList,
+	TabHeader,
+	TabTrigger,
+	TabContent,
+} from "../../../src/TabGroup/index";
+
+export default function TabGroupAccessibility() {
+	@render {
+		<TabGroup value={$props.value}>
+			<TabList ariaLabel="Example tabs">
+				<TabHeader as="h4">
+					<TabTrigger>Header 1</TabTrigger>
+				</TabHeader>
+				<TabHeader as="h4">
+					<TabTrigger>Header 2</TabTrigger>
+				</TabHeader>
+				<TabHeader as="h4">
+					<TabTrigger>Header 3</TabTrigger>
+				</TabHeader>
+			</TabList>
+			<TabContent>Body 1</TabContent>
+			<TabContent>Body 2</TabContent>
+			<TabContent>Body 3</TabContent>
+		</TabGroup>
+	}
+}

package/test/TabGroup/components/TabGroupKeyboard.torp

@@ -0,0 +1,28 @@
+import {
+	TabGroup,
+	TabList,
+	TabHeader,
+	TabTrigger,
+	TabContent,
+} from "../../../src/TabGroup/index";
+
+export default function TabGroupKeyboard() {
+	@render {
+		<TabGroup value={$props.value}>
+			<TabList>
+				<TabHeader as="h4">
+					<TabTrigger>Header 1</TabTrigger>
+				</TabHeader>
+				<TabHeader as="h4">
+					<TabTrigger>Header 2</TabTrigger>
+				</TabHeader>
+				<TabHeader as="h4">
+					<TabTrigger>Header 3</TabTrigger>
+				</TabHeader>
+			</TabList>
+			<TabContent>Content 1</TabContent>
+			<TabContent>Content 2</TabContent>
+			<TabContent>Content 3</TabContent>
+		</TabGroup>
+	}
+}

package/test/TabGroup/components/TabGroupList.torp

@@ -0,0 +1,26 @@
+import {
+	TabGroup,
+	TabList,
+	TabHeader,
+	TabTrigger,
+	TabContent,
+} from "../../../src/TabGroup/index";
+
+export default function TabGroupList() {
+	@render {
+		<TabGroup value={$props.value}>
+			<TabList>
+			@for (let item of $props.items) {
+				@key = item.id
+				<TabHeader as="h4">
+					<TabTrigger>{item.header}</TabTrigger>
+				</TabHeader>
+			}
+			</TabList>
+			@for (let item of $props.items) {
+				@key = item.id
+				<TabContent>{item.text}</TabContent>
+			}
+		</TabGroup>
+	}
+}

package/test/TabGroup/components/TabGroupTrigger.torp

@@ -0,0 +1,28 @@
+import {
+	TabGroup,
+	TabList,
+	TabHeader,
+	TabTrigger,
+	TabContent,
+} from "../../../src/TabGroup/index";
+
+export default function TabGroupTrigger() {
+	@render {
+		<TabGroup value={$props.value}>
+			<TabList>
+				<TabHeader as="h4">
+					<TabTrigger>Header 1</TabTrigger>
+				</TabHeader>
+				<TabHeader as="h4">
+					<TabTrigger>Header 2</TabTrigger>
+				</TabHeader>
+				<TabHeader as="h4">
+					<TabTrigger>Header 3</TabTrigger>
+				</TabHeader>
+			</TabList>
+			<TabContent>Content 1</TabContent>
+			<TabContent>Content 2</TabContent>
+			<TabContent>Content 3</TabContent>
+		</TabGroup>
+	}
+}

package/test/TabGroup/for-items.test.ts

@@ -0,0 +1,52 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { $watch, mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import TabGroupList from "./components/TabGroupList.torp";
+
+describe("TabGroup", () => {
+	it("Items in a for loop", async () => {
+		let $state = $watch({
+			value: "1",
+			items: [
+				{ id: 0, header: "Item 1", text: "Content 1" },
+				{ id: 1, header: "Item 2", text: "Content 2" },
+				{ id: 2, header: "Item 3", text: "Content 3" },
+			],
+		});
+
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, TabGroupList, $state);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		$state.items.splice(1, 1);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		// Clicking header 1 should reveal body 1
+		await userEvent.click(getByText(container, "Item 1"));
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+
+		$state.items.push({ id: 3, header: "Item 4", text: "Content 4" });
+
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 4")).toBeInTheDocument();
+		expect(queryByText(container, "Content 4")).not.toBeInTheDocument();
+
+		// Clicking header 4 should reveal body 4
+		await userEvent.click(getByText(container, "Item 4"));
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 4")).toBeInTheDocument();
+	});
+});

package/test/TabGroup/item-trigger.test.ts

@@ -0,0 +1,32 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import TabGroupTrigger from "./components/TabGroupTrigger.torp";
+
+describe("TabGroup", () => {
+	it("Item trigger", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, TabGroupTrigger);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		// Clicking header 1 should reveal body 1
+		await userEvent.click(getByText(container, "Header 1"));
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+
+		// Clicking header 2 should hide body 1 and reveal body 2
+		await userEvent.click(getByText(container, "Header 2"));
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+
+		// Clicking header 2 again should keep body 2
+		await userEvent.click(getByText(container, "Header 2"));
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+	});
+});

package/test/TabGroup/item-value.test.ts

@@ -0,0 +1,17 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import TabGroupTrigger from "./components/TabGroupTrigger.torp";
+
+describe("TabGroup", () => {
+	it("Item default value", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, TabGroupTrigger, { value: "1" });
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+	});
+});

package/test/TabGroup/keyboard.test.ts

@@ -0,0 +1,72 @@
+import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import TabGroupKeyboard from "./components/TabGroupKeyboard.torp";
+
+describe("TabGroup", () => {
+	it("Keyboard", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, TabGroupKeyboard, { value: "0" });
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+
+		// Enter or Space:
+		//   * When focus is on the tab header for a collapsed panel, expands
+		//     the associated panel. If the implementation allows only one panel
+		//     to be expanded, and if another panel is expanded, collapses that
+		//     panel
+		//   * When focus is on the tab header for an expanded panel, collapses
+		//     the panel if the implementation supports collapsing. Some
+		//     implementations require one panel to be expanded at all times and
+		//     allow only one panel to be expanded; so, they do not support a
+		//     collapse function
+		// NOTE: I don't think we can test this
+		// NOTE: TabGroup headers are buttons so this functionality should be baked in by default
+		//screen.queryByText('Header 1').focus();
+		//expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+		//fireEvent(screen.getByText('Header 1'), { key: 'Space' });
+		//expect(screen.queryByText('Content 1')).toBeInTheDocument();
+		//fireEvent(screen.getByText('Header 1'), { key: 'Space' });
+		//expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+
+		// Tab: Moves focus to the next focusable element; all focusable
+		// elements in the tab are included in the page Tab sequence
+		// NOTE: I don't think we can test this
+		//fireEvent(screen.getByText('Header 1'), { key: 'Tab' });
+		//expect(document.activeElement).toBe(screen.queryByText('Header 2'));
+
+		// Shift + Tab: Moves focus to the previous focusable element; all
+		// focusable elements in the tab are included in the page Tab
+		// sequence
+		// NOTE: I don't think we can test this
+		//fireEvent(screen.getByText('Header 2'), { key: 'Tab', shiftKey: true });
+		//expect(document.activeElement).toBe(screen.queryByText('Header 1'));
+
+		// Right Arrow: If focus is on a tab header, moves focus to the next tab
+		// header. If focus is on the last tab header, either does nothing or
+		// moves focus to the first tab header
+		fireEvent(
+			getByText(container, "Header 1"),
+			new KeyboardEvent("keydown", { key: "ArrowRight" }),
+		);
+		expect(document.activeElement).toBe(queryByText(container, "Header 2"));
+
+		// Left Arrow: If focus is on a tab header, moves focus to the previous
+		// tab header. If focus is on the first tab header, either does nothing
+		// or moves focus to the last tab header
+		fireEvent(getByText(container, "Header 2"), new KeyboardEvent("keydown", { key: "ArrowLeft" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 1"));
+
+		// Home: When focus is on a tab header, moves focus to the first tab
+		// header
+		fireEvent(getByText(container, "Header 3"), new KeyboardEvent("keydown", { key: "Home" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 1"));
+
+		// End: When focus is on a tab header, moves focus to the last tab
+		// header
+		fireEvent(getByText(container, "Header 1"), new KeyboardEvent("keydown", { key: "End" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 3"));
+	});
+});

package/tsup.config.ts

@@ -6,7 +6,14 @@ type Config =
 	| ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
 
 export default defineConfig({
-	entry: ["src/Accordion/index.ts", "src/motion.ts"],
+	entry: [
+		"src/Accordion/index.ts",
+		"src/Dialog/index.ts",
+		"src/NavMenu/index.ts",
+		"src/Popover/index.ts",
+		"src/TabGroup/index.ts",
+		"src/motion.ts",
+	],
 	format: ["esm", "cjs"],
 	dts: { entry: ["src/motion.ts"] },
 	clean: true,