From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 stories/ng2-component-lab/tiles.component.exp.ts | 194 +++++++++++++++++++++++
 1 file changed, 194 insertions(+)
 create mode 100644 stories/ng2-component-lab/tiles.component.exp.ts

(limited to 'stories/ng2-component-lab/tiles.component.exp.ts')

diff --git a/stories/ng2-component-lab/tiles.component.exp.ts b/stories/ng2-component-lab/tiles.component.exp.ts
new file mode 100644
index 0000000..572b6ca
--- /dev/null
+++ b/stories/ng2-component-lab/tiles.component.exp.ts
@@ -0,0 +1,194 @@
+import { experimentOn } from '@islavi/ng2-component-lab';
+
+const alert1  = window.alert;
+const console1  = console.log;
+
+export default experimentOn('Tiles')
+    .group("Tiles",[
+      {
+        id: 'tileSampleBlue',
+        showSource: true,
+        context: {
+            alert: alert1,
+            console: console1
+        },
+        title: 'Tile sample blue',
+        description: 'Tile sample blue',
+        template: `
+            <sdc-tile>
+                <sdc-tile-header>
+                    <div class="blue">P</div>
+                </sdc-tile-header>
+                <sdc-tile-content>
+                    <div class="sdc-tile-content-icon blue">
+                        <div class="svg-icon-wrapper"  >
+                            <svg class="svg-icon __vsp" 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>
+                                        <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">
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="sdc-tile-content-info">
+                        <div class="sdc-tile-info-line title">Router</div>
+                        <div class="sdc-tile-info-line subtitle">test</div>
+                    </div>
+                </sdc-tile-content>
+                <sdc-tile-footer>
+                    <span class="sdc-tile-footer-cell">Footer</span>
+                </sdc-tile-footer>
+            </sdc-tile>
+            `
+    },
+    {
+        id: 'tileSamplePurple',
+        title: 'Tile sample purple',
+        description: 'Tile sample purple',
+        showSource: true,
+        template: `
+            <sdc-tile>
+                <sdc-tile-header>
+                    <div class="purple">P</div>
+                </sdc-tile-header>
+                <sdc-tile-content>
+                    <div class="sdc-tile-content-icon purple">
+                        <div class="svg-icon-wrapper"  >
+                            <svg class="svg-icon __vsp" 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>
+                                        <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">
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="sdc-tile-content-info">
+                        <span class="sdc-tile-info-line title">Router</span>
+                        <div class="sdc-tile-info-line subtitle">test</div>
+                    </div>
+                </sdc-tile-content>
+                <sdc-tile-footer>
+                    <span class="sdc-tile-footer-cell"> Footer </span>
+                </sdc-tile-footer>
+            </sdc-tile>
+        `
+    },
+    {
+        id: 'tileSampleWithoutFooter',
+        title: 'Tile sample without footer',
+        description: 'Tile sample without footer',
+        showSource: true,
+        template: `
+            <sdc-tile>
+                <sdc-tile-header>
+                    <div class="purple">P</div>
+                </sdc-tile-header>
+                <sdc-tile-content>
+                    <div class="sdc-tile-content-icon purple">
+                        <div class="svg-icon-wrapper"  >
+                            <svg class="svg-icon __vsp" 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>
+                                        <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">
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="sdc-tile-content-info">
+                        <span class="sdc-tile-info-line title">Router</span>
+                        <div class="sdc-tile-info-line subtitle">test</div>
+                    </div>
+                </sdc-tile-content>
+            </sdc-tile>
+        `
+    },
+    {
+        id: 'tileSampleWithoutHeader',
+        title: 'Tile sample without header',
+        description: 'Tile sample without header',
+        showSource: true,
+        template: `
+            <sdc-tile>
+                <sdc-tile-content>
+                    <div class="sdc-tile-content-icon purple">
+                        <div class="svg-icon-wrapper"  >
+                            <svg class="svg-icon __vsp" 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>
+                                        <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">
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="sdc-tile-content-info">
+                        <span class="sdc-tile-info-line title">Router</span>
+                        <div class="sdc-tile-info-line subtitle">test</div>
+                    </div>
+                </sdc-tile-content>
+                <sdc-tile-footer>
+                    <span class="sdc-tile-footer-cell"> Footer </span>
+                </sdc-tile-footer>
+            </sdc-tile>
+        `
+    },
+    {
+        id: 'tileJustWithInfo',
+        title: 'Tile just with info',
+        description: 'Tile just with info',
+        showSource: true,
+        template: `
+            <sdc-tile>
+                <sdc-tile-content>
+                    <div class="sdc-tile-content-icon purple">
+                        <div class="svg-icon-wrapper"  >
+                            <svg class="svg-icon __vsp" 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>
+                                        <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">
+                                        </path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="sdc-tile-content-info">
+                        <span class="sdc-tile-info-line title">Router</span>
+                        <div class="sdc-tile-info-line subtitle">test</div>
+                    </div>
+                </sdc-tile-content>
+            </sdc-tile>`
+    }
+    ]);
-- 
cgit 1.2.3-korg