@tangle-network/ui 11.41.0 → 11.43.0

package/src/primitives/compliance-badge.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ComplianceBadge } from './compliance-badge'
+
+const meta: Meta<typeof ComplianceBadge> = {
+  title: 'Primitives/ComplianceBadge',
+  component: ComplianceBadge,
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+type Story = StoryObj<typeof ComplianceBadge>
+
+/**
+ * The default and the only HIPAA state surfaces may ship before the
+ * documented launch gate closes. Renders "HIPAA-Ready", outlined, on the
+ * info triple.
+ */
+export const Ready: Story = { args: { status: 'ready' } }
+
+/**
+ * Reserved for after HIPAA's launch gate closes (BAAs executed +
+ * infrastructure blockers resolved, per
+ * compliance/policies/hipaa-security-program.md). Renders "HIPAA Compliant",
+ * filled, on the success triple.
+ */
+export const Compliant: Story = { args: { status: 'compliant' } }
+
+export const ReadyMedium: Story = { args: { status: 'ready', size: 'md' } }
+export const CompliantMedium: Story = { args: { status: 'compliant', size: 'md' } }
+
+/**
+ * SOC 2 before an attestation: plain "SOC 2", outlined.
+ */
+export const Soc2Ready: Story = { args: { product: 'soc2', status: 'ready' } }
+
+/**
+ * SOC 2 Type II is an ATTAINED audit (final report on file at
+ * compliance/evidence/2026-09-01-final-audit), so unlike HIPAA's "compliant"
+ * this filled form is legitimate to ship today. Renders "SOC 2 Type II".
+ */
+export const Soc2TypeII: Story = { args: { product: 'soc2', status: 'compliant' } }
+
+export const Soc2TypeIIMedium: Story = {
+  args: { product: 'soc2', status: 'compliant', size: 'md' },
+}
+
+export const Linked: Story = {
+  args: { status: 'ready', href: '/trust' },
+}
+
+export const AllStates: Story = {
+  name: 'All States',
+  render: () => (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">HIPAA</div>
+      <div className="flex flex-wrap items-center gap-2">
+        <ComplianceBadge status="ready" />
+        <ComplianceBadge status="compliant" />
+        <ComplianceBadge status="ready" size="md" />
+        <ComplianceBadge status="compliant" size="md" />
+      </div>
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">SOC 2</div>
+      <div className="flex flex-wrap items-center gap-2">
+        <ComplianceBadge product="soc2" status="ready" />
+        <ComplianceBadge product="soc2" status="compliant" />
+        <ComplianceBadge product="soc2" status="ready" size="md" />
+        <ComplianceBadge product="soc2" status="compliant" size="md" />
+      </div>
+      <div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Linked</div>
+      <div className="flex flex-wrap items-center gap-2">
+        <ComplianceBadge status="ready" href="/trust" />
+        <ComplianceBadge product="soc2" status="compliant" href="/trust" />
+      </div>
+    </div>
+  ),
+}

package/src/primitives/compliance-badge.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ComplianceBadge } from "./compliance-badge";
+
+describe("ComplianceBadge", () => {
+  // The copy rule the component exists to enforce: there is no official HIPAA
+  // certification and the launch gate has not closed, so the unqualified claim
+  // must never render unless a caller asks for it explicitly.
+  it("defaults to HIPAA-Ready", () => {
+    render(<ComplianceBadge />);
+    expect(screen.getByLabelText("HIPAA-Ready")).toBeInTheDocument();
+    expect(screen.queryByText("HIPAA Compliant")).not.toBeInTheDocument();
+  });
+
+  it("renders HIPAA Compliant only with an explicit compliant status", () => {
+    render(<ComplianceBadge status="compliant" />);
+    expect(screen.getByLabelText("HIPAA Compliant")).toBeInTheDocument();
+  });
+
+  it("keeps the HIPAA copy exact when a product is given", () => {
+    render(<ComplianceBadge product="hipaa" status="ready" />);
+    expect(screen.getByLabelText("HIPAA-Ready")).toBeInTheDocument();
+  });
+
+  // SOC 2 Type II is an attained audit (compliance/evidence/2026-09-01-final-audit),
+  // so unlike HIPAA the filled claim is legitimate to render today — but still
+  // only under an explicit status, with plain "SOC 2" as the default.
+  it("defaults soc2 to plain SOC 2", () => {
+    render(<ComplianceBadge product="soc2" />);
+    expect(screen.getByLabelText("SOC 2")).toBeInTheDocument();
+    expect(screen.queryByText("SOC 2 Type II")).not.toBeInTheDocument();
+  });
+
+  it("renders SOC 2 Type II with an explicit compliant status", () => {
+    render(<ComplianceBadge product="soc2" status="compliant" />);
+    expect(screen.getByLabelText("SOC 2 Type II")).toBeInTheDocument();
+  });
+
+  it("fills the attained SOC 2 claim like any compliant status", () => {
+    const { container } = render(
+      <ComplianceBadge product="soc2" status="compliant" />,
+    );
+    const badge = container.firstElementChild as HTMLElement;
+    expect(badge.className).toContain("bg-[var(--surface-success-bg)]");
+  });
+
+  it("never says certified", () => {
+    const { container } = render(<ComplianceBadge status="compliant" />);
+    expect(container.textContent).not.toMatch(/certif/i);
+  });
+
+  it("outlines ready and fills compliant, each from one surface token triple", () => {
+    const { container: ready } = render(<ComplianceBadge status="ready" />);
+    const readyBadge = ready.firstElementChild as HTMLElement;
+    expect(readyBadge.className).toContain("bg-transparent");
+    expect(readyBadge.className).toContain("border-[var(--surface-info-border)]");
+    expect(readyBadge.className).toContain("text-[var(--surface-info-text)]");
+
+    const { container: compliant } = render(
+      <ComplianceBadge status="compliant" />,
+    );
+    const compliantBadge = compliant.firstElementChild as HTMLElement;
+    expect(compliantBadge.className).toContain(
+      "bg-[var(--surface-success-bg)]",
+    );
+    expect(compliantBadge.className).toContain(
+      "text-[var(--surface-success-text)]",
+    );
+  });
+
+  it("paints no hardcoded colours", () => {
+    const { container } = render(<ComplianceBadge status="compliant" />);
+    const badge = container.firstElementChild as HTMLElement;
+    expect(badge.className).not.toMatch(
+      /(?:bg|text|border)-(?:green|blue|red|amber|emerald)-/,
+    );
+  });
+
+  // The mark is decorative; the label carries the whole claim, so announcing
+  // both would say the same thing twice.
+  it("hides the brand mark from the accessibility tree", () => {
+    const { container } = render(<ComplianceBadge />);
+    const mark = container.querySelector("svg");
+    expect(mark).not.toBeNull();
+    expect(mark?.closest('[aria-hidden="true"]')).not.toBeNull();
+  });
+
+  it("renders as a link when href is given", () => {
+    render(<ComplianceBadge href="/trust" />);
+    const link = screen.getByRole("link", { name: "HIPAA-Ready" });
+    expect(link).toHaveAttribute("href", "/trust");
+  });
+
+  it("renders as a span without href", () => {
+    const { container } = render(<ComplianceBadge />);
+    expect(container.firstElementChild?.tagName).toBe("SPAN");
+  });
+
+  it.each(["sm", "md"] as const)("takes the %s size", (size) => {
+    const { container } = render(<ComplianceBadge size={size} />);
+    const badge = container.firstElementChild as HTMLElement;
+    expect(badge.className).toContain(size === "sm" ? "text-xs" : "text-sm");
+  });
+});

