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

4 files changed, 252 insertions, 0 deletions

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>