From 662a3b8d4bc77984454858b3ebf49939127807f8 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 30 Jan 2019 10:50:07 +0100
Subject: [PATCH] Add basics for project entry wizard

---
 client/src/components/Modal.vue               | 22 ++++++-
 .../content-forms/TextFormWithHelpText.vue    | 57 +++++++++++++++++++
 .../portfolio/NewProjectEntryWizard.vue       | 21 ++++++-
 client/src/styles/_variables.scss             |  3 +
 4 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/content-forms/TextFormWithHelpText.vue

diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index c9df6725..cf315cac 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="modal__backdrop">
-    <div class="modal">
+    <div class="modal" :class="{'modal--hide-header': hideHeader}">
       <div class="modal__header">
         <slot name="header"></slot>
       </div>
@@ -19,6 +19,13 @@
 
 <script>
   export default {
+    props: {
+      hideHeader: {
+        type: Boolean,
+        default: false
+      }
+    },
+
     methods: {
       hideModal() {
         this.$store.dispatch('hideModal');
@@ -44,6 +51,19 @@
     grid-template-areas: "header" "body" "footer";
     position: relative;
 
+    &--hide-header {
+      grid-template-rows: 1fr 65px;
+      grid-template-areas: "body" "footer";
+    }
+
+    &--hide-header &__header {
+      display: none;
+    }
+
+    &--hide-header &__body {
+      padding: $default-padding;
+    }
+
     &__backdrop {
       display: grid;
       position: fixed;
diff --git a/client/src/components/content-forms/TextFormWithHelpText.vue b/client/src/components/content-forms/TextFormWithHelpText.vue
new file mode 100644
index 00000000..fabbe49a
--- /dev/null
+++ b/client/src/components/content-forms/TextFormWithHelpText.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="text-form-with-help-text">
+    <h3 class="text-form-with-help-text__heading"><span class="text-form-with-help-text__title">{{title}}</span>
+      <info-icon class="text-form-with-help-text__icon"></info-icon>
+    </h3>
+    <text-form @text-change-value="$emit('change', $event.target.value)" :value="v"></text-form>
+  </div>
+</template>
+
+<script>
+  import TextForm from '@/components/content-forms/TextForm';
+  import InfoIcon from '@/components/icons/InfoIcon';
+
+  export default {
+    props: ['title', 'value'],
+
+    components: {
+      TextForm,
+      InfoIcon
+    },
+
+    computed: {
+      v() {
+        return {
+          text: this.value
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .text-form-with-help-text {
+    margin-bottom: 30px;
+
+    &__heading {
+      margin-bottom: 15px;
+      display: flex;
+      justify-items: center;
+    }
+
+    &__title {
+      font-size: toRem(22px);
+      font-weight: 600;
+      margin-right: 8px;
+    }
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-grey;
+    }
+  }
+</style>
diff --git a/client/src/components/portfolio/NewProjectEntryWizard.vue b/client/src/components/portfolio/NewProjectEntryWizard.vue
index a4e51c75..99968e16 100644
--- a/client/src/components/portfolio/NewProjectEntryWizard.vue
+++ b/client/src/components/portfolio/NewProjectEntryWizard.vue
@@ -1,15 +1,30 @@
 <template>
-  <modal>
-    <h1>Hello</h1>
+  <modal :hide-header="true">
+    <div class="project-entry-modal">
+      <text-form-with-help-text title="Tätigkeit" :value="value">
+      </text-form-with-help-text>
+      <text-form-with-help-text title="Reflexion" :value="value">
+      </text-form-with-help-text>
+      <text-form-with-help-text title="Nächste Schritte" :value="value">
+      </text-form-with-help-text>
+    </div>
   </modal>
 </template>
 
 <script>
   import Modal from '@/components/Modal';
+  import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
 
   export default {
     components: {
-      Modal
+      Modal,
+      TextFormWithHelpText
     },
+
+    data() {
+      return {
+        value: ''
+      }
+    }
   }
 </script>
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 17131970..92484050 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -54,3 +54,6 @@ $input-border-radius: 3px;
 //modal stuff
 $modal-lateral-padding: 34px;
 $modal-input-width: 560px;
+
+
+$default-padding: 30px;