ebay-progress-stepper

EbayProgressStepper

Demo

Storybook

Usage

yarn add @ebay/ui-core-react

Import JS

import { EbayProgressStepper, EbayProgressStep as Step } from '@ebay/ui-core-react/ebay-progress-stepper'

Import styles from Skin

import '@ebay/skin/progress-stepper'

<EbayProgressStepper>
    <Step>Started</Step>
    <Step>Shipped</Step>
    <Step current>Transit</Step>
    <Step>Delivered</Step>
</EbayProgressStepper>

Components

EbayProgressStepper

This is the container of the wizard stepper and you can define the direction of the stepper and pass properties to customize the layout (className or style)

Props

Name	Type	Stateful	Required	Description
direction	String	No	No	Either column or row (default). Will display stepper as a vertical column or horizontal row.
defaultState	String	Yes	No	complete: all items will be in complete state by default, upcoming:all items will be in upcoming state, attention: current item will be shown as blocked. Otherwise, default state (active) will change items based on the current item (defaults to first step if not set).

EbayProgressStep

This component is used to render each step. It renders an icon, a title and a text label.

Props

Name	Type	Stateful	Required	Description
current	Boolean	No	No	The current step. Only first step that has this property will be considered current. All steps before will be rendered as complete, and all after will render as upcoming. If not present on any step, then will render based on defaultState property

EbayProgressTitle

The bolded title for each step. Will be rendered in an h4 by default.

Props

Name	Type	Stateful	Required	Description
as	String	No	No	HTML tag to use instead of h4

Example

<EbayProgressStepper>
    <EbayProgressStep>
        <EbayProgressTitle>Started</EbayProgressTitle>
        July 3rd
    </EbayProgressStep>

    <EbayProgressStep current>
        <EbayProgressTitle>Shipped</EbayProgressTitle>
        July 4th
    </EbayProgressStep>
</EbayProgressStepper>