Bill Ballou
7a8330e205
Animate course set pin/unpin with cross-fade content swap, credit bar width changes, status badge color transitions, expand/collapse panels (CreditLegend, AllocationBreakdown), mode toggle switching, and ModeComparison banner fade. Specialization rows flash on credit/status changes. Threshold markers animate position. All animations respect prefers-reduced-motion.
86 lines
4.5 KiB
Markdown
86 lines
4.5 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: Course set pin/unpin transition
|
|
The ElectiveSet container SHALL transition its border-color and background-color over 200ms when a course is pinned or unpinned.
|
|
|
|
#### Scenario: User pins a course
|
|
- **WHEN** user clicks a course button in an unpinned elective set
|
|
- **THEN** the set's border smoothly transitions from dashed gray to solid blue and background fades from gray to blue-tinted over 200ms
|
|
|
|
#### Scenario: User unpins a course
|
|
- **WHEN** user clicks the "Clear" button on a pinned elective set
|
|
- **THEN** the set's border and background smoothly transition back to the unpinned style over 200ms
|
|
|
|
### Requirement: Credit bar width transition
|
|
The CreditBar's allocated and potential bar segments SHALL animate their width changes over 300ms with ease-out timing when credit allocations change.
|
|
|
|
#### Scenario: Credits increase after pinning a course
|
|
- **WHEN** a course is pinned that contributes credits to a specialization
|
|
- **THEN** the CreditBar's filled segments smoothly grow to their new width over 300ms
|
|
|
|
#### Scenario: Credits decrease after unpinning a course
|
|
- **WHEN** a course is unpinned that was contributing credits
|
|
- **THEN** the CreditBar's filled segments smoothly shrink to their new width over 300ms
|
|
|
|
### Requirement: Status badge color transition
|
|
The specialization status badge SHALL transition its background-color and text color over 200ms when the specialization's status changes.
|
|
|
|
#### Scenario: Status changes from achievable to achieved
|
|
- **WHEN** a course selection causes a specialization to reach 9 credits
|
|
- **THEN** the badge colors cross-fade from blue (achievable) to green (achieved) over 200ms
|
|
|
|
#### Scenario: Status changes from achieved to achievable
|
|
- **WHEN** a course is unpinned causing a specialization to drop below 9 credits
|
|
- **THEN** the badge colors cross-fade from green back to blue over 200ms
|
|
|
|
### Requirement: CreditLegend expand/collapse animation
|
|
The CreditLegend help panel SHALL animate open and closed with a sliding transition instead of instant mount/unmount.
|
|
|
|
#### Scenario: User opens the legend
|
|
- **WHEN** user clicks "How to read this"
|
|
- **THEN** the legend content slides open over 200ms using a max-height transition with overflow hidden
|
|
|
|
#### Scenario: User closes the legend
|
|
- **WHEN** user clicks the toggle again while the legend is open
|
|
- **THEN** the legend content slides closed over 200ms
|
|
|
|
### Requirement: AllocationBreakdown expand/collapse animation
|
|
The AllocationBreakdown detail panel in achieved specializations SHALL animate open and closed with a sliding transition.
|
|
|
|
#### Scenario: User expands an achieved specialization
|
|
- **WHEN** user clicks an achieved specialization row to view its allocation breakdown
|
|
- **THEN** the breakdown content slides open over 200ms
|
|
|
|
#### Scenario: User collapses an achieved specialization
|
|
- **WHEN** user clicks the row again to hide the breakdown
|
|
- **THEN** the breakdown content slides closed over 200ms
|
|
|
|
### Requirement: Mode toggle transition
|
|
The ModeToggle buttons SHALL transition their background, box-shadow, and text color over 150ms when the active mode changes.
|
|
|
|
#### Scenario: User switches optimization mode
|
|
- **WHEN** user clicks the inactive mode button
|
|
- **THEN** the active indicator (white background + shadow) smoothly transitions to the newly selected button over 150ms while the previous button fades to the inactive style
|
|
|
|
### Requirement: ModeComparison banner enter/exit animation
|
|
The ModeComparison notification banner SHALL fade in when it appears and fade out when it disappears, instead of instant mount/unmount.
|
|
|
|
#### Scenario: Banner appears after mode switch reveals a difference
|
|
- **WHEN** the comparison banner becomes relevant (modes produce different results)
|
|
- **THEN** the banner fades in with an opacity transition over 200ms
|
|
|
|
#### Scenario: Banner disappears when modes align
|
|
- **WHEN** the comparison banner is no longer relevant (modes produce same results)
|
|
- **THEN** the banner fades out with an opacity transition over 200ms
|
|
|
|
### Requirement: Reduced motion accessibility
|
|
All transitions and animations SHALL be effectively disabled when the user's system has `prefers-reduced-motion: reduce` enabled.
|
|
|
|
#### Scenario: User has reduced motion enabled
|
|
- **WHEN** the operating system or browser is configured with `prefers-reduced-motion: reduce`
|
|
- **THEN** all transition and animation durations are reduced to near-zero (0.01ms) so state changes are instant
|
|
|
|
#### Scenario: User does not have reduced motion enabled
|
|
- **WHEN** no reduced-motion preference is set
|
|
- **THEN** all transitions play at their specified durations
|