Keep catalog copy on a selected method card, and only offer See all when the deck is longer than the compact seven.
This commit is contained in:
1 parent
46656f52d3
commit
59f76c5b7d
6 files changed
+55
-6
No files matched your search
@@ -715,7 +715,7 @@ export function CommunicationMethodsScreen() {
|
||||
markCreateFlowInteraction();
|
||||
setExpanded((prev) => !prev);
|
||||
}}
|
||||
hasMore={true}
|
||||
hasMore={sampleCards.length > compactLimit}
|
||||
toggleLabel={comm.page.seeAllLink}
|
||||
compactRecommendedLimit={compactLimit}
|
||||
compactCardIds={compactCardIds}
|
||||
|
||||
@@ -716,7 +716,7 @@ export function ConflictManagementScreen() {
|
||||
markCreateFlowInteraction();
|
||||
setExpanded((prev) => !prev);
|
||||
}}
|
||||
hasMore={true}
|
||||
hasMore={sampleCards.length > compactLimit}
|
||||
toggleLabel={cm.page.seeAllLink}
|
||||
compactRecommendedLimit={compactLimit}
|
||||
compactCardIds={compactCardIds}
|
||||
|
||||
@@ -708,7 +708,7 @@ export function MembershipMethodsScreen() {
|
||||
markCreateFlowInteraction();
|
||||
setExpanded((prev) => !prev);
|
||||
}}
|
||||
hasMore={true}
|
||||
hasMore={sampleCards.length > compactLimit}
|
||||
toggleLabel={mem.page.seeAllLink}
|
||||
compactRecommendedLimit={compactLimit}
|
||||
compactCardIds={compactCardIds}
|
||||
|
||||
@@ -780,7 +780,7 @@ export function DecisionApproachesScreen() {
|
||||
onCardSelect={handleCardSelect}
|
||||
expanded={expanded}
|
||||
onToggleExpand={handleToggleExpand}
|
||||
hasMore={true}
|
||||
hasMore={sampleCards.length > compactLimit}
|
||||
toggleLabel={da.cardStack.toggleSeeAll}
|
||||
showLessLabel={da.cardStack.toggleShowLess}
|
||||
title=""
|
||||
|
||||
@@ -84,12 +84,12 @@ function StackCard({
|
||||
alternativePrefix: string;
|
||||
}) {
|
||||
const supportText =
|
||||
!expanded && item.compactSupportText
|
||||
!expanded && !selected && item.compactSupportText
|
||||
? item.compactSupportText
|
||||
: item.supportText;
|
||||
const recommended = Boolean(expanded && item.recommended);
|
||||
const alternative =
|
||||
!expanded && item.alternative && onAlternativeSelect ? (
|
||||
!expanded && !selected && item.alternative && onAlternativeSelect ? (
|
||||
<p className="w-full text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
|
||||
{alternativePrefix}{" "}
|
||||
<button
|
||||
|
||||
@@ -192,6 +192,55 @@ describe("CardStack Component", () => {
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("selected compact card keeps catalog copy and hides the alternative", () => {
|
||||
render(
|
||||
<CardStack
|
||||
cards={[
|
||||
{
|
||||
id: "1",
|
||||
label: "Option A",
|
||||
supportText: "Catalog copy",
|
||||
compactSupportText: "Fits a worker co-op",
|
||||
recommended: true,
|
||||
alternative: { id: "2", label: "Option B" },
|
||||
},
|
||||
]}
|
||||
selectedIds={["1"]}
|
||||
layout="singleStack"
|
||||
alternativePrefix="Another way communities do this:"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Option A: Catalog copy" }),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Fits a worker co-op/)).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole("button", { name: "Option B" }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("unselected compact card shows the why line", () => {
|
||||
render(
|
||||
<CardStack
|
||||
cards={[
|
||||
{
|
||||
id: "1",
|
||||
label: "Option A",
|
||||
supportText: "Catalog copy",
|
||||
compactSupportText: "Fits a worker co-op",
|
||||
recommended: true,
|
||||
},
|
||||
]}
|
||||
layout="singleStack"
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(
|
||||
screen.getByRole("button", { name: "Option A: Fits a worker co-op" }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("compact alternative row opens the named card", () => {
|
||||
const onAlternativeSelect = vi.fn();
|
||||
render(
|
||||
|
||||
Reference in new issue
Block a user