Add prop that can add elements on top of input/textarea

src/components/Textarea/index.js

@@ -86,6 +86,11 @@ const TextArea = styled.textarea`
     }
 `;
 
+const TopLabel = styled.span`
+    padding-bottom: 4px;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
 const Textarea = ({
     className,
     placeholder = '',
@@ -96,11 +101,11 @@ const Textarea = ({
     isDisabled,
     onChange,
     isError,
-    label,
+    topLabel,
 }) => (
     <Wrapper>
-        {label && (
+        {topLabel && (
-            <Label>{label}</Label>
+            <TopLabel>{topLabel}</TopLabel>
         )}
         <TextArea
             className={className}
@@ -126,7 +131,7 @@ Textarea.propTypes = {
     placeholder: PropTypes.string,
     value: PropTypes.string,
     isDisabled: PropTypes.bool,
-    label: PropTypes.string,
+    topLabel: PropTypes.node,
 };
 
 export default Textarea;

src/components/inputs/Input/index.js

@@ -28,7 +28,7 @@ const InputIconWrapper = styled.div`
     display: inline-block;
 `;
 
-const InputLabel = styled.span`
+const TopLabel = styled.span`
     padding-bottom: 4px;
     color: ${colors.TEXT_SECONDARY};
 `;
@@ -102,8 +102,8 @@ class Input extends Component {
             <Wrapper
                 className={this.props.className}
             >
-                {this.props.inputLabel && (
+                {this.props.topLabel && (
-                    <InputLabel>{this.props.inputLabel}</InputLabel>
+                    <TopLabel>{this.props.topLabel}</TopLabel>
                 )}
                 <InputWrapper>
                     <InputIconWrapper>
@@ -153,7 +153,7 @@ Input.propTypes = {
     onChange: PropTypes.func,
     state: PropTypes.string,
     bottomText: PropTypes.string,
-    inputLabel: PropTypes.string,
+    topLabel: PropTypes.node,
     sideAddons: PropTypes.arrayOf(PropTypes.node),
     isDisabled: PropTypes.bool,
 };