From 17bedfee55553b0ded371b538efe50201ca09b2d Mon Sep 17 00:00:00 2001
From: "Jeferson S. Brito" <30840709+jeferson-sb@users.noreply.github.com>
Date: Tue, 1 Nov 2022 20:25:38 -0300
Subject: [PATCH] Fix: onboarding profile bio textarea length (#18611)

Co-authored-by: Fernando Valverde <fernando@fdo.cr>
---
 .../onboarding/components/ProfileForm.jsx         | 15 +++++++++++++++
 .../components/ProfileForm/TextArea.jsx           |  5 ++++-
 .../components/ProfileForm/TextInput.jsx          |  3 +++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/javascript/onboarding/components/ProfileForm.jsx b/app/javascript/onboarding/components/ProfileForm.jsx
index 91c9ecf46..cbb2865cf 100644
--- a/app/javascript/onboarding/components/ProfileForm.jsx
+++ b/app/javascript/onboarding/components/ProfileForm.jsx
@@ -147,6 +147,8 @@ export class ProfileForm extends Component {
       this.props;
     const { profile_image_90, username, name } = this.user;
     const { canSkip, groups = [], error, errorMessage } = this.state;
+    const SUMMARY_MAXLENGTH = 200;
+    const summaryCharacters = this.state?.formValues?.summary?.length || 0;
 
     const sections = groups.map((group) => {
       return (
@@ -219,6 +221,7 @@ export class ProfileForm extends Component {
                   label: 'Username',
                   default_value: username,
                   required: true,
+                  maxLength: 20,
                 }}
                 onFieldChange={this.handleFieldChange}
               />
@@ -230,9 +233,21 @@ export class ProfileForm extends Component {
                   label: 'Bio',
                   placeholder_text: 'Tell us a little about yourself',
                   required: false,
+                  maxLength: SUMMARY_MAXLENGTH,
                 }}
                 onFieldChange={this.handleFieldChange}
               />
+              <p
+                id="summary-description"
+                class="crayons-field__description align-right"
+              >
+                <span class="screen-reader-only" aria-live="polite">
+                  Remaining characters: {SUMMARY_MAXLENGTH - summaryCharacters}
+                </span>
+                <span id="summary-characters">
+                  {summaryCharacters}/{SUMMARY_MAXLENGTH}
+                </span>
+              </p>
             </div>
 
             {sections}
diff --git a/app/javascript/onboarding/components/ProfileForm/TextArea.jsx b/app/javascript/onboarding/components/ProfileForm/TextArea.jsx
index 3ededd227..dfb719d77 100644
--- a/app/javascript/onboarding/components/ProfileForm/TextArea.jsx
+++ b/app/javascript/onboarding/components/ProfileForm/TextArea.jsx
@@ -27,7 +27,8 @@ import { FormField } from '@crayons';
 
 export function TextArea(props) {
   const { onFieldChange } = props;
-  const { attribute_name, placeholder_text, description, label } = props.field;
+  const { attribute_name, placeholder_text, description, label, maxLength } =
+    props.field;
 
   return (
     <FormField>
@@ -40,6 +41,7 @@ export function TextArea(props) {
         name={attribute_name}
         id={attribute_name}
         onChange={onFieldChange}
+        maxLength={maxLength}
       />
       {description && <p class="crayons-field__description">{description}</p>}
     </FormField>
@@ -53,5 +55,6 @@ TextArea.propTypes = {
     description: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     input_type: PropTypes.string.isRequired,
+    maxLength: PropTypes.number,
   }).isRequired,
 };
diff --git a/app/javascript/onboarding/components/ProfileForm/TextInput.jsx b/app/javascript/onboarding/components/ProfileForm/TextInput.jsx
index f4ce94b3e..2fcefc023 100644
--- a/app/javascript/onboarding/components/ProfileForm/TextInput.jsx
+++ b/app/javascript/onboarding/components/ProfileForm/TextInput.jsx
@@ -33,6 +33,7 @@ export function TextInput(props) {
     description,
     label,
     required,
+    maxLength,
   } = field;
 
   return (
@@ -48,6 +49,7 @@ export function TextInput(props) {
         id={attribute_name}
         onChange={onFieldChange}
         required={required ? 'required' : ''}
+        maxLength={maxLength}
       />
       {description && <p class="crayons-field__description">{description}</p>}
     </FormField>
@@ -61,5 +63,6 @@ TextInput.propTypes = {
     description: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     input_type: PropTypes.string.isRequired,
+    maxLength: PropTypes.number,
   }).isRequired,
 };