diff options
Diffstat (limited to 'stories/ng2-component-lab/accordion.component.exp.ts')
-rw-r--r-- | stories/ng2-component-lab/accordion.component.exp.ts | 146 |
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> - ` - } - ]); |