adilallo
140 lines
3.2 KiB
JavaScript
140 lines
3.2 KiB
JavaScript
import CardStack from "../../app/components/utility/CardStack";
|
|
|
|
const SAMPLE_CARDS = [
|
|
{
|
|
id: "1",
|
|
label: "Label",
|
|
supportText:
|
|
"Collaborative work to reach a resolution that all parties can agree upon.",
|
|
recommended: true,
|
|
},
|
|
{
|
|
id: "2",
|
|
label: "Label",
|
|
supportText:
|
|
"Structured sessions where parties collaboratively resolve disputes.",
|
|
recommended: true,
|
|
},
|
|
{
|
|
id: "3",
|
|
label: "Label",
|
|
supportText: "Members vote to resolve a dispute democratically.",
|
|
recommended: true,
|
|
},
|
|
{
|
|
id: "4",
|
|
label: "Label",
|
|
supportText: "Arbitrators are chosen specifically for a particular case.",
|
|
recommended: true,
|
|
},
|
|
{
|
|
id: "5",
|
|
label: "Label",
|
|
supportText:
|
|
"Encouraging direct, respectful dialogue between those involved.",
|
|
recommended: true,
|
|
},
|
|
{
|
|
id: "6",
|
|
label: "Label",
|
|
supportText: "Invite-only",
|
|
recommended: true,
|
|
},
|
|
];
|
|
|
|
export default {
|
|
title: "Create Flow/CardStack",
|
|
component: CardStack,
|
|
parameters: {
|
|
layout: "centered",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"Card stack for the create flow: compact grid or expanded list with toggle. Uses Card components; toggle visible only when hasMore is true.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
expanded: {
|
|
control: { type: "boolean" },
|
|
description: "Expanded (list) vs compact (grid) mode",
|
|
},
|
|
hasMore: {
|
|
control: { type: "boolean" },
|
|
description: "Whether to show the See all / Show less toggle",
|
|
},
|
|
},
|
|
tags: ["autodocs"],
|
|
};
|
|
|
|
export const Default = {
|
|
args: {
|
|
cards: SAMPLE_CARDS,
|
|
hasMore: true,
|
|
title: "How should this community communicate with each-other?",
|
|
description:
|
|
"You can select multiple methods for different needs or add your own",
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Compact grid with sample cards and See all toggle.",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export const Expanded = {
|
|
args: {
|
|
cards: SAMPLE_CARDS,
|
|
expanded: true,
|
|
hasMore: true,
|
|
title:
|
|
"What method should this community use to communicate with eachother?",
|
|
description:
|
|
"You can select multiple methods for different needs or add your own",
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Expanded list layout with vertical cards and Show less toggle.",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export const WithSelection = {
|
|
args: {
|
|
cards: SAMPLE_CARDS,
|
|
selectedId: "2",
|
|
hasMore: true,
|
|
title: "How should this community communicate with each-other?",
|
|
description:
|
|
"You can select multiple methods for different needs or add your own",
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Second card is selected; click cards to change selection.",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export const NoToggle = {
|
|
args: {
|
|
cards: SAMPLE_CARDS.slice(0, 3),
|
|
hasMore: false,
|
|
title: "How should this community communicate with each-other?",
|
|
description:
|
|
"You can select multiple methods for different needs or add your own",
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "When hasMore is false, the See all toggle is hidden.",
|
|
},
|
|
},
|
|
},
|
|
};
|