## 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