@torpor/ui 0.3.4 → 0.3.6

package/test/NavMenu/accessibility.test.ts

@@ -1,97 +0,0 @@
-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 NavMenuAccessibility from "./components/NavMenuAccessibility.torp";
-
-describe("NavMenu", () => {
-	it("Accessibility", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, NavMenuAccessibility);
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/menu/
-		// NOTE: NavMenu is a menubar
-
-		// A menu is a container of items that represent choices. The element serving as the menu has
-		// a role of either menu or menubar
-		expect(queryByText(container, "Home")?.parentElement).toHaveAttribute("role", "menubar");
-
-		// The items contained in a menu are child elements of the containing menu or menubar and have
-		// any of the following roles:
-		//   * menuitem
-		//   * menuitemcheckbox
-		//   * menuitemradio
-		expect(queryByText(container, "Home")).toHaveAttribute("role", "menuitem");
-		expect(queryByText(container, "Page")).toHaveAttribute("role", "menuitem");
-		expect(queryByText(container, "Disabled")).toHaveAttribute("role", "menuitem");
-		expect(queryByText(container, "Subpages")).toHaveAttribute("role", "menuitem");
-
-		// If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's
-		// menu element is:
-		//   * Contained inside the same menu element as its parent menuitem
-		//   * Is the sibling element immediately following its parent menuitem
-
-		// A parent menuitem has aria-haspopup set to either menu or true
-		expect(queryByText(container, "Subpages")).toHaveAttribute("aria-haspopup", "true");
-
-		// A parent menuitem has aria-expanded set to false when its child menu is not visible and set
-		// to true when the child menu is visible
-		expect(queryByText(container, "Subpages")).toHaveAttribute("aria-expanded", "false");
-		await userEvent.click(getByText(container, "Subpages"));
-		expect(queryByText(container, "Subpages")).toHaveAttribute("aria-expanded", "true");
-
-		// One of the following approaches is used to enable scripts to move focus among items in a
-		// menu as described in Keyboard Navigation Inside Components:
-		//   * The menu container has tabindex set to -1 or 0 and aria-activedescendant set to the ID
-		//     of the focused item
-		//   * Each item in the menu has tabindex set to -1, except in a menubar, where the first item
-		//     has tabindex set to 0
-
-		// When a menuitemcheckbox or menuitemradio is checked, aria-checked is set to true
-		// NOTE: We don't (currently?) have checkboxes or radios in NavMenus
-
-		// When a menu item is disabled, aria-disabled is set to true
-		expect(queryByText(container, "Page")).not.toHaveAttribute("aria-disabled");
-		expect(queryByText(container, "Disabled")).toHaveAttribute("aria-disabled", "true");
-
-		// Items in a menu may be divided into groups by placing an element with a role of separator
-		// between groups. For example, this technique should be used when a menu contains a set of
-		// menuitemradio items
-		expect(queryByText(container, "/")).toHaveAttribute("role", "separator");
-
-		// All separators should have aria-orientation consistent with the separator's orientation
-		// NOTE: What does this mean? None of the example separators have aria-orientation set
-
-		// If a menubar has a visible label, the element with role menubar has aria-labelledby set to
-		// a value that refers to the labelling element. Otherwise, the menubar element has a label
-		// provided by aria-label
-		// NOTE: We only support aria-label and it's required
-		expect(queryByText(container, "Home")?.parentElement).toHaveAttribute(
-			"aria-label",
-			"Site navigation",
-		);
-
-		// If a menubar is vertically oriented, it has aria-orientation set to vertical. The default
-		// value of aria-orientation for a menubar is horizontal
-		expect(queryByText(container, "Home")?.parentElement).toHaveAttribute(
-			"aria-orientation",
-			"horizontal",
-		);
-		expect(queryByText(container, "Subpage 1")?.parentElement).toHaveAttribute(
-			"aria-orientation",
-			"vertical",
-		);
-
-		// Our own tests
-
-		// The group should be labeled
-		expect(queryByText(container, "Group header")).toBeInTheDocument();
-		const headerId = queryByText(container, "Group header")?.id;
-		expect(queryByText(container, "Group header")?.parentElement).toHaveAttribute(
-			"aria-labelledby",
-			headerId,
-		);
-	});
-});

