From cc49116e5dbd27cf4f361b1d35122c6e4e6416f8 Mon Sep 17 00:00:00 2001
From: Niclas Thobaben <NiclasThobaben@DemHierSeinRechner.local>
Date: Sat, 11 Jan 2020 00:24:21 +0100
Subject: [PATCH] FEAT/ Form Elements

---
 src/Test.vue                          |  64 ++++++++++++++---
 src/assets/icons/expand_more-24px.svg |   1 +
 src/assets/styles/buttons.css         |   4 +-
 src/assets/styles/main.css            |  32 ++++++---
 src/components/form/FormBase.vue      | 100 ++++++++++++++++++++++++++
 src/components/form/FormCheckbox.vue  |  72 +++++++++++++++++++
 src/components/form/FormNumber.vue    |  22 ++++++
 src/components/form/FormSelect.vue    |  35 +++++++++
 src/components/form/FormText.vue      |  23 ++++++
 9 files changed, 333 insertions(+), 20 deletions(-)
 create mode 100644 src/assets/icons/expand_more-24px.svg
 create mode 100644 src/components/form/FormBase.vue
 create mode 100644 src/components/form/FormCheckbox.vue
 create mode 100644 src/components/form/FormNumber.vue
 create mode 100644 src/components/form/FormSelect.vue
 create mode 100644 src/components/form/FormText.vue

diff --git a/src/Test.vue b/src/Test.vue
index 00eb438..063a65c 100644
--- a/src/Test.vue
+++ b/src/Test.vue
@@ -1,35 +1,75 @@
 <template>
-  <div id="buttons">
+  <div id="test">
     <h1>Buttons</h1>
     <div>
       <button>Default</button>
       <button disabled>Default</button>
-    |
+    
       <button class="generic">Generic</button>
       <button class="generic" disabled>Generic</button>
-    |
+    
       <button class="action">Action</button>
       <button class="action" disabled>Action</button>
       
-      <hr>
 
       <button class="outlined">Default</button>
       <button class="outlined" disabled>Default</button>
-    |
+    
       <button class="generic outlined">Generic</button>
       <button class="generic outlined" disabled>Generic</button>
-    |
+    
       <button class="action outlined">Action</button>
       <button class="action outlined" disabled>Action</button>
 
     </div>
 
+    <h1>Form Elements</h1>
+    <div>
+      <FormText placeholder="Input Text" label="Field Label" :model="text"/>
+      <FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
+      <FormText placeholder="Input Text" label="Field Label" off="true"/>
+      <FormNumber placeholder="A Number" label="Field Label" />
+      <FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
+      <FormNumber placeholder="A Number" label="Field Label" off="true"/>
+      <FormSelect placeholder="Placeholder" label="Select">
+        <option value="optionA">Option A</option>
+        <option value="optionB">Option B</option>
+        <option value="optionC">Option C</option>
+        <option value="optionD">Option D</option>
+      </FormSelect>
+      <FormSelect placeholder="Placeholder" label="Select" off="true">
+        <option value="optionA">Option A</option>
+        <option value="optionB">Option B</option>
+        <option value="optionC">Option C</option>
+        <option value="optionD">Option D</option>
+      </FormSelect>
+      <FormCheckbox label="Checkbox"/>
+      <FormCheckbox label="Checkbox" error="An Error Message"/>
+      <FormCheckbox label="Checkbox" off="true"/>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
 
+import FormText from './components/form/FormText';
+import FormNumber from './components/form/FormNumber';
+import FormSelect from './components/form/FormSelect';
+import FormCheckbox from './components/form/FormCheckbox';
+
+export default {
+  components: {
+    FormText,
+    FormNumber,
+    FormSelect,
+    FormCheckbox
+  },
+  data(){
+    return {
+      text: '',
+      number: 0
+    }
+  }
 }
 </script>
 
@@ -38,8 +78,14 @@ export default {
 @import './assets/styles/main.css';
 @import './assets/styles/buttons.css';
 
-#buttons {
-  padding: 40px;
+body {
+  background-color: var(--white-washed);
+}
+
+#test {
+  margin: 40px;
+  padding: 24px;
+  background-color: var(--white-normal);
 }
 
 </style>
