Initial commit

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

5 files changed, 162 insertions, 0 deletions

diff --git a/components/notification/_notification.scss b/components/notification/_notification.scss
new file mode 100644
index 0000000..1c46ac2
--- /dev/null
+++ b/components/notification/_notification.scss
@@ -0,0 +1,78 @@
+@include mixin-keyframes-fade-in-vertically(-50px, 'keyframes-slide-notif-in');
+@include mixin-keyframes-fade-out-vertically(20px, 'keyframes-slide-notif-out');
+
+.sdc-notification {
+	position:relative;
+	padding: 10px;
+	width: 300px;
+	min-height: 45px;
+	animation: keyframes-slide-notif-in 1s;
+	margin: 2px;
+	box-shadow: 0 3px 7px -3px $dark-gray;
+	display:flex;
+	flex-direction:row;
+	align-items: center;
+	&.fade-out__animated {
+		animation: keyframes-slide-notif-out 0.8s
+	}
+
+	&.type-info {
+		background-color: $blue; }
+
+	&.type-error {
+		background-color: $red; }
+
+	&.type-success {
+		background-color: $green; }
+
+	&.type-warning {
+		background-color: $yellow; }
+
+
+	&.react-transition-exit-active {
+		animation: keyframes-slide-notif-out 0.8s
+	}
+	
+
+	
+	.sdc-notification__icon_container {
+		border-radius: 42px;			
+		flex: 0 0 auto;
+		height: 38px;
+		width: 38px;
+		background-color: rgba($white, 0.3);
+		margin-right: 5px;
+		.sdc-notification_svg-icon {								
+			height: 32px;
+			width: 32px;
+			fill: $white;
+			margin-left: 3px;
+			margin-top: 3px;
+		}
+	}			
+	
+	.sdc-notification__icon {
+		flex: 0 0 auto;
+		height: 32px;
+		width: 32px;
+		margin-left: 3px;
+		margin-top: 3px;
+		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style=''%3E%3Crect id='backgroundrect' width='100%25' height='100%25' x='0' y='0' fill='none' stroke='none'/%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2382c355;%7D.cls-2%7Bfill:none;stroke:%23ebf5e4;stroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Evicon%3C/title%3E%3Cg class='currentLayer' style=''%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cg id='Layer_4' data-name='Layer 4'%3E%3Cpolyline class='cls-2' points='7.46 17.43 15.36 21.74 22.54 8.57' id='svg_2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
+	}
+	.sdc-notification__message {
+		flex: 1;
+		text-align: left;
+		margin-left: 20px;
+
+		.sdc-notification__title {
+			font-size:16px;
+			color: white;
+			font-weight: bolder;
+		}
+	
+		.sdc-notification__text {
+			font-size: 14px;
+			color: white;
+		}
+	}
+}
diff --git a/components/notification/notification-error.html b/components/notification/notification-error.html
new file mode 100644
index 0000000..b3a6d77
--- /dev/null
+++ b/components/notification/notification-error.html
@@ -0,0 +1,21 @@
+<div class="sdc-notification type-error " data-test-id="">
+  <div class="sdc-notification__icon_container">
+    <div class="svg-icon-wrapper sdc-notification_svg-icon bottom">
+      <svg class="svg-icon __check" version="1.1" id="check_icon" x="0px" y="0px" viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+        <g transform="translate(0,-952.36218)">
+          <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+		c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z">
+          </path>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div class="sdc-notification__message">
+    <div class="sdc-notification__title">
+      Title
+    </div>
+    <div class="sdc-notification__text">
+      message
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/components/notification/notification-info.html b/components/notification/notification-info.html
new file mode 100644
index 0000000..8916947
--- /dev/null
+++ b/components/notification/notification-info.html
@@ -0,0 +1,21 @@
+<div class="sdc-notification type-info " data-test-id="">
+  <div class="sdc-notification__icon_container">
+    <div class="svg-icon-wrapper sdc-notification_svg-icon bottom">
+      <svg class="svg-icon __check" version="1.1" id="check_icon" x="0px" y="0px" viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+        <g transform="translate(0,-952.36218)">
+          <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+		c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z">
+          </path>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div class="sdc-notification__message">
+    <div class="sdc-notification__title">
+      Title
+    </div>
+    <div class="sdc-notification__text">
+      message
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/components/notification/notification-success.html b/components/notification/notification-success.html
new file mode 100644
index 0000000..a7f38fd
--- /dev/null
+++ b/components/notification/notification-success.html
@@ -0,0 +1,21 @@
+<div class="sdc-notification type-success " data-test-id="">
+  <div class="sdc-notification__icon_container">
+    <div class="svg-icon-wrapper sdc-notification_svg-icon bottom">
+      <svg class="svg-icon __check" version="1.1" id="check_icon" x="0px" y="0px" viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+        <g transform="translate(0,-952.36218)">
+          <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+		c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z">
+          </path>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div class="sdc-notification__message">
+    <div class="sdc-notification__title">
+      Title
+    </div>
+    <div class="sdc-notification__text">
+      message
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/components/notification/notification-warning.html b/components/notification/notification-warning.html
new file mode 100644
index 0000000..e0fa4d9
--- /dev/null
+++ b/components/notification/notification-warning.html
@@ -0,0 +1,21 @@
+<div class="sdc-notification type-warning " data-test-id="">
+  <div class="sdc-notification__icon_container">
+    <div class="svg-icon-wrapper sdc-notification_svg-icon bottom">
+      <svg class="svg-icon __check" version="1.1" id="check_icon" x="0px" y="0px" viewBox="0 0 14 10" style="enable-background:new 0 0 14 10;" xml:space="preserve">
+        <g transform="translate(0,-952.36218)">
+          <path d="M13.6,952.4c-0.1,0-0.2,0.1-0.3,0.2c-2.8,2.9-5.6,5.8-8.4,8.7l-4-3.5c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7l0,0l4.4,3.7
+		c0.2,0.2,0.5,0.1,0.6,0c2.9-3,5.8-6,8.7-9.1c0.2-0.2,0.2-0.5,0-0.7C13.8,952.4,13.6,952.4,13.6,952.4L13.6,952.4z">
+          </path>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div class="sdc-notification__message">
+    <div class="sdc-notification__title">
+      Title
+    </div>
+    <div class="sdc-notification__text">
+      message
+    </div>
+  </div>
+</div>
\ No newline at end of file