package/test/NavMenu/basic.test.ts

@@ -1,22 +0,0 @@
-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 NavMenu from "./components/NavMenuBasic.torp";
-
-describe("NavMenu", () => {
-	it("Basic operation", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, NavMenu);
-
-		// By default, body 1 should be displayed
-		expect(queryByText(container, "Home")).toBeInTheDocument();
-		expect(queryByText(container, "Subpage 1")).not.toBeInTheDocument();
-
-		// Clicking header 2 should hide body 1 and reveal body 2
-		await userEvent.click(getByText(container, "Subpages"));
-		expect(queryByText(container, "Subpage 1")).toBeInTheDocument();
-	});
-});

package/test/NavMenu/components/NavMenuAccessibility.torp

@@ -1,35 +0,0 @@
-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/NavMenu/components/NavMenuBasic.torp

@@ -1,28 +0,0 @@
-import {
-	NavMenu,
-	NavMenuLink,
-	NavMenuPopout,
-	NavMenuPopoutButton,
-	NavMenuPopoutContent,
-	NavMenuSeparator
-} from "../../../src/NavMenu";
-
-export default function NavMenuBasic($props: any) {
-	@render {
-		<NavMenu ariaLabel="Site navigation">
-			<NavMenuLink href="/">Home</NavMenuLink>
-			<NavMenuLink href="/page1">Page 1</NavMenuLink>
-			<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>
-		</NavMenu>
-	}
-}

package/test/Notification/accessibility.test.ts

@@ -1,21 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import NotificationAccessibility from "./components/NotificationAccessibility.torp";
-
-describe("Notification", () => {
-	it("Accessibility", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, NotificationAccessibility);
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/alert/
-
-		// The widget has a role of alert
-		expect(queryByText(container, "Here's a notification")?.parentElement).toHaveAttribute(
-			"role",
-			"alert",
-		);
-	});
-});

package/test/Notification/components/CustomNotification.torp

@@ -1,14 +0,0 @@
-import {
-	Notification,
-	NotificationContent,
-	NotificationClose
-} from "../../../src/Notification/index";
-
-export default function CustomNotification() {
-	@render {
-		<Notification>
-			<NotificationContent>{$props.text}</NotificationContent>
-			<NotificationClose>Close me</NotificationClose>
-		</Notification>
-	}
-}

package/test/Notification/components/NotificationAccessibility.torp

@@ -1,14 +0,0 @@
-import {
-	Notification,
-	NotificationContent,
-	NotificationClose
-} from "../../../src/Notification/index";
-
-export default function NotificationAccessibility() {
-	@render {
-		<Notification visible>
-			<NotificationContent>Here's a notification</NotificationContent>
-			<NotificationClose>Close me</NotificationClose>
-		</Notification>
-	}
-}

package/test/Notification/components/NotificationFunction.torp

@@ -1,17 +0,0 @@
-import {
-	NotificationContainer,
-	showNotification
-} from "../../../src/Notification/index";
-import CustomNotification from "./CustomNotification.torp";
-
-export default function NotificationFunction() {
-	function show() {
-		showNotification(CustomNotification, { text: "Here's a notification" });
-	}
-
-	@render {
-		<button type="button" onclick={show}>Show a notification</button>
-
-		<NotificationContainer />
-	}
-}

package/test/Notification/components/NotificationVariable.torp

@@ -1,22 +0,0 @@
-import {
-	Notification,
-	NotificationContent,
-	NotificationClose
-} from "../../../src/Notification/index";
-
-export default function NotificationVariable() {
-	let $state = $watch({
-		showNotification: false
-	});
-
-	@render {
-		<button type="button" onclick={() => ($state.showNotification = !$state.showNotification)}>
-			Show a notification
-		</button>
-
-		<Notification &visible={$state.showNotification}>
-			<NotificationContent>Here's a notification</NotificationContent>
-			<NotificationClose>Close me</NotificationClose>
-		</Notification>
-	}
-}

