Renamed SecurityMeasure to Tag

components/01_Atoms/_atoms.scss

@@ -7,3 +7,4 @@
 @import 'input/input';
 @import 'image/image';
 @import 'logo/logo';
+@import 'tag/tag';

components/01_Atoms/tag/_tag.scss

@@ -0,0 +1,14 @@
+.LP-Tag{
+	padding: 8px 14px;
+	background-color: #D7CEC7;
+	border-radius: 2px;
+	width: max-content;
+
+	.LP-Paragraph{
+		padding: 0;
+		margin: 0;
+		font-family: $-primary-sans-serif-font;
+		font-size: 1em;
+		display: inline;
+	}
+}

components/01_Atoms/tag/tag.config.json

@@ -0,0 +1,6 @@
+{
+	"title": "Tag",
+	"context": {
+		"text": "Im a tag"
+	}
+}

components/01_Atoms/tag/tag.hbs

@@ -0,0 +1,3 @@
+<div class="LP-Tag">
+	{{> @paragraph text=text}}
+</div>

components/02_Molecules/_molecules.scss

@@ -1,3 +1,3 @@
 @import 'textSection/textSection';
 @import 'placeTeaser/placeTeaser';
-@import 'securityMeasureList/securityMeasureList';
+@import 'tagList/tagList';

components/02_Molecules/securityMeasureList/_securityMeasureList.scss

@@ -1,17 +0,0 @@
-.LP-SecurityMeasure__List{
-    list-style-type: none;
-    display: flex;
-    padding:0;
-    margin: 0;
-
-    .LP-SecurityMeasure__Item{
-        margin: 0 8px;
-        padding: 8px 14px;
-        background-color: #D7CEC7;
-        border-radius: 2px;
-        .LP-Text{
-            font-family: $-primary-sans-serif-font;
-            font-size: 1.2rem;
-        }
-    }
-}

components/02_Molecules/securityMeasureList/securityMeasureList.config.json

@@ -1 +0,0 @@
-{}

components/02_Molecules/securityMeasureList/securityMeasureList.hbs

@@ -1,7 +0,0 @@
-<ul class="LP-SecurityMeasure__List">
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Kameras</span></li>
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Zaun</span></li>
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Wachhund</span></li>
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Alarmanlage</span></li>
-    <li class="LP-SecurityMeasure__Item"><span class="LP-Text">Selbstschussanlage</span></li>
-</ul>

components/02_Molecules/tagList/_tagList.scss

@@ -0,0 +1,13 @@
+.LP-TagList{
+	.LP-TagList__List{
+		list-style-type: none;
+		display: flex;
+		flex-wrap: wrap;
+		padding:0;
+		margin: 0;
+
+		.LP-TagList__Item{
+			margin: 6px;
+		}
+	}
+}

components/02_Molecules/tagList/tagList.config.json

@@ -0,0 +1,11 @@
+{
+	"title": "TagList",
+	"context": {
+		"tags": [
+			"Kamera",
+			"Wachhund",
+			"Zaun",
+			"Security"
+		]
+	}
+}

components/02_Molecules/tagList/tagList.hbs

@@ -0,0 +1,7 @@
+<div class="LP-TagList">
+	<ul class="LP-TagList__List">
+		{{#each tags}}
+			<li class="LP-TagList__Item">{{> @tag text=this}}</li>
+		{{/each}}
+	</ul>
+</div>