aboutsummaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/tiles.component.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/tiles.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/tiles.component.exp.ts194
1 files changed, 194 insertions, 0 deletions
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>`
+ }
+ ]);