@spatika/react 1.1.0 → 1.2.0

package/src/composites/marketing.test.tsx

@@ -5,7 +5,6 @@ import { Tag } from "./Tag";
 import { SectionHeading } from "./SectionHeading";
 import { SiteNav } from "./SiteNav";
 import { SiteFooter } from "./SiteFooter";
-import { StatCard } from "./StatCard";
 import { GradientText } from "./GradientText";
 import { Wordmark } from "./Wordmark";
 import { AvailabilityBadge } from "./AvailabilityBadge";
@@ -33,11 +32,11 @@ describe("Tag", () => {
 describe("SectionHeading", () => {
   it("renders eyebrow, title, and subtitle without a header element", () => {
     const { container } = render(
-      <SectionHeading eyebrow="Career" title="Where I've worked" subtitle="7+ years." />,
+      <SectionHeading eyebrow="Product" title="What's shipping" subtitle="Glass composites." />,
     );
-    expect(screen.getByText("Career")).toBeInTheDocument();
-    expect(screen.getByRole("heading", { name: "Where I've worked" })).toBeInTheDocument();
-    expect(screen.getByText("7+ years.")).toBeInTheDocument();
+    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();
   });
@@ -61,6 +60,19 @@ describe("SiteNav", () => {
     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", () => {
@@ -80,41 +92,33 @@ describe("SiteFooter", () => {
   });
 });
 
-describe("StatCard metric", () => {
-  it("renders value-first metric layout", () => {
-    render(<StatCard variant="metric" label="Years Exp." value="7+" />);
-    expect(screen.getByText("7+")).toBeInTheDocument();
-    expect(screen.getByText("Years Exp.")).toBeInTheDocument();
-  });
-});
-
 describe("marketing chrome", () => {
   it("renders a gradient wordmark", () => {
-    render(<Wordmark name="Sreelal" accent=".me" />);
-    expect(screen.getByText("Sreelal")).toBeInTheDocument();
-    expect(screen.getByText(".me")).toBeInTheDocument();
+    render(<Wordmark name="Acme" accent=".io" />);
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+    expect(screen.getByText(".io")).toBeInTheDocument();
   });
 
   it("renders gradient text", () => {
-    render(<GradientText>Chalil</GradientText>);
-    expect(screen.getByText("Chalil")).toBeInTheDocument();
+    render(<GradientText>Spatika</GradientText>);
+    expect(screen.getByText("Spatika")).toBeInTheDocument();
   });
 
   it("renders an availability badge with a live pip", () => {
-    render(<AvailabilityBadge>Open for work</AvailabilityBadge>);
-    expect(screen.getByText("Open for work")).toBeInTheDocument();
+    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="AWS" subtitle="Certified" />);
-    expect(screen.getByText("AWS")).toBeInTheDocument();
-    expect(screen.getByText("Certified")).toBeInTheDocument();
+    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>Open for Work</FloatChip>);
-    expect(screen.getByText("Open for Work")).toBeInTheDocument();
+    render(<FloatChip live>In production</FloatChip>);
+    expect(screen.getByText("In production")).toBeInTheDocument();
   });
 
   it("renders a presence dot", () => {
@@ -173,16 +177,16 @@ describe("ProjectCard", () => {
   it("renders title, company, outcome, and tags", () => {
     render(
       <ProjectCard
-        title="PIM"
-        company="Nissan"
-        outcome="60% cost saved"
-        description="Cloud rewrite."
-        tags={["AWS"]}
+        title="Spatika UI"
+        company="Open source"
+        outcome="Shipped"
+        description="Glass React design system."
+        tags={["React"]}
       />,
     );
-    expect(screen.getByText("PIM")).toBeInTheDocument();
-    expect(screen.getByText("Nissan")).toBeInTheDocument();
-    expect(screen.getByText("60% cost saved")).toBeInTheDocument();
-    expect(screen.getByText("AWS")).toBeInTheDocument();
+    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();
+  });
+});