Move label and placeholder to plugins

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

@@ -18,14 +18,8 @@ class CommentForm extends React.Component {
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
 
-    // DOM ID for form input that edits comment body
-    bodyInputId: PropTypes.string,
-
-    // screen reader label for input that edits comment body
-    bodyLabel: PropTypes.string,
-
-    // Placeholder for input that edits comment body
-    bodyPlaceholder: PropTypes.string,
+    // Unique identifier for this form
+    id: PropTypes.string,
 
     // render at start of button container (useful for extra buttons)
     buttonContainerStart: PropTypes.node,
@@ -59,8 +53,6 @@ class CommentForm extends React.Component {
   };
   static get defaultProps() {
     return {
-      bodyLabel: t('comment_box.comment'),
-      bodyPlaceholder: t('comment_box.comment'),
       submitText: t('comment_box.post'),
       submitButtonCStyle: 'darkGrey',
       submitEnabled: () => true,
@@ -114,10 +106,8 @@ class CommentForm extends React.Component {
         <DraftArea
           root={root}
           comment={comment}
-          id={this.props.bodyInputId}
-          label={this.props.bodyLabel}
+          id={this.props.id}
           input={input}
-          placeholder={this.props.bodyPlaceholder}
           onInputChange={this.props.onInputChange}
           disabled={disableTextArea}
           charCountEnable={this.props.charCountEnable}

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

@@ -35,10 +35,8 @@ export default class DraftArea extends React.Component {
   render() {
     const {
       input,
-      placeholder,
       id,
       disabled,
-      label,
       charCountEnable,
       maxCharCount,
       onInputChange,
@@ -55,21 +53,17 @@ export default class DraftArea extends React.Component {
         <div
           className={cn(styles.container, 'talk-plugin-commentbox-container')}
         >
-          <label htmlFor={id} className="screen-reader-text" aria-hidden={true}>
-            {label}
-          </label>
           <Slot
             fill="draftArea"
             defaultComponent={DraftAreaContent}
             className={styles.content}
             passthrough={{
+              id,
               root,
               comment,
               registerHook,
               unregisterHook,
               input,
-              placeholder,
-              id,
               onInputChange,
               disabled,
               isReply,
@@ -89,8 +83,6 @@ DraftArea.propTypes = {
   maxCharCount: PropTypes.number,
   id: PropTypes.string,
   input: PropTypes.object,
-  placeholder: PropTypes.string,
-  label: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
   root: PropTypes.object.isRequired,

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

@@ -2,24 +2,48 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './DraftAreaContent.css';
+import t from 'coral-framework/services/i18n';
 
-const DraftAreaContent = ({
-  input,
-  placeholder,
-  id,
-  onInputChange,
-  disabled,
-}) => (
-  <textarea
-    className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
-    value={input.body}
-    placeholder={placeholder}
-    id={id}
-    onChange={e => onInputChange({ body: e.target.value })}
-    rows={3}
-    disabled={disabled}
-  />
-);
+class DraftAreaContent extends React.Component {
+  getLabel() {
+    if (this.props.isEdit) {
+      return t('edit_comment.body_input_label');
+    }
+    return this.props.isReply ? t('comment_box.reply') : t('comment.comment');
+  }
+
+  getPlaceholder() {
+    if (this.props.isEdit) {
+      return '';
+    }
+    return this.getLabel();
+  }
+
+  render() {
+    const { input, id, onInputChange, disabled } = this.props;
+    const inputId = `${id}-textarea`;
+    return (
+      <div>
+        <label
+          htmlFor={inputId}
+          className="screen-reader-text"
+          aria-hidden={true}
+        >
+          {this.getLabel()}
+        </label>
+        <textarea
+          id={inputId}
+          className={cn(styles.content, 'talk-plugin-commentbox-textarea')}
+          value={input.body}
+          placeholder={this.getPlaceholder()}
+          onChange={e => onInputChange({ body: e.target.value })}
+          rows={3}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+}
 
 DraftAreaContent.propTypes = {
   id: PropTypes.string,
@@ -27,6 +51,8 @@ DraftAreaContent.propTypes = {
   placeholder: PropTypes.string,
   onInputChange: PropTypes.func,
   disabled: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  isReply: PropTypes.bool,
 };
 
 export default DraftAreaContent;

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

@@ -67,7 +67,7 @@ class EditableCommentContent extends React.Component {
           bodyPlaceholder=""
           submitText={<span>{t('edit_comment.save_button')}</span>}
           submitButtonCStyle="green"
-          bodyInputId={id}
+          id={id}
         />
       </div>
     );

client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js

@@ -147,11 +147,9 @@ class CommentBox extends React.Component {
           root={root}
           comment={comment}
           defaultValue={this.props.defaultValue}
-          bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
           maxCharCount={maxCharCount}
           charCountEnable={this.props.charCountEnable}
-          bodyPlaceholder={t('comment.comment')}
-          bodyInputId={id}
+          id={id}
           input={this.state.input}
           registerHook={registerHook}
           unregisterHook={unregisterHook}

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

@@ -54,13 +54,11 @@ class DraftAreaContainer extends React.Component {
         root={this.props.root}
         comment={this.props.comment}
         input={this.props.input}
-        placeholder={this.props.placeholder}
         id={this.props.id}
         onInputChange={this.props.onInputChange}
         disabled={this.props.disabled}
         charCountEnable={this.props.charCountEnable}
         maxCharCount={this.props.maxCharCount}
-        label={this.props.label}
         registerHook={this.props.registerHook}
         unregisterHook={this.props.unregisterHook}
         isReply={this.props.isReply}
@@ -81,10 +79,8 @@ DraftAreaContainer.propTypes = {
   maxCharCount: PropTypes.number,
   id: PropTypes.string.isRequired,
   input: PropTypes.object.isRequired,
-  placeholder: PropTypes.string,
   onInputChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  label: PropTypes.string.isRequired,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,