Progress

app/javascript/gabsocial/components/input.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames/bind'
 import Icon from './icon'
+import Text from './text'
 
 const cx = classNames.bind(_s)
 
@@ -14,10 +15,22 @@ export default class Input extends PureComponent {
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onClear: PropTypes.func,
+    title: PropTypes.string,
   }
 
   render() {
-    const { placeholder, prependIcon, value, hasClear, onChange, onKeyUp, onFocus, onBlur, onClear } = this.props
+    const {
+      placeholder,
+      prependIcon,
+      value,
+      hasClear,
+      onChange,
+      onKeyUp,
+      onFocus,
+      onBlur,
+      onClear,
+      title
+    } = this.props
 
     const inputClasses = cx({
       default: 1,
@@ -35,29 +48,39 @@ export default class Input extends PureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
+      <div>
         {
-          !!prependIcon &&
-          <Icon id={prependIcon} width='16px' height='16px' className={[_s.marginLeft15PX, _s.marginRight5PX].join(' ')} />
-        }
-
-        <input
-          className={inputClasses}
-          type='text'
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onKeyUp={onKeyUp}
-          onFocus={onFocus}
-          onBlur={onBlur}
-        />
-
-        {
-          hasClear &&
-          <div role='button' tabIndex='0' className={'btnClasses'} onClick={onClear}>
-            <Icon id='close' width='10px' height='10px' className={_s.fillColorWhite} aria-label='Clear' />
+          !!title &&
+          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+            <Text size='small' weight='medium' color='secondary'>
+              {title}
+            </Text>
           </div>
         }
+        <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
+          {
+            !!prependIcon &&
+            <Icon id={prependIcon} width='16px' height='16px' className={[_s.marginLeft15PX, _s.marginRight5PX].join(' ')} />
+          }
+
+          <input
+            className={inputClasses}
+            type='text'
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onKeyUp={onKeyUp}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+
+          {
+            hasClear &&
+            <div role='button' tabIndex='0' className={'btnClasses'} onClick={onClear}>
+              <Icon id='close' width='10px' height='10px' className={_s.fillColorWhite} aria-label='Clear' />
+            </div>
+          }
+        </div>
       </div>
     )
   }