package/test/Notification/function.test.ts

@@ -1,25 +0,0 @@
-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 NotificationFunction from "./components/NotificationFunction.torp";
-
-describe("Notification", () => {
-	it("Showing with a function", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, NotificationFunction);
-
-		// By default, the notification shouldn't be shown
-		expect(queryByText(container, "Here's a notification")).not.toBeInTheDocument();
-
-		// Clicking the button should show the notification
-		await userEvent.click(getByText(container, "Show a notification"));
-		expect(queryByText(container, "Here's a notification")).toBeInTheDocument();
-
-		// Clicking the close button should hide the notification
-		await userEvent.click(getByText(container, "Close me"));
-		expect(queryByText(container, "Here's a notification")).not.toBeInTheDocument();
-	});
-});

package/test/Notification/variable.test.ts

@@ -1,25 +0,0 @@
-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 NotificationVariable from "./components/NotificationVariable.torp";
-
-describe("Notification", () => {
-	it("Showing with a variable", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, NotificationVariable);
-
-		// By default, the notification shouldn't be shown
-		expect(queryByText(container, "Here's a notification")).not.toBeInTheDocument();
-
-		// Clicking the button should show the notification
-		await userEvent.click(getByText(container, "Show a notification"));
-		expect(queryByText(container, "Here's a notification")).toBeInTheDocument();
-
-		// Clicking the close button should hide the notification
-		await userEvent.click(getByText(container, "Close me"));
-		expect(queryByText(container, "Here's a notification")).not.toBeInTheDocument();
-	});
-});

package/test/Popover/components/CustomDialog.torp

@@ -1,25 +0,0 @@
-import { Popover, PopoverContent } from "../../../src/Popover/index";
-import {
-	Dialog,
-	DialogBody,
-	DialogFooter,
-	DialogButton
-} from "../../../src/Dialog/index";
-
-export default function CustomDialog() {
-	@render {
-		<Popover visible {$props.callback}>
-			<PopoverContent>
-				<Dialog>
-					<DialogBody>
-						<p>Which color do you prefer?</p>
-					</DialogBody>
-					<DialogFooter>
-						<DialogButton value="blue">Blue</DialogButton>
-						<DialogButton value="red">Red</DialogButton>
-					</DialogFooter>
-				</Dialog>
-			</PopoverContent>
-		</Popover>
-	}
-}

package/test/Popover/components/PopoverFunction.torp

@@ -1,37 +0,0 @@
-import { Popover, PopoverContent, showPopover } from "../../../src/Popover/index";
-import {
-	Dialog,
-	DialogBody,
-	DialogFooter,
-	DialogButton
-} from "../../../src/Dialog/index";
-
-export default function PopoverFunction() {
-	let anchor;
-
-	async function show() {
-		showPopover(CustomDialog, anchor);
-	}
-
-	@render {
-		<button type="button" &ref={anchor} onclick={show}>Show the prompt</button>
-	}
-}
-
-function CustomDialog($props) {
-	@render {
-		<Popover visible {$props.anchor}>
-			<PopoverContent>
-				<Dialog>
-					<DialogBody>
-						<p>Which color do you prefer?</p>
-					</DialogBody>
-					<DialogFooter>
-						<DialogButton value="blue">Blue</DialogButton>
-						<DialogButton value="red">Red</DialogButton>
-					</DialogFooter>
-				</Dialog>
-			</PopoverContent>
-		</Popover>
-	}
-}

package/test/Popover/components/PopoverTrigger.torp

