import React from 'react';
import { Step, StepIndicator } from './react';
export default {
    title: 'Components/Step Indicator',
    component: StepIndicator,
};
export const Default = {
    args: {
        horizontal: false,
        right: false,
    },
    render: (args) => (React.createElement(StepIndicator, { horizontal: args.horizontal, right: args.right },
        React.createElement(Step, { completed: true },
            React.createElement("h3", null, "Step 1: Account Setup"),
            React.createElement("p", null, "Create your account and verify your email address.")),
        React.createElement(Step, { active: true },
            React.createElement("h3", null, "Step 2: Profile Information"),
            React.createElement("p", null, "Fill in your personal details and preferences.")),
        React.createElement(Step, null,
            React.createElement("h3", null, "Step 3: Payment Method"),
            React.createElement("p", null, "Add a payment method to complete your registration.")),
        React.createElement(Step, null,
            React.createElement("h3", null, "Step 4: Confirmation"),
            React.createElement("p", null, "Review and confirm your information.")))),
};
export const Horizontal = {
    args: {
        horizontal: true,
        right: false,
    },
    render: (args) => (React.createElement(StepIndicator, { horizontal: args.horizontal, right: args.right },
        React.createElement(Step, { completed: true },
            React.createElement("h4", null, "Setup"),
            React.createElement("p", null, "Account created")),
        React.createElement(Step, { completed: true },
            React.createElement("h4", null, "Profile"),
            React.createElement("p", null, "Information added")),
        React.createElement(Step, { active: true },
            React.createElement("h4", null, "Payment"),
            React.createElement("p", null, "Add payment method")),
        React.createElement(Step, null,
            React.createElement("h4", null, "Done"),
            React.createElement("p", null, "Complete setup")))),
};
export const RightAligned = {
    args: {
        horizontal: false,
        right: true,
    },
    render: (args) => (React.createElement(StepIndicator, { horizontal: args.horizontal, right: args.right },
        React.createElement(Step, { completed: true },
            React.createElement("h3", null, "Order Placed"),
            React.createElement("p", null, "Your order has been received and is being processed."),
            React.createElement("small", null, "2:34 PM")),
        React.createElement(Step, { completed: true },
            React.createElement("h3", null, "Payment Confirmed"),
            React.createElement("p", null, "Payment has been successfully processed."),
            React.createElement("small", null, "2:35 PM")),
        React.createElement(Step, { active: true },
            React.createElement("h3", null, "Preparing for Shipment"),
            React.createElement("p", null, "Your items are being prepared for shipment.")),
        React.createElement(Step, null,
            React.createElement("h3", null, "Shipped"),
            React.createElement("p", null, "Your order is on its way!")))),
};
export const SimpleStepIndicator = {
    render: () => (React.createElement(StepIndicator, null,
        React.createElement(Step, { completed: true },
            React.createElement("strong", null, "Step 1")),
        React.createElement(Step, { completed: true },
            React.createElement("strong", null, "Step 2")),
        React.createElement(Step, { active: true },
            React.createElement("strong", null, "Step 3")),
        React.createElement(Step, null,
            React.createElement("strong", null, "Step 4")),
        React.createElement(Step, null,
            React.createElement("strong", null, "Step 5")))),
};
export const SimpleHorizontal = {
    render: () => (React.createElement(StepIndicator, { horizontal: true },
        React.createElement(Step, { completed: true },
            React.createElement("strong", null, "Start")),
        React.createElement(Step, { completed: true },
            React.createElement("strong", null, "Progress")),
        React.createElement(Step, { active: true },
            React.createElement("strong", null, "Current")),
        React.createElement(Step, null,
            React.createElement("strong", null, "Next")),
        React.createElement(Step, null,
            React.createElement("strong", null, "End")))),
};
export const AllCompleted = {
    render: () => (React.createElement(StepIndicator, null,
        React.createElement(Step, { completed: true },
            React.createElement("h3", null, "Registration"),
            React.createElement("p", null, "Account successfully created")),
        React.createElement(Step, { completed: true },
            React.createElement("h3", null, "Verification"),
            React.createElement("p", null, "Email address verified")),
        React.createElement(Step, { completed: true },
            React.createElement("h3", null, "Setup"),
            React.createElement("p", null, "Profile information completed")),
        React.createElement(Step, { completed: true },
            React.createElement("h3", null, "Welcome"),
            React.createElement("p", null, "You're all set to get started!")))),
};
export const MinimalExample = {
    render: () => (React.createElement(StepIndicator, null,
        React.createElement(Step, { completed: true }, "First"),
        React.createElement(Step, { active: true }, "Second"),
        React.createElement(Step, null, "Third"))),
};
