Components
Lesson navigation and availability
Show the sequence of lessons with clear duration, activity and completion context. A collapsed preview and linked learner navigation serve different tasks.
On this page
Purpose and usage
Show the sequence of lessons with clear duration, activity and completion context. A collapsed preview and linked learner navigation serve different tasks.
Anatomy
| Part | Contract |
|---|---|
| Sequence | Position and title |
| Duration | Source helper accepts supported duration shapes |
| State cue | Active, locked and completed flags |
| Expand | Compact previews can reveal more lessons |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| view | compact or expanded |
| Navigation | linkLessons and courseIdSlug |
| Collapse | collapseAfter defaults to 5; applicable to compact nonlinked previews |
| Scroll | initialScrollLessonId and scrollSignal |
| Masks | fadeBottom and observed scroll boundaries |
State coverage
| State | Implemented behavior |
|---|---|
| Compact preview | Can collapse longer courses |
| Expanded | Reveals the preview list |
| Linked | Learner destination provided by parent |
| Locked | Availability represented from supplied flags |
| Active/completed | Distinct row state from parent |
Interaction and composition
- Preserve actual lesson order.
- Keep total consistent with the source lesson count.
- Pass availability from authorization and enrollment logic rather than making a visual lock the security boundary.
- Inspect masks for obscured controls at phone widths.
Accessibility and readiness
Source uses native links and buttons, but complete keyboard, current-page and screen-reader discovery need review. Demo locked/completed flags are specimen states; actual course content and order remain unchanged.
Composition example
<LessonList lessons={lessons} total={lessons.length}
linkLessons courseIdSlug={courseSlug} />Source references
| File | Responsibility |
|---|---|
| src/components/courses-public/shared/LessonList.tsx | Compact/expanded rows, scrolling and masks |
| src/utils/formatDuration.ts | Duration normalization |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1