1 files changed, 154 insertions, 0 deletions
diff --git a/stories/angular/accordion.stories.ts b/stories/angular/accordion.stories.ts
new file mode 100644
index 0000000..20209eb
--- /dev/null
+++ b/stories/angular/accordion.stories.ts
@@ -0,0 +1,154 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { AccordionComponent } from '../../src/angular/components';
+import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module';
+
+const positions = ['right', 'left'];
+
+storiesOf('Accordion', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [AccordionComponent],
+      imports: [
+        SvgIconModule
+      ]
+    })
+  )
+  .add('Simple accordion', () => {
+      const _title = text('title', 'Accordion header');
+
+      return {
+        props: {
+          _title
+        },
+        template: `
+        <sdc-accordion [title]="_title">
+          <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>
+        `
+      }})
+
+  .add('Accordion arrow position', () => {
+    const _title = text('title', 'Accordion header');
+    const _arrow_direction = select('arrow-direction', positions, 'left', '');
+
+    return {
+      props: {
+        _title, _arrow_direction
+      },
+      template: `
+      <sdc-accordion 
+        [title]="_title"
+        [arrow-direction]="_arrow_direction"
+        >
+        <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>
+      `
+    }})
+
+  .add('Accordion custom class', () => {
+      const _title = text('title', 'Accordion header');
+      const _arrow_direction = select('arrow-direction', positions, 'left', '');
+      const _css_class = text('css_class', 'sdc-accordion-custom-class');
+  
+      return {
+        props: {
+          _title, _arrow_direction, _css_class
+        },
+        template: `
+        <sdc-accordion 
+          [title]="_title"
+          [arrow-direction]="_arrow_direction"
+          [css-class]="_css_class"
+          >
+          <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>
+        `
+      }})
+
+    .add('Accordion open', () => {
+        const _title = text('title', 'Accordion header');
+        const _arrow_direction = select('arrow-direction', positions, 'left', '');
+        const _css_class = text('css_class', 'custom-class');
+        const _open = boolean('open', true, '');
+
+        return {
+          props: {
+            _title, _arrow_direction, _css_class, _open
+          },
+          template: `
+          <sdc-accordion 
+            [title]="_title"
+            [arrow-direction]="_arrow_direction"
+            [css-class]="_css_class"
+            [open]="_open"
+            >
+            <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>
+          `
+        }})
+        
+  .add('Accordion full', () => {
+      const _title = text('title', 'Accordion header');
+      const _arrow_direction = select('arrow-direction', positions, 'left', '');
+      const _css_class = text('css_class', 'custom-class');
+      const _open = boolean('open', true, '');
+      const _accordionChanged = text('(accordionChanged)', 'Accoridon changed event (see in action tab), ');
+
+      return {
+        props: {
+          accordionChanged: action('Accordion changed event '),
+          _title, _arrow_direction, _css_class, _open
+        },
+        template: `
+        <sdc-accordion 
+          [title]="_title"
+          [arrow-direction]="_arrow_direction"
+          [css-class]="_css_class"
+          [open]="_open"
+          (accordionChanged)="accordionChanged($event)"
+          >
+          <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>
+        `
+      }});