import { ActivityTracker } from '@uhg-abyss/mobile';() => { return <ActivityTracker heading="Activity Tracker" showActiveStep={true} />;};Variants
Use the variant prop to determine the variant of the activity tracker. The twoweeks variant displays a 14-day option that does not contain an showActiveStep. The oneweek variant is the default.
Completed Steps
Use the completedSteps prop to determine the steps that have been completed.
ActivityTracker Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
completedSteps | number[] | undefined | - | - | Completed steps in the activity tracker |
heading | string | undefined | - | - | Heading of the activity tracker |
showActiveStep | boolean | undefined | true | - | Highlighted current day of the week |
variant | 'oneweek' | 'twoweeks' | undefined | 'oneweek' | - | Change the amount of days in the activity tracker |
ActivityTracker Classes
| Class Name | Description |
|---|---|
| abyss-activity-tracker-root | Root activity tracker element |
| abyss-activity-tracker-heading | Heading container |
| abyss-activity-tracker-selection-circle | Circle indicating the current day of the week in the activity tracker |
| abyss-activity-tracker-success-circle | Circle indicating a successfully completed step |
| abyss-activity-tracker-week-day-text | Text displaying the day of the week. |
| abyss-activity-tracker-date-label | Text inside the circle |
ActivityTracker Tokens
| Token Name | Value | |
|---|---|---|
| activity-tracker.color.icon.completed | #007000 | |
| activity-tracker.color.text.heading | #323334 | |
| activity-tracker.color.text.date | #4B4D4F | |
| activity-tracker.color.text.day-of-week | #4B4D4F | |
| activity-tracker.color.border.day.default | #4B4D4F | |
| activity-tracker.color.border.day.today | #002677 | |
| activity-tracker.border-radius.day | 500 | |
| activity-tracker.border-width.day.today | 2 | |
| activity-tracker.border-width.day.incomplete | 0.5 | |
| activity-tracker.sizing.all.icon.completed | 40 | |
| activity-tracker.sizing.all.day | 40 | |
| activity-tracker.spacing.gap.vertical.container | 16 | |
| activity-tracker.spacing.gap.vertical.content | 8 | |
| activity-tracker.spacing.padding.horizontal.container | 16 |
ActivityTracker Classes
| V2 | V1 | Status |
|---|---|---|
| activity-tracker-date-label | activity-tracker-date-label | Unchanged |
| activity-tracker-heading | activity-tracker-title | Renamed |
| activity-tracker-root | activity-tracker-root | Unchanged |
| activity-tracker-selection-circle | activity-tracker-selection-circle | Unchanged |
| activity-tracker-success-circle | activity-tracker-success-circle | Unchanged |
| activity-tracker-week-day-text | activity-tracker-week-day-text | Unchanged |
ActivityTracker Props
| V2 | V1 | Status |
|---|---|---|
| completedSteps | steps | Unchanged |
| heading | title | Renamed |
| showActiveStep | showActiveStep | Unchanged |
| variant | variant | Unchanged |