@happyfresh/stepper v1.11.1

Stepper

Stepper for Happyfresh components. Stepper consists of two type of stepper, which is vertical and horizontal (default) stepper. To use stepper user needs to insert props array of steps, and count of completed steps. In every step consist two different state, incomplete and complete.

Installation

yarn add @happyfresh/stepper

Usage

import { Stepper } from '@happyfresh/stepper';

const stepsMock = [
  {
    description: 'Order confirmed! - June 23, 6:12 PM',
    state: 'completed'
  },
  {
    description: 'Order prepared - Today, 12:08 PM',
    state: 'completed'
  },
  {
    description: 'Already picked up  - Today, 1:12 PM',
    state: 'completed'
  },
  {
    description: 'Delivering',
    state: 'incomplete'
  },
  {
    description: 'Order delivered',
    state: 'incompletes'
  },
];

export const StepperBasic = () => (
  <>
    <Stepper steps={stepsMock} vertical completed={3}/>
    <Stepper steps={stepsMock}/>
  </>