package/src/primitives/compliance-badge.tsx

@@ -0,0 +1,139 @@
+import * as React from "react";
+import { TangleKnot } from "@tangle-network/brand";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/**
+ * The one compliance badge every public surface uses, so the claim a page
+ * makes is chosen here and nowhere else.
+ *
+ * Copy discipline is the point of the component. There is NO official HIPAA
+ * certification a product can hold, so the badge never says "certified", and
+ * it renders "HIPAA Compliant" ONLY when a caller passes `status="compliant"`
+ * explicitly. The default — and the only HIPAA state surfaces may ship
+ * today — is `status="ready"`, which renders "HIPAA-Ready".
+ *
+ * For HIPAA, `status="compliant"` is reserved for use AFTER the company's
+ * documented launch gate closes: business associate agreements executed AND
+ * the infrastructure blockers resolved, per
+ * compliance/policies/hipaa-security-program.md. Do not pass it before that
+ * gate is confirmed closed in the policy record, whatever a page design
+ * suggests.
+ *
+ * That gate is HIPAA's. SOC 2 Type II is an ATTAINED audit, not a pending
+ * one — the final report is on file at
+ * compliance/evidence/2026-09-01-final-audit — so for `product="soc2"` the
+ * filled `status="compliant"` form, "SOC 2 Type II", is legitimate to render
+ * today.
+ *
+ * The claim is told three ways, matching StatusPill's doctrine: the LABEL
+ * text itself ("HIPAA-Ready" vs "HIPAA Compliant"), the FILL (outlined vs
+ * filled), and the TONE (the info triple while the gate is open, the success
+ * triple once it closes). Each status paints from one matched `--surface-*`
+ * token triple, so the text colour is solved against a known plane; the
+ * outlined "ready" form keeps the triple's text and border, which clear the
+ * 4.5:1 body floor on the page canvas, on a transparent fill.
+ *
+ * The Tangle mark is decorative: the label already carries the whole claim,
+ * so the mark is hidden from the accessibility tree and the badge's own
+ * `aria-label` states the claim.
+ */
+export type ComplianceStatus = "ready" | "compliant";
+
+/**
+ * The record is keyed by product so each framework's claim is reviewed copy
+ * in one place, not string interpolation at call sites. ISO 27001 slots in
+ * the same way when its audit lands.
+ */
+export type ComplianceProduct = "hipaa" | "soc2";
+
+export interface ComplianceBadgeProps {
+  /**
+   * Defaults to "ready". For HIPAA, pass "compliant" only after the launch
+   * gate closes; for SOC 2 the Type II audit is already attained, so
+   * "compliant" is legitimate today.
+   */
+  status?: ComplianceStatus;
+  product?: ComplianceProduct;
+  size?: "sm" | "md";
+  /** Renders the badge as a link, e.g. to the trust or compliance page. */
+  href?: string;
+  className?: string;
+  id?: string;
+  title?: string;
+}
+
+const PRODUCT_COPY: Record<
+  ComplianceProduct,
+  Record<ComplianceStatus, string>
+> = {
+  hipaa: {
+    ready: "HIPAA-Ready",
+    compliant: "HIPAA Compliant",
+  },
+  soc2: {
+    ready: "SOC 2",
+    compliant: "SOC 2 Type II",
+  },
+};
+
+/**
+ * Outlined while a claim is still being earned (info: still moving), filled
+ * once it is attained (success: settled). Both draw from ONE matched token
+ * triple — no hardcoded colours — so themes repaint the badge like any other
+ * surface.
+ */
+const STATUS_SURFACE: Record<ComplianceStatus, string> = {
+  ready:
+    "border-[var(--surface-info-border)] bg-transparent text-[var(--surface-info-text)]",
+  compliant:
+    "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+};
+
+const SIZE_CLASSES = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-sm",
+} as const;
+
+const MARK_SIZE = { sm: 12, md: 14 } as const;
+
+function ComplianceBadge({
+  status = "ready",
+  product = "hipaa",
+  size = "sm",
+  href,
+  className,
+  ...props
+}: ComplianceBadgeProps) {
+  const label = PRODUCT_COPY[product][status];
+  const classes = cn(
+    "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border font-medium",
+    SIZE_CLASSES[size],
+    STATUS_SURFACE[status],
+    href && focusRing,
+    className,
+  );
+  const mark = (
+    <span className="inline-flex shrink-0" aria-hidden="true">
+      <TangleKnot size={MARK_SIZE[size]} />
+    </span>
+  );
+
+  if (href) {
+    return (
+      <a href={href} aria-label={label} className={classes} {...props}>
+        {mark}
+        {label}
+      </a>
+    );
+  }
+
+  return (
+    <span aria-label={label} className={classes} {...props}>
+      {mark}
+      {label}
+    </span>
+  );
+}
+
+export { ComplianceBadge };