@@ -1,36 +0,0 @@
-import { Popover, PopoverContent, PopoverTrigger } from "../../../src/Popover/index";
-import {
-	Dialog,
-	DialogBody,
-	DialogFooter,
-	DialogButton
-} from "../../../src/Dialog/index";
-
-export default function PopoverTriggerTest() {
-	let $state = $watch({
-		color: "",
-	});
-
-	@render {
-		@if ($state.color) {
-			<p>Your favorite color is {$state.color}?!</p>
-		}
-
-		<Popover &visible={$state.showPopover}>
-			<PopoverTrigger>
-				Show the prompt
-			</PopoverTrigger>
-			<PopoverContent>
-				<Dialog>
-					<DialogBody>
-						<p>Which color do you prefer?</p>
-					</DialogBody>
-					<DialogFooter>
-						<DialogButton value="blue" onclick={() => ($state.color = "blue")}>Blue</DialogButton>
-						<DialogButton value="red" onclick={() => ($state.color = "red")}>Red</DialogButton>
-					</DialogFooter>
-				</Dialog>
-			</PopoverContent>
-		</Popover>
-	}
-}

package/test/Popover/components/PopoverVariable.torp

@@ -1,40 +0,0 @@
-import { Popover, PopoverContent } from "../../../src/Popover/index";
-import {
-	Dialog,
-	DialogBody,
-	DialogFooter,
-	DialogButton
-} from "../../../src/Dialog/index";
-
-export default function PopoverVariable() {
-	let $state = $watch({
-		color: "",
-		showPopover: false
-	});
-
-	let button: HTMLButtonElement;
-
-	@render {
-		<button type="button" onclick={() => ($state.showPopover = !$state.showPopover)} &ref={button}>
-			Show the prompt
-		</button>
-
-		@if ($state.color) {
-			<p>Your favorite color is {$state.color}?!</p>
-		}
-
-		<Popover &visible={$state.showPopover} anchor={button}>
-			<PopoverContent>
-				<Dialog>
-					<DialogBody>
-						<p>Which color do you prefer?</p>
-					</DialogBody>
-					<DialogFooter>
-						<DialogButton value="blue" onclick={() => ($state.color = "blue")}>Blue</DialogButton>
-						<DialogButton value="red" onclick={() => ($state.color = "red")}>Red</DialogButton>
-					</DialogFooter>
-				</Dialog>
-			</PopoverContent>
-		</Popover>
-	}
-}

package/test/Popover/function.test.ts

@@ -1,21 +0,0 @@
-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 PopoverFunction from "./components/PopoverFunction.torp";
-
-describe("Prompt", () => {
-	it("Showing with a function", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, PopoverFunction);
-
-		// By default, the prompt shouldn't be shown
-		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
-
-		// Clicking the button should show the prompt
-		await userEvent.click(getByText(container, "Show the prompt"));
-		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
-	});
-});

package/test/Popover/trigger.test.ts

@@ -1,27 +0,0 @@
-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 PopoverTrigger from "./components/PopoverTrigger.torp";
-
-describe("Prompt", () => {
-	it("Showing with a trigger", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, PopoverTrigger);
-
-		// By default, the prompt shouldn't be shown
-		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
-		expect(queryByText(container, "Your favorite color is blue?!")).not.toBeInTheDocument();
-
-		// Clicking the button should show the prompt
-		await userEvent.click(getByText(container, "Show the prompt"));
-		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
-
-		// Clicking the blue button should hide the prompt and set the value
-		await userEvent.click(getByText(container, "Blue"));
-		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
-		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
-	});
-});

package/test/Popover/variable.test.ts

@@ -1,27 +0,0 @@
-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 PopoverVariable from "./components/PopoverVariable.torp";
-
-describe("Prompt", () => {
-	it("Showing with a variable", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, PopoverVariable);
-
-		// By default, the prompt shouldn't be shown
-		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
-		expect(queryByText(container, "Your favorite color is blue?!")).not.toBeInTheDocument();
-
-		// Clicking the button should show the prompt
-		await userEvent.click(getByText(container, "Show the prompt"));
-		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
-
-		// Clicking the blue button should hide the prompt and set the value
-		await userEvent.click(getByText(container, "Blue"));
-		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
-		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
-	});
-});

package/test/TabGroup/accessibility.test.ts

@@ -1,67 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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>
-	}
-}