From 10c3b3179e9f0f0583812cf1f7107921af97aad1 Mon Sep 17 00:00:00 2001
From: Leonhard Strohmidel <strohmidel@sitepark.com>
Date: Fri, 31 Jul 2020 16:54:59 +0200
Subject: [PATCH] Using New Input classes in Forms

---
 components/02_Molecules/form/_form.scss       | 70 +++++++++++++++++++
 components/02_Molecules/form/form.config.json |  3 +
 components/02_Molecules/form/form.hbs         | 42 +++++++++--
 3 files changed, 108 insertions(+), 7 deletions(-)

diff --git a/components/02_Molecules/form/_form.scss b/components/02_Molecules/form/_form.scss
index e69de29..5729e65 100644
--- a/components/02_Molecules/form/_form.scss
+++ b/components/02_Molecules/form/_form.scss
@@ -0,0 +1,70 @@
+.LP-Form{
+    max-width: 900px;
+    .LP-Form__Fieldset{
+        border: none;
+
+        .LP-Form__Legend{
+            margin: 0;
+            padding: 0;
+        }
+
+        .LP-Form__Composition{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            .LP-Form__Field{
+                flex: 3 1 100px;
+                padding: 0 15px;
+
+                &--wider{
+                    flex: 5 1 200px;
+                }
+
+                &--wide{
+                    flex: 4 1 150px;
+                }
+
+                &--narrow{
+                    flex: 2 0 50px;
+                }
+
+                &--narrower{
+                    flex: 1 0 25px;
+                }
+
+                input{
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+
+@media(max-width: $-viewport-small){
+    .LP-Form{
+        .LP-Form__Fieldset{
+            .LP-Form__Composition--breakable{
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+            }
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Form{
+        .LP-Form__Fieldset{
+            .LP-Form__Composition{
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .LP-Form__Field{
+                    flex: 3 1 100px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/02_Molecules/form/form.config.json b/components/02_Molecules/form/form.config.json
index e69de29..544b7b4 100644
--- a/components/02_Molecules/form/form.config.json
+++ b/components/02_Molecules/form/form.config.json
@@ -0,0 +1,3 @@
+{
+    
+}
\ No newline at end of file
diff --git a/components/02_Molecules/form/form.hbs b/components/02_Molecules/form/form.hbs
index 9070692..cf11e5a 100644
--- a/components/02_Molecules/form/form.hbs
+++ b/components/02_Molecules/form/form.hbs
@@ -1,14 +1,42 @@
 <form class="LP-Form">
     <fieldset class="LP-Form__Fieldset">
         <legend class="LP-Form__Legend">Basic data</legend>
-        <div class="LP-Form__Row">
-            <span class="LP-Form__Field">
-                <label for="textinput123" class="LP-Input__Label">Enter your text here</label>
-                <input id="textinput123" type="text" class="LP-Input__Text"/>
-                <span class="LP-Input__ErrorMessage">
-                    <p>Text is required</p>
-                </span>
+
+        <div class="LP-Form__Composition LP-Form__Composition--breakable">
+            <span class="LP-Form__Field LP-Input LP-Input--error">
+                <label for="input123" class="LP-Input__Label">First name</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+                <span class="LP-Input__Message">Field is required</span>
+            </span>
+            <span class="LP-Form__Field LP-Input">
+                <label for="input123" class="LP-Input__Label">Last name</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
             </span>
         </div>
+
+        <div class="LP-Form__Composition">
+            <span class="LP-Form__Field LP-Form__Field--wider LP-Input">
+                <label for="input123" class="LP-Input__Label">Street</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+                <span class="LP-Input__Message">We won't send any stalkers, promise</span>
+            </span>
+            <span class="LP-Form__Field LP-Form__Field--narrower LP-Input">
+                <label for="input123" class="LP-Input__Label">House no</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+                <span class="LP-Input__Message">Field is required</span>
+            </span>
+        </div>
+
+        <div class="LP-Form__Composition">
+            <span class="LP-Form__Field LP-Form__Field--narrow LP-Input">
+                <label for="input123" class="LP-Input__Label">Postal Code</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+            </span>
+            <span class="LP-Form__Field LP-Form__Field--wide LP-Input">
+                <label for="input123" class="LP-Input__Label">Town</label>
+                <input type="text" id="input123" class="LP-Input__Field"/>
+            </span>
+        </div>
+
     </fieldset>
 </form>
\ No newline at end of file