@reliability-design/web 1.0.2 → 1.0.6

package/dist/components/rel-stepper/rel-stepper.stories.ts

@@ -1,752 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/web-components-vite";
-import { html } from "lit";
-import "./rel-stepper";
-import type { Step } from "./rel-stepper";
-
-/**
- * The Stepper component displays progress through a sequence of logical and numbered steps.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **Multiple Orientations**: Horizontal or vertical layout
- * - **Text Alignment**: Text below or to the right of indicators
- * - **Size Variants**: Small or large connector spacing
- * - **Step States**: Done (with checkmark), in progress, or disabled
- * - **Customizable Steps**: Define your own step titles and statuses
- * - **Token-Based Styling**: Uses design system tokens
- * - **Accessible**: Semantic HTML structure
- */
-const meta: Meta = {
-  title: "Components/Stepper",
-  tags: ["autodocs"],
-  component: "rel-stepper",
-  argTypes: {
-    orientation: {
-      control: { type: "select" },
-      options: ["horizontal", "vertical"],
-      description: "Layout orientation",
-      table: {
-        defaultValue: { summary: "horizontal" },
-        type: { summary: "horizontal | vertical" },
-      },
-    },
-    textAlign: {
-      control: { type: "select" },
-      options: ["below", "right"],
-      description: "Text alignment relative to step indicator",
-      table: {
-        defaultValue: { summary: "below" },
-        type: { summary: "below | right" },
-      },
-    },
-    size: {
-      control: { type: "select" },
-      options: ["small", "large"],
-      description: "Connector line spacing",
-      table: {
-        defaultValue: { summary: "large" },
-        type: { summary: "small | large" },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default horizontal stepper with large spacing
- */
-export const Default: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Select campaign settings", status: "done" },
-      { title: "Create an ad group", status: "progress" },
-      { title: "Create an ad", status: "disabled" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * Horizontal stepper with small spacing
- */
-export const HorizontalSmall: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Select campaign settings", status: "done" },
-      { title: "Create an ad group", status: "progress" },
-      { title: "Create an ad", status: "disabled" },
-    ];
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * Vertical stepper with text to the right
- */
-export const VerticalTextRight: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Select campaign settings", status: "done" },
-      { title: "Create an ad group", status: "progress" },
-      { title: "Create an ad", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    return stepper;
-  },
-};
-
-/**
- * Vertical stepper with text below
- */
-export const VerticalTextBelow: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Select campaign settings", status: "done" },
-      { title: "Create an ad group", status: "progress" },
-      { title: "Create an ad", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "below";
-    return stepper;
-  },
-};
-
-/**
- * Vertical stepper with small spacing
- */
-export const VerticalSmall: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Select campaign settings", status: "done" },
-      { title: "Create an ad group", status: "progress" },
-      { title: "Create an ad", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * All steps completed
- */
-export const AllCompleted: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Account created", status: "done" },
-      { title: "Email verified", status: "done" },
-      { title: "Profile completed", status: "done" },
-      { title: "Payment added", status: "done" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * First step in progress
- */
-export const FirstStepActive: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Personal info", status: "progress" },
-      { title: "Address", status: "disabled" },
-      { title: "Payment", status: "disabled" },
-      { title: "Review", status: "disabled" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * Last step in progress
- */
-export const LastStepActive: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Cart", status: "done" },
-      { title: "Shipping", status: "done" },
-      { title: "Payment", status: "done" },
-      { title: "Confirmation", status: "progress" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * Two steps only
- */
-export const TwoSteps: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Basic info", status: "done" },
-      { title: "Review", status: "progress" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * Five steps workflow
- */
-export const FiveSteps: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Step 1", status: "done" },
-      { title: "Step 2", status: "done" },
-      { title: "Step 3", status: "progress" },
-      { title: "Step 4", status: "disabled" },
-      { title: "Step 5", status: "disabled" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * Onboarding flow
- */
-export const OnboardingFlow: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Welcome", status: "done" },
-      { title: "Profile setup", status: "done" },
-      { title: "Preferences", status: "progress" },
-      { title: "Finish", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    return stepper;
-  },
-};
-
-/**
- * Checkout process
- */
-export const CheckoutProcess: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Shopping cart", status: "done" },
-      { title: "Shipping info", status: "done" },
-      { title: "Payment", status: "progress" },
-      { title: "Confirm order", status: "disabled" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * Registration wizard
- */
-export const RegistrationWizard: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Account details", status: "done" },
-      { title: "Personal info", status: "progress" },
-      { title: "Verification", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * Interactive stepper demo
- */
-export const Interactive: Story = {
-  render: () => {
-    const steps: Step[] = [
-      { title: "Step 1", status: "progress" },
-      { title: "Step 2", status: "disabled" },
-      { title: "Step 3", status: "disabled" },
-      { title: "Step 4", status: "disabled" },
-    ];
-
-    let currentStep = 0;
-
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [...steps];
-
-    const nextButton = document.createElement("button");
-    nextButton.textContent = "Next Step";
-    nextButton.style.cssText = `
-      margin-top: 24px;
-      padding: 12px 24px;
-      background: var(--rel-colors-black);
-      color: white;
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-    `;
-
-    const prevButton = document.createElement("button");
-    prevButton.textContent = "Previous Step";
-    prevButton.style.cssText = `
-      margin-top: 24px;
-      margin-right: 12px;
-      padding: 12px 24px;
-      background: white;
-      color: var(--rel-colors-black);
-      border: 1px solid var(--rel-colors-gray-border);
-      border-radius: 6px;
-      cursor: pointer;
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-    `;
-    prevButton.disabled = true;
-    prevButton.style.opacity = "0.5";
-
-    const updateButtons = () => {
-      prevButton.disabled = currentStep === 0;
-      prevButton.style.opacity = currentStep === 0 ? "0.5" : "1";
-      prevButton.style.cursor = currentStep === 0 ? "not-allowed" : "pointer";
-
-      nextButton.disabled = currentStep === steps.length - 1;
-      nextButton.style.opacity = currentStep === steps.length - 1 ? "0.5" : "1";
-      nextButton.style.cursor =
-        currentStep === steps.length - 1 ? "not-allowed" : "pointer";
-
-      if (currentStep === steps.length - 1) {
-        nextButton.textContent = "Completed!";
-      } else {
-        nextButton.textContent = "Next Step";
-      }
-    };
-
-    nextButton.addEventListener("click", () => {
-      if (currentStep < steps.length - 1) {
-        steps[currentStep].status = "done";
-        currentStep++;
-        steps[currentStep].status = "progress";
-        stepper.steps = [...steps];
-        updateButtons();
-      }
-    });
-
-    prevButton.addEventListener("click", () => {
-      if (currentStep > 0) {
-        steps[currentStep].status = "disabled";
-        currentStep--;
-        steps[currentStep].status = "progress";
-        stepper.steps = [...steps];
-        updateButtons();
-      }
-    });
-
-    const container = document.createElement("div");
-    container.appendChild(stepper);
-    const buttonContainer = document.createElement("div");
-    buttonContainer.appendChild(prevButton);
-    buttonContainer.appendChild(nextButton);
-    container.appendChild(buttonContainer);
-
-    return container;
-  },
-};
-
-/**
- * Horizontal layout with text to the right and large spacing
- */
-export const HorizontalTextRightLarge: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Select products", status: "done" },
-      { title: "Configure options", status: "progress" },
-      { title: "Review", status: "disabled" },
-    ];
-    stepper.orientation = "horizontal";
-    stepper.textAlign = "right";
-    stepper.size = "large";
-    return stepper;
-  },
-};
-
-/**
- * Horizontal layout with text to the right and small spacing
- */
-export const HorizontalTextRightSmall: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Select products", status: "done" },
-      { title: "Configure options", status: "progress" },
-      { title: "Review", status: "disabled" },
-    ];
-    stepper.orientation = "horizontal";
-    stepper.textAlign = "right";
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * Horizontal layout with text below and large spacing
- */
-export const HorizontalTextBelowLarge: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Choose plan", status: "done" },
-      { title: "Billing details", status: "progress" },
-      { title: "Confirmation", status: "disabled" },
-    ];
-    stepper.orientation = "horizontal";
-    stepper.textAlign = "below";
-    stepper.size = "large";
-    return stepper;
-  },
-};
-
-/**
- * Horizontal layout with text below and small spacing
- */
-export const HorizontalTextBelowSmall: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Choose plan", status: "done" },
-      { title: "Billing details", status: "progress" },
-      { title: "Confirmation", status: "disabled" },
-    ];
-    stepper.orientation = "horizontal";
-    stepper.textAlign = "below";
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * Vertical layout with text to the right and large spacing
- */
-export const VerticalTextRightLarge: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Create account", status: "done" },
-      { title: "Verify email", status: "progress" },
-      { title: "Complete profile", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    stepper.size = "large";
-    return stepper;
-  },
-};
-
-/**
- * Vertical layout with text to the right and small spacing
- */
-export const VerticalTextRightSmall: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Create account", status: "done" },
-      { title: "Verify email", status: "progress" },
-      { title: "Complete profile", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * Vertical layout with text below and large spacing
- */
-export const VerticalTextBelowLarge: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Upload files", status: "done" },
-      { title: "Configure settings", status: "progress" },
-      { title: "Process", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "below";
-    stepper.size = "large";
-    return stepper;
-  },
-};
-
-/**
- * Vertical layout with text below and small spacing
- */
-export const VerticalTextBelowSmall: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Upload files", status: "done" },
-      { title: "Configure settings", status: "progress" },
-      { title: "Process", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "below";
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * All steps disabled (not started)
- */
-export const AllDisabled: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Personal info", status: "disabled" },
-      { title: "Contact details", status: "disabled" },
-      { title: "Preferences", status: "disabled" },
-      { title: "Review", status: "disabled" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * Multi-step e-commerce checkout flow
- */
-export const EcommerceCheckout: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Shopping cart", status: "done" },
-      { title: "Shipping address", status: "done" },
-      { title: "Delivery method", status: "progress" },
-      { title: "Payment details", status: "disabled" },
-      { title: "Order review", status: "disabled" },
-    ];
-    stepper.size = "large";
-    return stepper;
-  },
-};
-
-/**
- * Form wizard with multiple sections
- */
-export const FormWizard: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Company info", status: "done" },
-      { title: "Team members", status: "done" },
-      { title: "Billing setup", status: "progress" },
-      { title: "Integration", status: "disabled" },
-      { title: "Launch", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    return stepper;
-  },
-};
-
-/**
- * User onboarding with 6 steps
- */
-export const ExtendedOnboarding: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Welcome", status: "done" },
-      { title: "Account setup", status: "done" },
-      { title: "Profile picture", status: "done" },
-      { title: "Preferences", status: "progress" },
-      { title: "Connect apps", status: "disabled" },
-      { title: "Start tour", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * Project setup workflow
- */
-export const ProjectSetup: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Choose template", status: "done" },
-      { title: "Configure project", status: "done" },
-      { title: "Add team members", status: "progress" },
-      { title: "Set permissions", status: "disabled" },
-    ];
-    return stepper;
-  },
-};
-
-/**
- * Simple two-step process
- */
-export const TwoStepVerification: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Enter code", status: "progress" },
-      { title: "Verified", status: "disabled" },
-    ];
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * Document approval workflow with 5 steps
- */
-export const DocumentApproval: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Draft", status: "done" },
-      { title: "Review", status: "done" },
-      { title: "Legal approval", status: "done" },
-      { title: "Manager approval", status: "progress" },
-      { title: "Published", status: "disabled" },
-    ];
-    stepper.orientation = "vertical";
-    stepper.textAlign = "right";
-    stepper.size = "large";
-    return stepper;
-  },
-};
-
-/**
- * Subscription upgrade flow
- */
-export const SubscriptionUpgrade: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Select new plan", status: "done" },
-      { title: "Add payment method", status: "progress" },
-      { title: "Confirm upgrade", status: "disabled" },
-    ];
-    stepper.textAlign = "below";
-    return stepper;
-  },
-};
-
-/**
- * Course enrollment process
- */
-export const CourseEnrollment: Story = {
-  render: () => {
-    const stepper = document.createElement("rel-stepper") as any;
-    stepper.steps = [
-      { title: "Browse courses", status: "done" },
-      { title: "Choose course", status: "done" },
-      { title: "Select schedule", status: "done" },
-      { title: "Payment", status: "progress" },
-      { title: "Enrollment complete", status: "disabled" },
-    ];
-    stepper.orientation = "horizontal";
-    stepper.textAlign = "below";
-    stepper.size = "small";
-    return stepper;
-  },
-};
-
-/**
- * All variants showcase
- */
-export const AllVariants: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 48px;">
-      <div>
-        <h4
-          style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;"
-        >
-          Horizontal Large
-        </h4>
-        ${(() => {
-          const stepper = document.createElement("rel-stepper") as any;
-          stepper.steps = [
-            { title: "Step 1", status: "done" },
-            { title: "Step 2", status: "progress" },
-            { title: "Step 3", status: "disabled" },
-          ];
-          return stepper;
-        })()}
-      </div>
-
-      <div>
-        <h4
-          style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;"
-        >
-          Horizontal Small
-        </h4>
-        ${(() => {
-          const stepper = document.createElement("rel-stepper") as any;
-          stepper.steps = [
-            { title: "Step 1", status: "done" },
-            { title: "Step 2", status: "progress" },
-            { title: "Step 3", status: "disabled" },
-          ];
-          stepper.size = "small";
-          return stepper;
-        })()}
-      </div>
-
-      <div>
-        <h4
-          style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;"
-        >
-          Vertical Text Right
-        </h4>
-        ${(() => {
-          const stepper = document.createElement("rel-stepper") as any;
-          stepper.steps = [
-            { title: "Step 1", status: "done" },
-            { title: "Step 2", status: "progress" },
-            { title: "Step 3", status: "disabled" },
-          ];
-          stepper.orientation = "vertical";
-          stepper.textAlign = "right";
-          return stepper;
-        })()}
-      </div>
-
-      <div>
-        <h4
-          style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;"
-        >
-          Vertical Text Below
-        </h4>
-        ${(() => {
-          const stepper = document.createElement("rel-stepper") as any;
-          stepper.steps = [
-            { title: "Step 1", status: "done" },
-            { title: "Step 2", status: "progress" },
-            { title: "Step 3", status: "disabled" },
-          ];
-          stepper.orientation = "vertical";
-          stepper.textAlign = "below";
-          return stepper;
-        })()}
-      </div>
-    </div>
-  `,
-};