fix: textarea character counter

Author: dedywahyudi

src/shared/components/Settings/FormField/index.jsx

@@ -9,11 +9,11 @@ import cn from 'classnames';
 import './styles.scss';
 
 const FormField = ({
-  children, label = '', disabled, style,
+  children, label = '', disabled, style, isTextarea,
 }) => (
   <div styleName="form-field-wrapper" style={style}>
     <div styleName="form-field">
-      <div styleName={cn('label', disabled ? 'disabled' : null)} role="presentation">
+      <div styleName={cn('label', { disabled, isTextarea })} role="presentation">
         {label}
       </div>
       {children}
@@ -26,13 +26,15 @@ FormField.defaultProps = {
   children: null,
   disabled: false,
   style: {},
+  isTextarea: false,
 };
 
 FormField.propTypes = {
   label: PT.string,
   children: PT.node,
   disabled: PT.bool,
   style: PT.object,
+  isTextarea: PT.bool,
 };
 
 export default FormField;

src/shared/components/Settings/FormField/styles.scss

@@ -29,6 +29,10 @@
       &.disabled {
         color: $color-black-60;
       }
+
+      &.isTextarea {
+        top: 10px;
+      }
     }
   }
 }

src/shared/components/Settings/FormInputTextArea/index.jsx

@@ -8,20 +8,34 @@ import PT from 'prop-types';
 import cn from 'classnames';
 import './styles.scss';
 
-const FormInputTextArea = ({ styleName, ...props }) => (
-  <textarea
-    type="text"
-    styleName={cn('form-input-text-area', styleName || '')}
-    {...props}
-  />
-);
+const FormInputTextArea = ({ styleName, ...props }) => {
+  const { value } = props;
+
+  return (
+    <div>
+      <span styleName="char-count">
+        {(value && value.length) || 0}
+        <span styleName="grey">
+    &nbsp;/ 240
+        </span>
+      </span>
+      <textarea
+        type="text"
+        styleName={cn('form-input-text-area', styleName || '')}
+        {...props}
+      />
+    </div>
+  );
+};
 
 FormInputTextArea.defaultProps = {
   styleName: {},
+  value: null,
 };
 
 FormInputTextArea.propTypes = {
   styleName: PT.shape(),
+  value: PT.string,
 };
 
 export default FormInputTextArea;

src/shared/components/Settings/FormInputTextArea/styles.scss

@@ -31,3 +31,17 @@
     box-shadow: none !important;
   }
 }
+
+.char-count {
+  @include roboto-regular;
+
+  position: absolute;
+  right: 0;
+  top: 10px;
+  font-size: 11px;
+  padding-right: 5px;
+}
+
+.grey {
+  color: $tc-gray-40;
+}

src/shared/components/Settings/ProfileSettings/AboutYou/index.jsx

@@ -38,7 +38,7 @@ const AboutYou = (props) => {
           </FormField>
 
           {/* Primary interests */}
-          <FormField label="Short bio">
+          <FormField label="Short bio" isTextarea>
             <FormInputTextArea
               disabled={!canModifyTrait}
               id="description"

src/shared/components/Settings/style.scss

@@ -300,12 +300,6 @@ $checkbox-bg-selected: $tc-dark-blue;
           text-transform: none;
         }
 
-        .char-count {
-          float: right;
-          font-size: 11px;
-          padding-right: 5px;
-        }
-
         .grey {
           color: $tc-gray-40;
         }