gov-gui
Version:
Gov UI Component Library Typscript Build
208 lines (207 loc) • 8.03 kB
JavaScript
import { html } from "lit-html";
import "../../global/animate.min.css";
/**
* Stepper component used to navigate through steps in either horizontal or vertical layout.
* It includes validation and allows for form submission at the end of the steps.
*/
export default {
title: 'Components/Stepper',
component: 'gov-stepper',
tags: ['autodocs'],
parameters: {
actions: {
handles: ['stepChanged', 'stepSubmitted', 'stepError'],
},
},
argTypes: {
variant: {
control: 'select',
options: ['horizontal', 'vertical'],
description: 'Defines the layout of the stepper (horizontal or vertical)',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'horizontal' },
category: 'Attributes',
},
},
steps: {
control: 'array',
description: 'Array of step labels',
table: {
type: { summary: 'string[]' },
defaultValue: { summary: '[]' },
category: 'Slot',
},
},
nextText: {
control: 'text',
description: 'Text for the "Next" button',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Next' },
category: 'Attributes',
},
},
prevText: {
control: 'text',
description: 'Text for the "Previous" button',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Previous' },
category: 'Attributes',
},
},
submitText: {
control: 'text',
description: 'Text for the "Submit" button',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Submit' },
category: 'Attributes',
},
},
resetOnSubmit: {
control: 'boolean',
description: 'Defines whether the form should reset after submission and display a success banner',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: true },
category: 'Attributes',
},
},
maxStepsVisible: {
control: { type: 'number', min: 1 },
description: 'Maximum number of steps visible for horizontal stepper',
table: {
type: { summary: 'number' },
defaultValue: { summary: 5 },
category: 'Attributes',
},
},
validateStep: {
control: 'function',
description: 'Custom validation function for each step',
table: {
type: { summary: 'function' },
defaultValue: { summary: '(){}' },
category: 'Attributes',
},
},
onSubmit: {
control: 'function',
description: 'Custom submit handler for the stepper',
table: {
type: { summary: 'function' },
defaultValue: { summary: '(){}' },
category: 'Attributes',
},
},
animation: {
control: 'select',
options: ["",
"bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat",
"backInDown", "backInLeft", "backInRight", "backInUp",
"backOutDown", "backOutLeft", "backOutRight", "backOutUp",
"bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp",
"bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp",
"fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight",
"fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft",
"flip", "flipInX", "flipInY", "flipOutX", "flipOutY",
"lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft",
"rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight",
"rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight",
"hinge", "jackInTheBox", "rollIn", "rollOut",
"zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp",
"zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp",
"slideInDown", "slideInLeft", "slideInRight", "slideInUp",
"slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"
],
description: 'Selects the animation effect to apply to the component.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Animations',
},
},
animationDelay: {
control: 'select',
options: ["2s", "3s", "4s", "5s"],
description: 'Sets the delay before the animation begins (in seconds).',
table: {
type: { summary: 'string' },
defaultValue: { summary: '2s' },
category: 'Animations',
},
},
animationSpeed: {
control: 'select',
options: ["slow", "slower", "fast", "faster"],
description: 'Controls how quickly the animation plays.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Animations',
},
},
},
};
const Template = (args) => html `
<gov-stepper
variant="${args.variant}"
.validateStep="${args.validateStep}"
.onSubmit="${args.onSubmit}"
next-text="${args.nextText}"
prev-text="${args.prevText}"
submit-text="${args.submitText}"
reset-on-submit="${args.resetOnSubmit}"
max-steps-visible="${args.maxStepsVisible}"
animation-delay="${args.animationDelay}"
animation="${args.animation}"
animation-speed="${args.animationSpeed}"
>
${args.steps.map((step, index) => html `
<div slot="step-${index}">Content for ${step}</div>
`)}
</gov-stepper>
`;
export const Stepper = Template.bind({});
Stepper.args = {
variant: 'horizontal',
steps: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
nextText: 'Next',
prevText: 'Previous',
submitText: 'Submit',
resetOnSubmit: true,
maxStepsVisible: 5,
validateStep: async (step) => {
// Simulate validation (replace with actual validation logic)
console.log(`Validating step ${step}`);
return true;
},
onSubmit: async () => {
// Simulate form submission
console.log('Form submitted');
},
animation: '',
animationDelay: '',
animationSpeed: '',
};
Stepper.parameters = {
docs: {
source: {
code: `<gov-stepper
variant="${Stepper.args.variant}"
.validateStep="${Stepper.args.validateStep}"
.onSubmit="${Stepper.args.onSubmit}"
next-text="${Stepper.args.nextText}"
prev-text="${Stepper.args.prevText}"
submit-text="${Stepper.args.submitText}"
reset-on-submit="${Stepper.args.resetOnSubmit}"
max-steps-visible="${Stepper.args.maxStepsVisible}">
${Stepper.args.steps.map((step, index) => `
<div slot="step-${index}">Content for ${step}</div>`)}
</gov-stepper>`,
},
},
};
//# sourceMappingURL=gov-stepper.stories.js.map