Volunteer Activity Reporting Q2

[sasmi825]

Issue: #1124 - "Volunteer Activity Reporting Q2 Component"

Description

This pull request introduces a new React component, VolunteerActivityReportingQ2, to address the requirements of issue #1124. The component provides a single-line expandable text input for users to summarize their weekly activity, including a real-time character count and validation for a 150-character limit.

Key Changes

New Component:

Added VolunteerActivityReportingQ2.jsx to the
common/components/componentsBySection/VolunteerActivityReporting/

Storybook Integration:

Created VolunteerActivityReportingQ2.stories.jsx with test cases for the idle, filled, and error states.

Styles:

Implemented dedicated styling for the component in _VolunteerActivityReportingQ2.scss to match the design specifications from Figma.

Error Handling:

The component now correctly displays an error message when the character count exceeds 150.

Testing

The component has been verified through Storybook to ensure it works as expected across all specified states.

Additional Changes:

• Updated spelling mistake on VolunteerActivityReportingQ1.stories.jsx
• imported the scss file in styles

Screenshots

Below are screenshots of the component in different states (idle, filled, error) to provide a visual reference .

[ddfridley]

Besides these two comments, I have updated the VAR branch. Can you pull that and merge it. This has the changes to master that use npm instead of yarn. After the merge, you will need to run npm install and then npm run storybook

Also, for future PRs I want to investigate if you can push branches directly to democracyLab. On my end, Its harder to fetch, and I can't push changes to your branches - like if I merged changes myself. But we need to see if you have permission yet.

[sasmi825]

Hello @ddfridley
Please review the new changes ,
I have made changes as suggested in comments.
Please leave comment if anything else needs to be updated

[ddfridley]

Thanks for merging in the latest changes. I was able to run storybook and see it work. See the comments. Thanks.

[ddfridley]

I understand this is the guidance for uncontrolled inputs, but too much functionality is being separated out of this "component". We need to wrap the functionality implemented in the Story Template, and the functionality of VolunteerActivityReportingQ2() into a single file, with the top component that just taking value as a prop. It's just about where to divide the code.

Can you pull the Template code into VolunteerActivityReportingQ2.jsx and name that VolunteerActivityReportingQ2 and then rename the current VolunteerActivityReportingQ2 to something else.

But the other thing that has to be delt with is that value could change, when new data is fetched. The line

const [value, setValue] = useState(args.value);

won't allow value to change after the initial render.
We will need to add something like

useEffect(()=>setValue(args.value),[args.value])

so that if args.value changes, the state changes.

also, args should be changed to props when implementing a component - just to match the component style.

[ddfridley]

For focus, the :focus pseudo class in the styles, and not have to create a separate state to apply a className for it. And then you won't need to mess with onBlur.