From ab7c6c8d843fef92570f59e0c0b879708b29d068 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Fri, 31 Jul 2020 23:12:29 +0200
Subject: [PATCH] Providing context and variations of input

---
 components/01_Atoms/input/input.config.json |  6 ++++-
 components/01_Atoms/input/input.hbs         | 30 ++++++++++++++++-----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/components/01_Atoms/input/input.config.json b/components/01_Atoms/input/input.config.json
index 544b7b4..3c65575 100644
--- a/components/01_Atoms/input/input.config.json
+++ b/components/01_Atoms/input/input.config.json
@@ -1,3 +1,7 @@
 {
-    
+    "context": {
+		"label": "Enter your value here",
+		"placeholder": "A sample value",
+		"message": "Please fill in anything valuable"
+	}
 }
\ No newline at end of file
diff --git a/components/01_Atoms/input/input.hbs b/components/01_Atoms/input/input.hbs
index acb368e..bdc6523 100644
--- a/components/01_Atoms/input/input.hbs
+++ b/components/01_Atoms/input/input.hbs
@@ -1,10 +1,28 @@
+<h3>Regular with message</h3>
 <div class="LP-Input">
-    <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>
+    <label for="input123" class="LP-Input__Label">{{label}}</label>
+    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
+    <span class="LP-Input__Message">{{message}}</span>
 </div>
+<h3>Regular without message</h3>
 <div class="LP-Input">
-    <label for="input123" class="LP-Input__Label">First name</label>
-    <input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
-    <span class="LP-Input__Message">Field is required</span>
+    <label for="input123" class="LP-Input__Label">{{label}}</label>
+    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
+</div>
+<h3>Regular without placeholder</h3>
+<div class="LP-Input">
+    <label for="input123" class="LP-Input__Label">{{label}}</label>
+    <input type="text" id="input123" class="LP-Input__Field" placeholder=""/>
+    <span class="LP-Input__Message">{{message}}</span>
+</div>
+<h3>Disabled</h3>
+<div class="LP-Input LP-Input--disabled">
+    <label for="input123" class="LP-Input__Label">{{label}}</label>
+    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}" disabled="disabled"/>
+</div>
+<h3>Error</h3>
+<div class="LP-Input LP-Input--error">
+    <label for="input123" class="LP-Input__Label">{{label}}</label>
+    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
+    <span class="LP-Input__Message">{{message}}</span>
 </div>
\ No newline at end of file