Overview

In the generic step screen we need to use the same section list component as the intro screen, but it needs to be extended so that...

(1) Uncompleted sections are dimmed
(2) Completed sections have a green checkbox around the section number

The same highlight functionality as the intro screen should exist where the current section should be highlighted.

Implementation Details

Extend the component to take in props to tell the component:

(1) Which sections are completed
(2) Which section is active

Using these this information, we can infer which sections are incomplete.

When a section is completed, render a green check mark on top of the section number (the icon name is "check-circle"), with the section name being black
When a section is active, both the section number and section name should be highlighted with C_SELECTED_DARK
When a section is incomplete, both the section number and section name should be dimmed with C_DISABLED

Design

See this figma node

Acceptance criteria

• Uncompleted sections are dimmed
• Completed sections have a green checkbox around the section number
• Current active section is highlighted