# @happyfresh/stepper

> HappyFresh UI components that is a stepper

Latest version **1.11.1** (published 2022-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @happyfresh/stepper
pnpm add @happyfresh/stepper
yarn add @happyfresh/stepper
bun add @happyfresh/stepper
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.11.1 |
| Published | 2022-03-24 |
| First published | 2020-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 37.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | HappyFresh |
| Maintainers | miftahfaris, rozakbuhari, fathurozak.buhari, numan.naufal.hf, dimassaputrak, viltohmyst, rakaaditya |

## Links

- npm: https://www.npmjs.com/package/@happyfresh/stepper
- npm.io page: https://npm.io/package/@happyfresh/stepper

## Dependencies (3)

- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.0.0-next.15
- [@happyfresh/icons](https://npm.io/package/@happyfresh/icons.md) ^2.12.0
- [@happyfresh/theming](https://npm.io/package/@happyfresh/theming.md) ^1.11.0

## Recent versions

- 1.11.1 (latest) — 2022-03-24
- 1.12.0 — 2022-03-24
- 1.11.0 — 2021-11-02
- 1.9.2 — 2021-11-02
- 1.9.1 — 2021-09-02
- 1.10.0 — 2021-05-03
- 1.9.0 — 2021-05-03
- 1.8.0 — 2021-04-01
- 1.7.0 — 2020-10-19
- 1.5.1 — 2020-10-13
- 1.6.0 — 2020-10-13
- 1.5.0 — 2020-10-01
- 1.4.0 — 2020-09-30
- 1.3.0 — 2020-09-22
- 1.2.0 — 2020-09-11
- … 8 more at https://npm.io/package/@happyfresh/stepper/versions

## 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

```sh
yarn add @happyfresh/stepper
```

## Usage

```javascript
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}/>
  </>
```

---
_Source: https://npm.io/package/@happyfresh/stepper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._