glide-design-system/src/stories/stepper/Stepper.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useState } from "react";
import { Stepper } from "../../lib";
import { Step } from "../../lib";

export default {
  title: "Components/Stepper",
  component: Step,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Stepper component is used to display a sequence of steps. It accepts various props for customization, including `flexDirection`, `style`, and `activeIndex`.",
      },
    },
  },
  argTypes: {
    flexDirection: {
      control: { type: "select", options: ["column", "row"] },
      description: "The direction in which the steps are arranged.",
    },
    style: {
      control: "object",
      description: "Custom styles for the stepper container.",
    },
    children: {
      control: null,
      description:
        "The steps to be displayed in the stepper note ( the onclick will be onClick={() => setVActiveIndex(1)} for your all )",
    },
    activeIndex: {
      control: null,
      description: "The currently active index.",
    },
  },
};
const Template = (args) => {
  const [activeIndex, setActiveIndex] = useState(args.activeIndex || 0); // Initialize activeIndex with the default or provided value

  const handleStepClick = (index) => {
    setActiveIndex(index);
  };

  // Clone children with added onClick handlers
  const steps = React.Children.map(args.children, (child, index) => {
    return React.cloneElement(child, {
      onClick: () => handleStepClick(index),
    });
  });

  return (
    <Stepper {...args} activeIndex={activeIndex}>
      {steps}
    </Stepper>
  );
};

export const Default = Template.bind({});
Default.args = {
  flexDirection: "column",
  children: [
    <div
      key="step1"
      label="Step 1"
      stepIconLabel="1"
      onClick={() => console.log(0)}
    />,
    <div
      key="step2"
      label="Step 2"
      stepIconLabel="2"
      onClick={() => console.log(1)}
    />,
    <div
      key="step3"
      label="Step 3"
      stepIconLabel="3"
      onClick={() => console.log(2)}
    />,
  ],
};
Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the Stepper component.",
    },
  },
};

export const Horizontal = Template.bind({});
Horizontal.args = {
  flexDirection: "row",
  activeIndex: 1,
  children: [
    <div key="step1" label="Step 1" stepIconLabel="1" />,
    <div key="step2" label="Step 2" stepIconLabel="2" />,
    <div key="step3" label="Step 3" stepIconLabel="3" />,
  ],
};
Horizontal.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Stepper component in horizontal layout.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  ...Default.args,
  style: { backgroundColor: "#f0f0f0" },
};
CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Stepper component with custom style.",
    },
  },
};

export const CustomStepIcons = Template.bind({});
CustomStepIcons.args = {
  flexDirection: "column",
  activeIndex: 1,
  children: [
    <div key="step1" label="Step 1" stepIconLabel="A" />,
    <div key="step2" label="Step 2" stepIconLabel="B" />,
    <div key="step3" label="Step 3" stepIconLabel="C" />,
  ],
};
CustomStepIcons.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Stepper component with custom step icons.",
    },
  },
};

export const CompletedSteps = Template.bind({});
CompletedSteps.args = {
  flexDirection: "column",
  activeIndex: 2,
  children: [
    <div key="step1" label="Step 1" stepIconLabel="1" completed />,
    <div key="step2" label="Step 2" stepIconLabel="2" completed />,
    <div key="step3" label="Step 3" stepIconLabel="3" />,
  ],
};
CompletedSteps.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Stepper component with completed steps.",
    },
  },
};