Adding new Slot, adding default component

client/coral-embed-stream/src/tabs/stream/components/DraftArea.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import Slot from 'coral-framework/components/Slot';
+import TextAreaDefault from './TextAreaDefault';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 
@@ -37,20 +38,25 @@ export default class DraftArea extends React.Component {
       onChange,
     } = this.props;
 
+    const tASettings = {
+      value,
+      placeholder,
+      id,
+      onChange,
+      rows,
+      disabled,
+    };
+
     return (
       <div>
         <div className={'talk-plugin-commentbox-container'}>
           <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
             {label}
           </label>
-          <textarea
-            className={'talk-plugin-commentbox-textarea'}
-            value={value}
-            placeholder={placeholder}
-            id={id}
-            onChange={onChange}
-            rows={rows}
-            disabled={disabled}
+          <Slot
+            fill="textArea"
+            defaultComponent={TextAreaDefault}
+            {...tASettings}
           />
           <Slot fill="commentInputArea" />
         </div>

client/coral-embed-stream/src/tabs/stream/components/TextAreaDefault.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TextAreaComponent = ({
+  value,
+  placeholder,
+  id,
+  onChange,
+  rows,
+  disabled,
+}) => (
+  <textarea
+    className={'talk-plugin-commentbox-textarea'}
+    value={value}
+    placeholder={placeholder}
+    id={id}
+    onChange={onChange}
+    rows={rows}
+    disabled={disabled}
+  />
+);
+
+TextAreaComponent.defaultProps = {
+  rows: 3,
+};
+
+TextAreaComponent.propTypes = {
+  id: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  rows: PropTypes.number,
+};
+
+export default TextAreaComponent;