Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP

19 files changed, 731 insertions, 0 deletions

diff --git a/demo/.gitignore b/demo/.gitignore
new file mode 100644
index 0000000..7788a08
--- /dev/null
+++ b/demo/.gitignore
@@ -0,0 +1,7 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+/dist
+/tmp
+/node_modules
+npm-debug.log*
+Thumbs.db
diff --git a/demo/README.md b/demo/README.md
new file mode 100644
index 0000000..6a478d8
--- /dev/null
+++ b/demo/README.md
@@ -0,0 +1,35 @@
+# Local DEMO
+
+### How to compile
+Go to <b>root</b> folder (sdc-ui) and run: `npm run build`
+This will compile all scss files and will copy generated style.css and assets folder to gen folder inside demo project. 
+
+### How to run
+Go to <b>demo</b> and run: `npm start`
+This will open the default browser at port 2900.
+
+### How to build component HTML for DEMO
+<ul>
+    <li>Create new HTML file for the component and put it in components folder</li>
+    <li>In the top of the HTML add <div class='component'>Name of component</div></li>
+    <li>Inside the HTML for each type of component add header <h3>sub component name</h3></li>
+    <li>
+        In order to show the HTML of the component to the user, add <b>data-code</b> attribute to the outerHTML of the component.
+        This component outerHTML will be copied and will be shown highlighted below the component.
+        <br>You can also use <b>data-code-ref</b> and <b>data-code-id</b> where data-code-ref is a reference to the 
+        component data-code-id, the data-code-ref will be replaced by highlighted outerHTML of the component.
+    </li> 
+</ul>
+For more info see example in <a href='components/tiles'>tiles.html</a> file
+
+### How add the new component to router for DEMO
+In index.html file (under id main-navigation) add new <li> with id equal to HTML file you created above
+<br><u>Example:</u>
+<div id='main-navigation'>
+    <div class='title'>Components</div>    
+    <ul>
+        <li id='colors'>Colors</li>
+        <li id='button'>Buttons</li>
+        <li id='tiles'>Tiles</li>
+    </ul>
+</div>
diff --git a/demo/assests/README.md b/demo/assests/README.md
new file mode 100644
index 0000000..5f2681b
--- /dev/null
+++ b/demo/assests/README.md
@@ -0,0 +1,9 @@
+
+# Folder Structure
+
+### icons
+Contains `svg` icons **ONLY**
+
+
+### images
+Contains large images (if any...)
diff --git a/demo/assests/icons/empty.txt b/demo/assests/icons/empty.txt
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/demo/assests/icons/empty.txt
diff --git a/demo/assests/icons/locked.svg b/demo/assests/icons/locked.svg
new file mode 100644
index 0000000..9785f8d
--- /dev/null
+++ b/demo/assests/icons/locked.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15" id="locked_icon">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #959595;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="Shape_77_copy_10" data-name="Shape 77 copy 10" class="cls-1" d="M445,359a16.71,16.71,0,0,0-2.1-.009c-1.945.045-3.195,0.049-3.9,0.009v-5a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v5c0.474,0.063.343-.073,1,0,0.266,0.029,0,.279,0,0v-5a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,7.338,0,5h0a1.891,1.891,0,0,0-2,1.689v3.461A1.823,1.823,0,0,0,437.775,366h7.448A1.823,1.823,0,0,0,447,364.15v-3.461A2.018,2.018,0,0,0,445,359Z" transform="translate(-436 -351)"/>
+</svg>
diff --git a/demo/assests/icons/plus.svg b/demo/assests/icons/plus.svg
new file mode 100644
index 0000000..36f3486
--- /dev/null
+++ b/demo/assests/icons/plus.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="plus_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 19 19" style="enable-background:new 0 0 19 19;" xml:space="preserve">
+<g>
+	<rect y="8" width="19" height="3"/>
+	<path id="Rectangle_2139_copy" d="M8,19V0h3v19H8z"/>
+</g>
+</svg>
diff --git a/demo/assests/icons/unlocked.svg b/demo/assests/icons/unlocked.svg
new file mode 100644
index 0000000..6d94a94
--- /dev/null
+++ b/demo/assests/icons/unlocked.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" viewBox="0 0 11 18" id="unlocked_icon">
+  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #959595;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="Shape_77_copy_16" data-name="Shape 77 copy 16" class="cls-1" d="M663,358a16.723,16.723,0,0,0-2.1-.009c-1.944.045-3.194,0.049-3.9,0.009v-7a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v2c0.474,0.064.343-.073,1,0,0.266,0.029,0,.279,0,0v-2a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,9.338,0,7h0a1.891,1.891,0,0,0-2,1.689v4.461a1.823,1.823,0,0,0,1.775,1.85h7.448A1.823,1.823,0,0,0,665,364.15v-4.461A2.018,2.018,0,0,0,663,358Zm1.05,6.15a0.827,0.827,0,0,1-.8.836H655.8a0.827,0.827,0,0,1-.8-0.836l0-4.15a1.164,1.164,0,0,1,.8-1.147h7.448A1.129,1.129,0,0,1,664,360Z" transform="translate(-654 -348)"/>
+</svg>
diff --git a/demo/assests/icons/vendor.svg b/demo/assests/icons/vendor.svg
new file mode 100644
index 0000000..a3b8f5f
--- /dev/null
+++ b/demo/assests/icons/vendor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 47"  id="vendor_icon"><title>vendor</title><g id="Layer_2" data-name="Layer 2"><g id="vlm_icon" data-name="vlm icon"><path d="M49,7,38.5,7V5.92A5.92,5.92,0,0,0,32.58,0H20.42A5.92,5.92,0,0,0,14.5,5.92V7.15L4,7.2a3.8,3.8,0,0,0-4,3.5V43.5C0,45.4,2,47,4.2,47L49,46.8a3.8,3.8,0,0,0,4-3.5V10.5A3.8,3.8,0,0,0,49,7ZM16.5,5.92A3.92,3.92,0,0,1,20.42,2H32.58A3.92,3.92,0,0,1,36.5,5.92V7.06l-20,.09ZM2,10.8A1.9,1.9,0,0,1,4,9l45-.2a1.9,1.9,0,0,1,2,1.8v8.87L32.94,24.18a6.49,6.49,0,0,0-12.89,0L2,19.51V10.8ZM31,25a4.5,4.5,0,1,1-4.5-4.5A4.5,4.5,0,0,1,31,25ZM49,45,4,45.2A1.9,1.9,0,0,1,2,43.4V21.57l18.13,4.73a6.5,6.5,0,0,0,12.74,0L51,21.53V43.21A1.9,1.9,0,0,1,49,45Z"/></g></g></svg>
diff --git a/demo/assests/icons/vlm.svg b/demo/assests/icons/vlm.svg
new file mode 100644
index 0000000..79b4625
--- /dev/null
+++ b/demo/assests/icons/vlm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 53"><title>vlm_new_icon</title><g id="Layer_2" data-name="Layer 2"><g id="vlm_icon" data-name="vlm icon"><path d="M41,2a2,2,0,0,1,2,2l.19,45a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2L1.81,4a2,2,0,0,1,2-2H41m-.15-2H4A4.2,4.2,0,0,0,0,4.24L.19,49a4,4,0,0,0,4,4H41a4,4,0,0,0,4-4L44.81,4a4,4,0,0,0-4-4Z"/><rect x="14" y="11" width="17" height="2"/><rect x="14" y="18" width="10" height="2"/><polygon points="20.56 38.85 13.87 33.14 15.16 31.62 20.39 36.08 29.08 26.63 30.55 27.98 20.56 38.85"/></g></g></svg>
\ No newline at end of file
diff --git a/demo/assests/icons/vsp.svg b/demo/assests/icons/vsp.svg
new file mode 100644
index 0000000..344755c
--- /dev/null
+++ b/demo/assests/icons/vsp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.5 40" id="vsp_icon"><title>vsp_new_icon</title><g id="Layer_2" data-name="Layer 2"><g id="vlm_icon" data-name="vlm icon"><path d="M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z"/><path d="M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z"/></g></g></svg>
diff --git a/demo/assests/images/empty.txt b/demo/assests/images/empty.txt
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/demo/assests/images/empty.txt
diff --git a/demo/components/button.html b/demo/components/button.html
new file mode 100644
index 0000000..5a68bb5
--- /dev/null
+++ b/demo/components/button.html
@@ -0,0 +1,15 @@
+<div class='component'>Button</div>
+
+<ul class='buttons-showcase'>
+    <li>
+        <button class='sdc-button' data-code>Simple Default Button</button>
+    </li>
+
+    <li>
+        <button class='sdc-button purple' data-code>Simple Button - Purple</button>
+    </li>
+    
+    <li>
+        <button class='sdc-button blue' data-code>Simple Button - Blue</button>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/demo/components/colors.html b/demo/components/colors.html
new file mode 100644
index 0000000..a9bb9f9
--- /dev/null
+++ b/demo/components/colors.html
@@ -0,0 +1,26 @@
+<div class='component'>Colors</div>
+<P>
+    List of supported colors. All colors are background colors.
+</P>
+<ul class='sdc-colors-showcase'>
+    <li class='sdc-bc-blue'>sdc-bc-blue</li>
+    <li class='sdc-bc-dark-blue'>sdc-bc-dark-blue</li>
+    <li class='sdc-bc-light-blue'>sdc-bc-light-blue</li>
+    <li class='sdc-bc-green'>sdc-bc-green</li>
+    <li class='sdc-bc-dark-green'>sdc-bc-dark-green</li>
+    <li class='sdc-bc-light-green'>sdc-bc-light-green</li>
+    <li class='sdc-bc-orange'>sdc-bc-orange</li>
+    <li class='sdc-bc-yellow'>sdc-bc-yellow</li>
+    <li class='sdc-bc-dark-purple'>sdc-bc-dark-purple</li>
+    <li class='sdc-bc-purple'>sdc-bc-purple</li>
+    <li class='sdc-bc-light-purple'>sdc-bc-light-purple</li>
+    <li class='sdc-bc-black'>sdc-bc-black</li>
+    <li class='sdc-bc-dark-gray'>sdc-bc-dark-gray</li>
+    <li class='sdc-bc-gray'>sdc-bc-gray</li>
+    <li class='sdc-bc-light-gray'>sdc-bc-light-gray</li>
+    <li class='sdc-bc-white'>sdc-bc-white</li>
+</ul>
+<p>Example of usage:</p>
+<code>
+    &lt;div class='sdc-bc-blue'&gt;sdc-bc-blue&lt;/div&gt;   
+</code>
\ No newline at end of file
diff --git a/demo/components/tiles-generic.html b/demo/components/tiles-generic.html
new file mode 100644
index 0000000..3d03909
--- /dev/null
+++ b/demo/components/tiles-generic.html
@@ -0,0 +1,106 @@
+<div class='component'>Tiles Generic</div>
+<p>
+    Tile do not have size, you can define the size in the wrapping container, or adding them 
+    to css in your project.
+    <br><b>Note:</b> specific tiles like sdc-tile-catalog has specifc width & height.
+    <br>Tiles content has overflow auto, so if the content overflow a scroll will appear.   
+</p>
+
+<h3>Basic tile</h3>
+<p>Tile without width or height</p>
+<div class="sdc-tile" data-code>
+    <div class='sdc-tile-content'>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat, lorem at vulputate sollicitudin, neque magna hendrerit diam, nec sagittis eros libero ut dolor. Donec tincidunt, elit nec vestibulum tristique, nulla tellus aliquam eros, at rutrum massa purus quis ipsum. In aliquet non augue quis condimentum. Praesent efficitur tellus quis mauris auctor, vel semper erat vulputate. Mauris rhoncus nunc et ante dapibus, id luctus urna sodales. Proin eu augue efficitur ligula tincidunt placerat. Suspendisse potenti.
+    </div>
+</div>
+
+<h3>Tile with header & footer</h3>
+<p>
+    <b>Note:</b> The background-color is just for showing header, content & footer sections.
+    This is done using inline styles which should not be included in the final component.
+    <br>The content will resize automaticly his height.
+</p>
+<div class="sdc-tile" data-code>
+    <div class="sdc-tile-header" style="background-color: #EEEEEE;">top</div>
+    <div class='sdc-tile-content' style="background-color: #CCCCCC;">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat, lorem at vulputate sollicitudin, neque magna hendrerit diam, nec sagittis eros libero ut dolor. Donec tincidunt, elit nec vestibulum tristique, nulla tellus aliquam eros, at rutrum massa purus quis ipsum. In aliquet non augue quis condimentum. Praesent efficitur tellus quis mauris auctor, vel semper erat vulputate. Mauris rhoncus nunc et ante dapibus, id luctus urna sodales. Proin eu augue efficitur ligula tincidunt placerat. Suspendisse potenti.
+    </div>
+    <div class='sdc-tile-footer' style="background-color: #EEEEEE;">footer</div>
+</div>
+
+<h3>Catalog tile (VSP)</h3>
+<p>
+    Specific tile of SDC.
+    <br><b>Note:</b> The differences betweeb the tiles is the color (diffrent class) and the icons.
+    The div with class='sdc-tile-content-info-vendor-name' is not needed in the second tile.
+</p>
+
+<div class='sdc-tile-showcase-tiles'>
+
+    <div class="sdc-tile-catalog sdc-tile-fix-width" data-code-id='catalog-sample'>
+        <div class="sdc-tile-header">
+            <div class='sdc-tile-header-type blue'>
+                vsp
+            </div>
+        </div>
+        <div class='sdc-tile-content'>
+            <div class='sdc-tile-content-icon'>
+                <svg class="svg-icon blue">
+                    <use href="./gen/assets/icons/vsp.svg#vsp_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/vsp.svg#vsp_icon"></use>
+                </svg>
+            </div>
+            <div class='sdc-tile-content-info'>
+                <div class="sdc-tile-content-info-vendor-name">vlm</div>
+                <div class="sdc-tile-content-info-item-name">lilach vsp</div>
+                <div class="sdc-tile-content-info-version-info">
+                    <div class="sdc-tile-content-info-version-info-text" data-test-id="sdc-catalog-item-version">V 0.1</div>
+                </div>
+            </div>
+        </div>
+        <div class='sdc-tile-footer'>
+            <div class='sdc-tile-footer-text'>
+                Footer text
+            </div>
+            <div class='sdc-tile-footer-icon'>
+                <svg class="svg-icon unlocked black">
+                    <use href="./gen/assets/icons/unlocked.svg#unlocked_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/unlocked.svg#unlocked_icon"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+
+    <div class="sdc-tile-catalog sdc-tile-fix-width sdc-code">
+        <div class="sdc-tile-header">
+            <div class='sdc-tile-header-type purple'>
+                vlm
+            </div>
+        </div>
+        <div class='sdc-tile-content'>
+            <div class='sdc-tile-content-icon'>
+                <svg class="svg-icon purple">
+                    <use href="./gen/assets/icons/vsp.svg#vsp_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/vsp.svg#vsp_icon"></use>
+                </svg>
+            </div>
+            <div class='sdc-tile-content-info'>
+                <div class="sdc-tile-content-info-item-name">vlm</div>
+                <div class="sdc-tile-content-info-version-info">
+                    <div class="sdc-tile-content-info-version-info-text" data-test-id="sdc-catalog-item-version">V 0.1</div>
+                </div>
+            </div>
+        </div>
+        <div class='sdc-tile-footer'>
+            <div class='sdc-tile-footer-text'>
+                Footer text
+            </div>
+            <div class='sdc-tile-footer-icon'>
+                <svg class="svg-icon unlocked black">
+                    <use href="./gen/assets/icons/locked.svg#locked_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/locked.svg#locked_icon"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<div data-code-ref='catalog-sample'></div>
+
diff --git a/demo/components/tiles.html b/demo/components/tiles.html
new file mode 100644
index 0000000..3519817
--- /dev/null
+++ b/demo/components/tiles.html
@@ -0,0 +1,105 @@
+<div class='component'>Tiles</div>
+
+<h3>VSP Tile</h3>
+<p>
+	Example
+</p>
+<div class="catalog-tile tile software-product-type sdc-code" data-test-id="software-product-type">
+    <div class="catalog-tile-top item-details">
+        <div class="catalog-tile-type software-product-type">VSP</div>
+        <div class="catalog-tile-icon software-product-type">
+            <div class="icon">
+                <div class="svg-icon-wrapper   bottom">
+                    <svg class="svg-icon vsp ">
+                        <use href="./gen/assets/icons/vsp.svg#vsp_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/vsp.svg#vsp_icon"></use>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="catalog-tile-entity-details">
+            <div>
+                <div class="catalog-tile-vendor-name">vlm</div>
+            </div>
+            <div>
+                <div class="catalog-tile-item-name">lilach vsp</div>
+            </div>
+            <div class="catalog-tile-version-info">
+                <div class="catalog-tile-item-version" data-test-id="catalog-item-version">V 0.1</div>
+            </div>
+        </div>
+        <div class="catalog-tile-content software-product-type">
+            <div class="catalog-tile-locking-user-name">Checked Out</div>
+            <div class="catalog-tile-check-in-status">
+                <div data-test-id="catalog-item-checked-out" class="svg-icon-wrapper   bottom">
+                    <svg class="svg-icon unlocked ">
+                        <use href="./gen/assets/icons/unlocked.svg#unlocked_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/unlocked.svg#unlocked_icon"></use>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<h3>VLM Tile</h3>
+<div class="catalog-tile tile license-model-type sdc-code" data-test-id="license-model-type">
+    <div class="catalog-tile-top item-details">
+        <div class="catalog-tile-type license-model-type">VLM</div>
+        <div class="catalog-tile-icon license-model-type">
+            <div class="icon">
+                <div class="svg-icon-wrapper   bottom">
+                    <svg class="svg-icon vlm ">
+                        <use href="./gen/assets/icons/vlm.svg#vlm_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/vlm.svg#vlm_icon"></use>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="catalog-tile-entity-details">
+            <div>
+                <div class="catalog-tile-vendor-name"></div>
+            </div>
+            <div>
+                <div class="catalog-tile-item-name">vlm</div>
+            </div>
+             <div class="catalog-tile-version-info">
+                <div class="catalog-tile-item-version" data-test-id="catalog-item-version">V 0.2</div>
+             </div>
+        </div>
+        <div class="catalog-tile-content license-model-type">
+            <div class="catalog-tile-locking-user-name">Checked In</div>
+            <div class="catalog-tile-check-in-status">
+                <div data-test-id="catalog-item-checked-in" class="svg-icon-wrapper   bottom">
+                    <svg class="svg-icon locked ">
+                        <use href="./gen/assets/icons/locked.svg#locked_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/locked.svg#locked_icon"></use>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<h3>Vendor Tile</h3>
+<div class="catalog-tile tile vendor-type sdc-code" data-test-id="vendor-type">
+    <div class="catalog-tile-top">
+        <div class="catalog-tile-icon vendor-type">
+            <div class="icon">
+                <div class="svg-icon-wrapper   bottom">
+                    <svg class="svg-icon vendor ">
+                        <use href="./gen/assets/icons/vendor.svg#vendor_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/vendor.svg#vendor_icon"></use>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div class="catalog-tile-item-name">vlm</div>
+        <div class="catalog-tile-vsp-count clickable" data-test-id="catalog-vsp-count">1 VSPs</div>
+        <div class="catalog-tile-content" data-test-id="catalog-create-new-vsp-from-vendor">
+            <div class="create-new-vsp-button">
+                <div class="svg-icon-wrapper   bottom">
+                    <svg class="svg-icon plus ">
+                        <use href="./gen/assets/icons/plus.svg#plus_icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./assets/icons/plus.svg#plus_icon"></use>
+                    </svg>
+                </div>
+                &nbsp;&nbsp;&nbsp;Create new VSP
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/demo/index.css b/demo/index.css
new file mode 100644
index 0000000..ef71773
--- /dev/null
+++ b/demo/index.css
@@ -0,0 +1,178 @@
+/* GENERAL */
+body {
+    margin: 0;
+    color: #333333;
+    /*font-family: 'Open Sans Condensed';*/
+    font-family: 'Overlock';
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+}
+
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.3em; }
+h3 { font-size: 1.2em; }
+h1, h2, h3 { margin: 2em 0 0.5em 0; color: #009fdb; }
+p { margin: 6px 0; }
+
+/* LAYOUT */
+header {
+    order: 1;
+    width: 100%;
+    background-color: #ffffff;
+}
+
+footer {
+    order: 4;
+    width: 100%;
+}
+
+#main-navigation {
+    order: 2;
+    width: 100%;
+}
+
+#main-content {
+    order: 3;
+    width: 100%;
+}
+
+/* HEADER */
+header {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
+    height: 50px;
+    line-height: 50px;
+    z-index: 9;
+    display: flex;
+    flex-direction: row;
+    padding: 0 1vw;
+}
+
+header .logo {
+    font-size: 22px;
+    font-weight: 700;
+}
+
+header .title {
+    font-size: 20px;
+    margin-left: 2vw;
+}
+
+/* FOOTER */
+footer {
+    height: 50px;
+    line-height: 50px;
+    z-index: 6;
+    display: flex;
+    flex-direction: row;
+    padding: 0 1vw;
+    border-top: solid 1px #dddddd;
+}
+
+/* MAIN NAVIGATION */
+#main-navigation {
+    align-content: stretch;
+    z-index: 8;
+    box-shadow: 2px 0 0 0 rgba(68,68,68,0.2);
+}
+
+#main-navigation .title {
+    font-size: 20px;
+    font-weight: 700;
+    background-color: #ffffff;
+    color: #009fdb;
+    border-bottom: 1px solid #d2d2d2;
+    height: 30px;
+    line-height: 30px;
+    padding: 0.3em;
+}
+
+#main-navigation ul {
+    padding: 0;
+}
+
+#main-navigation ul li {
+    background-color: #f8f8f8;
+    border-bottom: 1px solid #d2d2d2;
+    height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+    padding: 0.3em;
+}
+
+#main-navigation ul li.selected {
+    background-color: #009fdb;
+    color: #ffffff;
+}
+
+/* MAIN CONTENT */
+#main-content {
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
+    box-sizing: border-box;         /* Opera/IE 8+ */
+    align-content: stretch;
+    padding: 2vh 2vw;
+    z-index: 7;
+}
+
+/* RESPONSIVE */
+@media screen and (min-width: 800px) {
+    #main-navigation { width: 20%; }
+    #main-content { width: 80%; }
+}
+
+/* OTHERS */
+.component {
+    background-color: #009fdb;
+    color: #ffffff;
+    font-size: 20px;
+    padding: 0.5em 1em;
+    margin: 0 0 0.5em 0;
+}
+
+pre {
+    padding: 1em;
+    display: block;
+    margin: 1em 0;
+    font-family: 'PT Sans Narrow';
+    font-size: 1em;
+}
+
+/* SPECIFIC COMPONENT - TILE */
+.sdc-tile-showcase-tiles {
+    display: flex;
+    flex-direction: row;
+}
+.sdc-tile-showcase-tiles > div.sdc-tile-catalog {
+    margin: 0 5px 5px 5px;
+}
+.sdc-tile-showcase-tiles > div.sdc-tile-catalog:first-child { margin-left: 0; }
+.sdc-tile-showcase-tiles > div.sdc-tile-catalog:last-child { margin-right: 0; }
+
+/* SPECIFIC COMPONENT - COLORS */
+.sdc-colors-showcase li {
+    padding: 1vw;
+    margin: 1vw;
+}
+
+/* SPECIFIC COMPONENTS - BUTTONS */
+.buttons-showcase li {
+    display: flex;
+    flex-direction: column;
+    margin-top: 2vh;
+}
+.buttons-showcase li pre {
+    flex-grow: 1;
+    margin: 1vw 0 0.5vw 0;
+}
+
+@media screen and (min-width: 600px) {
+    .buttons-showcase li {
+        margin-top: 0;
+        flex-direction: row;
+    }
+    .buttons-showcase li pre {
+        margin: 0.5vw 0 0.5vw 2vw;
+    }
+}
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..f3b4cb4
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset=UTF-8>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Componentes generates styles -->
+    <link rel="stylesheet" type="text/css" href="gen/css/style.css">
+	
+	<!-- Html story board styles -->
+    <link rel="stylesheet" type="text/css" href="index.css">
+	
+	<!-- Html story borad fonts -->
+    <!--<link href='//fonts.googleapis.com/css?family=Open Sans Condensed:300' rel='stylesheet'>-->
+    <link href='//fonts.googleapis.com/css?family=Overlock:400' rel='stylesheet'>
+    <link href='//fonts.googleapis.com/css?family=PT Sans Narrow:400' rel='stylesheet'>
+    
+	<!-- Html story borad external libs -->
+	<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css" rel="stylesheet">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+    
+	<!-- Html story borad javascript -->
+	<script src="index.js"></script>
+    
+    <title>SDC-UI Show case</title>
+  </head>
+  <body>
+
+    <header>
+        <div class='logo'>SDC-UI</div>
+        <div class='title'>Show case</div>
+    </header>
+
+    <div id='main-navigation'>
+        <div class='title'>Components</div>    
+        <ul>
+            <li id='colors'>Colors</li>
+            <li id='button'>Buttons</li>
+            <li id='tiles'>Tiles</li>
+            <li id='tiles-generic'>Tiles Generic</li>
+        </ul>
+    </div>
+
+    <div id='main-content'></div>
+
+    <footer>
+        Copywrite 2017. All rights reserved.
+    </footer>    
+
+  </body>
+
+</html>
diff --git a/demo/index.js b/demo/index.js
new file mode 100644
index 0000000..1c9a4bb
--- /dev/null
+++ b/demo/index.js
@@ -0,0 +1,84 @@
+$( document ).ready(function() {
+    
+    initNavigation();
+    registerEvents();
+    doAfterComponentHtmlLoaded();
+
+});
+
+var initNavigation = function() {
+
+    // Set default page
+    var page = window.location.hash;
+    if (page === '') {
+        page = "button";
+        window.location.hash = page;
+    }
+
+    // Remove # at the begining
+    if (page.indexOf('#')!==-1){
+        page = page.substr(1);
+    }
+    console.log("page: " + page);
+
+    // Upload the content
+    $("#main-content").load( "./components/" + page + ".html" );
+    
+    // Set selected in navigation
+    $('#main-navigation #' + page).addClass('selected');
+
+};
+
+/**
+ * Simple router to load components HTML based on id.
+ */
+var registerEvents = function() {
+    $("#main-navigation li").click(function(e){
+        page = e.target.id;
+        $("#main-content").load( "./components/" + page + ".html", function() {
+            doAfterComponentHtmlLoaded();        
+        });
+        window.location.hash = page;
+        $('#main-navigation li').removeClass('selected');
+        $('#main-navigation #' + page).addClass('selected');
+    });
+};
+
+/**
+ * Wait for component to load before applying javascript actions on it.
+ */
+var doAfterComponentHtmlLoaded = function() {
+    window.setTimeout(function() {
+        // Build code text to show to user
+        buildCode();
+
+        // highlight the code
+        hljs.initHighlightingOnLoad();
+    },1000);
+};
+
+/**
+ * Build HTML code automaticly when attribute data-code exists
+ * For example:
+ * <button class='sdc-button' data-code>This is button</button>
+ * Will add the HTML of this (highlighted) button below the button.
+ */
+var buildCode = function() {
+    $('[data-code]').each(function(index, element){
+        var result = $(element).removeAttr('data-code')[0].outerHTML;
+        var resultEncoded = $('<div/>').text(result).html();
+        var newElement = $('<pre><code>' + resultEncoded + '</code></pre>')[0];  
+        $(element).after(newElement);
+        hljs.highlightBlock(newElement);
+    });
+	
+	$('[data-code-id]').each(function(index, element){
+        var attVlue = $(element).attr('data-code-id');
+        var codeHere = $('[data-code-ref='+attVlue+']');
+        var result = $(element).removeAttr('data-code-id')[0].outerHTML;
+        var resultEncoded = $('<div/>').text(result).html();
+        var newElement = $('<pre><code>' + resultEncoded + '</code></pre>')[0];  
+        codeHere.replaceWith(newElement);
+        hljs.highlightBlock(newElement);
+    });
+};
diff --git a/demo/package.json b/demo/package.json
new file mode 100644
index 0000000..40a7b7d
--- /dev/null
+++ b/demo/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "onap-sdc",
+  "preferGlobal": true,
+  "version": "1.0.0",
+  "author": "Onap Sdc <onap.sdc@gmail.com>",
+  "description": "Styles and UI components for ONAP SDC",
+  "license": "MIT",
+  "engines": {
+    "node": ">=0.10"
+  },
+  "scripts": {
+    "start": "watch-http-server ./ -a 127.0.0.1 -p 2900 -o"
+  },
+  "dependencies": {
+    "express": "~3.4.7",
+    "http-server": "^0.9.0"
+  },
+  "devDependencies": {
+    "node-sass": "^4.5.2",
+    "nodemon": "^1.11.0",
+    "watch-http-server": "^0.7.6"
+  }
+}