aboutsummaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/accordion.component.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/accordion.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/accordion.component.exp.ts146
1 files changed, 0 insertions, 146 deletions
diff --git a/stories/ng2-component-lab/accordion.component.exp.ts b/stories/ng2-component-lab/accordion.component.exp.ts
deleted file mode 100644
index 480a011..0000000
--- a/stories/ng2-component-lab/accordion.component.exp.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-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>
- `
- }
- ]);