@purpurds/stepper

import { Meta, Stories, StoryObj, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as StepperStories from "./src/stepper.stories"; import * as StepperContentStories from "./src/stepper-content.stories"; import packageInfo from "./package.json";

Stepper

Version {packageInfo.version}

Showcase

Properties

Stepper

Stepper.Content

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

The user of this stepper has to provide a handler for when a step has been clicked. This handler will be called with the index of the step. The consumer then has to set which step is current and send it back to the Stepper. The Stepper also takes two labels. The scrollButtonLabels is for explaining the scroll buttons that are visible when there is horizontal overflow when displaying the steps to screen readers. The completedStepLabel is for screen readers to read that a step is completed, the label is prepended to the step label.

Example of handler and content rendering.

import { Stepper } from "@purpurds/purpur";

const scrollLabels: ScrollButtonLabels = {
  leftScrollButtonText: "Scroll left",
  rightScrollButtonText: "Scroll right",
};

export const MyComponent = () => {
  const [currentStep, setCurrentStep] = useState<number>(0);

  return (
    <>
      <Stepper
        data-testid="stepper"
        variant="primary"
        scrollButtonLabels={scrollLabels}
        completedStepLabel="Completed step"
        currentStepIndex={currentStep}
        onStepChange={setCurrentStep}
      >
        <Stepper.Content finished label="Step 1">
          This is the content in step 1
        </Stepper.Content>
        <Stepper.Content label="Step 2">This is the content in step 2</Stepper.Content>
        <Stepper.Content disabled label="Step 3">
          This is the content in step 3
        </Stepper.Content>
      </Stepper>
    </>
  );
};