@pcoi/components 0.1.0 → 0.1.1

package/src/CitedExcerpt/CitedExcerpt.css

@@ -3,12 +3,12 @@
 .pcoi-cited-excerpt {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
-  padding: var(--pcoi-spacing-12);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
+  padding: var(--pcoi-semantic-spacing-input-y);
   background: var(--pcoi-semantic-surface-accent-dim);
-  border-left: var(--pcoi-layout-component-accent-border-w) solid
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) solid
     var(--pcoi-semantic-border-accent-dim);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-input);
 }
 
 .pcoi-cited-excerpt__source {
@@ -34,13 +34,13 @@
 .pcoi-cited-excerpt__source:focus-visible {
   outline: none;
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
 }
 
 .pcoi-cited-excerpt__body {
   display: flex;
   align-items: baseline;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-cited-excerpt__index {
@@ -63,7 +63,7 @@
 .pcoi-cited-excerpt__index:focus-visible {
   outline: none;
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
 }
 
 .pcoi-cited-excerpt__text {

package/src/ComparisonTable/ComparisonTable.css

@@ -1,9 +1,9 @@
 /* ComparisonTable — @pcoi/components */
 
 .pcoi-comparison {
-  max-width: var(--pcoi-layout-container-compare, 900px);
+  max-width: var(--pcoi-semantic-sizing-comparison-width, 900px);
   border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   overflow: hidden;
 }
 
@@ -19,7 +19,7 @@
   letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
   text-transform: uppercase;
   color: var(--pcoi-semantic-text-secondary);
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
   background: var(--pcoi-semantic-bg-alt);
   text-align: left;
 }
@@ -29,7 +29,7 @@
 }
 
 .pcoi-comparison__col {
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
   font-size: var(--pcoi-semantic-type-body-compact-size);
   color: var(--pcoi-semantic-text-secondary);
   line-height: var(--pcoi-semantic-type-body-compact-line-height);
@@ -53,7 +53,7 @@
 }
 
 /* ── Responsive ── */
-/* 768px = --pcoi-layout-breakpoint-mobile (CSS vars not supported in @media) */
+/* 768px = mobile breakpoint (CSS vars are not supported in @media) */
 @media (max-width: 768px) {
   .pcoi-comparison {
     overflow-x: auto;
@@ -61,6 +61,6 @@
   }
 
   .pcoi-comparison__table {
-    min-width: var(--pcoi-layout-container-compare-scroll);
+    min-width: var(--pcoi-semantic-sizing-comparison-scroll-width);
   }
 }

package/src/ContactForm/ContactForm.css

@@ -3,17 +3,17 @@
 .pcoi-form {
   background: var(--pcoi-semantic-bg-surface);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-lg);
-  padding: var(--pcoi-spacing-40);
+  border-radius: var(--pcoi-semantic-radius-panel);
+  padding: var(--pcoi-semantic-spacing-form-padding);
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-20);
+  gap: var(--pcoi-semantic-spacing-form-gap);
 }
 
 .pcoi-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--pcoi-spacing-20);
+  gap: var(--pcoi-semantic-spacing-form-gap);
 }
 
 .pcoi-form__full {
@@ -29,7 +29,7 @@
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .pcoi-form {
-    padding: var(--pcoi-spacing-24);
+    padding: var(--pcoi-semantic-spacing-panel-padding);
   }
 
   .pcoi-form__row {

package/src/ContactForm/ContactForm.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Button } from "../Button";
 import { FormField } from "../FormField";
 
-export interface ContactFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+export interface ContactFormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
   onSubmit?: (data: Record<string, string>) => void;
 }
 

package/src/DataTable/DataTable.css

@@ -5,7 +5,7 @@
   overflow: hidden;
   overflow-x: auto;
   border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
 }
 
 .pcoi-data-table__table {
@@ -21,7 +21,7 @@
   text-transform: uppercase;
   color: var(--pcoi-semantic-text-secondary);
   text-align: left;
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
   background: var(--pcoi-semantic-bg-alt);
 }
 
@@ -33,7 +33,7 @@
   color: var(--pcoi-semantic-text-secondary);
   line-height: var(--pcoi-semantic-type-body-compact-line-height);
   text-align: left;
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
 }
 
 .pcoi-data-table__td--center { text-align: center; }
@@ -52,5 +52,5 @@
   font-size: var(--pcoi-semantic-type-body-size);
   color: var(--pcoi-semantic-text-muted);
   text-align: center;
-  padding: var(--pcoi-spacing-40) var(--pcoi-spacing-16);
+  padding: var(--pcoi-semantic-spacing-component-gap) var(--pcoi-semantic-spacing-stack-md);
 }

package/src/DocumentOverlay/DocumentOverlay.css