package/src/primitives/index.ts

@@ -227,6 +227,13 @@ export type { PaginationProps } from "./pagination";
 export { StatusPill } from "./status-pill";
 export type { StatusPillProps, StatusTone } from "./status-pill";
 
+export { ComplianceBadge } from "./compliance-badge";
+export type {
+  ComplianceBadgeProps,
+  ComplianceProduct,
+  ComplianceStatus,
+} from "./compliance-badge";
+
 export { Tag } from "./tag";
 export type { TagProps } from "./tag";
 
@@ -248,5 +255,26 @@ export type { CategoryTone, Tone, ToneClasses } from "./tone";
 export { MetricStrip, Metric } from "./metric-strip";
 export type { MetricStripProps, MetricProps } from "./metric-strip";
 
+export { SeriesSparkline } from "./series-sparkline";
+export type { SeriesSparklineProps } from "./series-sparkline";
+export { MetricChart } from "./metric-chart";
+export type { ChartReferenceLine, MetricChartProps } from "./metric-chart";
+export {
+  normalizeSeries,
+  periodDelta,
+  seriesAreaPath,
+  seriesExtent,
+  seriesLinePath,
+  seriesMean,
+  seriesScale,
+} from "../lib/series";
+export type {
+  PeriodDelta,
+  SeriesExtent,
+  SeriesPoint,
+  SeriesPointInput,
+  SeriesScale,
+} from "../lib/series";
+
 export { Toolbar, FilterField } from "./toolbar";
 export type { ToolbarProps, FilterFieldProps } from "./toolbar";

