@dillingerstaffing/strand-ui 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dillingerstaffing/strand-ui",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Strand UI - Preact/React component library built on the Strand Design Language",
   "author": "Dillinger Staffing <engineering@dillingerstaffing.com> (https://dillingerstaffing.com)",
   "license": "MIT",
@@ -60,7 +60,7 @@
     }
   },
   "dependencies": {
-    "@dillingerstaffing/strand": "^0.4.0"
+    "@dillingerstaffing/strand": "^0.5.1"
   },
   "devDependencies": {
     "@testing-library/preact": "^3.2.0",

package/src/components/CodeBlock/CodeBlock.css

@@ -0,0 +1,44 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Layout ── */
+.strand-code-block {
+  position: relative;
+}
+
+/* ── Label (optional language indicator) ── */
+.strand-code-block__label {
+  display: block;
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+  margin-bottom: var(--strand-space-2);
+}
+
+/* ── Code area ── */
+.strand-code-block__pre {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-sm);
+  line-height: var(--strand-leading-relaxed);
+  color: var(--strand-blue-midnight);
+  background: var(--strand-surface-recessed);
+  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.06);
+  border-radius: var(--strand-radius-lg);
+  padding: var(--strand-space-3) var(--strand-space-4);
+  overflow-x: auto;
+  white-space: pre;
+  tab-size: 2;
+  margin: 0;
+}
+
+/* ── Inline code ── */
+.strand-code-inline {
+  font-family: var(--strand-font-mono);
+  font-size: 0.875em;
+  color: var(--strand-blue-deep);
+  background: var(--strand-surface-recessed);
+  padding: 0.125em 0.375em;
+  border-radius: var(--strand-radius-sm);
+}

package/src/components/CodeBlock/CodeBlock.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { CodeBlock } from "./CodeBlock.js";
+
+describe("CodeBlock", () => {
+  // ── Rendering ──
+
+  it("renders code content", () => {
+    const { getByText } = render(
+      <CodeBlock code="console.log('hello')" />,
+    );
+    expect(getByText("console.log('hello')")).toBeTruthy();
+  });
+
+  it("renders as a div element", () => {
+    const { container } = render(
+      <CodeBlock code="test" />,
+    );
+    expect(container.firstElementChild?.tagName).toBe("DIV");
+  });
+
+  it("renders a pre element containing code", () => {
+    const { container } = render(
+      <CodeBlock code="test" />,
+    );
+    const pre = container.querySelector(".strand-code-block__pre");
+    expect(pre).toBeTruthy();
+    expect(pre?.tagName).toBe("PRE");
+    expect(pre?.querySelector("code")).toBeTruthy();
+  });
+
+  // ── Base class ──
+
+  it("applies strand-code-block base class", () => {
+    const { container } = render(
+      <CodeBlock code="test" />,
+    );
+    expect(container.firstElementChild?.className).toContain("strand-code-block");
+  });
+
+  // ── Language label ──
+
+  it("renders language label when provided", () => {
+    const { container } = render(
+      <CodeBlock code="npm install" language="bash" />,
+    );
+    const label = container.querySelector(".strand-code-block__label");
+    expect(label).toBeTruthy();
+    expect(label?.textContent).toBe("bash");
+  });
+
+  it("does not render label when language is omitted", () => {
+    const { container } = render(
+      <CodeBlock code="test" />,
+    );
+    const label = container.querySelector(".strand-code-block__label");
+    expect(label).toBeNull();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component classes", () => {
+    const { container } = render(
+      <CodeBlock code="test" className="custom" />,
+    );
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-code-block");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Code whitespace ──
+
+  it("preserves whitespace in code content", () => {
+    const code = "function hello() {\n  return 'world';\n}";
+    const { container } = render(
+      <CodeBlock code={code} />,
+    );
+    const codeEl = container.querySelector("code");
+    expect(codeEl?.textContent).toBe(code);
+  });
+
+  // ── Forwarded props ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <CodeBlock code="test" id="my-code" />,
+    );
+    expect(container.firstElementChild?.getAttribute("id")).toBe("my-code");
+  });
+});

package/src/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,33 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface CodeBlockProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "label"> {
+  /** The code content to display */
+  code: string;
+  /** Optional language label (e.g. "html", "css", "bash") */
+  language?: string;
+}
+
+export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
+  ({ code, language, className = "", ...rest }, ref) => {
+    const classes = ["strand-code-block", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        {language && (
+          <span className="strand-code-block__label">{language}</span>
+        )}
+        <pre className="strand-code-block__pre">
+          <code>{code}</code>
+        </pre>
+      </div>
+    );
+  },
+);
+
+CodeBlock.displayName = "CodeBlock";

package/src/components/CodeBlock/index.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from "./CodeBlock.js";
+export type { CodeBlockProps } from "./CodeBlock.js";

package/src/index.ts

@@ -47,6 +47,9 @@ export type { TableProps, TableColumn } from "./components/Table/index.js";
 export { DataReadout } from "./components/DataReadout/index.js";
 export type { DataReadoutProps } from "./components/DataReadout/index.js";
 
+export { CodeBlock } from "./components/CodeBlock/index.js";
+export type { CodeBlockProps } from "./components/CodeBlock/index.js";
+
 // Layout components
 export { Stack } from "./components/Stack/index.js";
 export type { StackProps } from "./components/Stack/index.js";