@@ -13,7 +13,7 @@
 }
 
 .pcoi-doc-overlay__content p {
-  margin: 0 0 var(--pcoi-spacing-12);
+  margin: 0 0 var(--pcoi-semantic-spacing-panel-gap);
 }
 
 .pcoi-doc-overlay__content p:last-child {
@@ -23,12 +23,12 @@
 .pcoi-doc-overlay__highlight {
   display: flex;
   align-items: baseline;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
   background: var(--pcoi-semantic-surface-highlight);
-  border-left: var(--pcoi-layout-component-accent-border-w) solid
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) solid
     var(--pcoi-semantic-border-accent-subtle);
-  padding: var(--pcoi-spacing-8) var(--pcoi-spacing-12);
-  border-radius: var(--pcoi-radius-sm);
+  padding: var(--pcoi-semantic-spacing-inline-sm) var(--pcoi-semantic-spacing-input-y);
+  border-radius: var(--pcoi-semantic-radius-input);
   animation: pcoi-doc-highlight-fade 0.4s ease;
 }
 

package/src/DocumentOverlay/DocumentOverlay.test.tsx

@@ -0,0 +1,95 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DocumentOverlay } from "./DocumentOverlay";
+
+describe("DocumentOverlay", () => {
+  it("does not render when closed", () => {
+    render(
+      <DocumentOverlay open={false} onClose={vi.fn()} title="Source doc">
+        <p>Body content</p>
+      </DocumentOverlay>
+    );
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("renders title, body, and source label when open", () => {
+    render(
+      <DocumentOverlay
+        open
+        onClose={vi.fn()}
+        title="Source doc"
+        sourceLabel="Internal Research"
+      >
+        <p>Body content</p>
+      </DocumentOverlay>
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Source doc")).toBeInTheDocument();
+    expect(screen.getByText("Body content")).toBeInTheDocument();
+    expect(screen.getByText("Internal Research")).toBeInTheDocument();
+  });
+
+  it("calls onClose from close button, Escape key, and backdrop click", () => {
+    const onClose = vi.fn();
+
+    render(
+      <DocumentOverlay open onClose={onClose} title="Source doc">
+        <p>Body content</p>
+      </DocumentOverlay>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Close modal" }));
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    const backdrop = document.querySelector(".pcoi-modal");
+    if (!backdrop) throw new Error("Expected modal backdrop to exist");
+    fireEvent.click(backdrop);
+
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+
+  it("highlights and indexes cited content when highlight props are provided", () => {
+    // JSDOM may not provide CSS.escape by default.
+    if (!(globalThis.CSS && typeof globalThis.CSS.escape === "function")) {
+      const existing = globalThis.CSS ?? ({} as CSS);
+      globalThis.CSS = {
+        ...existing,
+        escape: (value: string) => value,
+      } as CSS;
+    }
+
+    const raf = vi
+      .spyOn(window, "requestAnimationFrame")
+      .mockImplementation((cb: FrameRequestCallback) => {
+        cb(0);
+        return 1;
+      });
+
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+
+    render(
+      <DocumentOverlay
+        open
+        onClose={vi.fn()}
+        title="Source doc"
+        highlightId="cite-1"
+        highlightIndex={2}
+      >
+        <p id="cite-1">Cited paragraph</p>
+      </DocumentOverlay>
+    );
+
+    const cited = screen.getByText("Cited paragraph");
+    expect(cited).toHaveClass("pcoi-doc-overlay__highlight");
+    expect(cited).toHaveAttribute("data-highlight-index", "[2]");
+    expect(scrollIntoView).toHaveBeenCalled();
+
+    raf.mockRestore();
+  });
+});

package/src/DocumentOverlay/DocumentOverlay.tsx

@@ -31,7 +31,7 @@ export const DocumentOverlay = React.forwardRef<
 >(
   (
     { open, onClose, title, sourceLabel, children, highlightId, highlightIndex, className = "", ...rest },
-    ref
+    _ref
   ) => {
     const contentRef = useRef<HTMLDivElement>(null);
 

package/src/Footer/Footer.css

@@ -2,11 +2,11 @@
 
 .pcoi-footer {
   border-top: 1px solid var(--pcoi-semantic-border-default);
-  padding: var(--pcoi-spacing-60) var(--pcoi-spacing-24) var(--pcoi-spacing-40);
+  padding: var(--pcoi-semantic-spacing-section-y-md) var(--pcoi-semantic-spacing-btn-x) var(--pcoi-semantic-spacing-component-gap);
 }
 
 .pcoi-footer__inner {
-  max-width: var(--pcoi-layout-container-max);
+  max-width: var(--pcoi-semantic-sizing-container-max);
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
@@ -15,7 +15,7 @@
 
 /* ── Brand (LogoMark overrides) ── */
 .pcoi-footer__logo {
-  margin-bottom: var(--pcoi-spacing-8);
+  margin-bottom: var(--pcoi-semantic-spacing-stack-sm);
 }
 
 .pcoi-footer__tagline {
@@ -30,7 +30,7 @@
 .pcoi-footer__links {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--pcoi-spacing-28);
+  gap: var(--pcoi-semantic-spacing-inline-lg);
 }
 
 .pcoi-footer__links a {
@@ -46,9 +46,9 @@
 
 /* ── Bottom ── */
 .pcoi-footer__bottom {
-  max-width: var(--pcoi-layout-container-max);
-  margin: var(--pcoi-spacing-40) auto 0;
-  padding-top: var(--pcoi-spacing-24);
+  max-width: var(--pcoi-semantic-sizing-container-max);
+  margin: var(--pcoi-semantic-spacing-component-gap) auto 0;
+  padding-top: var(--pcoi-semantic-spacing-panel-padding);
   border-top: 1px solid var(--pcoi-semantic-border-default);
 }
 
@@ -62,11 +62,11 @@
 @media (max-width: 768px) {
   .pcoi-footer__inner {
     flex-direction: column;
-    gap: var(--pcoi-spacing-32);
+    gap: var(--pcoi-semantic-spacing-stack-lg);
   }
 
   .pcoi-footer__links {
     flex-direction: column;
-    gap: var(--pcoi-spacing-14);
+    gap: var(--pcoi-semantic-spacing-stack-compact);
   }
 }

package/src/FormField/FormField.css

@@ -3,7 +3,7 @@
 .pcoi-field {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-field__label {
@@ -16,7 +16,7 @@
 
 .pcoi-field__required {
   color: var(--pcoi-semantic-text-error);
-  margin-left: var(--pcoi-spacing-4);
+  margin-left: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-field__input,
@@ -26,8 +26,8 @@
   color: var(--pcoi-semantic-text-primary);
   background: var(--pcoi-semantic-bg-default);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-sm);
-  padding: var(--pcoi-spacing-12) var(--pcoi-spacing-14);
+  border-radius: var(--pcoi-semantic-radius-input);
+  padding: var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-input-x-compact);
   transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease),
               box-shadow var(--pcoi-effect-transition-fast, 0.2s ease);
 }

package/src/FormField/FormField.figma.tsx

@@ -0,0 +1,28 @@
+import figma from "@figma/code-connect";
+import { FormField } from "./FormField";
+
+/**
+ * Code Connect: FormField
+ * Maps Figma form field properties to React FormField props
+ */
+figma.connect(FormField, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=103-1", {
+  props: {
+    label: figma.string("Label"),
+    placeholder: figma.string("Placeholder"),
+    multiline: figma.boolean("Multiline"),
+    required: figma.boolean("Required"),
+    disabled: figma.boolean("Disabled"),
+    hasError: figma.boolean("Error"),
+  },
+  example: ({ label, placeholder, multiline, required, disabled, hasError }) => (
+    <FormField
+      name="field"
+      label={label}
+      placeholder={placeholder}
+      multiline={multiline}
+      required={required}
+      disabled={disabled}
+      error={hasError ? "This field is required." : undefined}
+    />
+  ),
+});

package/src/HowStep/HowStep.css

@@ -3,8 +3,8 @@
 .pcoi-how-step {
   display: flex;
   align-items: flex-start;
-  gap: var(--pcoi-spacing-32);
-  padding: var(--pcoi-spacing-40) 0;
+  gap: var(--pcoi-semantic-spacing-stack-lg);
+  padding: var(--pcoi-semantic-spacing-component-gap) 0;
   border-bottom: 1px solid var(--pcoi-semantic-border-default);
 }
 
@@ -16,7 +16,7 @@
   flex-shrink: 0;
   width: var(--pcoi-semantic-sizing-step-number);
   height: var(--pcoi-semantic-sizing-step-number);
-  border-radius: var(--pcoi-radius-full);
+  border-radius: var(--pcoi-semantic-radius-avatar);
   background: var(--pcoi-semantic-surface-accent-dim);
   border: 1px solid var(--pcoi-semantic-border-accent-dim);
   display: flex;
@@ -37,7 +37,7 @@
   font-size: var(--pcoi-semantic-type-step-title-size);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-spacing-8) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-stack-sm) 0;
 }
 
 .pcoi-how-step__desc {

package/src/HowStep/HowStep.figma.tsx

@@ -0,0 +1,23 @@
+import figma from "@figma/code-connect";
+import { HowStep } from "./HowStep";
+
+/**
+ * Code Connect: HowStep
+ * Maps Figma step properties to React HowStep props
+ */
+figma.connect(HowStep, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=107-1", {
+  props: {
+    number: figma.string("Step Number"),
+    title: figma.string("Title"),
+    description: figma.string("Description"),
+    isLast: figma.boolean("Last Step"),
+  },
+  example: ({ number, title, description, isLast }) => (
+    <HowStep
+      number={number}
+      title={title}
+      description={description}
+      isLast={isLast}
+    />
+  ),
+});

package/src/LogoMark/LogoMark.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-export interface LogoMarkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-}
+export type LogoMarkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
 /**
  * PCOI Logo Mark — Atom

package/src/Modal/Modal.css

@@ -3,12 +3,12 @@
 .pcoi-modal {
   position: fixed;
   inset: 0;
-  z-index: var(--pcoi-layout-zIndex-modal, 500);
+  z-index: var(--pcoi-semantic-layout-z-modal, 500);
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--pcoi-semantic-bg-overlay);
-  padding: var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-panel-padding);
   animation: pcoi-modal-fade-in 0.2s ease;
 }
 
@@ -16,10 +16,10 @@
   font-family: var(--pcoi-semantic-type-body-font);
   background: var(--pcoi-semantic-surface-elevated);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-lg);
+  border-radius: var(--pcoi-semantic-radius-panel);
   box-shadow: var(--pcoi-effect-shadow-elevated);
   width: 100%;
-  max-width: var(--pcoi-layout-container-modal);
+  max-width: var(--pcoi-semantic-sizing-modal-width);
   max-height: 85vh;
   display: flex;
   flex-direction: column;
@@ -30,7 +30,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--pcoi-spacing-20) var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-card-gap) var(--pcoi-semantic-spacing-panel-padding);
   border-bottom: 1px solid var(--pcoi-semantic-border-default);
 }
 
@@ -48,8 +48,8 @@
   font-size: var(--pcoi-semantic-type-close-lg-size);
   line-height: var(--pcoi-semantic-type-none-line-height);
   cursor: pointer;
-  padding: var(--pcoi-spacing-4);
-  border-radius: var(--pcoi-radius-sm);
+  padding: var(--pcoi-semantic-spacing-control-padding-2xs);
+  border-radius: var(--pcoi-semantic-radius-btn);
   transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
 }
 
@@ -67,7 +67,7 @@
 }
 
 .pcoi-modal__body {
-  padding: var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-panel-padding);
   overflow-y: auto;
   flex: 1;
   font-size: var(--pcoi-semantic-type-body-size);
@@ -79,14 +79,14 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--pcoi-spacing-12);
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-24);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
+  padding: var(--pcoi-semantic-spacing-panel-padding-sm) var(--pcoi-semantic-spacing-panel-padding);
   border-top: 1px solid var(--pcoi-semantic-border-default);
 }
 
 /* ── Size variants ── */
 .pcoi-modal__dialog--wide {
-  max-width: var(--pcoi-layout-container-document, 900px);
+  max-width: var(--pcoi-semantic-sizing-document-width, 900px);
 }
 
 /* ── Animations ── */

package/src/Modal/Modal.figma.tsx

@@ -0,0 +1,28 @@
+import figma from "@figma/code-connect";
+import { Modal } from "./Modal";
+
+/**
+ * Code Connect: Modal
+ * Maps Figma modal variants to React Modal props
+ */
+figma.connect(Modal, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=104-1", {
+  props: {
+    size: figma.enum("Size", {
+      Default: "default",
+      Wide: "wide",
+    }),
+    title: figma.string("Title"),
+    withFooter: figma.boolean("Footer"),
+  },
+  example: ({ size, title, withFooter }) => (
+    <Modal
+      open
+      onClose={() => undefined}
+      size={size}
+      title={title}
+      footer={withFooter ? <button type="button">Confirm</button> : undefined}
+    >
+      <p>Modal body content</p>
+    </Modal>
+  ),
+});

package/src/Modal/Modal.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Modal } from "./Modal";
+
+describe("Modal", () => {
+  it("does not render when closed", () => {
+    render(
+      <Modal open={false} onClose={vi.fn()} title="Dialog title">
+        Body
+      </Modal>
+    );
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("renders dialog content when open", () => {
+    render(
+      <Modal open onClose={vi.fn()} title="Dialog title">
+        Body content
+      </Modal>
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Dialog title")).toBeInTheDocument();
+    expect(screen.getByText("Body content")).toBeInTheDocument();
+  });
+
+  it("calls onClose for close button, Escape key, and backdrop click", () => {
+    const onClose = vi.fn();
+
+    render(
+      <Modal open onClose={onClose} title="Dialog title">
+        Body
+      </Modal>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Close modal" }));
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    const backdrop = document.querySelector(".pcoi-modal");
+    if (!backdrop) throw new Error("Expected modal backdrop to exist");
+    fireEvent.click(backdrop);
+
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+});