spark/com.adevinta.spark.components.progress.tracker

Package-level declarations

ProgressTracker is a visual navigation element typically used to display progress or guide user through a multi-step process.

It displays a linear progress as steps, accepts between 2 and 6 steps maximum. There are two possible orientations: horizontal with ProgressTrackerRow or vertical with ProgressTrackerColumn. Each step displays its label via stepLabel. Selection and click are handled. A step indicator is displayed via StepIndicator for each step. Its state is updated according to selection.


Horizontal
Vertical

The minimal usage of the component is the step list to be displayed.

val items = persistentListOf(
    ProgressStep("Lorem ipsume", true),
    ProgressStep("Lorem ipsume dolar sit amet", true),
    ProgressStep("Lorem ipsume", false),
)
ProgressTrackerRow(items = items)

Sizes

There are 3 possible sizes: Large(Default), medium and small. Only the large one should be interactive, if it's not the case please ask your designer to consider using the Large size as recommended in the design specs.

Types

ProgressSizes

enum ProgressSizes : Enum<ProgressSizes>

Defines the different sizes of the progress indicator

ProgressStep

data class ProgressStep(val label: CharSequence, val enabled: Boolean)

Step in the ProgressTrackerRow&ProgressTrackerColumn component. Each step has a label and a enabled state.

ProgressStyles

enum ProgressStyles : Enum<ProgressStyles>

Represents the different styles of the progress tracker component and determine the visual appearance. There are two possible styles: tinted with Tinted or outlined with Outlined.

ProgressTrackerIntent

enum ProgressTrackerIntent : Enum<ProgressTrackerIntent>

Functions

ProgressTrackerColumn

@Composable

fun ProgressTrackerColumn(items: ImmutableList<ProgressStep>, modifier: Modifier = Modifier, intent: ProgressTrackerIntent = ProgressTrackerIntent.Basic, style: ProgressStyles = ProgressStyles.Outlined, size: ProgressSizes = ProgressSizes.Large, hasIndicatorContent: Boolean = true, onStepClick: (index: Int) -> Unit? = null, selectedStep: Int = 0)

ProgressTrackerColumn is a visual navigation element typically used to display progress or guide user through a multi-step process. It displays a linear progress as steps, accepts between 2 and 6 steps maximum.

ProgressTrackerRow

@Composable

fun ProgressTrackerRow(items: ImmutableList<ProgressStep>, modifier: Modifier = Modifier, intent: ProgressTrackerIntent = ProgressTrackerIntent.Basic, style: ProgressStyles = ProgressStyles.Outlined, size: ProgressSizes = ProgressSizes.Large, hasIndicatorContent: Boolean = true, onStepClick: (index: Int) -> Unit? = null, selectedStep: Int = 0)

ProgressTrackerRow is a visual navigation element typically used to display progress or guide user through a multi-step process. It displays a linear progress as steps, accepts between 2 and 6 steps maximum.