diff --git a/civictechprojects/static/css/partials/_VolunteerActivityReportingQ2.scss b/civictechprojects/static/css/partials/_VolunteerActivityReportingQ2.scss new file mode 100644 index 000000000..d0e5524cc --- /dev/null +++ b/civictechprojects/static/css/partials/_VolunteerActivityReportingQ2.scss @@ -0,0 +1,70 @@ +.VARQ2-wrapper { + font-family: Arial, sans-serif; + padding: 1rem; + max-width: 600px; + margin: 0 auto; +} + +.VARQ2-label { + display: block; + margin-bottom: 0.5rem; + font-size: 1rem; + font-weight: bold; +} + +.VARQ2-input-container { + position: relative; + border: 1px solid #ccc; + border-radius: 4px; + padding: 0.5rem; + transition: border-color 0.2s ease-in-out; + background-color: #fff; +} + +.VARQ2-input-container.over-limit { + border-color: red; +} + +.VARQ2-input-container.input-focused { + border-color: #007bff; +} + +.VARQ2-input { + width: 100%; + border: none; + resize: vertical; + min-height: 40px; + font-size: 1rem; + outline: none; + padding-bottom: 1.5rem; + overflow: hidden; +} + +.VARQ2-input::placeholder { + color: #aaa; +} + +.VARQ2-counter-wrapper { + position: absolute; + bottom: 0.25rem; + right: 0.5rem; + font-size: 0.75rem; + color: #666; +} + +/* renamed to match component logic: "isOverLimit" */ +.VARQ2-char-count.over-limit { + color: red; +} + +.VARQ2-error-message { + color: red; + font-size: 0.875rem; + margin-top: 0.25rem; +} + +@media (min-width: 768px) { + .VARQ2-wrapper { + max-width: 900px; + } +} diff --git a/civictechprojects/static/css/styles.scss b/civictechprojects/static/css/styles.scss index be9a037ca..3e9ce21a0 100644 --- a/civictechprojects/static/css/styles.scss +++ b/civictechprojects/static/css/styles.scss @@ -107,4 +107,5 @@ @import "partials/AllowMarkdown"; @import "partials/RecentProjects"; @import "partials/VolunteerActivityReportingQ1"; +@import "partials/VolunteerActivityReportingQ2"; @import "partials/VARFormTitle" \ No newline at end of file diff --git a/common/components/componentsBySection/VolunteerActivityReporting/VolunteerActivityReportingQ2.jsx b/common/components/componentsBySection/VolunteerActivityReporting/VolunteerActivityReportingQ2.jsx new file mode 100644 index 000000000..0470d6958 --- /dev/null +++ b/common/components/componentsBySection/VolunteerActivityReporting/VolunteerActivityReportingQ2.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +// The component is 'controlled' by its parent +const VolunteerActivityReportingQ2 = ({ className = '', value, setValue, isOverLimit, onFocus, onBlur, isFocused }) => { + const charCount = value.length; + + const handleChange = (e) => { + setValue(e.target.value); + }; + + return ( +
+ +
+