Make research previews clickable cards

Author: MaggieAppleton

packages/editor/src/styles.css

@@ -21,6 +21,27 @@
 	box-shadow: var(--shadow-resting);
 }
 
+.plan-content [data-research-ready] {
+	position: relative;
+	box-shadow: var(--shadow-raised);
+	transition: box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.plan-content [data-research-ready]:hover,
+.plan-content [data-research-ready]:focus-within {
+	box-shadow: var(--shadow-overlay);
+}
+
+.plan-research-open {
+	position: absolute;
+	z-index: 1;
+	inset: 0;
+	cursor: pointer;
+	border: 0;
+	border-radius: inherit;
+	background: transparent;
+}
+
 .plan-research-composer {
 	display: grid;
 	gap: 0.625rem;

packages/editor/src/widgets/research.test.tsx

@@ -636,6 +636,12 @@ describe("research card", () => {
 		expect(markup).toContain("Researched by Planner");
 		expect(markup).toContain("Open Rollout evidence");
 		expect(markup.match(/Open Rollout evidence/g)).toHaveLength(1);
+		expect(markup).toContain('aria-label="Open Rollout evidence"');
+		expect(markup).toContain('class="plan-research-open"');
+		expect(markup).toContain('data-research-ready=""');
+		expect(markup).not.toContain("https://example.com/releases");
+		expect(markup).not.toContain("Remove research reference");
+		expect(markup).not.toContain("plan-research-actions");
 		expect(markup).not.toContain("Expand");
 	});
 

packages/editor/src/widgets/research.tsx

@@ -226,7 +226,7 @@ export function ResearchCard(
 		: undefined;
 	let actions = researchActions(request, canEdit);
 	return (
-		<SidecarCard label="Research">
+		<SidecarCard data-research-ready={ready ? "" : undefined} label="Research">
 			<div className="plan-research-heading">
 				<strong>{ready ? ready.title : STAGES[request.stage]}</strong>
 				<span>{ready ? STAGES[request.stage] : request.question}</span>
@@ -241,7 +241,7 @@ export function ResearchCard(
 				</>
 			)}
 			{request.error && <p className="plan-research-error" role="status">{request.error}</p>}
-			{request.sources.length > 0 && (
+			{!ready && request.sources.length > 0 && (
 				<ul aria-label="Research sources" className="plan-research-sources">
 					{request.sources.map(source => (
 						<li key={source.url}>
@@ -251,52 +251,53 @@ export function ResearchCard(
 				</ul>
 			)}
 			{actionError && <p className="plan-research-error" role="status">{actionError}</p>}
-			<div className="plan-research-actions">
-				{actions.cancel && onCancel && (
-					<button
-						aria-label="Cancel research"
-						className="btn btn-sm btn-secondary"
-						disabled={busy || !canEdit}
-						onClick={onCancel}
-						type="button"
-					>
-						Cancel
-					</button>
-				)}
-				{actions.retry && onRetry && (
-					<button
-						aria-label="Retry research"
-						className="btn btn-sm btn-secondary"
-						disabled={busy || !canEdit}
-						onClick={onRetry}
-						type="button"
-					>
-						Retry
-					</button>
-				)}
-				{actions.open && ready && onOpen && (
-					<button
-						className="btn btn-sm btn-primary"
-						disabled={busy}
-						onClick={event => onOpen(event.currentTarget)}
-						ref={openButtonRef}
-						type="button"
-					>
-						Open {ready.title}
-					</button>
-				)}
-				{actions.remove && onRemove && (
-					<button
-						aria-label="Remove research reference"
-						className="btn btn-sm btn-ghost"
-						disabled={busy || !canEdit}
-						onClick={onRemove}
-						type="button"
-					>
-						Remove
-					</button>
-				)}
-			</div>
+			{!ready && (
+				<div className="plan-research-actions">
+					{actions.cancel && onCancel && (
+						<button
+							aria-label="Cancel research"
+							className="btn btn-sm btn-secondary"
+							disabled={busy || !canEdit}
+							onClick={onCancel}
+							type="button"
+						>
+							Cancel
+						</button>
+					)}
+					{actions.retry && onRetry && (
+						<button
+							aria-label="Retry research"
+							className="btn btn-sm btn-secondary"
+							disabled={busy || !canEdit}
+							onClick={onRetry}
+							type="button"
+						>
+							Retry
+						</button>
+					)}
+					{actions.remove && onRemove && (
+						<button
+							aria-label="Remove research reference"
+							className="btn btn-sm btn-ghost"
+							disabled={busy || !canEdit}
+							onClick={onRemove}
+							type="button"
+						>
+							Remove
+						</button>
+					)}
+				</div>
+			)}
+			{actions.open && ready && onOpen && (
+				<button
+					aria-label={`Open ${ready.title}`}
+					className="plan-research-open"
+					disabled={busy}
+					onClick={event => onOpen(event.currentTarget)}
+					ref={openButtonRef}
+					type="button"
+				/>
+			)}
 		</SidecarCard>
 	);
 }