Add optional badge

rdmo/projects/assets/js/interview/components/main/question/Question.js

@@ -7,10 +7,14 @@ import QuestionHelp from './QuestionHelp'
 import QuestionManagement from './QuestionManagement'
 import QuestionText from './QuestionText'
 import QuestionWidget from './QuestionWidget'
+import QuestionOptional from './QuestionOptional'
 
 const Question = ({ templates, question, values, focus, currentSet, createValue, updateValue, deleteValue }) => {
   return (
     <div className={`interview-question col-md-${question.width || '12'}`}>
+      {
+        question.is_optional && <QuestionOptional />
+      }
       <QuestionText question={question} />
       <QuestionHelp question={question} />
       {

rdmo/projects/assets/js/interview/components/main/question/QuestionOptional.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const QuestionOptional = () => {
+  return (
+    <div className="badge badge-optional" title={gettext('This is an optional question.')}>
+      {gettext('Optional')}
+    </div>
+  )
+}
+
+export default QuestionOptional

rdmo/projects/assets/js/interview/components/main/question/QuestionText.js

@@ -11,12 +11,6 @@ const QuestionText = ({ question }) => {
   return (
     <div className={classnames}>
       {question.text}
-      {question.is_optional && (
-        <>
-          {' '}
-          <span>{gettext('(optional)')}</span>
-        </>
-      )}
     </div>
   )
 }

rdmo/projects/assets/js/interview/components/main/question/widgets/TextInput.js

@@ -40,6 +40,7 @@ TextInput.propTypes = {
   value: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
   isDefault: PropTypes.bool,
+  isOptional: PropTypes.bool,
   focus: PropTypes.bool,
   updateValue: PropTypes.func.isRequired,
 }

rdmo/projects/assets/scss/interview.scss

@@ -233,6 +233,11 @@
             opacity: 0.5;
         }
     }
+
+    .badge-optional {
+        float: right;
+        margin-top: 1px;
+    }
 }
 
 .interview-question {