Merge "init commit onap ui"2.0.0-ONAPbeijing2.0.0-ONAP

1 files changed, 146 insertions, 0 deletions

diff --git a/stories/ng2-component-lab/accordion.component.exp.ts b/stories/ng2-component-lab/accordion.component.exp.ts
new file mode 100644
index 0000000..480a011
--- /dev/null
+++ b/stories/ng2-component-lab/accordion.component.exp.ts
@@ -0,0 +1,146 @@
+import { experimentOn } from '@islavi/ng2-component-lab';
+import {Placement} from "../../src/angular/common/enums";
+
+
+/**************************************************
+ * Adding custom styles for example
+ *************************************************/
+const style = document.createElement('style');
+style.innerHTML = `
+.sdc-accordion-custom-class .sdc-accordion-header,
+.sdc-accordion-custom-class .sdc-accordion-body.open {
+    padding: 10px;
+    border-radius: 3px;
+}
+.sdc-accordion-custom-class .sdc-accordion-header {
+    background-color: #d2d2d2;
+}
+.sdc-accordion-custom-class .sdc-accordion-body.open {
+    border: 1px solid #d2d2d2;
+    margin-top: 1px;
+ }
+`;
+const head = document.getElementsByTagName('head');
+head[0].appendChild(style);
+
+export default experimentOn('Accordion').group('Accordion',
+    [
+        {
+            id: 'simpleAccodion',
+            title: 'Simple accordion',
+            description: 'Example of accordion with default left arrow',
+            showSource: true,
+            template: `
+            <sdc-accordion title="Accordion header">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. 
+                    Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. 
+                    Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. 
+                    Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. 
+                    Nam orci diam, mattis eget leo vel, tincidunt interdum dui. 
+                    Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
+                </p>
+            </sdc-accordion>
+        `
+        },
+        {
+            id: 'accordionRightArrow',
+            title: 'Accordion with right arrow',
+            description: 'Example of accordion with right arrow',
+            showSource: true,
+            context: {
+                arrowDirection: Placement.right,
+            },
+            template: `
+
+
+
+        <sdc-accordion 
+        title="Accordion header" 
+        [arrow-direction]="arrowDirection">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. 
+                Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. 
+                Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. 
+                Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. 
+                Nam orci diam, mattis eget leo vel, tincidunt interdum dui. 
+                Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
+            </p>
+        </sdc-accordion>
+        `
+        },
+        {
+            id: 'accordionRightArrowStyle',
+            title: 'Accordion with right arrow and custom style',
+            description: 'Example of accordion with right arrow and custom style',
+            showSource: true,
+            context: {
+                arrowDirection: Placement.right,
+            },
+            template: `
+        <sdc-accordion 
+        title="Accordion header" 
+        css-class="sdc-accordion-custom-class"
+        [arrow-direction]="arrowDirection">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. 
+                Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. 
+                Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. 
+                Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. 
+                Nam orci diam, mattis eget leo vel, tincidunt interdum dui. 
+                Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
+            </p>
+        </sdc-accordion>
+        `
+        }
+        ,
+        {
+            id: 'accordionLeftArrowStyle',
+            title: 'Accordion with left arrow and custom style',
+            description: 'Example of accordion with left arrow and custom style',
+            showSource: true,
+            context: {
+                arrowDirection: Placement.left,
+            },
+            template: `
+        <sdc-accordion 
+        title="Accordion header" 
+        css-class="sdc-accordion-custom-class"
+        [arrow-direction]="arrowDirection">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. 
+                Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. 
+                Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. 
+                Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. 
+                Nam orci diam, mattis eget leo vel, tincidunt interdum dui. 
+                Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
+            </p>
+        </sdc-accordion>
+        `
+        },
+        {
+            id: 'accordionLeftArrowStyleOpen',
+            title: 'Open accordion with left arrow and custom style',
+            description: 'Example of open accordion with left arrow and custom style',
+            showSource: true,
+            context: {
+                arrowDirection: Placement.left,
+            },
+            template: `
+        <sdc-accordion 
+        title="Accordion header" 
+        css-class="sdc-accordion-custom-class"
+        [open]="true"
+        [arrow-direction]="arrowDirection">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat dictum porttitor. 
+                Nam facilisis, dui nec maximus facilisis, nisl eros mattis arcu, nec pharetra nisl nisi vitae metus. 
+                Vestibulum urna nunc, fringilla nec imperdiet a, varius hendrerit neque. Aliquam pulvinar turpis enim, ac hendrerit dui blandit eu. 
+                Curabitur ut mollis arcu, ac iaculis turpis. Pellentesque lobortis leo justo. Morbi commodo cursus dignissim. 
+                Nam orci diam, mattis eget leo vel, tincidunt interdum dui. 
+                Donec dapibus mauris non sapien ornare, non pharetra mi commodo.
+            </p>
+        </sdc-accordion>
+        `
+        }
+    ]);