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

const Step = ({
  style,
  label,
  className,
  stepIconLabel,
  onClick,
  id,
  name,
  completedLabel,
  completed,
  stepIconStyle,
  stepLabelStyle,
  stepLabelClassName,
  stepIconClassName,
  disabled,
  active,
  flexDirection,
}) => {
  return (
    <div
      id={id}
      name={name}
      onClick={(e) => onClick && onClick(e)}
      className={`${styles.stepContainer} ${className ? className : ""}`}
      style={{
        cursor: disabled ? "not-allowed" : "pointer",
        flexDirection: flexDirection === "row" ? "column" : "row",
        ...style,
      }}
    >
      <div
        style={{ ...stepIconStyle }}
        className={`${styles.stepIcon} ${
          completed || active ? styles.completedStepIcon : ""
        } ${flexDirection === "row" ? styles.stepIconRow : ""} ${
          stepIconClassName ? stepIconClassName : ""
        }`}
      >
        {completed ? (
          completedLabel ? (
            completedLabel
          ) : (
            <span
              style={{ color: "white" }}
              className="material-symbols-outlined"
            >
              done
            </span>
          )
        ) : (
          stepIconLabel
        )}
      </div>
      <div
        style={{ ...stepLabelStyle }}
        className={`${styles.stepLabel} ${
          flexDirection === "column" ? styles.stepLabelColumn : ""
        } ${stepLabelClassName ? stepLabelClassName : ""}`}
      >
        {label}
      </div>
    </div>
  );
};

export default Step;