[New] Implementation of QuestionCommentIcon

example/ExampleApp.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SForms from 's-forms';
+import SForms, {Constants} from 's-forms';
 import SmartComponents from "../src/SmartComponents";
 
 import 's-forms/css/s-forms.min.css';
@@ -34,7 +34,15 @@ const options = {
   horizontalWizardNav: false,
   wizardStepButtons: true,
   enableForwardSkip: true,
-  startingStep: 1
+  startingStep: 1,
+  users: [
+    {id: "http://fel.cvut.cz/people/max-chopart", label: "Max Chopart"},
+    {id: "http://fel.cvut.cz/people/miroslav-blasko", label: "Miroslav Blasko"}],
+  currentUser: "http://fel.cvut.cz/people/max-chopart",
+  icons: [
+    {id: Constants.ICONS.QUESTION_HELP, behavior:  Constants.ICON_BEHAVIOR.ENABLE},
+    {id: Constants.ICONS.QUESTION_COMMENTS, behavior: Constants.ICON_BEHAVIOR.ENABLE}
+  ]
 };
 
 class ExampleApp extends React.Component {

src/components/CompositeQuestion.jsx

@@ -30,6 +30,10 @@ export default class CompositeQuestion extends Question {
     }
   };
 
+  onCommentChange = (commentIndex, change) => {
+    this._onChange(SConstants.HAS_COMMENT, commentIndex, change);
+  };
+
   _updateExpandedParts() {
     const question = this.props.question;
     const subQuestions = this._getSubQuestions();

src/components/QuestionWithUnit.jsx

@@ -51,7 +51,7 @@ class _QuestionWithUnit extends Question {
       <div key={'row-item-0'} className={cls} id={question['@id']}>
         <div className="question-with-unit">
           <div className="base-question">
-            <Answer index={0} answer={answers[0]} question={question} onChange={this.onAnswerChange} />
+            <Answer index={0} answer={answers[0]} question={question} onChange={this.onAnswerChange} onCommentChange={this.onCommentChange}/>
             {this._renderUnits()}
             {this._renderPrefixes()}
           </div>

src/components/ShowAdvancedSwitch.jsx

@@ -74,18 +74,7 @@ export default class ShowAdvancedSwitch extends Question {
   _renderShowAdvancedHelp() {
     const {question} = this._getShowAdvancedQuestion();
 
-    if (question[SConstants.HELP_DESCRIPTION]) {
-      return (
-        <HelpIcon
-          absolutePosition={false}
-          overlayPlacement="left"
-          text={JsonLdUtils.getLocalized(question[SConstants.HELP_DESCRIPTION], this.context.options.intl)}
-          iconClassContainer="help-icon-section"
-        />
-      );
-    }
-
-    return null;
+    return Question.renderIcons(question, this.context.options, this.onCommentChange);
   }
 
   _renderSwitch() {

src/components/WizardStepComponent.jsx

@@ -133,7 +133,7 @@ export default class WizardStepComponent extends WizardStep {
                        id={this.props.step['@id']}
           >
             {JsonLdUtils.getLocalized(this.props.step[JsonLdUtils.RDFS_LABEL], this.props.options.intl)}
-            {this._renderHelpIcon()}
+            {Question.renderIcons(this.props.step, this.props.options, this.onCommentChange)}
 
             {this._renderIdentifierText()}
             {this._renderShowAdvanced()}
@@ -150,7 +150,6 @@ export default class WizardStepComponent extends WizardStep {
     );
 
   }
-
 }
 
 WizardStepComponent.contextType = FormQuestionsContext;

src/styles/components.css

@@ -2,6 +2,11 @@
     overflow: visible;
 }
 
+.card-header {
+    display: flex;
+    align-items: center;
+}
+
 .card-header.bg-primary .custom-control-input:checked ~ .custom-control-label::before {
     color: #fff;
     border-color: #c6c6c6;
@@ -13,6 +18,8 @@
 }
 
 .show-advanced-switch {
+    display: flex;
+    justify-content: flex-end;
     float: right;
     flex-grow: 1;
     text-align: right;