package/src/primitives/metric-chart.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MetricChart } from "./metric-chart";
+
+const meta = {
+  title: "Primitives/MetricChart",
+  component: MetricChart,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof MetricChart>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DAY = 86_400_000;
+const t0 = Date.parse("2026-08-24T07:00:00.000Z");
+
+const bloodPressure = Array.from({ length: 12 }, (_, index) => ({
+  at: t0 + index * 5 * DAY,
+  value: 118 + ((index * 7) % 9),
+  value2: 74 + ((index * 5) % 8),
+}));
+
+const steps = Array.from({ length: 12 }, (_, index) => ({
+  at: t0 + index * 5 * DAY,
+  value: 6_200 + ((index * 1_937) % 4_800),
+}));
+
+export const DualSeries: Story = {
+  args: {
+    title: "Blood pressure",
+    unit: "mmHg",
+    decimals: 0,
+    points: bloodPressure,
+    referenceLines: [
+      { value: 120, label: "120 systolic" },
+      { value: 80, label: "80 diastolic", series: "secondary" },
+    ],
+  },
+};
+
+export const SingleSeries: Story = {
+  args: {
+    title: "Steps",
+    unit: "steps",
+    decimals: 0,
+    points: steps,
+  },
+};
+
+export const SingleReading: Story = {
+  args: {
+    title: "Weight",
+    unit: "kg",
+    decimals: 1,
+    points: [{ at: t0, value: 71.4 }],
+  },
+};

package/src/primitives/metric-chart.test.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { MetricChart } from "./metric-chart";
+
+afterEach(cleanup);
+
+const DAY = 86_400_000;
+const t0 = Date.parse("2026-09-01T07:00:00.000Z");
+const points = Array.from({ length: 10 }, (_, index) => ({
+  at: t0 + index * 5 * DAY,
+  value: 118 + (index % 3) * 4,
+  value2: 76 + (index % 2) * 4,
+}));
+
+describe("MetricChart", () => {
+  it("renders an accessible svg with a generated summary description", () => {
+    const { container } = render(
+      <MetricChart points={points} title="Blood pressure" unit="mmHg" decimals={0} />,
+    );
+    const svg = screen.getByRole("img", { name: "Blood pressure" });
+    expect(svg.querySelector("title")!.textContent).toBe("Blood pressure");
+    const desc = svg.querySelector("desc")!.textContent!;
+    expect(desc).toContain("10 readings");
+    expect(desc).toContain("min 118");
+    expect(desc).toContain("max 126");
+    expect(desc).toContain("mmHg");
+    // Primary line, area and dotted secondary series.
+    expect(container.querySelectorAll("path").length).toBeGreaterThanOrEqual(3);
+  });
+
+  it("honours a caller-provided description", () => {
+    const { container } = render(
+      <MetricChart points={points} title="Blood pressure" description="Custom summary." />,
+    );
+    expect(container.querySelector("desc")!.textContent).toBe("Custom summary.");
+  });
+
+  it("draws gridlines, date ticks and labelled reference lines on muted ink", () => {
+    const { container } = render(
+      <MetricChart
+        points={points}
+        title="Blood pressure"
+        referenceLines={[
+          { value: 120, label: "120 systolic" },
+          { value: 80, label: "80 diastolic", series: "secondary" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("120 systolic")).toBeInTheDocument();
+    expect(screen.getByText("80 diastolic")).toBeInTheDocument();
+    // Four interior y ticks plus three x date ticks.
+    expect(screen.getByText("Sep 1")).toBeInTheDocument();
+    const dashed = Array.from(container.querySelectorAll("line")).filter(
+      (line) => line.getAttribute("stroke-dasharray") === "5 4",
+    );
+    expect(dashed).toHaveLength(2);
+    for (const line of dashed) expect(line.closest("g")!.getAttribute("class")).toContain("text-muted-foreground");
+  });
+
+  it("drops secondary reference lines when the series has no second reading", () => {
+    const single = points.map(({ at, value }) => ({ at, value }));
+    const { container } = render(
+      <MetricChart
+        points={single}
+        title="Heart rate"
+        referenceLines={[{ value: 80, label: "80 diastolic", series: "secondary" }]}
+      />,
+    );
+    expect(screen.queryByText("80 diastolic")).toBeNull();
+    expect(
+      Array.from(container.querySelectorAll("line")).filter(
+        (line) => line.getAttribute("stroke-dasharray") === "5 4",
+      ),
+    ).toHaveLength(0);
+  });
+
+  it("marks a single reading and renders axes only when data exists", () => {
+    const { container, rerender } = render(
+      <MetricChart points={[points[0]!]} title="Blood pressure" />,
+    );
+    expect(container.querySelectorAll("circle")).toHaveLength(1);
+    rerender(<MetricChart points={[]} title="Blood pressure" />);
+    expect(container.querySelectorAll("line")).toHaveLength(0);
+    expect(container.querySelectorAll("path")).toHaveLength(0);
+    expect(screen.getByRole("img", { name: "Blood pressure" })).toBeInTheDocument();
+  });
+
+  it("keeps every stroke and fill on currentColor", () => {
+    const { container } = render(<MetricChart points={points} title="Blood pressure" />);
+    for (const element of Array.from(container.querySelectorAll("[stroke], [fill]"))) {
+      const paint = element.getAttribute("stroke") ?? element.getAttribute("fill");
+      expect(["currentColor", "none"]).toContain(paint);
+    }
+  });
+
+  it("supports caller value and time formatting", () => {
+    render(
+      <MetricChart
+        points={points}
+        title="Blood pressure"
+        formatValue={(value) => `${value.toFixed(0)}!`}
+        formatTime={() => "sometime"}
+      />,
+    );
+    expect(screen.getAllByText("sometime")).toHaveLength(3);
+    expect(screen.getAllByText(/!$/).length).toBeGreaterThan(0);
+  });
+
+  it("preserves ref, caller attributes and caller classes", () => {
+    const ref = React.createRef<SVGSVGElement>();
+    const { container } = render(
+      <MetricChart ref={ref} points={points} title="Blood pressure" data-testid="bp" className="max-w-md" />,
+    );
+    expect(ref.current).toBe(container.querySelector("svg"));
+    expect(screen.getByTestId("bp").getAttribute("class")).toContain("max-w-md");
+  });
+});