@xenide-io/the-old-ui-theme 0.9.18 → 0.11.0

package/src/components/ui/index.ts

@@ -17,6 +17,16 @@ export {
   ButtonChrome as ButtonChrome,
   type ButtonChromeProps as ButtonChromeProps,
 } from "@/components/ui/ButtonChrome";
+export {
+  MarketingHeader,
+  MarketingLink,
+  MarketingMotionControl,
+  MarketingReveal,
+} from "@/components/ui/Marketing";
+export {
+  AiWritingIllustration,
+  IntegrationBridgeIllustration,
+} from "@/components/ui/MarketingIllustrations";
 export {
   Alert as Alert,
   type AlertProps as AlertProps,
@@ -124,6 +134,7 @@ export {
   Table as Table,
   type TableColumn as TableColumn,
   type TableProps as TableProps,
+  type TableVariant as TableVariant,
 } from "@/components/ui/Table";
 export {
   Stat as Stat,
@@ -158,10 +169,7 @@ export {
   type CommandItem,
   type CommandPaletteProps,
 } from "@/components/ui/CommandPalette";
-export {
-  Calendar,
-  type CalendarProps,
-} from "@/components/ui/Calendar";
+export { Calendar, type CalendarProps } from "@/components/ui/Calendar";
 export {
   Tooltip,
   TooltipProvider,
@@ -170,10 +178,7 @@ export {
   type TooltipProviderProps,
   type TooltipSide,
 } from "@/components/ui/Tooltip";
-export {
-  EmptyState,
-  type EmptyStateProps,
-} from "@/components/ui/EmptyState";
+export { EmptyState, type EmptyStateProps } from "@/components/ui/EmptyState";
 export {
   FilterChips,
   type FilterChip,
@@ -257,9 +262,12 @@ export {
   type SpinnerProps as SpinnerProps,
 } from "@/components/ui/Spinner";
 export {
-  Dot as Dot,
-  type DotProps as DotProps,
-} from "@/components/ui/Dot";
+  BrandSpinner,
+  type BrandSpinnerProps,
+  type BrandSpinnerSize,
+  type BrandSpinnerVariant,
+} from "@/components/ui/BrandSpinner";
+export { Dot as Dot, type DotProps as DotProps } from "@/components/ui/Dot";
 export {
   Chip as Chip,
   type ChipProps as ChipProps,

package/src/components/ui/interaction-primitives.test.tsx

@@ -97,13 +97,14 @@ describe("chip", () => {
 });
 
 describe("segmented control", () => {
-  it("exposes and updates the selected option as a pressed button", async () => {
+  it("exposes a radio group and moves selection with arrow keys", async () => {
     const user = userEvent.setup();
 
     function Fixture() {
       const [value, setValue] = useState("board");
       return (
         <SegmentedControl
+          aria-label="View"
           value={value}
           onChange={setValue}
           options={[
@@ -115,15 +116,20 @@ describe("segmented control", () => {
     }
 
     render(<Fixture />);
-    expect(screen.getByRole("button", { name: "Board" })).toHaveAttribute(
-      "aria-pressed",
+    expect(screen.getByRole("radiogroup", { name: "View" })).toBeInTheDocument();
+    const board = screen.getByRole("radio", { name: "Board" });
+    expect(board).toHaveAttribute(
+      "aria-checked",
       "true",
     );
 
-    await user.click(screen.getByRole("button", { name: "List" }));
-    expect(screen.getByRole("button", { name: "List" })).toHaveAttribute(
-      "aria-pressed",
+    await user.click(board);
+    await user.keyboard("{ArrowRight}");
+    const list = screen.getByRole("radio", { name: "List" });
+    expect(list).toHaveAttribute(
+      "aria-checked",
       "true",
     );
+    expect(list).toHaveFocus();
   });
 });

package/src/components/ui/marketing.test.tsx

@@ -0,0 +1,39 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { MarketingHeader, MarketingMotionControl } from "./Marketing";
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("data-marketing-paused");
+});
+
+describe("marketing controls", () => {
+  it("names navigation and exposes shared focus targets", () => {
+    render(
+      <MarketingHeader
+        brand={<a href="https://example.com">ShellStack</a>}
+        navigation={<a href="https://example.com/features">Features</a>}
+        actions={<a href="https://example.com/login">Log in</a>}
+      />,
+    );
+
+    expect(screen.getByRole("navigation", { name: "Product navigation" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "ShellStack" })).toBeInTheDocument();
+  });
+
+  it("pauses and resumes landing animation state", async () => {
+    const user = userEvent.setup();
+    render(<MarketingMotionControl />);
+
+    const control = screen.getByRole("button", { name: "Pause landing animations" });
+    await user.click(control);
+    expect(control).toHaveAttribute("aria-pressed", "true");
+    expect(document.documentElement).toHaveAttribute("data-marketing-paused");
+
+    await user.click(control);
+    expect(control).toHaveAttribute("aria-pressed", "false");
+    expect(document.documentElement).not.toHaveAttribute("data-marketing-paused");
+  });
+});

package/src/components/ui/table.test.tsx

@@ -0,0 +1,47 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Table } from "./Table";
+
+afterEach(cleanup);
+
+describe("Table", () => {
+  it("names its scroll region and renders a custom empty state", () => {
+    render(
+      <Table
+        data={[] as Array<{ name: string }>}
+        columns={[{ key: "name", header: "Name", cell: (row) => row.name }]}
+        caption="People"
+        emptyState="No people yet."
+      />,
+    );
+
+    expect(screen.getByRole("region", { name: "People" })).toHaveAttribute(
+      "tabindex",
+      "0",
+    );
+    expect(
+      screen.getByRole("cell", { name: "No people yet." }),
+    ).toHaveAttribute("colspan", "1");
+  });
+
+  it("lets report pages own their empty state without an extra table row", () => {
+    render(
+      <Table
+        variant="report"
+        caption="Run report"
+        data={[] as Array<{ name: string }>}
+        columns={[{ key: "name", header: "Crew", cell: (row) => row.name }]}
+        emptyState={null}
+      />,
+    );
+    expect(
+      screen.getByRole("table", { name: "Run report" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Crew" })).toHaveAttribute(
+      "scope",
+      "col",
+    );
+    expect(screen.queryByRole("cell")).not.toBeInTheDocument();
+  });
+});