@happyfresh/stepper
v1.11.1
Published
HappyFresh UI components that is a stepper
Downloads
75
Keywords
Readme
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}/>
</>