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();
|
markCreateFlowInteraction();
|
||||||
setExpanded((prev) => !prev);
|
setExpanded((prev) => !prev);
|
||||||
}}
|
}}
|
||||||
hasMore={true}
|
hasMore={sampleCards.length > compactLimit}
|
||||||
toggleLabel={comm.page.seeAllLink}
|
toggleLabel={comm.page.seeAllLink}
|
||||||
compactRecommendedLimit={compactLimit}
|
compactRecommendedLimit={compactLimit}
|
||||||
compactCardIds={compactCardIds}
|
compactCardIds={compactCardIds}
|
||||||
|
|||||||
@@ -716,7 +716,7 @@ export function ConflictManagementScreen() {
|
|||||||
markCreateFlowInteraction();
|
markCreateFlowInteraction();
|
||||||
setExpanded((prev) => !prev);
|
setExpanded((prev) => !prev);
|
||||||
}}
|
}}
|
||||||
hasMore={true}
|
hasMore={sampleCards.length > compactLimit}
|
||||||
toggleLabel={cm.page.seeAllLink}
|
toggleLabel={cm.page.seeAllLink}
|
||||||
compactRecommendedLimit={compactLimit}
|
compactRecommendedLimit={compactLimit}
|
||||||
compactCardIds={compactCardIds}
|
compactCardIds={compactCardIds}
|
||||||
|
|||||||
@@ -708,7 +708,7 @@ export function MembershipMethodsScreen() {
|
|||||||
markCreateFlowInteraction();
|
markCreateFlowInteraction();
|
||||||
setExpanded((prev) => !prev);
|
setExpanded((prev) => !prev);
|
||||||
}}
|
}}
|
||||||
hasMore={true}
|
hasMore={sampleCards.length > compactLimit}
|
||||||
toggleLabel={mem.page.seeAllLink}
|
toggleLabel={mem.page.seeAllLink}
|
||||||
compactRecommendedLimit={compactLimit}
|
compactRecommendedLimit={compactLimit}
|
||||||
compactCardIds={compactCardIds}
|
compactCardIds={compactCardIds}
|
||||||
|
|||||||
@@ -780,7 +780,7 @@ export function DecisionApproachesScreen() {
|
|||||||
onCardSelect={handleCardSelect}
|
onCardSelect={handleCardSelect}
|
||||||
expanded={expanded}
|
expanded={expanded}
|
||||||
onToggleExpand={handleToggleExpand}
|
onToggleExpand={handleToggleExpand}
|
||||||
hasMore={true}
|
hasMore={sampleCards.length > compactLimit}
|
||||||
toggleLabel={da.cardStack.toggleSeeAll}
|
toggleLabel={da.cardStack.toggleSeeAll}
|
||||||
showLessLabel={da.cardStack.toggleShowLess}
|
showLessLabel={da.cardStack.toggleShowLess}
|
||||||
title=""
|
title=""
|
||||||
|
|||||||
@@ -84,12 +84,12 @@ function StackCard({
|
|||||||
alternativePrefix: string;
|
alternativePrefix: string;
|
||||||
}) {
|
}) {
|
||||||
const supportText =
|
const supportText =
|
||||||
!expanded && item.compactSupportText
|
!expanded && !selected && item.compactSupportText
|
||||||
? item.compactSupportText
|
? item.compactSupportText
|
||||||
: item.supportText;
|
: item.supportText;
|
||||||
const recommended = Boolean(expanded && item.recommended);
|
const recommended = Boolean(expanded && item.recommended);
|
||||||
const alternative =
|
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)]">
|
<p className="w-full text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
|
||||||
{alternativePrefix}{" "}
|
{alternativePrefix}{" "}
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -192,6 +192,55 @@ describe("CardStack Component", () => {
|
|||||||
).not.toBeInTheDocument();
|
).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", () => {
|
test("compact alternative row opens the named card", () => {
|
||||||
const onAlternativeSelect = vi.fn();
|
const onAlternativeSelect = vi.fn();
|
||||||
render(
|
render(
|
||||||
|
|||||||
Reference in new issue
Block a user