\ No newline at end of file
diff --git a/src/assets/icons/expand_more-24px.svg b/src/assets/icons/expand_more-24px.svg
new file mode 100644
index 0000000..690a0a1
--- /dev/null
+++ b/src/assets/icons/expand_more-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/src/assets/styles/buttons.css b/src/assets/styles/buttons.css
index 7c84f77..7677a1e 100644
--- a/src/assets/styles/buttons.css
+++ b/src/assets/styles/buttons.css
@@ -5,6 +5,7 @@ button {
 
     padding: 4px 36px;
     margin: 4px;
+    min-width: 120px;
     font-weight: bold;
     border: 1px solid transparent;
     border-radius: 4px;
@@ -15,6 +16,7 @@ button {
     /* letter-spacing: 1px; */
 
     cursor: pointer;
+    outline: none;
 }
 
 button:enabled:hover {
@@ -58,7 +60,7 @@ button.outlined:disabled {
 
 button.outlined.generic { 
     border-color: var(--grey-light); 
-    color: var(--grey-light);
+    color: var(--grey);
 }
 button.outlined.generic:enabled:active { background-color: #F2F6F9; }
 button.outlined.generic:disabled {
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index cfc09bc..3ea7477 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -40,14 +40,6 @@
     font-weight: bold;
 }
 
-* {
-    padding: 0;
-    margin: 0;
-    border: 0;
-    font-family: 'Roboto';
-    font-size: 13px; 
-}
-
 :root {
     --primary-green-dark: #71A857;
     --primary-green: #92D373;
@@ -59,8 +51,8 @@
 
     --grey-dark: #323940;
     --grey: #848B90;
-    --grey-light: #AAB7C0;
-    --grey-lightest: #D5DBDF;
+    --grey-light: #C9D3DA;
+    --grey-lightest: #E8EAEB;
 
     --white-washed: #EDEEEF;
     --white-normal: #FFFFFF;
@@ -73,4 +65,24 @@
     --success-light: #BCE2B6;
     --info: #608FBA;
     --info-light: #ABC8E3;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    font-family: 'Roboto';
+    font-size: 13px; 
+    color: var(--grey-dark);
+}
+
+h1 { font-size: 2.5rem; padding: 24px 4px 4px; }
+h2 { font-size: 2.0rem; padding: 24px 4px; }
+h3 { font-size: 1.5rem; padding: 24px 4px; }
+h4 { font-size: 1.25rem; padding: 24px 4px; }
+
+hr {
+    margin: 24px 0;
+    width: 100%;
+    border-bottom: 1px solid black;
 }
\ No newline at end of file
diff --git a/src/components/form/FormBase.vue b/src/components/form/FormBase.vue
new file mode 100644
index 0000000..6d3139a
--- /dev/null
+++ b/src/components/form/FormBase.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="form-base" :class="classes()">
+        <label>{{ label }}</label><br>
+        <slot></slot>
+        <p :if="error">{{error}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+    props: [
+        'label',
+        'error',
+        'off',
+        'model',
+        'placeholder'
+    ],
+    methods: {
+        classes(){
+            let classes = '';
+            classes += this.error ? 'error ': '';
+            classes += this.off ? 'disabled ': '';
+            return classes;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+    .form-base {
+        margin: 20px 4px;
+        /* display: flex; */
+    }
+
+    .form-base  label {
+        margin-top: 12px;
+        font-weight: bold;
+        font-size: 1.2rem;
+        color: var(--grey-dark);
+        width: 100%;
+    }
+
+    .form-base > input, .form-base > select {
+        margin-top: 4px;
+        padding: 6px;
+        font-weight: bold;
+
+        color: var(--grey-dark);
+        /* background-color: var(--white-washed); */
+        border: 1px solid var(--grey-light);
+        border-radius: 4px;
+
+        outline: none;
+        width: calc(100% - 14px);
+    }
+
+    .form-base > select {
+        width: 100%;
+        font-weight: normal;
+    }
+
+    .form-base > input::placeholder, .form-base > select option:disabled {
+        color: var(--grey);
+    }
+
+    .form-base > input:focus, .form-base > select:focus {
+        border-color: var(--success);
+        box-shadow: 0 0 4px var(--success);
+    }
+
+    .form-base.error > input, .form-base.error > select {
+        border-color: var(--error);
+        border-width: 2px;
+    }
+
+    .form-base.error > input:focus, .form-base.error > select:focus {
+        box-shadow: 0 0 4px var(--error);
+    }
+
+    .form-base.error > p {
+        margin-top: 6px;
+        margin-left: 4px;
+        color: var(--error);
+        font-size: 1rem;
+    }
+
+    .form-base.disabled > input, .form-base.disabled > select{
+        background-color: var(--grey-lightest);
+        color: var(--grey);
+        border-color: var(--grey-lightest);
+        cursor: not-allowed;
+    }
+
+    .form-base.disabled > input::placeholder, .form-base.disabled > select option:disabled{
+        color: #00000077;
+    }
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/form/FormCheckbox.vue b/src/components/form/FormCheckbox.vue
new file mode 100644
index 0000000..1993c72
--- /dev/null
+++ b/src/components/form/FormCheckbox.vue
@@ -0,0 +1,72 @@
+<template>
+    <FormBase :error="error" :off="off">
+        <input type="checkbox" :disabled="off" :model="model" :id="_uid">
+        <label :class="classes()"  :for="_uid">{{ label }}</label>
+    </FormBase>
+</template>
+
+<script>
+import FormBase from './FormBase';
+
+export default {
+    extends: FormBase,
+    props: [
+        
+    ],
+    components: {
+        FormBase
+    },
+    methods: {
+        classes(){
+            let classes = '';
+            classes += this.error ? 'error ': '';
+            classes += this.off ? 'disabled ': '';
+            return classes;
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+    label {
+        display: inline;
+        cursor: pointer;
+    }
+
+    label::after {
+        width: 12px;
+        height: 12px;
+        background-color: var(--white-normal);
+        border: 1px solid var(--grey);
+        display: block;
+        content: "";
+        float: right;
+        margin-right: 5px;
+    }
+
+    label.error::after {
+        border: 2px solid var(--error);
+    }
+
+    label.disabled::after {
+        background-color: var(--grey-lightest);
+        color: var(--grey);
+        border-color: var(--grey-lightest);
+        cursor: not-allowed;
+    }
+
+    input[type="checkbox"]:focus + label::after {
+        box-shadow: 0 0 4px var(--success);
+    }
+
+    input[type="checkbox"]:checked + label::after {
+        box-shadow: 0 0 4px var(--success);
+    }
+
+
+    input[type="checkbox"]{
+        visibility: hidden;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/form/FormNumber.vue b/src/components/form/FormNumber.vue
new file mode 100644
index 0000000..6357856
--- /dev/null
+++ b/src/components/form/FormNumber.vue
@@ -0,0 +1,22 @@
+<template>
+    <FormBase :label="label" :error="error" :off="off">
+        <input type="number" :placeholder="placeholder" :disabled="off" :model="model">
+    </FormBase>
+</template>
+
+<script>
+import FormBase from './FormBase';
+
+export default {
+    extends: FormBase,
+    props: [
+    ],
+    components: {
+        FormBase
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/form/FormSelect.vue b/src/components/form/FormSelect.vue
new file mode 100644
index 0000000..835e732
--- /dev/null
+++ b/src/components/form/FormSelect.vue
@@ -0,0 +1,35 @@
+<template>
+    <FormBase :label="label" :error="error" :off="off">
+        <select :disabled="off" :model="model">
+            <option selected default>{{placeholder}}</option>
+            <slot></slot>
+        </select>
+    </FormBase>
+</template>
+
+<script>
+import FormBase from './FormBase';
+
+export default {
+    extends: FormBase,
+    props: [
+
+    ],
+    components: {
+        FormBase
+    }
+}
+</script>
+
+<style scoped>
+    select {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+        background-size: .6em;
+        background-position: calc(100% - 1.3em) center;
+        background-repeat: no-repeat;
+        
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/form/FormText.vue b/src/components/form/FormText.vue
new file mode 100644
index 0000000..08d2dfd
--- /dev/null
+++ b/src/components/form/FormText.vue
@@ -0,0 +1,23 @@
+<template>
+    <FormBase :label="label" :error="error" :off="off">
+        <input type="text" :placeholder="placeholder" :disabled="off" :model="model">
+    </FormBase>
+</template>
+
+<script>
+import FormBase from './FormBase';
+
+export default {
+    extends: FormBase,
+    props: [
+        
+    ],
+    components: {
+        FormBase
+    }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file