Phase 2 - Volunteer Activity Reporting Form Input Components#1146
Phase 2 - Volunteer Activity Reporting Form Input Components#1146
Conversation
| .var-q2 { | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-bottom: 16px; |
There was a problem hiding this comment.
Components like this should not define margin, background color, and should not have border or border-radius or padding. A parent component may pass in a className that defines these things, but to be reusable in a variety of situations, the parent should be the one to determine these things.
Please tell this to the ai and ask it to update this component, and review the other components considering this, and update the spec to include this guideline.
Also, if you use the chrome dev console to turn off those styles, the result looks much more like what's in figma.
Current Storybook
Storybook with outer styles turned off
Figma
Also, in figma there is a little thing in the bottom right called the resize handle: https://www.figma.com/design/WADcmVjJh5ARVoZ09xlpfdFN/DemocracyLab?node-id=39337-90309&t=gP1nOrA8DXDDAPpA-4
But the component we have auto resizes and I don't see anything like that in the code, so I think we should ignore it, but say we are ignoring it in the spec.
Lastly, the text at the top of the component needs to match what's in figma. Meaning instead of "summary" it should say "In a few words, describe what you did during the week."
And I'm not saying you should make these changes. I'm saying you should instruct the ai to do it, and to update the spec so that it follows these guidelines going forward.
| defaultValue = '', | ||
| maxLength = 150, | ||
| required = false, | ||
| error = false, |
There was a problem hiding this comment.
error and errorMessage should not be props. They should be internal to this component. And the component should set the error state.
2 participants
Description
This PR is about Phase 2 of the Volunteer Activity Reporting (VAR) feature, implementing functional form input components with full styling, Storybook test cases, and error state handling.
Components Implemented
**1. VolunteerActivityReportingCardIntro **
Project card header with toggle switch to enable/disable activity logging
Displays project name and "No activity to log" hint when unchecked
Renders form input with name pattern: project_{projectId}_log_activity
✅ Storybook stories: Default, Checked, UncheckedWithHint, LongProjectName
**2. VARSelectWeek **
Week selection dropdown for activity reporting
Generates week options for the last 12 weeks (configurable via weeksBack prop)
Returns ISO date format (YYYY-MM-DD) for form submission
Configurable error message display with red styling
✅ Storybook stories: Default, WithError, WithDefaultValue, ErrorWithLongMessage, LimitedWeeksBack.
**3. VolunteerActivityReportingQ2 **
Auto-expanding textarea for activity summary (150 character limit)
Real-time character counter positioned at bottom-right inside textarea
Counter turns red and bold when exceeding character limit
Error state support with red border and customizable error message
Full Storybook coverage with idle, filled, and error states
✅ Storybook stories: Default, PreFilled, NearMaxLength, Required, ShortMaxLength, IdleState, FilledState, ErrorState, ErrorStateWithLongInput
Files Added/Modified
New Components:
New Storybook Stories:
New SCSS Partials:
Modified Files:
Testing:
Each component includes comprehensive Storybook test cases covering:
Idle/Default states - empty inputs, no errors
Filled states - populated with sample data
Error states - validation errors, character limit exceeded, red styling
Edge cases - long text, near max length, different configurations
Interaction scenarios - toggle changes, dropdown selection, textarea expansion