glide-design-system/src/lib/components/stepper/Stepper.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 from "react";
import Step from "./Step";
import styles from "./stepper.module.css";

const Stepper = ({
  children,
  flexDirection = "column",
  style,
  activeIndex,
}) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: flexDirection === "column" ? "center" : "",
        alignItems: flexDirection === "row" ? "center" : "",
        flexDirection: flexDirection,
        ...style,
      }}
    >
      {children?.map((step, i) => {
        return (
          <div
            style={{
              display: "flex",
              justifyContent: flexDirection === "column" ? "center" : "",
              flexDirection: flexDirection,
            }}
          >
            <Step
              key={i}
              {...step?.props}
              completed={
                step?.props?.completed && activeIndex !== i ? true : false
              }
              active={
                activeIndex >= 0 ? (i <= activeIndex ? true : false) : false
              }
              stepIconStyle={{
                backgroundColor: step?.props?.completed
                  ? "#1B3764"
                  : activeIndex == i
                  ? "#1B3764"
                  : activeIndex > i
                  ? step?.props?.completed
                    ? "#1B3764"
                    : "#d7d7d7"
                  : "#fff",
                color: activeIndex >= i ? "#fff" : "black",
              }}
              flexDirection={flexDirection}
            />
            {i !== children?.length - 1 && (
              <hr
                className={`${
                  flexDirection === "column"
                    ? styles.stepDivider
                    : styles.stepDividerRow
                }`}
              />
            )}
          </div>
        );
      })}
    </div>
  );
};

export default Stepper;