components/01_Atoms/_atoms.scss

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

components/01_Atoms/headline/_headline.scss

@@ -16,12 +16,4 @@
     &--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,12 +9,6 @@
             "context": {
                 "modifier": "--main"
             }
-		},
-		{
-            "name": "teaser",
-            "context": {
-                "modifier": "--teaser"
-            }
         }
     ]
 }

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

@@ -1,28 +1,7 @@
 {
     "context": {
 		"label": "Enter your value here",
-		"placeholder": "A sample value"
+		"placeholder": "A sample value",
-	},
-	"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,11 +1,28 @@
-<div class="LP-Input LP-Input{{modifier}}">
+<h3>Regular with message</h3>
+<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}}"/>
-	{{#if disabled}}
+    <span class="LP-Input__Message">{{message}}</span>
-		disabled="disabled"
+</div>
-	{{/if}}
+<h3>Regular without message</h3>
-	/>
+<div class="LP-Input">
-	{{#if message}}
+    <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>
-	{{/if}}
 </div>

components/01_Atoms/paragraph/_paragraph.scss

@@ -1,13 +0,0 @@
-.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.hbs

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

components/01_Atoms/text/_text.scss

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

components/01_Atoms/text/text.config.json

@@ -1,14 +1,5 @@
 {
     "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/text/text.hbs

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

components/02_Molecules/_molecules.scss

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

components/02_Molecules/placeTeaser/_placeTeaser.scss

@@ -1,22 +1,42 @@
 .LP-Place{
-	width: 280px;
-
     .LP-Place__Image{
+        width: 280px;
         height: 165px;
         object-fit: fill;
     }
 
-    .LP-Place__Meta{
+    .LP-Place__Assets{
         display: flex;
         align-items: center;
         justify-content: space-between;
+        margin-top: 0.8rem;
+        
+        padding: 0 10px;
         padding-bottom: 10px;
     }
 
+    .LP-Place__Info{
+
+        .LP-Place__Title{
+            font-family: $-primary-sans-serif-font;
+            color: $-secondary-color;
+            font-size: 1rem;
+            padding: 0px;
+            margin: 0px;
+        }
+
         .LP-Place__Description{
             font-family: $-primary-sans-serif-accent-font;
             color: $-secondary-color;
-		display: none;
+        }
+
+        .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,7 +2,6 @@
     "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,20 +2,21 @@
 	<div class="LP-Place__Image">
 		    <img class="LP-Image" src="{{image}}"/>
 	</div>
-    <div class="LP-Place__Meta">
+    <div class="LP-Place__Detail">
         <div class="LP-Place__Info">
-            <span class="LP-Place__Title">{{> @headline headline=title modifier='--teaser'}}</span>
+            <h3 class="LP-Place__Title">{{title}}</h3>
-            <span class="LP-Place__Detail" >{{> @paragraph text=location modifier='--detail'}}</span>
+            <p class="LP-Place__Detail" >{{location}}</p>
         </div>
-		<div class="LP-Place__Description">
+        {{# if description}}
-			{{> @paragraph text=description}}
+            <p class="LP-Place__Description">
-		</div>
+                {{description}}
-		<div class="LP-Place__Icons">
+            </p>
+        {{/if}}
+
         <ul class="LP-Icon__List">
             <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/location.svg"/></li>
             <li class="LP-Icon__Item"><img class="LP-Icon" src="/icons/flag.svg"/></li>
         </ul>
     </div>
-    </div>
 </article>

components/03_Organisms/_organisms.scss

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

components/_preview.hbs

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