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,53 @@
+"use client";
+
+import { memo } from "react";
+import { SelectionView } from "./Selection.view";
+import type { SelectionProps } from "./Selection.types";
+
+/**
+ * Figma: "Card / CardSelection" — stacked tile e.g. `16775:28762` (recommended + label + supportText).
+ * `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + optional info icon with tag on the right (CardStack expanded / single-column).
+ */
+const SelectionContainer = memo<SelectionProps>(
+  ({
+    label,
+    supportText = "",
+    recommended = false,
+    selected = false,
+    orientation = "horizontal",
+    showInfoIcon = false,
+    id,
+    className = "",
+    onClick,
+  }) => {
+    const handleClick = () => {
+      if (onClick) onClick();
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+
+    return (
+      <SelectionView
+        label={label}
+        supportText={supportText}
+        recommended={recommended}
+        selected={selected}
+        orientation={orientation}
+        showInfoIcon={showInfoIcon}
+        id={id}
+        className={className}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      />
+    );
+  },
+);
+
+SelectionContainer.displayName = "Selection";
+
+export default SelectionContainer;
@@ -0,0 +1,25 @@
+export interface SelectionProps {
+  label: string;
+  supportText?: string;
+  recommended?: boolean;
+  selected?: boolean;
+  orientation: "horizontal" | "vertical";
+  showInfoIcon?: boolean;
+  /** Optional id for the root (e.g. `data-card-id` for focus after modal close). */
+  id?: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+export interface SelectionViewProps {
+  label: string;
+  supportText: string;
+  recommended: boolean;
+  selected: boolean;
+  orientation: "horizontal" | "vertical";
+  showInfoIcon: boolean;
+  id: string | undefined;
+  className: string;
+  onClick: () => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
@@ -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>
+  );
+}
@@ -0,0 +1,2 @@
+export { default } from "./Selection.container";
+export type { SelectionProps } from "./Selection.types";