3 files changed, 121 insertions, 0 deletions
diff --git a/ui/imports/ui/components/data-cubic/data-cubic.html b/ui/imports/ui/components/data-cubic/data-cubic.html
new file mode 100644
index 0000000..1849b78
--- /dev/null
+++ b/ui/imports/ui/components/data-cubic/data-cubic.html
@@ -0,0 +1,23 @@
+<!-- 
+########################################################################################
+# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others #
+#                                                                                      #
+# All rights reserved. This program and the accompanying materials                     #
+# are made available under the terms of the Apache License, Version 2.0                #
+# which accompanies this distribution, and is available at                             #
+# http://www.apache.org/licenses/LICENSE-2.0                                           #
+########################################################################################
+ -->
+<template name="DataCubic">
+  <div class="os-data-cubic cards-w250 cl-theme-{{ getTheme }}">
+    <div class="sm-container">
+      <div class="sm-icon-part" >
+        {{> Icon type=icon.type name=icon.name }}
+      </div>
+      <div class="sm-info-part">
+        <p>{{ header }}</p>
+        <span class="sm-data-info">{{ dataInfo }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/ui/imports/ui/components/data-cubic/data-cubic.js b/ui/imports/ui/components/data-cubic/data-cubic.js
new file mode 100644
index 0000000..ac0860a
--- /dev/null
+++ b/ui/imports/ui/components/data-cubic/data-cubic.js
@@ -0,0 +1,71 @@
+/////////////////////////////////////////////////////////////////////////////////////////
+// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others /
+//                                                                                      /
+// All rights reserved. This program and the accompanying materials                     /
+// are made available under the terms of the Apache License, Version 2.0                /
+// which accompanies this distribution, and is available at                             /
+// http://www.apache.org/licenses/LICENSE-2.0                                           /
+/////////////////////////////////////////////////////////////////////////////////////////
+/*
+ * Template Component: DataCubic 
+ */
+    
+//import { Meteor } from 'meteor/meteor'; 
+import { Template } from 'meteor/templating';
+import { ReactiveDict } from 'meteor/reactive-dict';
+import * as R from 'ramda';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+import { Icon } from '/imports/lib/icon';
+        
+import './data-cubic.html';     
+    
+/*  
+ * Lifecycles
+ */   
+  
+Template.DataCubic.onCreated(function() {
+  var instance = this;
+
+  instance.state = new ReactiveDict();
+  instance.state.setDefault({
+    theme: null
+  });
+
+  this.autorun(() => {
+    new SimpleSchema({
+      header: { type: String },
+      dataInfo: { type: String },
+      icon: { type: Icon },
+      theme: { type: String, optional: true }
+    }).validate(Template.currentData());
+
+    let theme = Template.currentData().theme;
+    theme = R.isNil(theme) ? 'light' : theme; 
+    instance.state.set('theme', theme);
+  });
+});  
+
+/*
+Template.DataCubic.rendered = function() {
+};  
+*/
+
+/*
+ * Events
+ */
+
+Template.DataCubic.events({
+});
+   
+/*  
+ * Helpers
+ */
+
+Template.DataCubic.helpers({    
+  getTheme: function () {
+    let instance = Template.instance();
+    return instance.state.get('theme');
+  }
+});
+
+
diff --git a/ui/imports/ui/components/data-cubic/data-cubic.styl b/ui/imports/ui/components/data-cubic/data-cubic.styl
new file mode 100644
index 0000000..4bdb9b3
--- /dev/null
+++ b/ui/imports/ui/components/data-cubic/data-cubic.styl
@@ -0,0 +1,27 @@
+.os-data-cubic
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+
+  .sm-container 
+    display: flex;
+    flex-flow: row nowrap;
+
+    .sm-icon-part
+      flex: 1
+
+    .sm-info-part
+      flex: 2    
+
+      display: flex;
+      flex-flow: column nowrap
+      
+      .sm-data-info
+        font-size: 12px;
+
+.os-data-cubic.cl-theme-dark
+  background-color: dk-gray1
+
+.os-data-cubic.cl-theme-light
+  color: spark-blue 
+  background-color: #fff