Add QuestionEraseValues component for checkboxes

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const QuestionEraseValues = ({ values, disabled, deleteValue }) => {
+  const handleEraseValue = () => {
+    values.forEach((value) => deleteValue(value))
+  }
+
+  return !disabled && (
+    <button type="button" className="btn btn-link btn-erase-value" onClick={handleEraseValue}
+            title={gettext('Erase input')}>
+      <i className="fa fa-eraser fa-btn"></i>
+    </button>
+  )
+}
+
+QuestionEraseValues.propTypes = {
+  values: PropTypes.array.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  deleteValue: PropTypes.func.isRequired
+}
+
+export default QuestionEraseValues

rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js

@@ -5,6 +5,7 @@ import { maxBy } from 'lodash'
 import { gatherOptions } from '../../../utils/options'
 
 import QuestionCopyValues from '../question/QuestionCopyValues'
+import QuestionEraseValues from '../question/QuestionEraseValues'
 import QuestionError from '../question/QuestionError'
 import QuestionSuccess from '../question/QuestionSuccess'
 
@@ -71,6 +72,11 @@ const CheckboxWidget = ({ question, sets, values, siblings, currentSet, disabled
             </div>
             <div className="buttons">
               <QuestionSuccess value={{ success }} />
+              <QuestionEraseValues
+                values={values}
+                disabled={disabled}
+                deleteValue={deleteValue}
+              />
               <QuestionCopyValues
                 question={question}
                 sets={sets}