@reliability-design/web 1.0.2

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

@@ -0,0 +1,752 @@
+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>
+  `,
+};