@spatika/react 1.0.0 → 1.2.0

package/src/composites/marketing.test.tsx

@@ -0,0 +1,192 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Tag } from "./Tag";
+import { SectionHeading } from "./SectionHeading";
+import { SiteNav } from "./SiteNav";
+import { SiteFooter } from "./SiteFooter";
+import { GradientText } from "./GradientText";
+import { Wordmark } from "./Wordmark";
+import { AvailabilityBadge } from "./AvailabilityBadge";
+import { FloatChip } from "./FloatChip";
+import { MetaChip } from "./MetaChip";
+import { IconTile } from "./IconTile";
+import { ContactLink } from "./ContactLink";
+import { CareerCard, CareerTimeline } from "./CareerCard";
+import { ProjectCard } from "./ProjectCard";
+import { PresenceDot } from "./PresenceDot";
+import { AccentRule } from "./AccentRule";
+
+describe("Tag", () => {
+  it("renders label text", () => {
+    render(<Tag>Java</Tag>);
+    expect(screen.getByText("Java")).toBeInTheDocument();
+  });
+
+  it("supports color tones from the marketing site", () => {
+    render(<Tag variant="orange">AWS</Tag>);
+    expect(screen.getByText("AWS").className).toMatch(/orange/);
+  });
+});
+
+describe("SectionHeading", () => {
+  it("renders eyebrow, title, and subtitle without a header element", () => {
+    const { container } = render(
+      <SectionHeading eyebrow="Product" title="What's shipping" subtitle="Glass composites." />,
+    );
+    expect(screen.getByText("Product")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "What's shipping" })).toBeInTheDocument();
+    expect(screen.getByText("Glass composites.")).toBeInTheDocument();
+    expect(container.querySelector("header")).toBeNull();
+    expect(container.querySelector("[data-slot='section-heading']")).toBeTruthy();
+  });
+});
+
+describe("SiteNav", () => {
+  it("renders brand and links", async () => {
+    const user = userEvent.setup();
+    render(
+      <SiteNav
+        brand={<a href="/">Brand</a>}
+        links={[
+          { href: "#about", label: "About" },
+          { href: "/blog", label: "Blog" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Brand")).toBeInTheDocument();
+    expect(screen.getAllByText("About").length).toBeGreaterThan(0);
+    expect(screen.getByRole("navigation").className).toContain("spk-site-nav");
+    await user.click(screen.getByRole("button", { name: "Toggle menu" }));
+    expect(screen.getByLabelText("Toggle menu")).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("does not pin to the viewport when contained", () => {
+    render(
+      <SiteNav
+        contained
+        brand={<a href="/">Brand</a>}
+        links={[{ href: "#about", label: "About" }]}
+      />,
+    );
+    const nav = screen.getByRole("navigation");
+    expect(nav.className).toContain("absolute");
+    expect(nav.className).not.toMatch(/\bfixed\b/);
+  });
+});
+
+describe("SiteFooter", () => {
+  it("renders brand, copyright, and links", () => {
+    render(
+      <SiteFooter
+        brand={<span>Acme</span>}
+        copyright="© 2026"
+        links={[{ href: "#about", label: "About" }]}
+        meta={<MetaChip>Next.js</MetaChip>}
+      />,
+    );
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+    expect(screen.getByText("© 2026")).toBeInTheDocument();
+    expect(screen.getByText("About")).toBeInTheDocument();
+    expect(screen.getByText("Next.js")).toBeInTheDocument();
+  });
+});
+
+describe("marketing chrome", () => {
+  it("renders a gradient wordmark", () => {
+    render(<Wordmark name="Acme" accent=".io" />);
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+    expect(screen.getByText(".io")).toBeInTheDocument();
+  });
+
+  it("renders gradient text", () => {
+    render(<GradientText>Spatika</GradientText>);
+    expect(screen.getByText("Spatika")).toBeInTheDocument();
+  });
+
+  it("renders an availability badge with a live pip", () => {
+    render(<AvailabilityBadge>Live</AvailabilityBadge>);
+    expect(screen.getByText("Live")).toBeInTheDocument();
+    expect(document.querySelector("[data-slot='presence-dot']")).toBeTruthy();
+  });
+
+  it("renders a float chip", () => {
+    render(<FloatChip icon="✨" title="Glass" subtitle="UI" />);
+    expect(screen.getByText("Glass")).toBeInTheDocument();
+    expect(screen.getByText("UI")).toBeInTheDocument();
+  });
+
+  it("renders a live float chip", () => {
+    render(<FloatChip live>In production</FloatChip>);
+    expect(screen.getByText("In production")).toBeInTheDocument();
+  });
+
+  it("renders a presence dot", () => {
+    render(<PresenceDot label="Online" />);
+    expect(screen.getByLabelText("Online")).toBeInTheDocument();
+  });
+
+  it("renders an accent rule", () => {
+    const { container } = render(<AccentRule />);
+    expect(container.querySelector("[data-slot='accent-rule']")).toBeTruthy();
+  });
+});
+
+describe("IconTile", () => {
+  it("renders title and description", () => {
+    render(<IconTile icon="🏦" title="Banking" description="Markets" />);
+    expect(screen.getByText("Banking")).toBeInTheDocument();
+    expect(screen.getByText("Markets")).toBeInTheDocument();
+  });
+});
+
+describe("ContactLink", () => {
+  it("renders name, label, and href", () => {
+    render(
+      <ContactLink href="mailto:hi@example.com" name="Email" label="hi@example.com" icon="@" />,
+    );
+    const link = screen.getByRole("link", { name: /Email/ });
+    expect(link).toHaveAttribute("href", "mailto:hi@example.com");
+    expect(screen.getByText("hi@example.com")).toBeInTheDocument();
+  });
+});
+
+describe("CareerCard", () => {
+  it("renders a current role with tags", () => {
+    render(
+      <CareerTimeline>
+        <CareerCard
+          role="Engineer"
+          company="Acme"
+          location="Remote"
+          period="2024 — Present"
+          current
+          bullets={["Shipped the thing."]}
+          tags={["Java"]}
+        />
+      </CareerTimeline>
+    );
+    expect(screen.getByText("Engineer")).toBeInTheDocument();
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+    expect(screen.getByText("Shipped the thing.")).toBeInTheDocument();
+    expect(screen.getByText("Java")).toBeInTheDocument();
+  });
+});
+
+describe("ProjectCard", () => {
+  it("renders title, company, outcome, and tags", () => {
+    render(
+      <ProjectCard
+        title="Spatika UI"
+        company="Open source"
+        outcome="Shipped"
+        description="Glass React design system."
+        tags={["React"]}
+      />,
+    );
+    expect(screen.getByText("Spatika UI")).toBeInTheDocument();
+    expect(screen.getByText("Open source")).toBeInTheDocument();
+    expect(screen.getByText("Shipped")).toBeInTheDocument();
+    expect(screen.getByText("React")).toBeInTheDocument();
+  });
+});

package/src/composites/radial-charts.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Gauge, LinearGauge, PieChart, RadarChart } from "./radial-charts";
+
+describe("radial-charts", () => {
+  it("renders a pie chart from slice values", () => {
+    const { container } = render(
+      <PieChart
+        width={200}
+        height={200}
+        series={[{ data: [{ value: 10, label: "A" }, { value: 20, label: "B" }] }]}
+      />,
+    );
+    expect(container.querySelector('[data-slot="pie-chart"]')).toBeTruthy();
+    expect(screen.getByRole("button", { name: "A" })).toBeInTheDocument();
+  });
+
+  it("renders a single-value gauge with a percent label", () => {
+    render(<Gauge value={40} width={160} height={120} />);
+    expect(screen.getByRole("img", { name: "Gauge 40" })).toBeInTheDocument();
+    expect(screen.getByText("40%")).toBeInTheDocument();
+  });
+
+  it("renders a segmented gauge with a section legend", () => {
+    const { container } = render(
+      <Gauge
+        width={160}
+        height={120}
+        startAngle={-90}
+        endAngle={90}
+        sections={[
+          { value: 40, label: "v5" },
+          { value: 35, label: "v6" },
+          { value: 25, label: "v7" },
+        ]}
+      />,
+    );
+    expect(container.querySelector('[data-slot="gauge"]')).toBeTruthy();
+    expect(screen.getByRole("button", { name: "v5" })).toBeInTheDocument();
+    expect(container.querySelectorAll('[data-slot="gauge"] path').length).toBe(3);
+  });
+
+  it("hides the section legend and accepts a text formatter", () => {
+    render(
+      <Gauge
+        value={72}
+        width={160}
+        height={120}
+        hideLegend
+        text={(value) => `${value} pts`}
+        sections={[{ value: 1, label: "hidden" }]}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: "hidden" })).not.toBeInTheDocument();
+    expect(screen.getByText("72 pts")).toBeInTheDocument();
+  });
+
+  it("renders a linear gauge and a radar polygon", () => {
+    const { container } = render(
+      <div>
+        <LinearGauge value={25} width={200} />
+        <RadarChart
+          width={220}
+          height={220}
+          radar={{ metrics: ["A", "B", "C"] }}
+          series={[{ label: "One", data: [3, 5, 4] }]}
+        />
+      </div>,
+    );
+    expect(container.querySelector('[data-slot="linear-gauge"]')).toBeTruthy();
+    expect(container.querySelector('[data-slot="radar-chart"]')).toBeTruthy();
+    expect(screen.getByRole("button", { name: "One" })).toBeInTheDocument();
+  });
+});