Open each core value as a card of meaning and signals steps, so groups write their own words from an empty field with Generate draft, skip values without blocking the flow, and Customize without keeping helper text as the description.

2026-11-05 21:28:00 -07:00
1 parent 2a7b9e6da7
commit 64a542f456
@@ -0,0 +1,100 @@
+"use client";
+
+/**
+ * Figma: ".utility / Step Card" (23742:49583). One row in Overlay / Modal / Card
+ * with Has Steps on — open (step badge) or done (check).
+ */
+
+import { memo } from "react";
+import Icon from "../../../components/asset/icon";
+
+export type ValueDialogStepCardProps = {
+  stepNumber: number;
+  stepBadgeLabel: string;
+  title: string;
+  description: string;
+  done: boolean;
+  onClick: () => void;
+};
+
+function CheckGlyph() {
+  return (
+    <svg
+      aria-hidden
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="text-[var(--color-content-invert-primary,white)]"
+    >
+      <path
+        d="M10 3L4.5 8.5L2 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ValueDialogStepCardComponent({
+  stepNumber,
+  stepBadgeLabel,
+  title,
+  description,
+  done,
+  onClick,
+}: ValueDialogStepCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={title}
+      data-figma-node={done ? "23740:49582" : "23740:49581"}
+      className={`flex w-full shrink-0 items-center gap-[8px] rounded-[12px] border border-solid p-[12px] text-left ${
+        done
+          ? "border-[var(--color-border-default-positive-primary,#45ea97)] bg-[var(--color-surface-default-secondary,#141414)]"
+          : "border-[var(--color-border-default-secondary,#303030)] bg-[var(--color-surface-default-secondary,#141414)] hover:border-[var(--color-border-default-brand-primary,#fdfaa8)]"
+      } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary)]`}
+    >
+      {done ? (
+        <span
+          aria-hidden
+          className="flex size-4 shrink-0 items-center justify-center rounded-[8px] bg-[var(--color-surface-default-positive-primary,#16c472)]"
+        >
+          <CheckGlyph />
+        </span>
+      ) : (
+        <span
+          aria-hidden
+          className="flex w-[48px] shrink-0 items-center justify-center rounded-[12px] bg-[var(--color-surface-default-primary)] py-[4px] text-[length:var(--sizing-250)] font-medium leading-[12px] text-[color:var(--color-content-default-secondary,#c2c2c2)]"
+        >
+          {stepBadgeLabel.replace("{n}", String(stepNumber))}
+        </span>
+      )}
+      <span className="flex min-w-0 flex-1 flex-col items-start gap-[2px]">
+        <span className="w-full text-x-small-paragraph text-[color:var(--color-content-default-primary)]">
+          {title}
+        </span>
+        <span
+          className={`w-full text-[length:var(--sizing-250)] leading-[14px] ${
+            done
+              ? "text-[color:var(--color-content-default-secondary,#c2c2c2)]"
+              : "text-[color:var(--color-content-default-tertiary,#a4a4a4)]"
+          }`}
+        >
+          {description}
+        </span>
+      </span>
+      <span className="flex size-4 shrink-0 items-center justify-center text-[color:var(--color-content-default-primary)]">
+        <Icon name="chevron_right" size={16} />
+      </span>
+    </button>
+  );
+}
+
+ValueDialogStepCardComponent.displayName = "ValueDialogStepCard";
+
+export const ValueDialogStepCard = memo(ValueDialogStepCardComponent);