Component cleanup

2026-04-29 07:20:16 -06:00
parent 252848eba9
commit e6127f1a3f
267 changed files with 2087 additions and 2196 deletions
@@ -0,0 +1,104 @@
+"use client";
+
+import Tag from "../../utility/Tag";
+import type { SelectionViewProps } from "./Selection.types";
+
+function InfoIcon() {
+  return (
+    <span
+      className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
+      aria-hidden
+    >
+      ?
+    </span>
+  );
+}
+
+function SelectionTag({
+  recommended,
+  selected,
+}: {
+  recommended: boolean;
+  selected: boolean;
+}) {
+  if (selected) return <Tag variant="selected" />;
+  if (recommended) return <Tag variant="recommended" />;
+  return null;
+}
+
+export function SelectionView({
+  label,
+  supportText,
+  recommended,
+  selected,
+  orientation,
+  showInfoIcon,
+  id: selectionId,
+  className,
+  onClick,
+  onKeyDown,
+}: SelectionViewProps) {
+  const borderClass = "border border-[var(--color-border-default-primary)]";
+  const selectedBorder = selected
+    ? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
+    : "";
+
+  // Figma: "Card / CardSelection" vertical stack — node `16775:28762` (dev).
+  // Prop `orientation="horizontal"` is this stacked layout (historical naming).
+  if (orientation === "horizontal") {
+    const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+
+    return (
+      <div
+        {...(selectionId ? { "data-card-id": selectionId } : {})}
+        role="button"
+        tabIndex={0}
+        aria-label={supportText ? `${label}: ${supportText}` : label}
+        className={`${baseClasses} flex min-h-0 w-full flex-col items-start justify-center gap-1`}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+      >
+        <SelectionTag recommended={recommended} selected={selected} />
+        <span className="w-full font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
+          {label}
+        </span>
+        {supportText ? (
+          <p className="w-full font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
+            {supportText}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+
+  return (
+    <div
+      {...(selectionId ? { "data-card-id": selectionId } : {})}
+      role="button"
+      tabIndex={0}
+      aria-label={supportText ? `${label}: ${supportText}` : label}
+      className={`${baseClasses} flex flex-row items-center justify-between gap-4`}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <div className="flex items-center gap-1">
+          <span className="font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
+            {label}
+          </span>
+          {showInfoIcon ? <InfoIcon /> : null}
+        </div>
+        {supportText ? (
+          <p className="font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
+            {supportText}
+          </p>
+        ) : null}
+      </div>
+      <div className="shrink-0">
+        <SelectionTag recommended={recommended} selected={selected} />
+      </div>
+    </div>
+  );
+}