DemocracyLab / DemocracyLab/CivicTechExchange
VAR Select Week Component
- Dominant language
- JavaScript
- Stars
- 105
- Forks
- 71
- PR merge metrics
- No merged PRs in 30d
Description
### VAR Select Week Component
Figma: [VAR Select Week](https://www.figma.com/design/WADcmVjJh5ARVoZ09xlpfdFN/DemocracyLab?node-id=39337-89483&t=2mfsTMQ1bhMOILO0-4)
### Location
**Component File:**
common/components/componentsBySection/VolunteerActivityReporting/VARSelectWeek.jsx
**Storybook File:**
common/components/componentsBySection/VolunteerActivityReporting/stories/VARSelectWeek.stories.jsx
**Styles File:**
civictechprojects/static/css/partials/_VARSelectWeek.scss
```
```
**Props**
selectedWeek(string): Current week selected by the user from dropdown menu.
onUpdate(function): Callback function triggered when the user selects a new week. Passes the new week value back to the parent to update state.
errorMessage(string): Optional error message displayed below the dropdown. If empty, no error is shown.
**Test cases in Storybook**
- Default State: Renders heading, dropdown menu with default caption, and instructions
- Week Options: Renders all valid week ranges in dropdown menu
- Selected Week: Renders heading, dropdown menu with selected week, and instructions
- Error State: Renders heading, dropdown menu (with red border) with selected week, and error message in red.
- Responsive Design: ~~Confirm mobile/desktop resizes correctly.~~ Responsive rendering will be handled by container div
Contributor guide
Research direction
Start with common/components/componentsBySection/VolunteerActivityReporting/VARSelectWeek.jsx and its Storybook file, then compare the component with the linked Figma design and review civictechprojects/static/css/partials/_VARSelectWeek.scss. Use the Storybook test cases as the checklist: default, week options, selected week, and error states should render with the documented props and styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scss
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100