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.
4.5 KiB
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