VAR-Q2 Component  #1124

VAR-Q2

This component appears as a single-line expandable text input where users summarize their weekly activity, with real-time character count and validation for a 150-character limit.

Figma: VAR-Q2

Location

Component File:

• common/components/componentsBySection/VolunteerActivityReporting/VolunteerActivityReportingQ2.jsx

Storybook File:

• common/components/componentsBySection/VolunteerActivityReporting/stories/VolunteerActivityReportingQ2.stories.jsx

Styles File:

• civictechprojects/static/css/partials/_VolunteerActivityReportingQ2.scss

<VARQ2
  className=""
  value={""} 
  onUpdate={(val: string) => {}}
  error={false} 
/>

• value (string): The text value of the input field. This can change based on user interaction and represents different UI states (idle, filled, or error).
• onUpdate (function): A callback function that is called when the input value is updated. Receives the updated value (string) as an argument.
• error (boolean): Indicates whether the input has an error. Set to true when the character count exceeds 150 characters.

Story book Test cases:

• Idle State (Empty Input): Render with value="" and error=false. Ensure the placeholder text "Enter text..." appears and no error styling is applied.
• Filled State: Set value="Sample Text" and error=false. Verify the input appears filled and styled correctly.
• Error State (Character Count > 150): Set value="Long input text..." (over 150 characters) and error=true. Ensure error styling is applied.