import { ActivityTracker } from '@uhg-abyss/mobile';

heading

showActiveStep

variant

<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

Prop Name	Type	Default	Description
completedSteps	number[]	-	Completed steps in the activity tracker
heading	string	-	Heading of the activity tracker
showActiveStep	boolean	-	Highlights the current day of the week
variant	oneweek | twoweeks	oneweek	Change the amount of days in the activity tracker

ActivityTracker Classes

Class Name	Description
abyss-activity-tracker-date-label	Text inside the circle
abyss-activity-tracker-heading	Heading container
abyss-activity-tracker-root	Root activity tracker element
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.

Search tokens

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