chore: catch up Storybook preview, coverage, and story hygiene
Stories were throwing without AuthModal/CreateFlow providers, autodocs was a no-op, and several DS/create-flow screens had no stories.
This commit is contained in:
adilallo
+157
-147
@@ -54,158 +54,168 @@ const Template = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
export const Default = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
},
|
||||
render: Template,
|
||||
};
|
||||
|
||||
export const WithStepper = Template.bind({});
|
||||
WithStepper.args = {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 1,
|
||||
totalSteps: 3,
|
||||
export const WithStepper = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 1,
|
||||
totalSteps: 3,
|
||||
},
|
||||
render: Template,
|
||||
};
|
||||
|
||||
export const Step2 = Template.bind({});
|
||||
Step2.args = {
|
||||
isOpen: true,
|
||||
title: "How should conflicts be resolved?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Enter text" value="" />
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 2,
|
||||
totalSteps: 3,
|
||||
export const Step2 = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
title: "How should conflicts be resolved?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Enter text" value="" />
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 2,
|
||||
totalSteps: 3,
|
||||
},
|
||||
render: Template,
|
||||
};
|
||||
|
||||
export const Step3 = Template.bind({});
|
||||
Step3.args = {
|
||||
isOpen: true,
|
||||
title: "Final step",
|
||||
description: "Review your settings",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
Review your policy configuration
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Finish",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 3,
|
||||
totalSteps: 3,
|
||||
export const Step3 = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
title: "Final step",
|
||||
description: "Review your settings",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
Review your policy configuration
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Finish",
|
||||
nextButtonDisabled: false,
|
||||
currentStep: 3,
|
||||
totalSteps: 3,
|
||||
},
|
||||
render: Template,
|
||||
};
|
||||
|
||||
export const WithCustomHeader = Template.bind({});
|
||||
WithCustomHeader.args = {
|
||||
isOpen: true,
|
||||
headerContent: <div className="text-lg font-semibold">Custom header</div>,
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
When headerContent is provided, the default title and description are
|
||||
not shown.
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: false,
|
||||
showNextButton: true,
|
||||
nextButtonText: "Continue",
|
||||
export const WithCustomHeader = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
headerContent: <div className="text-lg font-semibold">Custom header</div>,
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
When headerContent is provided, the default title and description are
|
||||
not shown.
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: false,
|
||||
showNextButton: true,
|
||||
nextButtonText: "Continue",
|
||||
},
|
||||
render: Template,
|
||||
};
|
||||
|
||||
export const WithoutFooter = Template.bind({});
|
||||
WithoutFooter.args = {
|
||||
isOpen: true,
|
||||
title: "Simple Create Dialog",
|
||||
description: "This create dialog has no footer buttons",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
Modal content without footer
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: false,
|
||||
showNextButton: false,
|
||||
export const WithoutFooter = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
title: "Simple Create Dialog",
|
||||
description: "This create dialog has no footer buttons",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
Modal content without footer
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: false,
|
||||
showNextButton: false,
|
||||
},
|
||||
render: Template,
|
||||
};
|
||||
|
||||
export const LoginYellowBackdrop = Template.bind({});
|
||||
LoginYellowBackdrop.args = {
|
||||
isOpen: true,
|
||||
title: "Horizontalism",
|
||||
description: "Edit or add to this description to describe what this value means to your community.",
|
||||
backdropVariant: "blurredYellow",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
Core value detail body (yellow blurred overlay like Login).
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: false,
|
||||
showNextButton: true,
|
||||
nextButtonText: "Add Value",
|
||||
nextButtonDisabled: false,
|
||||
export const LoginYellowBackdrop = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
title: "Horizontalism",
|
||||
description:
|
||||
"Edit or add to this description to describe what this value means to your community.",
|
||||
backdropVariant: "blurredYellow",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<p className="text-[var(--color-content-default-primary)]">
|
||||
Core value detail body (yellow blurred overlay like Login).
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: false,
|
||||
showNextButton: true,
|
||||
nextButtonText: "Add Value",
|
||||
nextButtonDisabled: false,
|
||||
},
|
||||
render: Template,
|
||||
};
|
||||
|
||||
export const NextButtonDisabled = Template.bind({});
|
||||
NextButtonDisabled.args = {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: true,
|
||||
currentStep: 1,
|
||||
totalSteps: 3,
|
||||
export const NextButtonDisabled = {
|
||||
args: {
|
||||
isOpen: true,
|
||||
title: "What do you call your group's new policy?",
|
||||
description: "You can also combine or add new approaches to the list",
|
||||
children: (
|
||||
<div className="space-y-4">
|
||||
<TextInput label="Label" placeholder="Policy name" value="" />
|
||||
<p className="text-[12px] text-[var(--color-content-default-tertiary)]">
|
||||
0/48
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
showBackButton: true,
|
||||
showNextButton: true,
|
||||
backButtonText: "Back",
|
||||
nextButtonText: "Next",
|
||||
nextButtonDisabled: true,
|
||||
currentStep: 1,
|
||||
totalSteps: 3,
|
||||
},
|
||||
render: Template,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user