DemocracyLab / DemocracyLab/CivicTechExchange

VAR Select Week Component

Open
#1,122 3 comments 0 reactions 0 assignees View on GitHub
Front End
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

Image

```

```
**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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.