Stepper

A representation of a progress through a series of steps.

Stepper is used to indicate process. It is a static visual representation, the steps are not interactive, they only display information. Each step can be customized with its own label, colors and icon (three pre defined icon-choices are available).

If the property activeStep is provided, the corresponding step will show with a larger circle and icon.

Stepper is NOT based on Chakra UI Stepper.

Base example

import { Stepper, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stepper
      activeStep={2}
      steps={[
        {
          label: "Step one",
          icon: "check",
          color: ThemeColor.Success,
          iconColor: ThemeColor.OnSuccess,
        },
        {
          label: "Step two",
          icon: "check",
          color: ThemeColor.Success,
          iconColor: ThemeColor.OnSuccess,
          dividerColor: ThemeColor.OnBackgroundBorder,
        },
        {
          label: "Step three",
        },
      ]}
    />
  );
}

Label

The label for each step can be either a string or an element.

import { Stepper, Text, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stepper
      activeStep={2}
      steps={[
        {
          label: <Text fontWeight="medium">Received</Text>,
          color: ThemeColor.Success,
          icon: "check",
        },
        { label: "Denied", color: ThemeColor.Error, icon: "times" },
      ]}
      orientation="vertical"
    />
  );
}

Divider

When the step is not the last one, or only one, there will be a divider after the element. The color of this divider can be specifically set with the dividerColor property, and if none is provided, it will default to the same color as the color property.

import { Stepper, Text, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stepper
      activeStep={2}
      steps={[
        {
          label: <Text fontWeight="medium">Received</Text>,
          color: ThemeColor.Success,
          dividerColor: ThemeColor.OnBackgroundBorder,
          icon: "check",
        },
        { label: "Denied", color: ThemeColor.Error, icon: "times" },
      ]}
    />
  );
}

Step Context

Each step is internally wrapped with a StepContext-provider that can also be used when creating a custom label element for the stepper. For example, it can be used for a label that should appear or behave slightly different based on if the step is the current active one. Without the need for custom props.

import { StepContext, Stepper, Text } from "@caspeco/casper-ui-library";
import { useContext } from "react";

function CustomStepLabel() {
  const { isActiveStep } = useContext(StepContext);
  if (isActiveStep) return <Text>I am active</Text>;
  return <Text>I am not</Text>;
}

export default function Demo() {
  return (
    <Stepper
      activeStep={2}
      steps={[
        {
          label: <CustomStepLabel />,
        },
        {
          label: <CustomStepLabel />,
        },
        {
          label: <CustomStepLabel />,
        },
      ]}
    />
  );
}