Questionnaire progress, preview questions, select answer

src/components/Question/CheckboxQuestion/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import { VARIANTS } from "../../PrimaryButton/constants";
   import CodeSnippet from "../../CodeSnippet/index.svelte";
   import Checkbox from "../../Form/Checkbox.svelte";
 
@@ -12,6 +13,7 @@
   export let defaultValue = [];
   export let disablePreviousButton = false;
   export let isLast = false;
+  export let isPreview = false;
 
   function getRadioVal(form, name) {
     let values = [];
@@ -27,6 +29,7 @@
   }
 
   function handleFormSubmit(event) {
+    if (isPreview) return;
     const values = getRadioVal(event.target, name);
     onSubmit(name, values);
     event.target.reset();
@@ -48,7 +51,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="text-left my-2 border border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full"
+        class="cursor-pointer text-left my-2 border border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full"
         type="button"
       >
         <Checkbox
@@ -60,12 +63,20 @@
       </button>
     {/each}
   </div>
-  <div class="mt-3 flex items-center justify-between w-full">
-    <PrimaryButton
-      onClick={handlePrevious}
-      label="Previous"
-      isDisabled={disablePreviousButton}
-    />
-    <PrimaryButton type="submit" label={isLast ? "Finish" : "Next"} {name} />
-  </div>
+  {#if !isPreview}
+    <div class="mt-3 flex items-center justify-between w-full">
+      <PrimaryButton
+        onClick={handlePrevious}
+        label="Previous"
+        isDisabled={disablePreviousButton}
+        variant={VARIANTS.OUTLINED}
+      />
+      <PrimaryButton
+        variant={VARIANTS.OUTLINED}
+        type="submit"
+        label={isLast ? "Finish" : "Next"}
+        {name}
+      />
+    </div>
+  {/if}
 </form>

src/components/Question/RadioQuestion/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import { VARIANTS } from "../../PrimaryButton/constants";
   import RadioItem from "../../Form/RadioItem.svelte";
   import CodeSnippet from "../../CodeSnippet/index.svelte";
 
@@ -12,6 +13,7 @@
   export let defaultValue = "";
   export let disablePreviousButton = false;
   export let isLast = false;
+  export let isPreview = false;
 
   function getRadioVal(form, name) {
     let val;
@@ -27,6 +29,7 @@
   }
 
   function handleFormSubmit(event) {
+    if (isPreview) return;
     const value = getRadioVal(event.target, name);
     onSubmit(name, value);
     event.target.reset();
@@ -48,7 +51,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="text-left my-2 border border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full"
+        class="cursor-pointer text-left my-2 border border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full"
         type="button"
       >
         <RadioItem
@@ -60,12 +63,21 @@
       </button>
     {/each}
   </div>
-  <div class="mt-3 flex items-center justify-between w-full">
-    <PrimaryButton
-      onClick={handlePrevious}
-      label="Previous"
-      isDisabled={disablePreviousButton}
-    />
-    <PrimaryButton type="submit" label={isLast ? "Finish" : "Next"} {name} />
-  </div>
+
+  {#if !isPreview}
+    <div class="mt-3 flex items-center justify-between w-full">
+      <PrimaryButton
+        onClick={handlePrevious}
+        label="Previous"
+        isDisabled={disablePreviousButton}
+        variant={VARIANTS.OUTLINED}
+      />
+      <PrimaryButton
+        variant={VARIANTS.OUTLINED}
+        type="submit"
+        label={isLast ? "Finish" : "Next"}
+        {name}
+      />
+    </div>
+  {/if}
 </form>

src/components/Question/TextareaQuestion/index.svelte

@@ -0,0 +1,61 @@
+<script>
+  import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import { VARIANTS } from "../../PrimaryButton/constants";
+  import CodeSnippet from "../../CodeSnippet/index.svelte";
+  import TextArea from "../../Form/TextArea.svelte";
+
+  export let title = "";
+  export let code;
+  export let name = "";
+  export let onSubmit = () => {};
+  export let onPrevious = () => {};
+  export let defaultValue = "";
+  export let disablePreviousButton = false;
+  export let isLast = false;
+  export let isPreview = false;
+
+  function handleFormSubmit(event) {
+    if (isPreview) return;
+
+    onSubmit(name, defaultValue);
+    event.target.reset();
+  }
+
+  function handlePrevious(event) {
+    event.preventDefault();
+    onPrevious();
+  }
+</script>
+
+<form on:submit|preventDefault={handleFormSubmit}>
+  <h2>{title}</h2>
+
+  {#if code}
+    <CodeSnippet {code} />
+  {/if}
+
+  <div class="ml-4">
+    <TextArea
+      bind:value={defaultValue}
+      rows="5"
+      placeholder="Write your answer here"
+    />
+  </div>
+
+  {#if !isPreview}
+    <div class="mt-3 flex items-center justify-between w-full">
+      <PrimaryButton
+        variant={VARIANTS.OUTLINED}
+        onClick={handlePrevious}
+        label="Previous"
+        isDisabled={disablePreviousButton}
+      />
+      <PrimaryButton
+        variant={VARIANTS.OUTLINED}
+        type="submit"
+        label={isLast ? "Finish" : "Next"}
+        {name}
+      />
+    </div>
+  {/if}
+</form>

src/components/Question/constants.js

@@ -22,8 +22,8 @@ export const QUESTION_TYPES = [
 export const QUESTION_TEMPLATE = {
   id: 1,
   title: "",
-  code: "",
   type: QUESTION_TYPE.RADIO,
+  answers: [],
   options: [
     {
       id: 1,