VAR Form Frame

### VAR Form Frame

**Figma**: [VAR Form Frame](https://www.figma.com/design/WADcmVjJh5ARVoZ09xlpfdFN/DemocracyLab?node-id=39340-83651&t=cl7jjgiAZAzOEAYi-4)

### Location
**Component File:**

common/components/componentsBySection/VolunteerActivityReporting/VARFormFrame.jsx

**Storybook File:**

common/components/componentsBySection/VolunteerActivityReporting/stories/VARFormFrame.stories.jsx

**Styles File:**

civictechprojects/static/css/partials/_VARFormFrame.scss

Note: Order of children components based on [Default Form/Desktop](https://www.figma.com/design/WADcmVjJh5ARVoZ09xlpfdFN/DemocracyLab?node-id=39346-87963&t=cl7jjgiAZAzOEAYi-4)

```
// Parent.jsx (VARFormFrame receives props from parent)

```

```
// VARFormFrame.jsx (rendering children)

function VARFormFrame({ hasError, hasSubmitted, onSubmit, children }) {

function handleOnSubmit(e){
e.preventDefault();
onSubmit();
}

return (

{hasError && }

{children}

);
}

export default VARFormFrame;
```

**Test cases in Storybook**

- Default State: If present, renders children components. Otherwise, renders white frame with black rounded border
- Error State: If `hasError` is `true`, then render ``