Cleaned out preview

components/01_Atoms/_atoms.scss

@@ -1,8 +1,9 @@
 @import 'link/link';
 @import 'headline/headline';
-@import 'text/text';
+@import 'paragraph/paragraph';
 @import 'icon/icon';
 @import 'button/button';
 @import 'checkbox/checkbox';
 @import 'input/input';
 @import 'image/image';
+@import 'logo/logo';

components/01_Atoms/headline/_headline.scss

@@ -15,5 +15,13 @@
 
     &--inline{
         display: inline;
-    }
+	}
+	
+	&--teaser{
+		font-family: $-primary-sans-serif-font;
+		color: $-secondary-color;
+		font-size: 1rem;
+		padding: 0px;
+		margin: 0px;
+	}
 }

components/01_Atoms/headline/headline.config.json

@@ -9,6 +9,12 @@
             "context": {
                 "modifier": "--main"
             }
+		},
+		{
+            "name": "teaser",
+            "context": {
+                "modifier": "--teaser"
+            }
         }
     ]
 }

components/01_Atoms/input/input.config.json

@@ -1,7 +1,28 @@
 {
     "context": {
 		"label": "Enter your value here",
-		"placeholder": "A sample value",
+		"placeholder": "A sample value"
-		"message": "Please fill in anything valuable"
+	},
-	}
+	"variants": [
+		{
+			"name": "With message",
+			"context":{
+				"message": "Please fill in anything valuable"
+			}
+		},
+        {
+            "name": "disabled",
+            "context": {
+				"modifier": "--disabled",
+				"disabled": true
+			}
+		},
+		{
+            "name": "error",
+            "context": {
+				"modifier": "--error",
+				"message": "This field is required"
+            }
+        }
+    ]
 }

components/01_Atoms/input/input.hbs

@@ -1,28 +1,11 @@
-<h3>Regular with message</h3>
+<div class="LP-Input LP-Input{{modifier}}">
-<div class="LP-Input">
     <label for="input123" class="LP-Input__Label">{{label}}</label>
-    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
+    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
-    <span class="LP-Input__Message">{{message}}</span>
+	{{#if disabled}}
-</div>
+		disabled="disabled"
-<h3>Regular without message</h3>
+	{{/if}}
-<div class="LP-Input">
+	/>
-    <label for="input123" class="LP-Input__Label">{{label}}</label>
+	{{#if message}}
-    <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>
+	{{/if}}
 </div>

components/01_Atoms/paragraph/_paragraph.scss

@@ -0,0 +1,13 @@
+.LP-Paragraph {
+    color: black;
+    font-family: $-primary-serif-font;
+	font-size: 1.2rem;
+	
+	&--detail{
+		font-family: $-primary-sans-serif-font;
+		padding: 0;
+		margin: 0;
+		margin-top: 5px;
+		font-size: 0.9rem;
+	}
+}

components/01_Atoms/paragraph/paragraph.config.json

@@ -1,5 +1,14 @@
 {
     "context": {
         "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
-    }
+	},
+	"variants": [
+		{
+			"name": "Detail",
+			"context":{
+				"text": "Hamm (Westf)",
+				"modifier": "--detail"
+			}
+		}
+	]
 }

components/01_Atoms/paragraph/paragraph.hbs

@@ -0,0 +1 @@
+<p class="LP-Paragraph LP-Paragraph{{modifier}}">{{text}}</p>

components/01_Atoms/text/_text.scss

@@ -1,5 +0,0 @@
-.LP-Text {
-    color: black;
-    font-family: $-primary-serif-font;
-    font-size: 1.2rem;
-}

components/01_Atoms/text/text.hbs

@@ -1 +0,0 @@
-<p class="LP-Text LP-Content">{{text}}</p>

components/02_Molecules/_molecules.scss

@@ -1,5 +1,3 @@
-@import 'logo/logo';
 @import 'textSection/textSection';
 @import 'placeTeaser/placeTeaser';
 @import 'securityMeasureList/securityMeasureList';
-@import 'form/form';

components/02_Molecules/placeTeaser/_placeTeaser.scss

@@ -1,42 +1,22 @@
 .LP-Place{
+	width: 280px;
+
     .LP-Place__Image{
-        width: 280px;
         height: 165px;
         object-fit: fill;
     }
 
-    .LP-Place__Assets{
+    .LP-Place__Meta{
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-top: 0.8rem;
-        
-        padding: 0 10px;
         padding-bottom: 10px;
     }
 
-    .LP-Place__Info{
+	.LP-Place__Description{
-
+		font-family: $-primary-sans-serif-accent-font;
-        .LP-Place__Title{
+		color: $-secondary-color;
-            font-family: $-primary-sans-serif-font;
+		display: none;
-            color: $-secondary-color;
+	}
-            font-size: 1rem;
-            padding: 0px;
-            margin: 0px;
-        }
-
-        .LP-Place__Description{
-            font-family: $-primary-sans-serif-accent-font;
-            color: $-secondary-color;
-        }
-
-        .LP-Place__Detail{
-            font-family: $-primary-sans-serif-font;
-            padding: 0;
-            margin: 0;
-            margin-top: 5px;
-            font-size: 0.9rem;
-        }
-    }
 
 }

components/02_Molecules/placeTeaser/placeTeaser.config.json

@@ -2,6 +2,7 @@
     "context": {
         "image": "/images/photo_2020-05-02_18-11-21.jpg",
         "title": "Kokerei Wiescherhöfen",
-        "location": "Hamm (Westfalen)"
+		"location": "Hamm (Westfalen)",
+		"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
     }
 }

components/02_Molecules/placeTeaser/placeTeaser.hbs

@@ -2,21 +2,20 @@
 	<div class="LP-Place__Image">
 		    <img class="LP-Image" src="{{image}}"/>
 	</div>
-    <div class="LP-Place__Detail">
+    <div class="LP-Place__Meta">
         <div class="LP-Place__Info">
-            <h3 class="LP-Place__Title">{{title}}</h3>
+            <span class="LP-Place__Title">{{> @headline headline=title modifier='--teaser'}}</span>
-            <p class="LP-Place__Detail" >{{location}}</p>
+            <span class="LP-Place__Detail" >{{> @paragraph text=location modifier='--detail'}}</span>
         </div>
-        {{# if description}}
+		<div class="LP-Place__Description">
-            <p class="LP-Place__Description">
+			{{> @paragraph text=description}}
-                {{description}}
+		</div>
-            </p>
+		<div class="LP-Place__Icons">
-        {{/if}}
+			<ul class="LP-Icon__List">
-
+				<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
-        <ul class="LP-Icon__List">
+				<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
-            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/favourite.svg"/></li>
+				<li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
-            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/location.svg"/></li>
+			</ul>
-            <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
+		</div>
-        </ul>
     </div>
 </article>

components/03_Organisms/_organisms.scss

@@ -5,3 +5,4 @@
 @import 'placeList/placeList';
 @import 'linkList/linkList';
 @import 'footer/footer';
+@import 'form/form';

components/_preview.hbs

@@ -6,10 +6,6 @@
         <title>Preview</title>
     </head>
     <body>
-        {{> @header}}
+        {{{ yield }}}
-        <article class="LP-MainContainer">
-            {{{ yield }}}
-        </article>
-        {{> @footer}}
     </body>
 </html>