@etus/ui 0.1.0

package/src/components/navigation/TabPanel/TabPanel.test.tsx

@@ -0,0 +1,566 @@
+// TabPanel/TabPanel.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it } from "vitest"
+
+import {
+  TabPanel,
+  TabPanelList,
+  TabPanelRoot,
+  TabPanelTrigger,
+} from "./TabPanel"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// TAB PANEL ROOT TESTS
+// ============================================
+describe("TabPanelRoot", () => {
+  it("renders root", () => {
+    render(
+      <TabPanelRoot data-testid="root" defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("root")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", () => {
+    render(
+      <TabPanelRoot data-testid="root" defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("root")).toHaveAttribute(
+      "data-slot",
+      "tab-panel-root"
+    )
+  })
+
+  it("applies custom className", () => {
+    render(
+      <TabPanelRoot className="custom-class" data-testid="root" defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("root")).toHaveClass("custom-class")
+  })
+
+  it("respects defaultValue", () => {
+    render(
+      <TabPanelRoot defaultValue="tab2">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger value="tab2">Tab 2</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel value="tab2">Content 2</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByText("Content 2")).toBeVisible()
+  })
+})
+
+// ============================================
+// TAB PANEL LIST TESTS
+// ============================================
+describe("TabPanelList", () => {
+  it("renders list", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList data-testid="list">
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("list")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList data-testid="list">
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("list")).toHaveAttribute(
+      "data-slot",
+      "tab-panel-list"
+    )
+  })
+
+  it("has tablist role", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList data-testid="list">
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("list")).toHaveAttribute("role", "tablist")
+  })
+
+  it("applies custom className", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList className="custom-class" data-testid="list">
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("list")).toHaveClass("custom-class")
+  })
+})
+
+// ============================================
+// TAB PANEL TRIGGER TESTS
+// ============================================
+describe("TabPanelTrigger", () => {
+  it("renders trigger", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger data-testid="trigger" value="tab1">
+            Tab 1
+          </TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("trigger")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger data-testid="trigger" value="tab1">
+            Tab 1
+          </TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("trigger")).toHaveAttribute(
+      "data-slot",
+      "tab-panel-trigger"
+    )
+  })
+
+  it("has tab role", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger data-testid="trigger" value="tab1">
+            Tab 1
+          </TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("trigger")).toHaveAttribute("role", "tab")
+  })
+
+  it("applies custom className", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger className="custom-class" data-testid="trigger" value="tab1">
+            Tab 1
+          </TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("trigger")).toHaveClass("custom-class")
+  })
+
+  it("shows active state when selected", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger data-testid="trigger" value="tab1">
+            Tab 1
+          </TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("trigger")).toHaveAttribute("data-state", "active")
+  })
+
+  it("switches panels on click", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger data-testid="trigger2" value="tab2">
+            Tab 2
+          </TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel value="tab2">Content 2</TabPanel>
+      </TabPanelRoot>
+    )
+
+    expect(screen.getByText("Content 1")).toBeVisible()
+
+    await user.click(screen.getByTestId("trigger2"))
+
+    expect(screen.getByText("Content 2")).toBeVisible()
+  })
+
+  it("supports disabled state", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger disabled data-testid="trigger" value="tab2">
+            Tab 2
+          </TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel value="tab2">Content 2</TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("trigger")).toBeDisabled()
+  })
+})
+
+// ============================================
+// TAB PANEL (CONTENT) TESTS
+// ============================================
+describe("TabPanel", () => {
+  it("renders panel", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel data-testid="panel" value="tab1">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel data-testid="panel" value="tab1">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toHaveAttribute("data-slot", "tab-panel")
+  })
+
+  it("has tabpanel role", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel data-testid="panel" value="tab1">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toHaveAttribute("role", "tabpanel")
+  })
+
+  it("applies custom className", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel className="custom-class" data-testid="panel" value="tab1">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toHaveClass("custom-class")
+  })
+
+  it("renders with default variant", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel data-testid="panel" value="tab1">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toHaveClass("p-4")
+  })
+
+  it("renders with card variant", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel data-testid="panel" value="tab1" variant="card">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toHaveClass("rounded-lg", "border", "bg-card")
+  })
+
+  it("renders with bordered variant", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel data-testid="panel" value="tab1" variant="bordered">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toHaveClass("border-t")
+  })
+
+  it("shows active state when selected", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel data-testid="panel" value="tab1">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toHaveAttribute("data-state", "active")
+  })
+
+  it("is hidden when not selected", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger value="tab2">Tab 2</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel data-testid="panel" value="tab2">
+          Content 2
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toHaveAttribute("data-state", "inactive")
+    expect(screen.getByTestId("panel")).toHaveAttribute("hidden")
+  })
+
+  it("is present with forceMount even when inactive", () => {
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger value="tab2">Tab 2</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel forceMount data-testid="panel" value="tab2">
+          Content 2
+        </TabPanel>
+      </TabPanelRoot>
+    )
+    expect(screen.getByTestId("panel")).toBeInTheDocument()
+    expect(screen.getByTestId("panel")).toHaveAttribute("data-state", "inactive")
+  })
+})
+
+// ============================================
+// KEYBOARD NAVIGATION TESTS
+// ============================================
+describe("Keyboard Navigation", () => {
+  it("navigates between tabs with arrow keys", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger value="tab2">Tab 2</TabPanelTrigger>
+          <TabPanelTrigger value="tab3">Tab 3</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel value="tab2">Content 2</TabPanel>
+        <TabPanel value="tab3">Content 3</TabPanel>
+      </TabPanelRoot>
+    )
+
+    await user.click(screen.getByText("Tab 1"))
+
+    await user.keyboard("{ArrowRight}")
+    expect(screen.getByText("Tab 2")).toHaveFocus()
+
+    await user.keyboard("{ArrowRight}")
+    expect(screen.getByText("Tab 3")).toHaveFocus()
+  })
+
+  it("activates tab with Enter or Space", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger value="tab2">Tab 2</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel value="tab2">Content 2</TabPanel>
+      </TabPanelRoot>
+    )
+
+    await user.click(screen.getByText("Tab 1"))
+    await user.keyboard("{ArrowRight}")
+    await user.keyboard("{Enter}")
+
+    expect(screen.getByText("Content 2")).toBeVisible()
+  })
+})
+
+// ============================================
+// COMPLETE TAB PANEL TESTS
+// ============================================
+describe("Complete TabPanel", () => {
+  it("renders a complete tab panel structure", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <TabPanelRoot defaultValue="account">
+        <TabPanelList>
+          <TabPanelTrigger value="account">Account</TabPanelTrigger>
+          <TabPanelTrigger value="password">Password</TabPanelTrigger>
+          <TabPanelTrigger value="settings">Settings</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="account">
+          <p>Account settings content</p>
+        </TabPanel>
+        <TabPanel value="password">
+          <p>Password settings content</p>
+        </TabPanel>
+        <TabPanel value="settings">
+          <p>General settings content</p>
+        </TabPanel>
+      </TabPanelRoot>
+    )
+
+    expect(screen.getByText("Account")).toBeInTheDocument()
+    expect(screen.getByText("Password")).toBeInTheDocument()
+    expect(screen.getByText("Settings")).toBeInTheDocument()
+    expect(screen.getByText("Account settings content")).toBeVisible()
+
+    await user.click(screen.getByText("Password"))
+    expect(screen.getByText("Password settings content")).toBeVisible()
+
+    await user.click(screen.getByText("Settings"))
+    expect(screen.getByText("General settings content")).toBeVisible()
+  })
+
+  it("renders with all variants", () => {
+    render(
+      <TabPanelRoot defaultValue="default">
+        <TabPanelList>
+          <TabPanelTrigger value="default">Default</TabPanelTrigger>
+          <TabPanelTrigger value="card">Card</TabPanelTrigger>
+          <TabPanelTrigger value="bordered">Bordered</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel data-testid="default" value="default" variant="default">
+          Default Content
+        </TabPanel>
+        <TabPanel forceMount data-testid="card" value="card" variant="card">
+          Card Content
+        </TabPanel>
+        <TabPanel forceMount data-testid="bordered" value="bordered" variant="bordered">
+          Bordered Content
+        </TabPanel>
+      </TabPanelRoot>
+    )
+
+    expect(screen.getByTestId("default")).toHaveClass("p-4")
+    expect(screen.getByTestId("card")).toHaveClass("rounded-lg", "bg-card")
+    expect(screen.getByTestId("bordered")).toHaveClass("border-t")
+  })
+})
+
+// ============================================
+// ACCESSIBILITY TESTS
+// ============================================
+describe("Accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger value="tab2">Tab 2</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel value="tab2">Content 2</TabPanel>
+      </TabPanelRoot>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with disabled tab", async () => {
+    const { container } = render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+          <TabPanelTrigger disabled value="tab2">
+            Tab 2
+          </TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1">Content 1</TabPanel>
+        <TabPanel value="tab2">Content 2</TabPanel>
+      </TabPanelRoot>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with card variant", async () => {
+    const { container } = render(
+      <TabPanelRoot defaultValue="tab1">
+        <TabPanelList>
+          <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+        </TabPanelList>
+        <TabPanel value="tab1" variant="card">
+          Content 1
+        </TabPanel>
+      </TabPanelRoot>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/navigation/TabPanel/TabPanel.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import type {
+  TabPanelListProps,
+  TabPanelProps,
+  TabPanelRootProps,
+  TabPanelTriggerProps,
+} from "./TabPanel.types"
+
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "../../../lib/utils"
+import {
+  tabPanelListVariants,
+  tabPanelRootVariants,
+  tabPanelTriggerVariants,
+  tabPanelVariants,
+} from "./TabPanel.variants"
+
+/**
+ * TabPanelRoot - Root container for the tab panel system.
+ *
+ * Wraps Radix UI Tabs primitive.
+ *
+ * @example
+ * <TabPanelRoot defaultValue="tab1">
+ *   <TabPanelList>
+ *     <TabPanelTrigger value="tab1">Tab 1</TabPanelTrigger>
+ *   </TabPanelList>
+ *   <TabPanel value="tab1">Content 1</TabPanel>
+ * </TabPanelRoot>
+ */
+function TabPanelRoot({ className, ...props }: TabPanelRootProps) {
+  return (
+    <TabsPrimitive.Root
+      className={cn(tabPanelRootVariants(), className)}
+      data-slot="tab-panel-root"
+      {...props}
+    />
+  )
+}
+
+/**
+ * TabPanelList - Container for tab triggers.
+ */
+function TabPanelList({ className, ...props }: TabPanelListProps) {
+  return (
+    <TabsPrimitive.List
+      className={cn(tabPanelListVariants(), className)}
+      data-slot="tab-panel-list"
+      {...props}
+    />
+  )
+}
+
+/**
+ * TabPanelTrigger - Button that activates its associated tab panel.
+ */
+function TabPanelTrigger({ className, ...props }: TabPanelTriggerProps) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(tabPanelTriggerVariants(), className)}
+      data-slot="tab-panel-trigger"
+      {...props}
+    />
+  )
+}
+
+/**
+ * TabPanel - Content panel associated with a tab.
+ *
+ * Displays content when its corresponding tab is active.
+ * Supports visual variants for different styling needs.
+ *
+ * @example
+ * <TabPanel value="tab1" variant="card">
+ *   <h3>Account Settings</h3>
+ *   <p>Manage your account here.</p>
+ * </TabPanel>
+ */
+function TabPanel({
+  className,
+  variant = "default",
+  ...props
+}: TabPanelProps) {
+  return (
+    <TabsPrimitive.Content
+      className={cn(tabPanelVariants({ variant }), className)}
+      data-slot="tab-panel"
+      {...props}
+    />
+  )
+}
+
+export { TabPanel, TabPanelList, TabPanelRoot, TabPanelTrigger }

package/src/components/navigation/TabPanel/TabPanel.types.ts

@@ -0,0 +1,29 @@
+import type * as TabsPrimitive from "@radix-ui/react-tabs"
+import type { ComponentProps } from "react"
+
+/**
+ * TabPanel props - Content panel for a tab
+ */
+export interface TabPanelProps
+  extends ComponentProps<typeof TabsPrimitive.Content> {
+  /** Visual variant */
+  variant?: "bordered" | "card" | "default"
+}
+
+/**
+ * TabPanelRoot props - Tabs root container
+ */
+export interface TabPanelRootProps
+  extends ComponentProps<typeof TabsPrimitive.Root> {}
+
+/**
+ * TabPanelList props - Container for tab triggers
+ */
+export interface TabPanelListProps
+  extends ComponentProps<typeof TabsPrimitive.List> {}
+
+/**
+ * TabPanelTrigger props - Tab button
+ */
+export interface TabPanelTriggerProps
+  extends ComponentProps<typeof TabsPrimitive.Trigger> {}