Add remove button to question list elements

src/components/SignupQuestionsWidget/Question.tsx

@@ -0,0 +1,22 @@
+import { Component } from "react";
+import * as React from "react";
+
+export interface QuestionProps {
+  children: any;
+  onRemove: () => any;
+}
+
+class Question extends Component<QuestionProps> {
+  render() {
+    const { children, onRemove } = this.props;
+
+    return (
+      <div>
+        <button className="remove" onClick={onRemove}>Delete</button>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default Question;

src/components/SignupQuestionsWidget/QuestionList.tsx

@@ -5,6 +5,7 @@ import { Draggable } from "react-beautiful-dnd";
 import { Question, InputProps, optionTypes, SignupQuestionError } from "./index";
 import OptionsWidget from "./OptionsWidget";
 import TypeWidget from "./TypeWidget";
+import QuestionElement from "./Question";
 
 export interface QuestionListProps {
   questions: Question[];
@@ -26,6 +27,13 @@ class QuestionList extends React.Component<QuestionListProps, QuestionListState>
     onChange(questions);
   }
 
+  handleElementRemove = (questions: Question[], index: number) => () => {
+    const { onChange } = this.props;
+    const newQuestions = [...questions];
+    newQuestions.splice(index, 1);
+    onChange(newQuestions);
+  }
+
   renderQuestions() {
     const { questions, onChange, placeholder } = this.props;
     return questions.map((q, index) => {
@@ -44,9 +52,13 @@ class QuestionList extends React.Component<QuestionListProps, QuestionListState>
             {...provided.dragHandleProps}
             ref={provided.innerRef}
           >
-            {nameWidget}
-            {typeSelectWidget}
-            {optionsWidget}
+            <QuestionElement
+              onRemove={this.handleElementRemove(questions, index)}
+            >
+              {nameWidget}
+              {typeSelectWidget}
+              {optionsWidget}
+            </QuestionElement>
           </div>
         )}
         </Draggable>

src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss

@@ -7,6 +7,14 @@
     margin: 1rem 0;
   }
 
+  button.remove {
+    background-color: $orange1;
+    margin-left: auto;
+    margin-bottom: 0.5rem;
+    padding: 0.3rem 0.5rem;
+    float: right;
+  }
+
   .signup-questions-widget-row {
     margin-bottom: 1rem;
     display: flex;