VAR-Add-Link-Modal

VAR Add Link Modal

**Figma:** [VAR Add Link Modal](https://www.figma.com/design/WADcmVjJh5ARVoZ09xlpfdFN/DemocracyLab?node-id=39340-83144&t=kREyZgDSVkxrtFC2-4)

**Description:**
This component renders a modal used for submitting a link related to a project or task. The form includes fields for a required URL, an optional title, and a required category or file type selected from a dropdown. It provides Cancel and Save buttons. Validation is applied to ensure that the required fields are filled before submission. Upon successful validation, the component calls onSubmit with the entered data.

**Location:**
- **Component File:**
common/components/componentsBySection/VolunteerActivityReporting/VolunteerActivityReportingAddLinkModal.jsx
- **Storybook File:**
common/components/componentsBySection/VolunteerActivityReporting/stories/VolunteerActivityReportingAddLinkModal.stories.jsx
- **Styles (SCSS):**
civictechprojects/static/css/partials/_VolunteerActivityReportingAddLinkModal.scss

`

```
setModalOpen(false)}
onSubmit={({ url, title, category }) => {
// handle submitted link data here
}}
/>

```

**Props:**
- **isOpen** (boolean ,required): Controls modal visibility.
- **onClose** (function , required): Function to call when user clicks Cancel or closes the modal.
- **onSubmit** (function , required): Callback triggered on successful Save with form data object { url, title, category }

**Category Dropdown Options**:
The categoryType prop accepts only the following values:
- Code / Code Repository
- Communication
- Design Files
- Files (docs, sheets, etc.)
- Project Management
- Website (live, staging, etc.)
- Other

**Storybook Test Cases**
- **Default Modal State:** All fields empty, modal is visible.
- **Filled State:** Valid URL, title, and category are filled. "Save" button is enabled.
- **Validation Error:** URL or category is empty. Red error text is shown. "Save" remains disabled.
- **Dropdown Interaction:** User opens the dropdown, selects a category, and the selected value updates correctly.
- **Close Modal:** Clicking "Cancel" triggers the onClose function.
- **Save Modal:** Clicking "Save" with valid input triggers the onSubmit function with the correct data object.