!logo-farmblocks

Farmblocks-Stepper

A React component for displaying step to step actions.
See Storybook

Installation

``
npm install @crave/farmblocks-stepper
`

Design Spec

Pass a list of steps to be completed, the quantity of completedSteps and a function to handle onClick.

The Stepper component will render:
- COMPLETED status from index 0 of the steps array until the index of the last completed step (completedSteps - 1);
- CURRENT status to the next step after the last completed step
- PENDING status to all remaining steps

onClick will be called only for CURRENT steps.

`jsx
const React = require("react");
const ReactDOM = require("react-dom");
const Stepper = require("@crave/farmblocks-stepper").default;
const { statusTypes } = require("@crave/farmblocks-stepper");

const root = document.createElement("div");

const steps = [
"Complete profile",
"Add bank account",
"Connect to purchasers",
"Add products",
"Start selling"
];

const completedSteps = 2;

ReactDOM.render(
console.log("Handle click", index, value)} />,
root
);

document.body.appendChild(root);
``

API

See it in the source

License

MIT