Initial commit

Change-Id: I061d81a33aebadb83ba0e085e8e34339fed5ed53
Issue-ID: SDC-1609
Signed-off-by: Israel Lavi <il0695@att.com>

6 files changed, 268 insertions, 0 deletions

diff --git a/components/tile/_tile.scss b/components/tile/_tile.scss
new file mode 100644
index 0000000..80629cf
--- /dev/null
+++ b/components/tile/_tile.scss
@@ -0,0 +1,172 @@
+.sdc-tile {
+	$tile-full-width: 204px;
+	$tile-full-height: 204px;
+	$tile-padding: 10px;
+
+	$header-height: $body-font-1;
+	$footer-height: 23px;
+	$content-height: 100%;
+
+	width: $tile-full-width;
+	height: $tile-full-height;
+
+	padding: $tile-padding;
+	border: 1px solid $silver;
+	@include border-radius(2px);
+	@include box-sizing;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	position: relative;
+	cursor: pointer;
+	user-select: none;
+
+	background: $white;
+	color: $text-black;
+	fill: $dark-gray;
+	transition: box-shadow 0.3s ease-in-out;
+	@include body-3;
+	@include box-shadow(0 1px 4px 0 rgba($text-black, 0.06));
+
+	&:hover {
+		border-color: $light-gray;
+		@include box-shadow( 0 10px 30px 0 rgba($text-black, 0.25));
+	}
+
+	.blue {
+		color: $blue;
+		fill: $blue;
+	}
+
+	.purple {
+		color: $purple;
+		fill: $purple;
+	}
+
+	.centered {
+		&.sdc-tile-footer, .sdc-tile-info-line {
+			text-align: center;
+		}
+	}
+
+	.sdc-tile-header {
+		height: 1.1em;
+		line-height: 1em;
+		@include ellipsis($display: block);
+
+		font-size: $body-font-1;
+		text-transform: uppercase;
+	}
+
+	.sdc-tile-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		height: $content-height;
+
+		.sdc-tile-content-icon {
+			margin-top: 27px;
+			text-align: center;
+
+			svg {
+				width: 50px;
+				height: 50px;
+
+				&.__vsp {
+					width: 60px;
+					height: 40px;
+				}
+				&.__vlm {
+					width: 45px;
+					height: 53px;
+				}
+				&.__vendor {
+					width: 53px;
+					height: 47px;
+				}
+			}
+		}
+
+		.sdc-tile-content-info {
+			display: flex;
+			flex-direction: column;
+
+			.sdc-tile-info-line {
+				text-transform: capitalize;
+				@include ellipsis($display: inline-block);
+
+				button {
+					height: 1.67em;
+					width: initial;
+					margin-bottom: 5px;
+					margin-top: 1px;
+					padding: 0 8px;
+					font-size: inherit;
+				}
+				&.supertitle {
+					height: 1.1em;
+					line-height: 1.2;
+					color: $gray;
+				}
+				&.title {
+					height: 1.6em;
+					line-height: 1.8;
+					color: $text-black;
+					@include heading-5;
+				}
+				&.subtitle {
+					height: 1.5em;
+					line-height: 1.6;
+					color: $dark-gray;
+				}
+				&:last-child {
+					margin-bottom: 4px;
+				}
+			}
+		}
+	}
+
+	.sdc-tile-footer {
+		height: $footer-height;
+		@include box-sizing;
+
+		border-top: 1px solid $silver;
+		padding-top: 8px;
+
+		color: $dark-gray;
+		fill: $dark-gray;
+		text-transform: capitalize;
+
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.sdc-tile-footer-cell {
+			&:first-child {
+				@include ellipsis;
+			}
+			svg{
+				width: 20px;
+				height: 12px;
+			}
+			button {
+				width: initial;
+				height: initial;
+				@include body-2;
+
+				.svg-icon-wrapper {
+					.svg-icon-label {
+						font-size: inherit;
+					}
+					svg {
+						width: 9px;
+						height: 9px;
+					}
+				}
+			}
+		}
+
+	}
+}
diff --git a/components/tile/tile-without-footer.html b/components/tile/tile-without-footer.html
new file mode 100644
index 0000000..514a19e
--- /dev/null
+++ b/components/tile/tile-without-footer.html
@@ -0,0 +1,14 @@
+<div class="sdc-tile">
+    <div class="sdc-tile-header blue">Header</div>
+    <div class="sdc-tile-content">
+        <div class="sdc-tile-content-icon blue">
+            <div class="svg-icon-wrapper">
+                <!-- insert SVG -->
+            </div>
+        </div>
+        <div class="sdc-tile-content-info">
+            <div class="sdc-tile-info-line supertitle">Supertitle</div>
+            <div class="sdc-tile-info-line title">Title</div>
+        </div>
+    </div>
+</div>
diff --git a/components/tile/vendor-tile.html b/components/tile/vendor-tile.html
new file mode 100644
index 0000000..ede3fbf
--- /dev/null
+++ b/components/tile/vendor-tile.html
@@ -0,0 +1,26 @@
+<div class="sdc-tile">
+    <div class="sdc-tile-header"></div>
+    <div class="sdc-tile-content">
+        <div class="sdc-tile-content-icon dark-gray">
+            <div class="svg-icon-wrapper">
+                <!-- insert SVG -->               
+            </div>
+        </div>
+        <div class="sdc-tile-content-info centered">
+            <div class="sdc-tile-info-line title">Vendor Name</div>
+            <div class="sdc-tile-info-line">
+                <button class="sdc-button sdc-button-outline-rounded sdc-button__dark-gray">100 VSPs</button>
+            </div>
+        </div>
+    </div>
+    <div class="sdc-tile-footer centered">
+        <span class="sdc-tile-footer-cell">
+            <button class="sdc-button sdc-button-link sdc-button__primary sdc-button__with-icon">
+                <div class="svg-icon-wrapper sdc-button-icon right">
+                    <!-- insert SVG -->
+                    <span class="svg-icon-label sdc-button-label">Create new VSP</span>
+                </div>
+            </button>
+        </span>
+    </div>
+</div>
diff --git a/components/tile/vfc-tile.html b/components/tile/vfc-tile.html
new file mode 100644
index 0000000..7b4753e
--- /dev/null
+++ b/components/tile/vfc-tile.html
@@ -0,0 +1,17 @@
+<div class="sdc-tile">
+    <div class="sdc-tile-header purple">VFC</div>
+    <div class="sdc-tile-content">
+        <div class="sdc-tile-content-icon">
+            <div class="svg-icon-wrapper">
+                <!-- insert SVG -->
+            </div>
+        </div>
+        <div class="sdc-tile-content-info">
+            <div class="sdc-tile-info-line title">Title</div>
+            <div class="sdc-tile-info-line subtitle">V 1.0</div>
+        </div>
+    </div>
+    <div class="sdc-tile-footer">
+        <span class="sdc-tile-footer-cell">Certified</span>
+    </div>
+</div>
diff --git a/components/tile/vlm-tile.html b/components/tile/vlm-tile.html
new file mode 100644
index 0000000..be629a1
--- /dev/null
+++ b/components/tile/vlm-tile.html
@@ -0,0 +1,22 @@
+<div class="sdc-tile">
+    <div class="sdc-tile-header purple">VLM</div>
+    <div class="sdc-tile-content">
+        <div class="sdc-tile-content-icon purple">
+            <div class="svg-icon-wrapper">
+                <!-- insert SVG -->
+            </div>
+        </div>
+        <div class="sdc-tile-content-info">
+            <div class="sdc-tile-info-line title">VLM Name</div>
+        </div>
+    </div>
+    <div class="sdc-tile-footer">
+        <span class="sdc-tile-footer-cell">Certified</span>
+        <span class="sdc-tile-footer-cell">
+            <div class="svg-icon-wrapper left">
+                <!-- insert SVG -->
+                <span class="svg-icon-label">Owner</span>
+            </div>
+        </span>
+    </div>
+</div>
diff --git a/components/tile/vsp-tile.html b/components/tile/vsp-tile.html
new file mode 100644
index 0000000..1a3dc1d
--- /dev/null
+++ b/components/tile/vsp-tile.html
@@ -0,0 +1,17 @@
+<div class="sdc-tile">
+    <div class="sdc-tile-header blue">VSP</div>
+    <div class="sdc-tile-content">
+        <div class="sdc-tile-content-icon blue">
+            <div class="svg-icon-wrapper">
+                <!-- insert SVG -->
+            </div>
+        </div>
+        <div class="sdc-tile-content-info">
+            <div class="sdc-tile-info-line supertitle">VLM</div>
+            <div class="sdc-tile-info-line title">VSP Name</div>
+        </div>
+    </div>
+    <div class="sdc-tile-footer">
+        <span class="sdc-tile-footer-cell">Draft</span>
+    </div>
+</div>