Files
emba-course-solver/openspec/changes/course-description-popups/specs/course-info-popover/spec.md

81 lines
3.7 KiB
Markdown

## ADDED Requirements
### Requirement: Course description data source
The system SHALL maintain a static data file mapping each course ID to its description text and instructor list. Each entry SHALL contain a `description` string and an `instructors` string array. Only courses present in `courses.ts` SHALL have entries.
#### Scenario: Course with single instructor
- **WHEN** looking up course ID `spr2-consumer-behavior`
- **THEN** the entry contains a description string and `instructors: ["Radhika Duggal"]`
#### Scenario: Course with multiple instructors
- **WHEN** looking up course ID `spr1-high-stakes`
- **THEN** the entry contains `instructors: ["Steve Mellas", "Jim Donofrio"]`
#### Scenario: Same course name in different sets has per-ID entries
- **WHEN** looking up `spr1-collaboration` and `sum1-collaboration`
- **THEN** both have description entries, and instructors MAY differ between them
### Requirement: Info icon display
Each course button in the course selection UI SHALL display a clickable info icon next to the course name. The icon SHALL be visible for all non-cancelled, non-disabled courses.
#### Scenario: Info icon visible on available course
- **WHEN** a course is not cancelled and not disabled
- **THEN** an info icon is displayed next to the course name
#### Scenario: Info icon hidden on cancelled course
- **WHEN** a course is cancelled
- **THEN** no info icon is displayed
#### Scenario: Info icon hidden on disabled course
- **WHEN** a course is disabled (already selected in another set)
- **THEN** no info icon is displayed
### Requirement: Popover opens on info icon click
Clicking or tapping the info icon SHALL open a popover displaying the course description and instructor(s). Clicking the info icon SHALL NOT trigger course selection (pin).
#### Scenario: Open popover on click
- **WHEN** user clicks the info icon on a course
- **THEN** a popover appears showing the course name, instructor(s), and description
- **THEN** the course is NOT pinned/selected
#### Scenario: Only one popover open at a time
- **WHEN** a popover is open and user clicks a different course's info icon
- **THEN** the first popover closes and the new one opens
### Requirement: Popover content layout
The popover SHALL display the course name as a heading, instructor(s) as a comma-separated list, and the full description text. If the description exceeds the popover's max height, the content SHALL be scrollable.
#### Scenario: Display with single instructor
- **WHEN** popover opens for a course with one instructor
- **THEN** it shows "Instructor: Name"
#### Scenario: Display with multiple instructors
- **WHEN** popover opens for a course with multiple instructors
- **THEN** it shows "Instructors: Name1, Name2"
#### Scenario: Long description scrollable
- **WHEN** popover opens for a course with a long description
- **THEN** the popover has a max height and the content area is scrollable
### Requirement: Popover dismissal
The popover SHALL close when the user clicks outside it, clicks the info icon again, or presses the Escape key.
#### Scenario: Close on click outside
- **WHEN** a popover is open and user clicks outside of it
- **THEN** the popover closes
#### Scenario: Close on Escape key
- **WHEN** a popover is open and user presses Escape
- **THEN** the popover closes
#### Scenario: Close on re-click info icon
- **WHEN** a popover is open and user clicks the same info icon
- **THEN** the popover closes
### Requirement: Mobile and desktop parity
The popover interaction SHALL work identically on desktop and mobile via click/tap. No hover or long-press interactions are used.
#### Scenario: Mobile tap opens popover
- **WHEN** user taps the info icon on a mobile device
- **THEN** the popover opens, same as desktop click behavior