Initial commit.

Adding files needed for Linux Foundation.

Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730
Issue-ID: SDC-1608
Signed-off-by: Israel Lavi <il0695@att.com>

85 files changed, 3032 insertions, 3993 deletions

diff --git a/stories/README.md b/stories/README.md
deleted file mode 100644
index 7ed8e9d..0000000
--- a/stories/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Storybook
-
-This is the part of the repo that is responsible for defining and building the stories for storybook. Take a look at the following guides for your assistance:
-
-## Adding a new component to storybook
-See [wiki page](https://github.com/onap-sdc/sdc-ui/wiki/Adding-a-new-component-to-storybook).
-
-## Deploying storybook to a fork's github pages
-See [wiki page](https://github.com/onap-sdc/sdc-ui/wiki/Deploying-storybook-to-a-fork's-github-pages).
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>
+        `
+      }});      
diff --git a/stories/angular/autocomplete.stories.ts b/stories/angular/autocomplete.stories.ts
new file mode 100644
index 0000000..89f1c23
--- /dev/null
+++ b/stories/angular/autocomplete.stories.ts
@@ -0,0 +1,127 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { AutoCompleteComponent, AutocompletePipe } from '../../src/angular/components';
+import { FilterBarModule } from '../../src/angular/filterbar/filter-bar.module';
+import { HttpClient, HttpHandler } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+storiesOf('AutoComplete', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+          AutoCompleteComponent
+      ],
+      imports: [
+          FilterBarModule,
+          BrowserAnimationsModule
+      ],
+      providers: [
+          HttpClient, HttpHandler, AutocompletePipe
+      ]
+    })
+  )
+  .add('Simple data', () => {
+    const sampleData = ['red', 'yellow', 'orange', 'green', 'white', 'black'];
+
+    const _label = text('label', 'Simple data (Array)');
+    const _placeholder = text('placeholder', 'Simple data');
+    const _data = array('data', sampleData, ',');
+    const _event = text('(itemSelected)', 'Event thrown when item selected');
+
+      return {
+        props: {
+            itemSelected: action('Item was selected '),
+            _label, _placeholder, _data, _event
+        },
+        template: `
+        <div class='storybook-component-wrapper'>
+            <div class='storybook-component-info'>Start writing name of color to see autocomplete in action</div>
+            <sdc-autocomplete
+                [placeholder]="_placeholder"
+                [label]="_label"
+                [data]="_data"
+                (itemSelected)="itemSelected($event)"
+                >
+            </sdc-autocomplete>
+        </div>
+        `
+      }
+    },
+    { notes: `<h2>Simple data</h2>
+        Using simple data (array), do not need to pass dataSchema.
+        `
+    }
+).add('Complex data', () => {
+    const sampleData = [
+        {id: 'redId', color: 'red'},
+        {id: 'yellowId', color: 'yellow'},
+        {id: 'orangeId', color: 'orange'},
+        {id: 'greenId', color: 'green'},
+        {id: 'whiteId', color: 'white'},
+        {id: 'blackId', color: 'black'}
+    ];
+    const sampleSchema = {key: 'id', value: 'color'};
+
+    const _label = text('label', 'Complex data (Object)');
+    const _placeholder = text('placeholder', 'Complex data');
+    const _data = array('*data', sampleData, ',');
+    const _dataSchema = object('dataSchema', sampleSchema);
+    const _event = text('*(itemSelected)', 'Event thrown when item selected');
+
+      return {
+        props: {
+            itemSelected: action('Item was selected '),
+            _label, _placeholder, _data, _dataSchema, _event
+        },
+        template: `
+            <sdc-autocomplete
+                [placeholder]="_placeholder"
+                [label]="_label"
+                [data]="_data"
+                [dataSchema]="_dataSchema"
+                (itemSelected)="itemSelected($event)"
+                >
+            </sdc-autocomplete>
+            `
+        }
+    },
+    { notes: `<h2>Complex data</h2>
+        Using complex data (object), need to pass also dataSchema.
+        `
+    }
+).add('Backend data', () => {
+    const sampleSchema = {key: 'id', value: 'color'};
+
+    const _label = text('label', 'Complex data (Object)');
+    const _placeholder = text('placeholder', 'Complex data');
+    const _dataUrl = text('dataUrl', '../angular/helpers/autocomplete-server-mock.json');
+    const _dataSchema = object('dataSchema', sampleSchema);
+    const _event = text('*(itemSelected)', 'Event thrown when item selected');
+
+      return {
+        props: {
+            itemSelected: action('Item was selected '),
+            _label, _placeholder, _dataSchema, _dataUrl, _event
+        },
+        template: `
+            <sdc-autocomplete
+                [placeholder]="_placeholder"
+                [label]="_label"
+                [dataUrl]="_dataUrl"
+                [dataSchema]="_dataSchema"
+                (itemSelected)="itemSelected($event)"
+                >
+            </sdc-autocomplete>
+            `
+        }
+    },
+    { notes: `<h2>Data from server</h2>
+        Example of auto complete with complex data from server. (In this example the data is not really filtered, because it is from mock data).
+        `
+    }
+);
diff --git a/stories/angular/button.stories.ts b/stories/angular/button.stories.ts
new file mode 100644
index 0000000..582abbf
--- /dev/null
+++ b/stories/angular/button.stories.ts
@@ -0,0 +1,229 @@
+import { storiesOf } from '@storybook/angular';
+import { ButtonComponent } from '../../src/angular/buttons/button.component';
+import { ButtonFileOpenerComponent } from '../../src/angular/buttons/button-file-opener.component';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+
+const buttonTypes = ['primary', 'secondary', 'link', 'success', 'error', 'warning', 'info'];
+const buttonSizes = ['large', 'medium', 'small', 'x-small', 'default'];
+const positions = ['right', 'left'];
+const iconsNames = ['settings-o', 'plus-circle-o', 'plus-circle', 'caret2-right-circle-o'];
+
+/**
+ * There is strange behaviour with Storybook storyname, if the name is string 'aaaa', then all stories 
+ * need to be string, you can not do const aaaa = 'aaaa' and pass the parameter aaaa as storyname.
+ */
+const storiesNames = {
+  defaultButton: 'Default button',
+  typesButtons: 'Button ',
+  withIcon: 'Button with icon',
+  withSpinner: 'Button with spinner',
+  buttonFileOpener: 'Button file opener'
+}
+
+let stories = storiesOf('Form elements|Buttons', module)
+.addDecorator(withKnobs)
+.addDecorator(withNotes)
+.addDecorator(
+  moduleMetadata({
+    declarations: [
+      ButtonComponent,
+      ButtonFileOpenerComponent
+    ],
+    imports: [
+      SvgIconModule
+    ]
+  })
+);
+
+stories.add(storiesNames.defaultButton, () => {
+
+  const _text1 = text('text', 'Default button long text');
+  const _testId1 = text('testId', 'button-test-id-1');
+  const click1 = text('(click)', 'call back function');
+
+  const _text2 = text('text', 'Sample button');
+  const _testId2 = text('testId', 'button-test-id-2');
+  const click2 = text('(click)', 'call back function');
+
+  return {
+    props: {
+      buttonClick1: action('Button 1 was clicked'),
+      buttonClick2: action('Button 2 was clicked'),
+      _text1, _testId1,
+      _text2, _testId2
+    },
+    template: `
+      <div class='storybook-component-wrapper'>
+        <div class='storybook-component-info'>With large text</div>
+        <sdc-button
+            [text]="_text1"
+            [testId]="_testId1"
+            (click)="buttonClick1()"
+            >
+        </sdc-button>
+        
+        <div class='storybook-component-info'>With small text</div>
+        <sdc-button
+          [text]="_text2"
+          [testId]="_testId2"
+          (click)="buttonClick2()"
+          >
+        </sdc-button>
+      </div>
+    `
+    }
+  },
+  { notes: `<h2>Default button</h2>
+            Does not need to supply type or size.
+            The size of the button set to 'default' so it will shrink or expand according to the content.`
+  }
+);
+
+buttonTypes.forEach((buttonType) => {
+
+  stories.add(storiesNames.typesButtons + buttonType, () => {
+
+      const _text = text('text', buttonType);
+      const _type = text('type', buttonType);
+      // Do not allow this, because we are showing each button type as different story.
+      // const _type = select('type', buttonTypes, buttonType, '');
+      const _testId = text('testId', 'button-test-id-' + buttonType);
+      // No need to add the size to prop, not using it
+      const _size = text('size', 'Avilable sizes: ' + buttonSizes);
+      const _disabled = boolean('disabled', true);
+      const click = text('(click)', 'call back function');
+
+      return {
+        props: {
+          buttonClick: action('Button was clicked (see in action logger tab)'),
+          _text, _testId, _type, _disabled
+        },
+        template: 
+          `<div class='storybook-new-row'>` + 
+            buttonSizes.map((currentSize) => `
+            <div class='storybook-component-wrapper'>
+              <div class='storybook-component-info'>${currentSize} size</div>
+              <sdc-button
+                    [text]="_text"
+                    [type]="_type"
+                    size="${currentSize}"
+                    [testId]="_testId"
+                    (click)="buttonClick()">
+                </sdc-button>
+              </div>
+              `).join('\n') + 
+          `</div>
+          <div class='storybook-new-row'>` 
+          .concat(
+              buttonSizes.map((currentSize) => `
+                <div class='storybook-component-wrapper'>
+                  <sdc-button
+                      [text]="_text"
+                      [type]="_type"
+                      size="${currentSize}"
+                      [testId]="_testId"
+                      [disabled]="_disabled"
+                      (click)="buttonClick()">
+                  </sdc-button>
+                </div>
+                `).join('\n') + 
+          '</div>'
+          )
+        };
+
+    });
+});
+
+stories.add(storiesNames.withIcon, () => {
+
+  const _text = text('text', 'Sample');
+  const _testId = text('testId', 'button-test-id-with-icon');
+  const _type = select('type', buttonTypes, 'primary', '');
+  const _icon_position = select('icon_position', positions, 'left', '');
+  const _icon_name = select('icon_name', iconsNames, 'settings-o', '');
+  const click = text('(click)', 'call back function');
+
+  return {
+    props: {
+      buttonClick: action('Button was clicked (see in action logger tab)'),
+      _text, _testId, _type, _icon_position, _icon_name
+    },
+    template: `
+        <sdc-button
+            [text]="_text"
+            [testId]="_testId"
+            [type]="_type"
+            [icon_name]="_icon_name"
+            [icon_position]="_icon_position"
+            (click)="buttonClick()"
+          >
+        </sdc-button>
+      `
+    };
+
+});
+
+stories.add(storiesNames.withSpinner, () => {
+
+  const _text = text('text', 'Spinner button');
+  const _testId = text('testId', 'button-test-id-with-icon');
+  const _type = select('type', buttonTypes, 'primary', '');
+  const _show_spinner = boolean('show_spinner', false, '');
+  const _spinner_position = select('spinner_position', positions, 'right', '');
+  const click = text('(click)', 'call back function');
+
+  return {
+    props: {
+      buttonClick: (button) => {
+        button.show_spinner = true;
+        setTimeout(() => {button.show_spinner = false},2000);
+        action('Button was clicked (see in action logger tab)');
+      },
+      _text, _testId, _type, _show_spinner, _spinner_position
+    },
+    template: `
+      <sdc-button
+          #button
+          [text]="_text"
+          [testId]="_testId"
+          [type]="_type"
+          [show_spinner]="_show_spinner"
+          [spinner_position]="_spinner_position"
+          (click)="buttonClick(button)"
+          >
+        </sdc-button>
+      `
+    };
+  });
+
+
+stories.add(storiesNames.buttonFileOpener, () => {
+
+  const _text = text('text', 'Open file');
+  const _testId = text('testId', 'button-test-id-file-opener');
+  const _type = select('type', buttonTypes, 'primary', '');
+  const _extensions = text('extensions', 'ts,js');
+  const fileUpload = text('(fileUpload)', 'call back function when file upload');
+
+  return {
+    props: {
+      fileUpload: action('File updaload action'),
+      _text, _testId, _type, _extensions
+    },
+    template: `
+      <sdc-button-file-opener
+          #button
+          [text]="_text"
+          [testId]="_testId"
+          [type]="_type"
+          [extensions]="_extensions"
+          (fileUpload)="fileUpload($event)"
+          >
+        </sdc-button-file-opener>
+      `
+    };
+  });
diff --git a/stories/angular/checkbox.stories.ts b/stories/angular/checkbox.stories.ts
new file mode 100644
index 0000000..c02e2e2
--- /dev/null
+++ b/stories/angular/checkbox.stories.ts
@@ -0,0 +1,50 @@
+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 { CheckboxComponent } from '../../src/angular/components';
+import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive';
+
+storiesOf('Form elements|Checkbox', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        CheckboxComponent,
+        RippleClickAnimationDirective
+      ],
+      imports: [
+      ]
+    })
+  )
+  .add('Simple checkbox', () => {
+      const _label = text('label', 'Simple checkbox');
+      const _checked = boolean('checked', false);
+      const _disabled = boolean('disabled', false);
+      const _testId = text('testId', 'smalpe-test-id');
+      const _checkedChange = text('*(checkedChange)', 'Event throws when checked changed, see in Action logger tab.');
+
+      return {
+        props: {
+            checkedChange: action('Checkbox value changed '),
+            _label, _checked, _disabled, _testId
+        },
+        template: `
+        <sdc-checkbox 
+            [label]="_label"
+            [checked]="_checked"
+            [disabled]="_disabled"
+            [testId]="_testId"
+            (checkedChange)="checkedChange($event)"
+            >
+        </sdc-checkbox>
+        `
+      }
+    },
+    { notes: `<h2>Checkbox</h2>
+            Full example of checkbox.
+            Use the KNOBS tab to change values.`
+    }
+)
diff --git a/stories/angular/checklist.stories.ts b/stories/angular/checklist.stories.ts
new file mode 100644
index 0000000..92e0ada
--- /dev/null
+++ b/stories/angular/checklist.stories.ts
@@ -0,0 +1,51 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { ChecklistComponent, CheckboxComponent } from '../../src/angular/components';
+import { ChecklistModel, ChecklistItemModel } from '../../src/angular/common';
+import { RippleAnimationAction } from '../../src/angular/animations/ripple-click.animation.directive';
+
+const checkListModelExample: ChecklistModel =  new ChecklistModel([],[
+  new ChecklistItemModel('apple'),
+  new ChecklistItemModel('banana'),
+  new ChecklistItemModel('orange')
+]);
+
+storiesOf('Form elements|Checklist', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        ChecklistComponent,
+        RippleAnimationAction,
+        CheckboxComponent
+      ],
+      imports: [
+      ]
+    })
+  )
+  .add('Simple checklist', () => {
+      //const _checklistModel = object('checklistModel', checkListModelExample);
+      const _checkedChange = text('*(checkedChange)', 'Event throws when checklist changed, see in Action logger tab.');
+
+      return {
+        props: {
+            checkedChange: action('Checklist changed '),
+            checkListModelExample
+        },
+        template: `
+        <sdc-checklist 
+          [checklistModel]="checkListModelExample">
+          (checkedChange)="checkedChange($event)"
+        </sdc-checklist>
+        `
+      }
+    },
+    { notes: `<h2>Checklist</h2>
+            Full example of checklist.
+            Use the KNOBS tab to change values.`
+    }
+)
diff --git a/stories/angular/colors.stories.ts b/stories/angular/colors.stories.ts
new file mode 100644
index 0000000..5fc9085
--- /dev/null
+++ b/stories/angular/colors.stories.ts
@@ -0,0 +1,81 @@
+import { storiesOf } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { ColorsTable } from './helpers/colors-table.component';
+import { KeysPipe } from './helpers/keys.pipe';
+
+const colorMap = [
+    {
+        'darker-blue': '#323943',
+        'dark-blue': '#0568ae',
+        'blue': '#009fdb',
+        'light-blue': '#1eb9f3',
+        'disabled-blue': '#9dd9ef',
+        'lighter-blue': '#e6f6fb',
+    },
+    {
+        'green': '#4ca90c',
+        'light-green': '#56972b',
+        'disabled-green': '#a8e083',
+    },
+    {
+        'red': '#cf2a2a',
+        'light-red': '#ed4141',
+        'disabled-red': '#f4adad',
+    },
+    {
+        'yellow': '#ffb81c',
+        'light-yellow': '#dbbe7e',
+        'disabled-yellow': '#aa8432',
+    },
+    {
+        'dark-purple': '#702f8a',
+        'purple': '#9063cd',
+        'light-purple': '#caa2dd',
+    },
+    {
+        'dark-gray': '#5a5a5a',
+        'gray': '#959595',
+        'light-gray': '#d2d2d2',
+    },
+    {
+        'silver': '#eaeaea',
+        'light-silver': '#f2f2f2',
+        'lighter-silver': '#f8f8f8',
+    },
+    {
+        'black': '#000000',
+        'text-black': '#191919',
+        'white': '#ffffff',
+    }
+];
+
+storiesOf('Typography|Colors', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+          ColorsTable,
+          KeysPipe
+      ],
+      imports: [
+      ]
+    })
+  )
+  .add('Colors', () => {
+
+    return {
+        props: {
+            colorMap
+        },
+        template: `
+        <colors-table tableTitle="Supported colors" [tableMapColors]="colorMap"></colors-table>
+        `
+      }
+    },
+    { notes: `<h2>Colors</h2>
+            List of supported colors.`
+    }
+)
diff --git a/stories/angular/dropdown.stories.ts b/stories/angular/dropdown.stories.ts
new file mode 100644
index 0000000..6b4a05a
--- /dev/null
+++ b/stories/angular/dropdown.stories.ts
@@ -0,0 +1,297 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { CheckboxComponent, DropDownComponent, SvgIconComponent } from '../../src/angular/components';
+import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive';
+import { DropDownTypes, IDropDownOption, DropDownOptionType } from '../../src/angular/form-elements/dropdown/dropdown-models';
+import { DropDownTriggerDirective } from '../../src/angular/form-elements/dropdown/dropdown-trigger.directive';
+
+const dropdownTypes = Object.values(DropDownTypes);
+const options1: IDropDownOption[] = [
+    {
+        label: 'First Option Label',
+        value: 'firstOptionValue',
+    },
+    {
+        label: 'Second Option Label',
+        value: 'secondOptionValue',
+    },
+    {
+        label: 'Third Option Label',
+        value: 'thirdOptionValue',
+        type: DropDownOptionType.Simple
+    }
+];
+const options2: IDropDownOption[] = [
+    {
+        label: 'Header Label',
+        value: 'headerValue',
+        type: DropDownOptionType.Header
+    },
+    {
+        label: 'First Option Label',
+        value: 'firstOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Disabled Option Label',
+        value: 'headerValue',
+        type: DropDownOptionType.Disable
+    },
+    {
+        label: 'Second Option Label',
+        value: 'secondOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Ruler Label',
+        value: 'rulerValue',
+        type: DropDownOptionType.HorizontalLine
+    },
+    {
+        label: 'Third Option Label',
+        value: 'thirdOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Fourth Option Label',
+        value: 'FourthOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Fifth Option Label',
+        value: 'fifthOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Ruler Label',
+        value: 'rulerValue',
+        type: DropDownOptionType.HorizontalLine
+    },
+    {
+        label: 'Third Option Label',
+        value: 'thirdOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Fourth Option Label',
+        value: 'FourthOptionValue',
+        type: DropDownOptionType.Simple
+    },
+    {
+        label: 'Fifth Option Label',
+        value: 'fifthOptionValue',
+        type: DropDownOptionType.Simple
+    }
+];
+
+storiesOf('Form elements|Dropdown', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        DropDownComponent,
+        RippleClickAnimationDirective,
+        SvgIconComponent,
+        DropDownTriggerDirective
+      ],
+      imports: [
+      ]
+    })
+  )
+  .add('All options', () => {
+      const _label = text('label', 'Simple dropdown');
+      const _placeHolder = text('placeHolder', 'Sample placeholder');
+      const _disabled = boolean('disabled', false);
+      const _options = object('options', options1);
+      const _testId = text('testId', 'smalpe-test-id');
+      const _required = boolean('required', false);
+      const _maxHeight = number('maxHeight', 20);
+      const _selectedOption = object('selectedOption', {});
+      const _type = select('type', dropdownTypes, DropDownTypes.Regular);
+      const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.');
+
+      return {
+        props: {
+            onChange: action('Dropdown value changed '),
+            _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type
+        },
+        template: `
+        <sdc-dropdown 
+            [label]="_label" 
+            [placeHolder]="_placeHolder"
+            [type]="_type"
+            [disabled]="_disabled"
+            [required]="_required"
+            [maxHeight]="_maxHeight"
+            [options]="_options" 
+            [selectedOption]="_selectedOption"
+            (changed)="onChange($event)"
+            >
+        </sdc-dropdown>
+        `
+      }
+    },
+    { notes: `<h2>Checkbox</h2>
+            Full example of checkbox.
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('With groups', () => {
+    const _label = text('label', 'Simple dropdown');
+    const _placeHolder = text('placeHolder', 'Sample placeholder');
+    const _disabled = boolean('disabled', false);
+    const _options = object('options', options2);
+    const _testId = text('testId', 'smalpe-test-id');
+    const _required = boolean('required', false);
+    const _maxHeight = number('maxHeight', 20);
+    const _selectedOption = object('selectedOption', {});
+    const _type = select('type', dropdownTypes, DropDownTypes.Regular);
+    const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.');
+
+    return {
+      props: {
+          onChange: action('Dropdown value changed '),
+          _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type
+      },
+      template: `
+      <sdc-dropdown 
+          [label]="_label" 
+          [placeHolder]="_placeHolder"
+          [type]="_type"
+          [disabled]="_disabled"
+          [required]="_required"
+          [maxHeight]="_maxHeight"
+          [options]="_options" 
+          [selectedOption]="_selectedOption"
+          (changed)="onChange($event)"
+          >
+      </sdc-dropdown>
+      `
+    }
+  },
+  { notes: `<h2>Checkbox</h2>
+          Full example of checkbox with groups.
+          Use the KNOBS tab to change values.`
+  }
+)
+.add('Pre selected', () => {
+    const _label = text('label', 'Simple dropdown');
+    const _placeHolder = text('placeHolder', 'Sample placeholder');
+    const _disabled = boolean('disabled', false);
+    const _options = object('options', options2);
+    const _testId = text('testId', 'smalpe-test-id');
+    const _required = boolean('required', false);
+    const _maxHeight = number('maxHeight', 20);
+    const _selectedOption = object('selectedOption', { label: 'Second Option Label', value: 'secondOptionValue'});
+    const _type = select('type', dropdownTypes, DropDownTypes.Regular);
+    const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.');
+
+    return {
+      props: {
+          onChange: action('Dropdown value changed '),
+          _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type
+      },
+      template: `
+      <sdc-dropdown 
+          [label]="_label" 
+          [placeHolder]="_placeHolder"
+          [type]="_type"
+          [disabled]="_disabled"
+          [required]="_required"
+          [maxHeight]="_maxHeight"
+          [options]="_options" 
+          [selectedOption]="_selectedOption"
+          (changed)="onChange($event)"
+          >
+      </sdc-dropdown>
+      `
+    }
+  },
+  { notes: `<h2>Checkbox</h2>
+          Full example of checkbox with groups pre selected option.
+          Use the KNOBS tab to change values.`
+  }
+)
+.add('Headless mode', () => {
+    const _label = text('label', 'Simple dropdown');
+    const _placeHolder = text('placeHolder', 'Sample placeholder');
+    const _disabled = boolean('disabled', false);
+    const _options = object('options', options1);
+    const _testId = text('testId', 'smalpe-test-id');
+    const _required = boolean('required', false);
+    const _maxHeight = number('maxHeight', 20);
+    const _selectedOption = object('selectedOption', {});
+    const _type = select('type', dropdownTypes, DropDownTypes.Headless);
+    const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.');
+
+    return {
+      props: {
+          onChange: action('Dropdown value changed '),
+          _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type
+      },
+      template: `
+      <button SdcDropdownTrigger [dropDown]="dropDown1">Click to toggle!</button>
+      <sdc-dropdown
+          #dropDown1
+          [label]="_label" 
+          [placeHolder]="_placeHolder"
+          [type]="_type"
+          [disabled]="_disabled"
+          [required]="_required"
+          [maxHeight]="_maxHeight"
+          [options]="_options" 
+          [selectedOption]="_selectedOption"
+          (changed)="onChange($event)"
+          >
+      </sdc-dropdown>
+      `
+    }
+  },
+  { notes: `<h2>Checkbox</h2>
+          Full example of checkbox (headless mode).
+          Use the KNOBS tab to change values.`
+  }
+)
+.add('Insert text (auto)', () => {
+    const _label = text('label', 'Simple dropdown');
+    const _placeHolder = text('placeHolder', 'Sample placeholder');
+    const _disabled = boolean('disabled', false);
+    const _options = object('options', options1);
+    const _testId = text('testId', 'smalpe-test-id');
+    const _required = boolean('required', false);
+    const _maxHeight = number('maxHeight', 20);
+    const _selectedOption = object('selectedOption', {});
+    const _type = select('type', dropdownTypes, DropDownTypes.Auto);
+    const _onChange = text('*(onChange)', 'Event throws when dropdown changed, see in Action logger tab.');
+
+    return {
+      props: {
+          onChange: action('Dropdown value changed '),
+          _label, _placeHolder, _disabled, _required, _testId, _options, _maxHeight, _selectedOption, _type
+      },
+      template: `
+      <sdc-dropdown
+          #dropDown1
+          [label]="_label" 
+          [placeHolder]="_placeHolder"
+          [type]="_type"
+          [disabled]="_disabled"
+          [required]="_required"
+          [maxHeight]="_maxHeight"
+          [options]="_options" 
+          [selectedOption]="_selectedOption"
+          (changed)="onChange($event)"
+          >
+      </sdc-dropdown>
+      `
+    }
+  },
+  { notes: `<h2>Checkbox</h2>
+          Full example of checkbox (auto mode).
+          Use the KNOBS tab to change values.`
+  }
+)
diff --git a/stories/angular/filter-bar.stories.ts b/stories/angular/filter-bar.stories.ts
new file mode 100644
index 0000000..a48b02f
--- /dev/null
+++ b/stories/angular/filter-bar.stories.ts
@@ -0,0 +1,51 @@
+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 { FilterBarComponent, InputComponent } from '../../src/angular/components';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+
+storiesOf('Form elements|Filterbar', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        FilterBarComponent
+      ],
+      imports: [
+          FormElementsModule
+      ]
+    })
+  )
+  .add('Filterbar', () => {
+      const _label = text('label', 'Filterbar label');
+      const _placeholder = text('placeholder', 'Filterbar placeholder');
+      const _debounceTime = number('debounceTime', 200);
+      // const _testId = text('testId', 'smalpe-test-id');
+      const _searchQuery = text('searchQuery', '');
+      const _searchQueryOutput = text('*(searchQuery)', 'Event throws when search query changed');
+      const _searchQueryChange = text('*(searchQueryChange)', 'Event throws when search query changed, see in Action logger tab.');
+
+      return {
+        props: {
+            onChange: action('Search query value changed '),
+            _label, _searchQuery, _placeholder, _debounceTime
+        },
+        template: `
+        <sdc-filter-bar
+            [placeholder]="_placeholder"
+            [label]="_label"
+            [debounceTime]="_debounceTime"
+            [(searchQuery)]="_searchQuery"
+            (searchQueryChange)="onChange($event)">
+        </sdc-filter-bar>
+        `
+      }
+    },
+    { notes: `<h2>Filterbar</h2>
+            The filter bar component text is updated (after debounce time, default 200 miliseconds) while user write something.
+            Use the KNOBS tab to change values.`
+    }
+)
diff --git a/stories/angular/helpers/autocomplete-server-mock.json b/stories/angular/helpers/autocomplete-server-mock.json
new file mode 100644
index 0000000..2521108
--- /dev/null
+++ b/stories/angular/helpers/autocomplete-server-mock.json
@@ -0,0 +1,8 @@
+[
+    {"id": "redId", "color": "red"},
+    {"id": "yellowId", "color": "yellow"},
+    {"id": "orangeId", "color": "orange"},
+    {"id": "greenId", "color": "green"},
+    {"id": "whiteId", "color": "white"},
+    {"id": "blackId", "color": "black"}
+]
diff --git a/stories/angular/helpers/colors-table.component.ts b/stories/angular/helpers/colors-table.component.ts
new file mode 100644
index 0000000..4c8f83f
--- /dev/null
+++ b/stories/angular/helpers/colors-table.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: "colors-table",
+    template: `
+
+        <h1>{{tableTitle}}</h1>
+        <div class="colors-table">
+            <div class="color-group" *ngFor="let colorGroup of tableMapColors">
+                <div class="color-section" *ngFor="let color of colorGroup | keys">
+                    <div class='sdc-bc-{{color}} color-circle'></div>
+                    <div>{{color}}</div>
+                    <div>{{colorGroup[color]}}</div>
+                </div>
+            </div>
+        </div>
+`
+})
+export class ColorsTable {
+
+    @Input() tableTitle: string;
+    @Input() tableMapColors: Object;
+
+    constructor() {
+
+    }
+
+}
diff --git a/stories/angular/helpers/index.ts b/stories/angular/helpers/index.ts
new file mode 100644
index 0000000..00c35de
--- /dev/null
+++ b/stories/angular/helpers/index.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { KeysPipe } from "./keys.pipe";
+import { ColorsTable } from "./colors-table.component";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { ButtonComponent } from "../../../src/angular/components";
+
+@NgModule({
+    declarations: [
+        ColorsTable,
+        KeysPipe,
+        ButtonComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+    ],
+    exports: []
+})
+export class SdcStoriesHelperModule {
+}
diff --git a/stories/ng2-component-lab/utils/pipes/keys.pipe.ts b/stories/angular/helpers/keys.pipe.ts
index 2a58cd8..2a58cd8 100644
--- a/stories/ng2-component-lab/utils/pipes/keys.pipe.ts
+++ b/stories/angular/helpers/keys.pipe.ts
diff --git a/stories/angular/helpers/modal-consumer.component.ts b/stories/angular/helpers/modal-consumer.component.ts
new file mode 100644
index 0000000..87450e0
--- /dev/null
+++ b/stories/angular/helpers/modal-consumer.component.ts
@@ -0,0 +1,151 @@
+import {Component, Input, Output, EventEmitter, ComponentRef} from "@angular/core";
+import { ModalService } from "../../../src/angular/modals/modal.service";
+import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config";
+import { ModalButtonComponent } from './../../../src/angular/modals/modal-button.component';
+import { Placement, ButtonType } from "../../../src/angular/common/enums";
+import { ModalComponent } from "../../../src/angular/components";
+import { ModalInnerContent } from "./modal-inner-content-example.component";
+import {ButtonComponent} from "../../../src/angular/buttons/button.component"
+
+const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
+'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
+
+@Component({
+    selector: 'modal-consumer',
+    template: `<sdc-button [text]="'View Modal'" (click)="openModal()"></sdc-button>`
+})
+export class ModalConsumerComponent {
+    @Input() action: string;
+    private customModal1: ModalComponent;
+    private customModal2: ModalComponent;
+
+    constructor(private modalService: ModalService) {
+    }
+
+    private openModal = (): void => {
+        if (this[this.action]) {
+            this[this.action]();
+        }
+    }
+
+    private openInfoModal = (): void => {
+        this.modalService.openInfoModal("Info modal title", MODAL_CONTENT, 'infoModalTestId');
+    }
+
+    private openWarningModal = (): void => {
+        this.modalService.openWarningModal("Warning modal title", MODAL_CONTENT, 'warningModalTestId');
+    }
+
+    private openErrorModal = (): void => {
+        this.modalService.openErrorModal("Error modal title", MODAL_CONTENT, 'errorModalTestId');
+    }
+
+    private openSuccessModal = (): void => {
+        this.modalService.openSuccessModal("Success modal title", MODAL_CONTENT, 'successModalTestId');
+    }
+
+    private openInfoModalWithCustomButtons = (): void => {
+        const buttons = [
+            { text: 'CONFIRM', type: ButtonType.info, callback: this.onConfirmAction, closeModal: true },
+            { text: 'CANCEL', type: ButtonType.info, closeModal: true }
+        ] as ModalButtonComponent[];
+        this.modalService.openInfoModal('Info modal title', MODAL_CONTENT, "infoModalCustomTestId", buttons);
+    }
+
+    private openWarningModalWithCustomButtons = (): void => {
+        const buttons = [
+            { text: 'SAVE', type: ButtonType.warning, callback: this.onSaveAction, closeModal: true },
+            { text: 'APPLY', type: ButtonType.warning, callback: this.onApplyAction },
+            { text: 'CANCEL', type: ButtonType.warning, closeModal: true }
+        ] as ModalButtonComponent[];
+        this.modalService.openWarningModal('Warning modal title', MODAL_CONTENT, "warningModalCustomTestId", buttons);
+    }
+
+    private onConfirmAction = (): void => {
+        alert("Action has been confirmed, modal will be closed");
+    }
+
+    private onSaveAction = (): void => {
+        alert("Action has been saved, modal will be close");
+    }
+
+    private onApplyAction = (): void => {
+        alert("Action has been applied, modal will not be close");
+    }
+
+    private openCustomModal1 = (): void => {
+        const modalConfig = {
+            size: ModalSize.medium,
+            title: 'Modal title',
+            type: ModalType.custom,
+            testId: 'sampleTestIdModal1',
+            buttons: [
+                      {id: "saveButton", text: "Save", callback: this.customModalOnSave1, closeModal: false},
+                      {id: "cancelButton", text: "Cancel", size: 'x-small', type: ButtonType.secondary , closeModal: true}
+                    ]
+        } as IModalConfig;
+        this.customModal1 = this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+    }
+
+    private customModalOnSave1 = (): void => {
+        const saveButton: ModalButtonComponent = this.customModal1.getButtonById("saveButton");
+        saveButton.show_spinner = true;
+        saveButton.spinner_position = Placement.right;
+
+        // Show spinner for 2 seconds
+        console.log('Saving example, please wait ...');
+        window.setTimeout((button: ModalButtonComponent) => {
+            button.show_spinner = false;
+            console.log('Finish saving');
+        }, 2000, saveButton);
+    }
+
+    private openCustomModal2 = (): void => {
+        const modalConfig = {
+            size: ModalSize.medium,
+            title: 'Title',
+            type: ModalType.custom,
+            testId: 'sampleTestIdModal2',
+            buttons: [
+                      {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
+                      {text: "Change buttons", callback: this.customModalUpdateButtons2, closeModal: false},
+                      {text: "Disable close", callback: this.customModalUDisableClose2, closeModal: false}
+                    ]
+        } as IModalConfig;
+        this.customModal2 = this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+    }
+
+    private customModalUDisableClose2 = (): void => {
+        this.customModal2.getCloseButton().disabled = true;
+    }
+
+    private customModalChangeTitle2 = (): void => {
+        this.customModal2.setTitle('New title');
+    }
+
+    private customModalUpdateButtons2 = (): void => {
+        const newButtons = [
+            {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
+            {text: "Do nothing", closeModal: false}
+          ] as ModalButtonComponent[];
+        this.customModal2.setButtons(newButtons);
+    }
+
+    private openErrorModalFromModal = ():void => {
+        this.modalService.openErrorModal("Error", "Error example!!", "second-modal");
+    }
+
+    private openCustomModal3 = (): void => {
+        const modalConfig = {
+            size: ModalSize.medium,
+            title: 'Title',
+            type: ModalType.custom,
+            testId: 'sampleTestIdModal3',
+            buttons: [
+                {text: "Open Error", callback: this.openErrorModalFromModal, closeModal: false}
+            ]
+        } as IModalConfig;
+        this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
+    }
+
+}
diff --git a/stories/angular/helpers/modal-inner-content-example.component.ts b/stories/angular/helpers/modal-inner-content-example.component.ts
new file mode 100644
index 0000000..7e59ab1
--- /dev/null
+++ b/stories/angular/helpers/modal-inner-content-example.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: "inner-content",
+    template: `
+        <div>
+            <sdc-input label="Enter value" [(value)]="name"> </sdc-input>
+            <sdc-input label="Enter value" [(value)]="name"> </sdc-input>
+            <sdc-input label="Enter value" [(value)]="name"> </sdc-input>
+        </div>
+`
+})
+export class ModalInnerContent {
+
+    @Input() name:string;
+}
diff --git a/stories/angular/index.ts b/stories/angular/index.ts
new file mode 100644
index 0000000..b42ef85
--- /dev/null
+++ b/stories/angular/index.ts
@@ -0,0 +1,112 @@
+import { storiesOf } from '@storybook/angular';
+import '!style-loader!css-loader!sass-loader!./styles.scss';
+
+storiesOf('Welcome', module).add('to Storybook', () => ({
+  template: `
+    <div class="storybook-welcome">
+      <h1>ONAP-UI-ANGULAR Style-Guide and Components</h1>
+      <p>
+        This project aims to create a unified UI styled components for multiple development teams who work on the same web-based applications. 
+        This repository contains the definition of all the basic widgets and reusable controllers. 
+      </p>
+      Note: the project is build of 3 different projects:
+      <ul>
+        <li><a href="https://github.com/onap-sdc/onap-ui-common">onap-ui-common</a> contains HTML and SCSS files for all components.</li>
+        <li><a href="https://github.com/onap-sdc/onap-ui-angular">onap-ui-angular</a> contains Angular components according to the HTML defined in onap-ui-common.</li>
+        <li><a href="https://github.com/onap-sdc/onap-ui-react">onap-ui-react</a> contains React components according to the HTML defined in onap-ui-common.</li>
+      </ul>
+
+      <h2>Usage</h2>
+      <h3>Link the library's CSS file</h3>
+      <p>
+        There are several options to link to onap-ui-angular CSS file:
+      </p>
+
+      <h4>SCSS</h4>
+      <code>
+        @import "path_to_node_modules/onap-ui/css/style.css";
+      </code>
+      <br><br>
+
+      <h4>HTML</h4>
+      <code>
+        <![CDATA[
+          <link rel="stylesheet" href="path_to_node_modules/onap-ui/css/style.css">
+        ]]>
+      </code>
+      <br><br>
+
+      <h4>As Module (Using loading tool, i.e. <a href="https://webpack.github.io/">Webpack</a>)</h4>
+      <code>import "onap-ui/css/style.css";</code>
+      <br><br>
+
+      <h4>Angular CLI projects</h4>
+      <p>You can add this line to style.css file:</p>
+      <code>@import "../node_modules/onap-ui/css/style.css";</code>
+      <br><br>
+
+      <h3>Using the library in latest Angular (6)</h3>
+      <h4>Add the library to your module</h4>
+      <code>
+        <![CDATA[
+          import { SdcUiComponentsModule, SdcUiComponents } from 'onap-ui-angular';
+          @NgModule({
+          declarations: [
+            AppComponent
+          ],
+          imports: [
+            BrowserModule,
+            FormsModule,
+            HttpModule,
+            SdcUiComponentsModule
+          ],
+          providers: [
+            SdcUiComponents.ModalService
+          ],
+          bootstrap: [AppComponent]
+          })
+          export class AppModule { }
+        ]]>
+      </code>
+      <br><br>
+
+      <h2>Running storybook</h2>
+      The components in this library are displayed via <a href="https://github.com/storybooks/storybook">storybook</a>. 
+      Head to <a href="http://onap-sdc.github.io/onap-ui-angular">http://onap-sdc.github.io/onap-ui-angular</a> to see the components that are in <b>master</b>.
+      While developing, just run <b>npm run storybook</b> in your terminal to launch a local storybook server where you can see your changes. For deploying storybook to your own fork repository, refer to the guides section below.
+
+      <h3>Useful guides</h3>
+      <ul>
+        <li><a href="https://github.com/onap-sdc/onap-ui-angular/wiki/Adding-a-new-component">Adding a new component</a></li>
+        <li><a href="https://github.com/onap-sdc/onap-ui-angular/wiki/Deploying-storybook-to-a-fork's-github-pages">Deploying storybook to a fork's github pages</a></li>
+        <li><a href="https://github.com/onap-sdc/onap-ui-angular/wiki/Understanding-project-build">Understanding project build</a></li>
+      </ul>
+      
+      <h3>Having some trouble? Have an issue?</h3>
+      For bugs and issues, please use the <a href="https://github.com/onap-sdc/onap-ui-angular/issues">issues</a> page
+
+      <h3>How to Contribute</h3>
+      <ul>
+        <li>
+          Contribution can be made only by following these guide lines
+        </li>
+        <li>
+          This project combines both <b>React</b> & <b>Angular</b> framework libraries. 
+          Hence, every change in the basic HTML files structure, must be followed by changes on react and angular 
+          projects (<a href="https://github.com/onap-sdc/onap-ui-angular">onap-ui-angular</a>, <a href="https://github.com/onap-sdc/onap-ui-react">onap-ui-react</a>).
+        </li>
+        <li>
+          There will be no any 3rd party UI framework imported (i.e. <b>Bootstrap</b>, <b>Material</b>, <b>Foundation</b>... etc.).
+        </li>
+        <li>
+          Contribution are done only by the <a href="https://github.com/onap-sdc/onap-ui-angular/wiki/Contribution-guide">contribution guide</a>. 
+          Contributions submitted not in this format and guidelines will not be considered.
+        </li>
+      </ul>
+    </div>
+  `,
+  props: {
+  },
+  moduleMetadata: {
+  },
+}));
diff --git a/stories/angular/infinite-scroll.stories.ts b/stories/angular/infinite-scroll.stories.ts
new file mode 100644
index 0000000..3a53a4f
--- /dev/null
+++ b/stories/angular/infinite-scroll.stories.ts
@@ -0,0 +1,181 @@
+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 { InfiniteScrollDirective } from '../../src/angular/components';
+
+const basicStyle = `
+    .scroll-container {
+        margin: 12px;
+        border: none;
+        padding: 5px;
+        width: 200px;
+        height: 100px;
+        overflow: auto;
+        font-size: 20px !important;
+        box-shadow: #666 1px 1px 10px;
+    }
+    .example-source {
+        background: #eeeeee;
+        padding: 10px;
+        border: 1px solid #999999;
+    }
+    .example-source pre {
+        overflow: hidden;
+        background: #dddddd;
+        margin-top: 5px;
+        padding: 5px;
+        user-select: text;
+    }
+`;
+
+const makeBasicStyleDistance = (distance: number) => `
+    .scroll-container::after {
+        display: block;
+        content: '';
+        height: ${distance}px;
+        background: red;
+    }
+`;
+
+storiesOf('Infinite-Scroll', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        InfiniteScrollDirective
+      ],
+      imports: [
+      ]
+    })
+  )
+  .add('Simple', () => {
+    const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down');
+
+    return {
+        props: {
+            hitBottomCount: 0,
+            onScrollHitBottom: () => {
+                action('scroll hit bottom')();
+                this.hitBottomCount++;
+            },
+            numLines: Array(20).fill(null)
+        },
+        styles: [basicStyle],
+        template: `
+        <div (infiniteScroll)="onScrollHitBottom()" class="scroll-container">
+            <div *ngFor="let _i of numLines; let i=index">
+                Line {{i + 1}}
+            </div>
+        </div>
+        Hit bottom for <b>{{hitBottomCount}}</b> times!
+        `
+      }
+    },
+    { notes: `<h2>Infinite-Scroll</h2>
+            Simple infinite scroll, throws event when reach bottom (see in action logger).
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('With bottom distance', () => {
+    const _infiniteScrollDistance = number('infiniteScrollDistance', 20);
+    const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down');
+
+    return {
+        props: {
+            hitBottomCount: 0,
+            onScrollHitBottom: () => {
+                action('scroll hit bottom')();
+                this.hitBottomCount++;
+            },
+            numLines: Array(20).fill(null),
+            _infiniteScrollDistance
+        },
+        styles: [basicStyle, makeBasicStyleDistance(50)],
+        template: `
+        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container">
+            <div *ngFor="let _i of numLines; let i=index">
+                Line {{i + 1}}
+            </div>
+        </div>
+        Hit bottom for <b>{{hitBottomCount}}</b> times!
+        `
+      }
+    },
+    { notes: `<h2>Infinite-Scroll</h2>
+            Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger).
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('Expanding content synchrony', () => {
+    const _infiniteScrollDistance = number('infiniteScrollDistance', 20);
+    const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down');
+
+    return {
+        props: {
+            hitBottomCount: 0,
+            onScrollHitBottom: () => {
+                action('scroll hit bottom')();
+                this.hitBottomCount++;
+                this.insertPageImmediately(this.pageCount + 1);
+                this.pageCount++;
+            },
+            numLines: Array(20).fill(null),
+            _infiniteScrollDistance
+        },
+        styles: [basicStyle, makeBasicStyleDistance(50)],
+        template: `
+        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container">
+            <div *ngFor="let _i of numLines; let i=index">
+                Line {{i + 1}}
+            </div>
+        </div>
+        Hit bottom for <b>{{hitBottomCount}}</b> times!
+        `
+      }
+    },
+    { notes: `<h2>Infinite-Scroll</h2>
+            Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger).
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('Expanding content asynchrony', () => {
+    const _infiniteScrollDistance = number('infiniteScrollDistance', 20);
+    const _infiniteScroll = text('infiniteScroll', 'Event throws when scroll reach down');
+
+    return {
+        props: {
+            hitBottomCount: 0,
+            onScrollHitBottom: () => {
+                action('scroll hit bottom')();
+                this.hitBottomCount++;
+                if (!this.isPageLoading) {
+                    this.isPageLoading = true;
+                    this.loadPageAsync(this.pageCount + 1, 5000).then(() => {
+                        this.pageCount++;
+                        this.isPageLoading = false;
+                    });
+                }
+            },
+            numLines: Array(20).fill(null),
+            _infiniteScrollDistance
+        },
+        styles: [basicStyle, makeBasicStyleDistance(50)],
+        template: `
+        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="_infiniteScrollDistance" class="scroll-container">
+            <div *ngFor="let _i of numLines; let i=index">
+                Line {{i + 1}}
+            </div>
+        </div>
+        Hit bottom for <b>{{hitBottomCount}}</b> times!<br/>
+        Loaded {{pageCount}} pages! <span *ngIf="isPageLoading">LOADING page #{{this.pageCount + 1}} ...</span>
+        `
+      }
+    },
+    { notes: `<h2>Infinite-Scroll</h2>
+            Simple infinite scroll with distance at the bottom, throws event when reach bottom (see in action logger).
+            Use the KNOBS tab to change values.`
+    }
+)
diff --git a/stories/angular/input.stories.ts b/stories/angular/input.stories.ts
new file mode 100644
index 0000000..1c63427
--- /dev/null
+++ b/stories/angular/input.stories.ts
@@ -0,0 +1,120 @@
+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 { CheckboxComponent, InputComponent } from '../../src/angular/components';
+import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+
+storiesOf('Form elements|Input', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      ],
+      imports: [
+          FormElementsModule
+      ]
+    })
+  )
+  .add('Simple', () => {
+    const _label = text('label', 'Please Enter value');
+    const _name = text('name', 'InputName');
+    const _testId = text('testId', 'sample-test-id');
+
+      return {
+        props: {
+            checkedChange: action('Checkbox value changed '),
+            _label, _name, _testId
+        },
+        template: `
+        <sdc-input 
+            [label]="_label" 
+            [name]="_name" 
+            [testId]="_testId"
+            >
+        </sdc-input>
+        `
+      }
+    },
+    { notes: `<h2>Simple Input</h2>
+            Simple input example.
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('With debounce', () => {
+    const _label = text('label', 'Please Enter value');
+    const _name = text('name', 'InputName');
+    const _testId = text('testId', 'sample-test-id');
+    const _debounceTime = number('debounceTime', 1000);
+    const _valueChange = text('*(valueChange)', 'Throws event when value changed.');
+
+      return {
+        props: {
+            onValueChanged: action('Input value changed '),
+            _label, _name, _testId, _debounceTime
+        },
+        template: `
+        <sdc-input 
+            [label]="_label" 
+            [name]="_name" 
+            [testId]="_testId"
+            [debounceTime]="_debounceTime"
+            (valueChange)=onValueChanged($event);
+            >
+        </sdc-input>
+        `
+      }
+    },
+    { notes: `<h2>Input with debounce</h2>
+            Wait for 1000 miliseconds for value changed event .
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('Full options', () => {
+    const _label = text('label', 'Please Enter value');
+    const _name = text('name', 'InputName');
+    const _placeHolder = text('placeHolder', 'Input placeHolder');
+    const _value = text('value', 'Some value');
+    const _type = select('type', ['text', 'number', 'email']);
+    const _disabled = boolean('disabled', false);
+    const _required = boolean('required', false);
+    const _testId = text('testId', 'sample-test-id');
+    const _debounceTime = number('debounceTime', 1000);
+    const _minLength = number('minLength', 4);
+    const _maxLength = number('maxLength', 10);
+    const _classNames = text('classNames', 'custom-input-class');
+    const _valueChange = text('*(valueChange)', 'Throws event when value changed.');
+
+    return {
+        props: {
+            onValueChanged: action('Input value changed '),
+            _label, _name, _value, _testId, _debounceTime, _type, _disabled, _placeHolder, _required, _maxLength, _minLength, _classNames
+        },
+        template: `
+        <sdc-input 
+            [label]="_label" 
+            [name]="_name" 
+            [placeHolder]="_placeHolder"
+            [type]="_type"
+            [value]="_value"
+            [disabled]="_disabled"
+            [required]="_required"
+            [testId]="_testId"
+            [minLength]="_minLength"
+            [maxLength]="_maxLength"
+            [debounceTime]="_debounceTime"
+            [classNames]="_classNames"
+            (valueChange)=onValueChanged($event);
+            >
+        </sdc-input>
+        `
+      }
+    },
+    { notes: `<h2>Input with debounce</h2>
+            Wait for 1000 miliseconds for value changed event .
+            Use the KNOBS tab to change values.`
+    }
+)
diff --git a/stories/angular/loader.stories.ts b/stories/angular/loader.stories.ts
new file mode 100644
index 0000000..ccc4152
--- /dev/null
+++ b/stories/angular/loader.stories.ts
@@ -0,0 +1,147 @@
+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 { LoaderComponent, ButtonComponent, InputComponent, SvgIconComponent } from '../../src/angular/components';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { LoaderService } from '../../src/angular/loader/loader.service';
+import { LoaderSize } from '../../src/angular/loader/loader.component';
+
+storiesOf('Loader', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        LoaderComponent,
+        ButtonComponent,
+        InputComponent,
+        SvgIconComponent
+      ],
+      imports: [
+          CommonModule,
+        FormsModule,
+        ReactiveFormsModule
+      ],
+      providers: [
+          LoaderService
+      ]
+    })
+  )
+  .add('Relative loader', () => {
+    const _size = select('size', Object.values(LoaderSize), LoaderSize.large);
+    const _name = text('name', 'RelativeLoader');
+    const _active = boolean('active', false);
+
+      return {
+        props: {
+            activateLogger: (loader) => {
+                loader.activate();
+                action('Loader activated')();
+            },
+            deactivateLogger: (loader) => {
+                loader.deactivate();
+                action('Loader deactivated')();
+            },
+            _size, _name, _active
+        },
+        template: `
+        <h2>Loader visible: {{_active}}</h2>
+        <sdc-loader #loader1 [size]="_size" [name]="_name" [(active)]="_active">
+            <div style="border:1px solid black; padding:20px 100px;">
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+            </div>
+        </sdc-loader >
+        <div style="margin:10px 0px;">
+            <sdc-button text="Show loader" (click)="activateLogger(loader1)"></sdc-button>
+            <sdc-button text="Hide loader" (click)="deactivateLogger(loader1)"></sdc-button>
+        </div>
+        `
+      }
+    },
+    { notes: `<h2>Relative loader</h2>
+            Relative loader that wraps dom elements.
+            Use the KNOBS tab to change values.`
+    }
+)
+.add('Relative loader with service', () => {
+    const _size = select('size', Object.values(LoaderSize), LoaderSize.large);
+    const _name = text('name', 'RelativeLoader');
+    const _active = boolean('active', false);
+
+      return {
+        props: {
+            activateLogger: (loader) => {
+                loader.activate();
+                action('Loader activated')();
+            },
+            deactivateLogger: (loader) => {
+                loader.deactivate();
+                action('Loader deactivated')();
+            },
+            _size, _name, _active
+        },
+        template: `
+        <h2>Loader visible: {{_active}}</h2>
+        <sdc-loader #loader1 [size]="_size" [name]="_name" [(active)]="_active">
+            <div style="border:1px solid black; padding:20px 100px;">
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+                <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
+            </div>
+        </sdc-loader >
+        <div style="margin:10px 0px;">
+            <sdc-button text="Show loader" (click)="activateLogger(loader1)"></sdc-button>
+            <sdc-button text="Hide loader" (click)="deactivateLogger(loader1)"></sdc-button>
+        </div>
+        `
+      }
+    },
+    { notes: `<h2>Relative loader</h2>
+            Relative loader that wraps dom elements.
+            Use the KNOBS tab to change values.`
+    }
+)
+
+
+
+
+
+
+
+
+.add('General loader', () => {
+    const _size = select('size', Object.values(LoaderSize), LoaderSize.large);
+    const _name = text('name', 'global');
+    const _global = boolean('global', true);
+
+      return {
+        props: {
+            activateLogger: (loader) => {
+                loader.loaderService.activate(loader.name);
+                setTimeout(() => {
+                    loader.loaderService.deactivate(loader.name);
+                }, 2000);
+                action('Global loader activated')();
+            },
+            _size, _name, _global
+        },
+        template: `
+        <sdc-loader [global]="_global" [name]="_name" [size]="_size" #globalLoader></sdc-loader>
+        <sdc-button text="Show global loader" (click)="activateLogger(globalLoader)"></sdc-button>
+        `
+      }
+    },
+    { notes: `<h2>General loader</h2>
+            General loader to hide full screen.
+            For this sample added setTimeout() function so the loader will deactivated after 2 seconds.
+            Use the KNOBS tab to change values.`
+    }
+)
diff --git a/stories/angular/modal.stories.ts b/stories/angular/modal.stories.ts
new file mode 100644
index 0000000..fdd42dc
--- /dev/null
+++ b/stories/angular/modal.stories.ts
@@ -0,0 +1,59 @@
+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 { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+import { ModalModule } from '../../src/angular/modals/modal.module';
+import { ModalConsumerComponent } from './helpers/modal-consumer.component';
+import { ModalService } from '../../src/angular/services';
+import { ButtonsModule } from '../../src/angular/buttons/buttons.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+let stories = storiesOf('Modal', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        ModalConsumerComponent
+      ],
+      imports: [
+          ModalModule,
+          FormElementsModule,
+          ButtonsModule,
+          BrowserAnimationsModule
+      ],
+      providers: [
+          ModalService
+        ]
+    })
+  )
+  const modalTypes = ['Info', 'Warning', 'Error', 'Success'];
+ 
+  modalTypes.forEach((buttonType) => {
+
+    stories.add('Modal' + buttonType, () => {
+  
+        return {
+          props: {
+            openModal: action('Modal opened (see in action logger tab)'),
+            buttonType
+          },
+          template: 
+            `<b> ${buttonType} Modal</b><br><br>
+            <modal-consumer [action]="'open' + this.buttonType +'Modal'"></modal-consumer>`
+          
+          };
+          
+      },
+      { notes: `<h2>` + buttonType + ` modal</h2>
+                When click on view model ` + buttonType + ` model will open`+
+                `<br>Source Code:` +
+                `<br><b>this.modalService.open`+ buttonType + `Modal('`+ buttonType + ` modal title', '`+ buttonType + 
+                ` modal content', '`+ buttonType + `ModalTestId');</b>`+
+                `<br>Use the KNOBS tab to change values.`
+      }
+
+    );     
+  });
diff --git a/stories/angular/multiline-ellipsis.stories.ts b/stories/angular/multiline-ellipsis.stories.ts
new file mode 100644
index 0000000..ab830bb
--- /dev/null
+++ b/stories/angular/multiline-ellipsis.stories.ts
@@ -0,0 +1,77 @@
+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 { MultilineEllipsisModule } from '../../src/angular/multiline-ellipsis/multiline-ellipsis.module';
+import { ButtonsModule } from '../../src/angular/buttons/buttons.module';
+import { ButtonComponent } from '../../src/angular/buttons/button.component';
+
+let stories = storiesOf('Multiline ellipsis', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        
+      ],
+      imports: [
+        MultilineEllipsisModule,
+        ButtonsModule
+      ]
+    })
+  )
+
+  let containslines = true;
+  let containslineHeight = true;
+  let containsClassName = true;
+  let containsChangeText = true
+
+  createStory(stories, "All options", containslines, containslineHeight, containsClassName, containsChangeText, "Multiline-ellipsis", "Full example of simple multiline ellipsis.");
+  createStory(stories, "With number of line", containslines, !containslineHeight, !containsClassName, !containsChangeText, "Multiline-ellipsis", "Example of simple multiline ellipsis With number of line.");
+  createStory(stories, "With line hight", !containslines, containslineHeight, !containsClassName, !containsChangeText, "Multiline-ellipsis", "Example of simple multiline ellipsis With line hight.");
+  createStory(stories, "With class name", !containslines, !containslineHeight, containsClassName, !containsChangeText, "Multiline-ellipsis", "Example of simple multiline ellipsis With class name.");
+  createStory(stories, "With change text", !containslines, !containslineHeight, !containsClassName, containsChangeText, "Multiline-ellipsis", "Example of simple multiline ellipsis With change text.");
+
+  function createStory(stories, title, containslines, containslineHeight, containsClassName, containsChangeText, notesTitle, notesText){
+    stories.add(title, () => {
+        const _lines = containslines || containslineHeight ? number('number of lines', 3) : null;
+	      const _lineHeight = containslineHeight ? text('Line height', '18px') : null;
+        const _className = containsClassName ? text('Class name', 'yellow-ellipsis'): null;
+        const _shortText = containsChangeText ? text('Short text', 'Short text - No ellipsis!') :null;
+        const _longText = text('Long text','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et molestie erat, sit amet rutrum purus. Mauris tristique efficitur felis, rutrum scelerisque enim sodales eu. Cras tristique ipsum a elementum auctor. Donec et elit id sapien tempus posuere. Nulla condimentum semper nisi, ac convallis augue dignissim nec. Nunc vestibulum nisi metus, ac rutrum enim consectetur nec. Vivamus volutpat ac risus aliquet iaculis.\nVestibulum et ex egestas, scelerisque enim et, vehicula nisi. Aenean posuere ornare dolor, in laoreet turpis mattis in. Fusce sodales blandit ornare. Donec porta eros vel tellus consequat, a ultricies augue ullamcorper. Vestibulum dolor diam, auctor ac magna quis, aliquet tincidunt odio. Nulla eu cursus metus. Maecenas laoreet in risus vel suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis facilisis orci rhoncus pharetra pretium. Nam blandit arcu lobortis eros luctus lobortis. Integer gravida iaculis finibus.')
+        const _hasEllipsisChanged = text('*(hasEllipsisChanged)', 'Event throws when number of lines or line height or class name changed, see in Action logger tab.');
+        return {
+            props: {
+              showSortText: false,
+              hasEllipsis: true,
+              hasEllipsisChanged: action('Ellipsis changed and its'),
+              _lines, _lineHeight, _className, _shortText, _longText,
+            },
+            template: containsChangeText ? `
+            <multiline-ellipsis
+                [lines]="_lines"
+                [lineHeight]="_lineHeight"
+                [className]="_className"
+                (hasEllipsisChanged)="this.hasEllipsis = $event"
+                (hasEllipsisChanged)="hasEllipsisChanged($event)"
+                >{{ this.showSortText ? _shortText : _longText }}
+            </multiline-ellipsis>
+            <br/>
+            <sdc-button (click)="this.showSortText = !this.showSortText;" text="Toggle Text Length"></sdc-button>
+            <br/>
+            <span class="y">has ellipsis? <b>{{ this.hasEllipsis ? 'yes' : 'no' }}</b></span>`:
+            `<multiline-ellipsis
+                [lines]="_lines"
+                [lineHeight]="_lineHeight"
+                [className]="_className"
+                (hasEllipsisChanged)="this.hasEllipsis = $event"
+                (hasEllipsisChanged)="hasEllipsisChanged($event)"
+                >{{ this.showSortText ? _shortText : _longText }}
+            </multiline-ellipsis>` 
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
diff --git a/stories/angular/notifications.stories.ts b/stories/angular/notifications.stories.ts
new file mode 100644
index 0000000..4e87517
--- /dev/null
+++ b/stories/angular/notifications.stories.ts
@@ -0,0 +1,55 @@
+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 { NotificationModule } from '../../src/angular/notifications/notification.module';
+import { NotificationSettings } from '../../src/angular/notifications/utilities/notification.config';
+
+let stories = storiesOf('Notification', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      ],
+      imports: [
+        NotificationModule
+         
+      ]
+    })
+  )
+  createStory(stories, "All options", true, true, "Notification", "Full example of simple tabs.");
+  // createStory(stories, "Tabs with text", true, false, "Tabs with titles", "Simple tabs with text title.");
+  // createStory(stories, "Tabs with icons", false, true, "Tabs with icons", "Simple tabs with icon title.");
+
+  function createStory(stories, title, containsTitle, containsTitleIcon, notesTitle, notesText){
+    stories.add(title, () => {
+        const _type =  select('Type', ["info", "warning", "error", "success"], 'left', '');
+        const _notifyText = text('Text','notif info message test');
+        const _notifyTitle = text('Title', 'Notif Titile Info');
+        const _sticky = boolean('Sticky', false);
+        const _hasCustomContent = boolean('Has customer content', false);
+        const _duration = number('Duration', 2000);
+        let _notificationSetting = new NotificationSettings(_type, _notifyText, _notifyTitle, _duration, _sticky, _hasCustomContent)
+        // const innerComponentType: Type<any>;
+        // const innerComponentOptions: any;
+        
+
+        return {
+            props: {
+                selectTab: action('select tab changed'),
+                _type, _notifyText, _notifyTitle, _sticky, _hasCustomContent, _duration
+            },
+            template: `
+            <sdc-notification
+               [notificationSetting] = "_notificationSetting"
+            >
+            </sdc-notification>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
diff --git a/stories/angular/popup-menu.stories.ts b/stories/angular/popup-menu.stories.ts
new file mode 100644
index 0000000..1fac579
--- /dev/null
+++ b/stories/angular/popup-menu.stories.ts
@@ -0,0 +1,185 @@
+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 { PopupMenuModule } from '../../src/angular/popup-menu/popup-menu.module';
+import { ButtonsModule } from '../../src/angular/buttons/buttons.module';
+
+
+let stories = storiesOf('Menu', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      ],
+      imports: [
+        PopupMenuModule,
+        ButtonsModule,
+
+      ]
+    })
+  )
+  let containsPosition = true;
+  let containsRelative = true;
+  let containsClassName = true;
+  createMenuListStory(stories, "Menu list All options", containsPosition, containsRelative, containsClassName, "Menu list", "Full example of menu list.");
+  createMenuListStory(stories, "Menu list with position", containsPosition, !containsRelative, !containsClassName, "Menu list", "Full example of menu list with position.");
+  createMenuListStory(stories, "Menu list with relative", !containsPosition, containsRelative, !containsClassName, "Menu list", "Full example of menu list with relative.");
+  createMenuListStory(stories, "Menu list with class", !containsPosition, !containsRelative, containsClassName, "Menu list", "Full example of menu list with class.");
+  
+  createMenuItemStory(stories, "Menu item All options", "Tabs", "Full example of simple tabs.");
+  function createMenuListStory(stories, title, containsPosition, containsRelative, containsClassName, notesTitle, notesText){
+    stories.add(title, () => {
+        const _className = containsClassName ? text('Class name', ''): null;
+        const _relative = containsRelative ? boolean('Relative', true) : true;
+        const _positionLeft = containsPosition ? number('Position left', 0): 0;
+        const _positionTop = containsPosition ? number('Position top', 0): 0; 
+        const _open = containsPosition ? boolean('Menu list open', undefined): false;
+        const _openChange = text('*(openChange)', 'Event throws when menu is open or close, see in Action logger tab.');
+        const _positionChange = text('*(positionChange)', 'Event throws when position changed, see in Action logger tab.');
+
+        return {
+            props: {
+                selectedItemValue: '',
+                selectedItemColor: '',
+                openChanged: action('Menu open status is'),
+                positionChanged: action('Menu position changed to'),
+                showSelectedItem: (itemPlace, color, selectedItem)=> {
+                    selectedItem.innerText = itemPlace;
+                    selectedItem.style.color = color;
+                },
+                 _className, _relative, _positionLeft, _positionTop, _open
+            },
+            template: `
+            <div style="position: relative; width: 400px; height: 200px; background: blue;" 
+                (click)="menu.position = {x:$event.offsetX, y:$event.offsetY}; _open=true;">
+                <span class="message">Click in the box...<br/>
+                    (popup menu is {{menuStatus === undefined ? 'never opened' : (menuStatus ? 'open at '+menuPos.x+' , '+menuPos.y : 'closed')}})<br/>
+                    selected: <span #selectedItem id="selectedItem" [style.color]="selectedItemColor">{{selectedItemValue}}</span>
+                </span>
+                <popup-menu-list #menu
+                    [(open)]="_open" 
+                    [position] = "{x:_positionLeft, y:_positionTop}"
+                    [relative] = "_relative"
+                    [className] = "_className"
+                    (openChange)="menuStatus=$event; openChanged($event)"
+                    (positionChange)="menuPos=$event; positionChanged($event)">
+                    <popup-menu-item (action)="showSelectedItem('First', 'red', selectedItem)">First</popup-menu-item>
+                    <popup-menu-item type="disabled">Disabled</popup-menu-item>
+                    <popup-menu-item type="separator"></popup-menu-item>
+                    <popup-menu-item (action)="showSelectedItem('Second', 'green', selectedItem)">Second</popup-menu-item>
+                    <popup-menu-item>Third (none)</popup-menu-item>
+                </popup-menu-list>
+            </div>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
+
+  function createMenuItemStory (stories, title, notesTitle, notesText){
+    stories.add(title, () => {
+        const _item1ClassName = text('Item1 class name', '');
+        const _item1Type = text('Item1 type', '');
+        
+        const _item2ClassName = text('Item2 class name', '');
+        const _item2Type = text('Item2 type', 'selected');
+
+        const _item3ClassName = text('Item3 class name', '');
+        const _item3Type = text('Item3 type', 'disabled');
+
+        const _item4ClassName = text('Item4 class name', '');
+        const _item4Type = text('Item4 type', 'separator');
+
+        const _item5ClassName = text('Item5 class name', '');
+        const _item5Type = text('Item5 type', '');
+        const _Action = text('*(action)', 'Event throws when select tab changed, see in Action logger tab.');
+
+        return {
+            props: {
+                openManu: (menu) =>{
+                    menu.position = {x:400, y:500};
+                    menu.open = true;
+                },
+                showSelectedItem: action('select menu item'),
+                _item1ClassName, _item1Type, _item2ClassName, _item2Type, _item3ClassName, _item3Type,
+                _item4ClassName, _item4Type, _item5ClassName, _item5Type
+            },
+            template: `
+            <div>
+                <sdc-button text="open menu" (click)="openManu(menu); openMenuList = true"></sdc-button>
+                <br><br>
+                <popup-menu-list #menu>
+                    <popup-menu-item 
+                        [type]="_item1Type"
+                        [className]="_item1ClassName"
+                        (action)="showSelectedItem('First')">
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
+                        <defs>
+                            <path id="add-copy-a1" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
+                        </defs>
+                        <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+                            <use xlink:href="#add-copy-a1"/>
+                        </g>
+                        </svg>
+                        First
+                    </popup-menu-item>
+                    <popup-menu-item 
+                        [type]="_item2Type"
+                        [className]="_item2ClassName"
+                        (action)="showSelectedItem('Selected')">
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
+                        <defs>
+                            <path id="add-copy-a2" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
+                        </defs>
+                        <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+                            <use xlink:href="#add-copy-a2"/>
+                        </g>
+                        </svg>
+                        Selected
+                    </popup-menu-item>
+                    <popup-menu-item 
+                        [type]="_item3Type"
+                        [className]="_item3ClassName">
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
+                        <defs>
+                            <path id="add-copy-a3" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
+                        </defs>
+                        <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+                            <use xlink:href="#add-copy-a3"/>
+                        </g>
+                        </svg>
+                        Disabled
+                    </popup-menu-item>
+                    <popup-menu-item 
+                        [type]="_item4Type"
+                        [className]="_item4ClassName">
+                    </popup-menu-item>
+                    <popup-menu-item 
+                        [type]="_item5Type"
+                        [className]="_item5ClassName"
+                        (action)="showSelectedItem('Second')">
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
+                        <defs>
+                            <path id="add-copy-a4" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
+                        </defs>
+                        <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+                            <use xlink:href="#add-copy-a4"/>
+                        </g>
+                        </svg>
+                        Second
+                    </popup-menu-item>
+                </popup-menu-list>
+            </div>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
+  
diff --git a/stories/angular/radio-button-group.stories.ts b/stories/angular/radio-button-group.stories.ts
new file mode 100644
index 0000000..97f1ce9
--- /dev/null
+++ b/stories/angular/radio-button-group.stories.ts
@@ -0,0 +1,84 @@
+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 { RadioGroupComponent } from '../../src/angular/components';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+
+let stories = storiesOf('Form elements|Radio button group', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      
+      ],
+      imports: [
+          FormElementsModule
+      ]
+    })
+  )
+  let containsLegend = true;
+  let containsDisabled = true;
+  let containsDirection = true;
+  createStory(stories, "All options", containsLegend, containsDisabled, containsDirection, "Radio buttons group", "Full example of radio buttons.");
+  createStory(stories, "With legend", containsLegend, !containsDisabled, !containsDirection, "Radio buttons group", "Example of radio buttons with legend.");
+  createStory(stories, "With disabled", !containsLegend, containsDisabled, !containsDirection, "Radio buttons group", "Example of radio buttons with disabled.");
+  createStory(stories, "With direction", !containsLegend, !containsDisabled, containsDirection, "Radio buttons group", "Example of radio buttons with direction.");
+  function createStory(stories, title, containsLegend, containsDisabled, containsDirection, notesTitle, notesText){
+    stories.add(title, () => {
+        const _legend = containsLegend ? text('legend','Radio Buttons Group legend') : null;
+        const _options = {
+            items: [{
+                value:'val1',
+                name: 'radio8',
+                label: 'Label of Radio1'
+            }, {
+                value:'val2',
+                name: 'radio8',
+                label: 'Label of Radio2'
+            }]
+        };
+        const _disabled = containsDisabled ? boolean('disabled', false) : null;
+        const _direction = containsDirection ? text('direction','horizontal') : null;
+        const _selectedValue = text('selected value', 'val1');
+
+        const _selectedValueChange = text('*(valueChange)', 'Event throws when selected radio button, see in Action logger tab.');
+
+        return {
+            props: {
+                selectRadioButton: action('select radio button'),
+                _legend, _disabled, _direction, _options, _selectedValue
+            },
+            template: `
+            <sdc-radio-group
+                [legend]="_legend"
+                [(value)]="_selectedValue"
+                [options] = "{
+                    items: [
+                        {
+                            value: 'val1',
+                            name: 'radio5',
+                            label: 'Label of Radio 1',
+                            disabled: 'false'
+                        },
+                        {
+                            value: 'val2',
+                            name: 'radio5',
+                            label: 'Label of Radio 2',
+                            disabled: 'false'
+                        }
+                    ]}"
+                [disabled]="_disabled"
+                [direction]="_direction"
+                (valueChange)= "selectRadioButton($event)"
+                ></sdc-radio-group>
+            <br><div>Selected Radio: {{_selectedValue}}</div>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
diff --git a/stories/angular/search-bar.stories.ts b/stories/angular/search-bar.stories.ts
new file mode 100644
index 0000000..634a0c4
--- /dev/null
+++ b/stories/angular/search-bar.stories.ts
@@ -0,0 +1,49 @@
+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 { SearchBarComponent, InputComponent } from '../../src/angular/components';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+
+storiesOf('Form elements|Searchbar', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        SearchBarComponent
+      ],
+      imports: [
+          FormElementsModule
+      ]
+    })
+  )
+  .add('Searchbar', () => {
+      const _label = text('label', 'Searchbar label');
+      const _placeholder = text('placeholder', 'Searchbar placeholder');
+      const _debounceTime = number('debounceTime', 200);
+      const _searchQuery = text('searchQuery', '');
+      const _searchQueryClick = text('*(searchQueryClick)', 'Event throws when click on search query, see in Action logger tab.');
+
+      return {
+        props: {
+            onChange: action('click on search query'),
+            _label, _searchQuery, _placeholder, _debounceTime
+        },
+        template: `
+        <sdc-search-bar
+            [placeholder]="_placeholder"
+            [label]="_label"
+            [debounceTime]="_debounceTime"
+            [(searchQuery)]="_searchQuery"
+            (searchQueryClick)="onChange($event)">
+        </sdc-search-bar>
+        `
+      }
+    },
+    { notes: `<h2>Searchrbar</h2>
+            The search bar component text is updated (after debounce time, default 200 miliseconds) while user write something.
+            Use the KNOBS tab to change values.`
+    }
+)
diff --git a/stories/angular/styles.scss b/stories/angular/styles.scss
new file mode 100644
index 0000000..19dbc57
--- /dev/null
+++ b/stories/angular/styles.scss
@@ -0,0 +1,104 @@
+/*
+Specific styles for storybook
+*/
+
+.sb-show-main {
+    padding: 20px;
+}
+
+.storybook-new-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.storybook-component-wrapper {
+    margin: 10px;
+    padding: 10px;
+}
+
+.storybook-component-info {
+    display: block;
+    text-align: left;
+    margin-bottom: 10px;
+}
+
+.storybook-icons-showcase {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    .storybook-component-wrapper {
+        width: 150px;
+        text-align: center;
+        width: 150px;
+        border: solid 1px #eeeeee;
+        border-radius: 5px;
+    }
+
+    .storybook-component-info {
+        text-align: center;
+        font-size: 11px;
+        user-select: text;
+    }
+
+    .storybook-debug-icon {
+        border: solid 1px #000000;
+    }
+}
+
+/*
+Specific styles for storybook components sample
+*/
+.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;
+ }
+
+
+
+.colors-table {
+    font-size: 13px;
+
+    .color-group {
+
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+
+        .color-section {
+
+        margin: 0 20px 20px 0;
+        text-align: center;
+        
+        div {
+            align-self: center;
+            user-select: text;
+        }
+        $circle-size: 80px;
+        .color-circle {
+            height: $circle-size;
+            width: $circle-size;
+            border-radius: $circle-size;
+            text-align: center;
+        }
+        }
+    }
+}
+
+.storybook-welcome {
+    h1 { font-size: 30px; margin: 12px 0 12px 0; }
+    h2 { font-size: 24px; margin: 12px 0 12px 0; }
+    h3 { font-size: 20px; margin: 12px 0 12px 0; }
+    h4 { font-size: 14px; margin: 4px 0 4px 0; text-decoration: underline; }
+    code { font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px; }
+    ul li { list-style: circle; list-style-position: inside; }
+}
\ No newline at end of file
diff --git a/stories/angular/svg-icon.stories.ts b/stories/angular/svg-icon.stories.ts
new file mode 100644
index 0000000..785a92d
--- /dev/null
+++ b/stories/angular/svg-icon.stories.ts
@@ -0,0 +1,124 @@
+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, SvgIconComponent } from '../../src/angular/components';
+import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module';
+import { Mode, Placement, Size, BackgroundShape, ButtonType, BackgroundColor } from "../../src/angular/common/enums";
+
+const mode = Object.keys(Mode);
+const size = Object.keys(Size);
+const icons_categories: Array<string> = Object.keys(SvgIconComponent.Icons());
+const background_shape: Array<string> = Object.keys(BackgroundShape);
+const background_color: Array<string> = Object.keys(BackgroundColor);
+
+const caption_full_options = 'Icon full options';
+
+let stories = storiesOf('Icons|Show case', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [SvgIconComponent],
+      imports: [
+      ]
+    })
+  );
+
+  background_shape.push(undefined);
+  background_color.push(undefined);
+
+  // resource: #9063CD
+  // services: #71C5E8
+  // red: 
+  
+console.log(icons_categories);
+
+icons_categories.map((category) => 
+
+  stories.add(category, () => {
+
+      let _mode = select('mode', mode, 'primary', '');
+      let _size = select('size', size, 'medium', '');
+      let _backgroundShape = select('backgroundShape', background_shape, '', '');
+      let _backgroundColor = select('backgroundColor', background_color, '', '');
+      const _debug_icon = boolean('Debug icon', false);
+
+      if (category === 'resources_60') {
+        _mode = select('mode', mode, 'white', '');
+        _size = select('size', size, 'x_large', '');        
+        _backgroundShape = select('backgroundShape', background_shape, 'circle', '');
+        _backgroundColor = select('backgroundColor', background_color, 'primary', '');
+      }
+
+      return {
+        props: {
+          _debug_icon, _mode, _size, _backgroundShape, _backgroundColor
+        },
+        template: 
+          `<div class='storybook-icons-showcase'>` + 
+              Object.keys(SvgIconComponent.Icons()[category]).map((iconName) =>
+                `
+                <div class='storybook-component-wrapper'>
+                  <div class='storybook-component-info'>${iconName}</div>
+                  <svg-icon 
+                      [ngClass]="{'storybook-debug-icon': _debug_icon===true}"
+                      category="${category}"
+                      name="${iconName}" 
+                      [mode]="_mode" 
+                      [size]="_size"
+                      [backgroundShape]="_backgroundShape"
+                      [backgroundColor]="_backgroundColor"
+                      >
+                  </svg-icon>
+                </div>
+                `
+            ).join('\n') + 
+          `</div>`
+      }
+    },
+    { notes: `<h2>Showcase of all icons</h2>
+              To see all the options for specific icon, select 'Icon full options' in left panel.
+              `
+    })
+); 
+
+stories.add(caption_full_options, () => {
+        const _mode = select('mode', mode, 'primary', '');
+        const _size = select('size', size, 'x_large', '');
+        const _category = select('category', icons_categories, 'common', '');
+        const _name = select('name', Object.keys(SvgIconComponent.Icons().common), 'alert-triangle-o', '');
+        const _backgroundShape = select('backgroundShape', background_shape, '', '');
+        const _backgroundColor = select('backgroundColor', background_color, '', '');
+        const _disabled = boolean('disabled', false);
+        const _clickable = boolean('clickable', true);
+        const _className = text('className', '');
+
+      return {
+        props: {
+            _mode, _size, _name, _backgroundShape, _backgroundColor, _disabled, _clickable, _className, _category
+        },
+        template: `
+        <div class='storybook-component-wrapper'>
+          <div class='storybook-component-info'>Full options, look in the KNOBS options</div>
+          <svg-icon 
+              [name]="_name" 
+              [mode]="_mode" 
+              [size]="_size"
+              [backgroundShape]="_backgroundShape"
+              [backgroundColor]="_backgroundColor"
+              [disabled]="_disabled"
+              [clickable]="_clickable"
+              [className]="_className"
+              >
+          </svg-icon>
+        </div>
+        `
+      }
+    },
+    { notes: `<h2>SVG icon full example</h2>
+              Full example of SVG icon, use the KNOBS tab to change @Inputs.
+              `
+    }
+  );
diff --git a/stories/angular/tabs.stories.ts b/stories/angular/tabs.stories.ts
new file mode 100644
index 0000000..dac99bb
--- /dev/null
+++ b/stories/angular/tabs.stories.ts
@@ -0,0 +1,55 @@
+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 { TabsModule } from '../../src/angular/tabs/tabs.module';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+
+let stories = storiesOf('Tabs', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      ],
+      imports: [
+          TabsModule,
+          FormElementsModule
+      ]
+    })
+  )
+  let containsTitle = true;
+  let containsTitleIcon = true;
+  createStory(stories, "All options", containsTitle, containsTitleIcon, "Tabs", "Full example of simple tabs.");
+  createStory(stories, "Tabs with text", containsTitle, !containsTitleIcon, "Tabs with titles", "Simple tabs with text title.");
+  createStory(stories, "Tabs with icons", !containsTitle, containsTitleIcon, "Tabs with icons", "Simple tabs with icon title.");
+
+  function createStory(stories, title, containsTitle, containsTitleIcon, notesTitle, notesText){
+    stories.add(title, () => {
+        const _title1 = containsTitle ? text('Tab1 title', 'tab1 ') : null;
+        const _title2 = containsTitle ? text('Tab2 title', 'tab2 ') : null;
+        const _titleIcon1 = containsTitleIcon ? text('Tab1 titleIcon', 'inputs-o') : null;
+        const _titleIcon2 = containsTitleIcon ? text('Tab2 titleIcon', 'edit-file-o') : null;
+        const _active1 = boolean('Tab1 disabled', false);
+        const _active2 = boolean('Tab2 disabled', false);
+        const _selectTab = text('*(selectTab)', 'Event throws when select tab changed, see in Action logger tab.');
+
+        return {
+            props: {
+                selectTab: action('select tab changed'),
+                _title1, _titleIcon1, _active1,
+                _title2, _titleIcon2, _active2, _selectTab
+            },
+            template: `
+            <sdc-tabs (selectedTab)="selectTab($event)">
+                <sdc-tab [title]="_title1" [titleIcon]="_titleIcon1" [active]="_active1">This is tab 1</sdc-tab>
+                <sdc-tab [title]="_title2" [titleIcon]="_titleIcon2" [active]="_active2">This is tab 2</sdc-tab>
+            </sdc-tabs>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
diff --git a/stories/angular/tag-cloud.stories.ts b/stories/angular/tag-cloud.stories.ts
new file mode 100644
index 0000000..ef5748e
--- /dev/null
+++ b/stories/angular/tag-cloud.stories.ts
@@ -0,0 +1,64 @@
+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 { TagCloudModule } from '../../src/angular/tag-cloud/tag-cloud.module';
+
+let stories = storiesOf('Tag Cloud', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      ],
+      imports: [
+        TagCloudModule,
+      ]
+    })
+  )
+  let containsViewOnlyList = true;
+  let containsViewOnly = true;
+  let containsUniqueList = true;
+  createStory(stories, "All options", !containsViewOnlyList, containsViewOnly, containsUniqueList, "Tag cloud", "Full example of simple tag cloud.");
+  createStory(stories, "View only", !containsViewOnlyList, containsViewOnly, !containsUniqueList, "Tag cloud", "Full example of simple tag cloud with View only.");
+  createStory(stories, "View only list", containsViewOnlyList, !containsViewOnly, !containsUniqueList,  "Tag cloud", "Full example of simple tag cloud with View only list.");
+  createStory(stories, "Unique list", !containsViewOnlyList, !containsViewOnly, containsUniqueList, "Tag cloud", "Full example of simple tag cloud with View unique list.");
+
+  function createStory(stories, title, containsViewOnlyList, containsViewOnly, containsUniqueList, notesTitle, notesText){
+    stories.add(title, () => {
+        let _label = text('label', 'Please Enter value');
+        let _list = array('List', ['aaa', 'bbb', 'ccc'], ',');
+        let _isViewOnly = containsViewOnly ? boolean('View only', false) : null;
+        let _listViewOnly = containsViewOnlyList ? array('List of view only params', [0,3], ',') : null;
+        let _isUniqueList = containsUniqueList ? boolean('Unique list', false) : null;
+        let _uniqueErrorMessage = containsUniqueList ? text('Unique error message', 'Unique error') : null;
+        let _placeholder =  text('place holder', 'Type a value and then click enter or');
+        let _listChanged = text('*(listChanged)', 'Event throws when tag cloud list changed, see in Action logger tab.');
+
+        return {
+            props: {
+                listChanged: action('tag cloud list changed'),
+                _label, _list, _isViewOnly, _listViewOnly, _isUniqueList, _uniqueErrorMessage, _placeholder,
+                containsViewOnly
+                
+            },
+            template: `
+            <sdc-tag-cloud
+            #tagCloud
+                [label] = "_label"
+                [(list)] = "_list"
+                [isViewOnly] = "this.containsViewOnly ? _isViewOnly : _listViewOnly"
+                [isUniqueList] = "_isUniqueList"
+                [uniqueErrorMessage] = "_uniqueErrorMessage"
+                [placeholder] = "_placeholder"
+                (listChanged)= "listChanged($event)"
+            >
+            </sdc-tag-cloud>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
diff --git a/stories/angular/tile.stories.ts b/stories/angular/tile.stories.ts
new file mode 100644
index 0000000..b177a7e
--- /dev/null
+++ b/stories/angular/tile.stories.ts
@@ -0,0 +1,81 @@
+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 { TileModule } from '../../src/angular/tiles/tile.module';
+import { SvgIconModule } from '../../src/angular/svg-icon/svg-icon.module';
+import { Mode, Size, BackgroundShape, BackgroundColor } from "../../src/angular/common/enums";
+
+const mode = Object.keys(Mode);
+const size = Object.keys(Size);
+const background_shape: Array<string> = Object.keys(BackgroundShape);
+const background_color: Array<string> = Object.keys(BackgroundColor);
+
+
+let stories = storiesOf('Tiles', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      
+      ],
+      imports: [
+        TileModule,
+        SvgIconModule
+      ]
+    })
+  )
+
+  createStory(stories, "Tiles", "Tiles", "Full example of tiles.");
+
+  function createStory(stories, title, notesTitle, notesText){
+    stories.add(title, () => {
+        const _category = text('Category', 'resources_60')
+        const _name = text('Icon name', 'Border Element_60px')
+        const _mode = select('Mode', mode, 'primary', '');
+        const _size = select('Size', size, 'x_large', '');
+        const _backgroundShape = select('BackgroundShape', background_shape, '', '');
+        const _backgroundColor = select('BackgroundColor', background_color, '', '');
+        const _disabled = boolean('Disabled', false);
+        
+        return {
+            props: {
+                _category, _name, _mode, _size, _backgroundShape, _backgroundColor, _disabled
+            },
+            template: `
+            <sdc-tile>
+                <sdc-tile-header >
+                    <div class="blue">P</div>
+                </sdc-tile-header>
+                <sdc-tile-content>
+                    <div class='storybook-component-wrapper blue'>
+                        <svg-icon 
+                            [ngClass] = "{'storybook-debug-icon': _debug_icon===true}"
+                            [category] = "_category"
+                            [name] = "_name"
+                            [mode] = "_mode" 
+                            [size] = "_size"
+                            [backgroundShape] = "_backgroundShape"
+                            [backgroundColor] = "_backgroundColor"
+                            [disabled] = "_disabled"
+                            >
+                        </svg-icon>
+                    </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>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
diff --git a/stories/angular/tooltip.stories.ts b/stories/angular/tooltip.stories.ts
new file mode 100644
index 0000000..4f1c5f5
--- /dev/null
+++ b/stories/angular/tooltip.stories.ts
@@ -0,0 +1,87 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button, object } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { TooltipModule } from '../../src/angular/tooltip/tooltip.module';
+import { TooltipPlacement, ArrowPlacement } from '../../src/angular/tooltip/tooltip.directive';
+
+let stories = storiesOf('Tooltip', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+      ],
+      imports: [
+        TooltipModule
+      ]
+    })
+  )
+  let containsShortText = true;
+  let containsPlaceMent = true;
+  let containsCustomCssClass = true;
+  let containsArrowOffset = true;
+  let containsArrowPlacement = true;
+  let containsTooltipOffset = true;
+  let containsTemplate = true
+  createStory(stories, "All options", containsShortText, containsPlaceMent, containsCustomCssClass, containsArrowOffset,
+    containsArrowPlacement, containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip.");
+  createStory(stories, "Multi lines", !containsShortText, !containsPlaceMent, !containsCustomCssClass, !containsArrowOffset,
+    !containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Example of Tooltip with multi lines.");
+  createStory(stories, "Placement", containsShortText, containsPlaceMent, !containsCustomCssClass, !containsArrowOffset,
+    !containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Example of Tooltip with placement.");
+  createStory(stories, "Customer css class", containsShortText, !containsPlaceMent, containsCustomCssClass,!containsArrowOffset,
+    !containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip with customer css class.");
+  createStory(stories, "Arrow offset", containsShortText, !containsPlaceMent, !containsCustomCssClass, containsArrowOffset,
+    !containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip with arrow offset.");
+  createStory(stories, "Arrow placement", containsShortText, !containsPlaceMent, !containsCustomCssClass, !containsArrowOffset,
+    containsArrowPlacement, !containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip with arrow placement.");
+  createStory(stories, "Tooltip offset", containsShortText, !containsPlaceMent, !containsCustomCssClass, !containsArrowOffset,
+    !containsArrowPlacement, containsTooltipOffset, !containsTemplate, "Tooltip", "Full example of Tooltip with tooltip offset.");
+  createStory(stories, "Tooltip with template", containsShortText, !containsPlaceMent, !containsCustomCssClass,!containsArrowOffset,
+    !containsArrowPlacement, !containsTooltipOffset, containsTemplate, "Tooltip", "Full example of Tooltip with template.");
+
+  function createStory(stories, title, containsShortText, containsPlaceMent, containsCustomCssClass, containsArrowOffset,
+                containsArrowPlacement, containsTooltipOffset, containsTemplate, notesTitle, notesText){
+    stories.add(title, () => {
+        const _text = text('Text', containsShortText ? 'A short text name, short text' : 'Lorem ipsum dolor sit amet, ' +
+                'consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer ' + 
+                'pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra');
+        const _placement = containsPlaceMent ? object('placement', TooltipPlacement.Top) : TooltipPlacement.Top;               
+        const _customCssClass = containsCustomCssClass ? text('custom css class', 'sdc-custom-tooltip'): null;
+        const _arrowOffset = containsArrowOffset ? number('Arrow offset', 10) : 10;
+        const _arrowPlacement = containsArrowPlacement ? object('Arrow placement',  ArrowPlacement.LeftTop) : ArrowPlacement.LeftTop; 
+        const _tooltipOffset = containsTooltipOffset ? number('Tooltip offset', 3): 3;
+
+        return {
+            props: {
+                selectTab: action('select tab changed'),
+                _text, _placement, _customCssClass, _arrowOffset, _arrowPlacement, _tooltipOffset,
+                containsTemplate
+            },
+            template: `
+            <div style="padding-bottom: 20px; width: 350px;">Lorem ipsum dolor sit amet,
+                <span  style="color: #009fdb"
+                    sdc-tooltip
+                        [tooltip-text] = "_text"
+                        [tooltip-placement] = "_placement"
+                        [tooltip-css-class] = "_customCssClass"
+                        [tooltip-arrow-placement] = "_arrowPlacement"
+                        [tooltip-arrow-offset] = "_arrowOffset"
+                        [tooltip-offset] = "_tooltipOffset"
+                        [tooltip-template] = "containsTemplate ? template : null"
+                        >show tooltip
+                </span>
+            </div>
+            <ng-template #template>
+                <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
+                <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p>
+            </ng-template>
+            `
+        }
+        },
+        { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+        }
+    )
+  }
diff --git a/stories/angular/validation.stories.ts b/stories/angular/validation.stories.ts
new file mode 100644
index 0000000..1214021
--- /dev/null
+++ b/stories/angular/validation.stories.ts
@@ -0,0 +1,184 @@
+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 { ValidationModule } from '../../src/angular/form-elements/validation/validation.module';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+import { RegexPatterns } from '../../src/angular/common/enums';
+import { ButtonsModule } from '../../src/angular/buttons/buttons.module';
+
+let stories = storiesOf('Validation', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [
+        
+      ],
+      imports: [
+        ValidationModule,
+        FormElementsModule,
+        ButtonsModule
+
+      ]
+    })
+  ) 
+  let containRequiredValid = true;
+  let containRegexValid = true;
+  let containCustomValid = true;
+  let containValidationDisabled = true;
+  let containValidatorsDisabled = true;
+  createStory(stories, "All options", containRequiredValid, containRegexValid, containCustomValid, containValidationDisabled,
+        containValidatorsDisabled, "Validations", "Full example of validation.");
+  createStory(stories, "Required validator", containRequiredValid, !containRegexValid, !containCustomValid, !containValidationDisabled,
+        !containValidatorsDisabled, "Validations", "Example of validation with required validator.");
+  createStory(stories, "Regex validator", !containRequiredValid, containRegexValid, !containCustomValid, !containValidationDisabled,
+        !containValidatorsDisabled, "Validations", "Example of validation with regex validator.");
+  createStory(stories, "Custom validator", !containRequiredValid, !containRegexValid, containCustomValid, !containValidationDisabled,
+        !containValidatorsDisabled, "Validations", "Example of validation with custom validator.");
+  createStory(stories, "Validation disabled", !containRequiredValid, !containRegexValid, !containCustomValid, containValidationDisabled,
+        !containValidatorsDisabled, "Validations", "Example of validation with validation disabled.");
+  createStory(stories, "Validator disabled", !containRequiredValid, !containRegexValid, !containCustomValid, !containValidationDisabled,
+        containValidatorsDisabled, "Validations", "Example of validation with validators disabled.");
+
+  let containEnterValue = true
+  createEmailStory(stories, "Email validation", !containEnterValue, "Validations", "Example of email validation.");
+  createEmailStory(stories, "Value entered", containEnterValue, "Validations", "Example of validation with value already entered.");
+
+  function createStory(stories, title, containRequiredValid, containRegexValid, containCustomValid, containValidationDisabled,
+                  containValidatorsDisabled, notesTitle, notesText){
+  stories.add(title, () => {
+        const _validationDisabled = containValidationDisabled ? boolean('Validation disabled', false): false;
+        const _requiredMessage = containRequiredValid ? text('Required Validator message', 'Field is required!'): 'Field is required!';
+        const _regexMessage = containRegexValid ? text('Regex Validator message', 'This is not a number!'): 'This is not a number!';
+        const _customMessage = containCustomValid ? text('custom Validator message', 'The number should be 100'): 'The number should be 100';
+        const _pattern = containRegexValid ? text('Regex Validator pattern', RegexPatterns.numbers): RegexPatterns.numbers;
+
+        const requiredValidDisabled = containValidatorsDisabled ? boolean('Required Validator disabled', false): false;
+        const regexValidDisabled = containValidatorsDisabled ? boolean('Regex Validator disabled', false): false;
+        const customValidDisabled = containValidatorsDisabled ? boolean('Custom Validator disabled', false): false;
+        
+        const _customCallback = containCustomValid ? text ('*(Callback)', 'User function that define a validation'): null;
+        const _validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.');
+
+        return {
+          props: {
+              displayRequiredValid: containRequiredValid || containValidationDisabled || containValidatorsDisabled,
+              displayRegexValid: containRegexValid || containValidatorsDisabled,
+              displayCustomValid: containCustomValid || containValidatorsDisabled,
+              onChange: action('validation valids'),
+              isValueHundred: (value: any) => {
+                return (Number(value) === 100) ? true : false;
+            },
+              _validationDisabled, _requiredMessage, _regexMessage, _customMessage, _pattern,
+              requiredValidDisabled, regexValidDisabled, customValidDisabled
+          },
+          template: `
+          <sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input>
+          <sdc-validation [validateElement]="numberValidator" (validityChanged)="onChange($event)" [disabled]="_validationDisabled">
+              <sdc-required-validator  *ngIf="this.displayRequiredValid" [message]="_requiredMessage" [disabled]="requiredValidDisabled"></sdc-required-validator>
+              <sdc-regex-validator *ngIf="this.displayRegexValid" [message]="_regexMessage" [pattern]="_pattern" [disabled]="regexValidDisabled"></sdc-regex-validator>
+              <sdc-custom-validator *ngIf="this.displayCustomValid" [message]="_customMessage" [callback]="isValueHundred" [disabled]="customValidDisabled"></sdc-custom-validator>
+          </sdc-validation>
+          `
+        }
+    },
+    { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+    }
+    )
+  }
+  function createEmailStory(stories, title, conatainsEnterValue, notesTitle, notesText){
+    stories.add(title, () => {
+          const _message = text('Validation message','This is not a valid email!');
+          const _pattern =  text('Regex validation pattern', RegexPatterns.email);
+          const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.');
+
+          return {
+          props: {
+              inputValue: conatainsEnterValue ? "firstName@" : "",
+              onChange: action('Email validation valids'),
+              _message, _pattern
+          },
+          template: `
+          <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true" [value]="inputValue"></sdc-input>
+          <sdc-validation [validateElement]="email" (validityChanged)="onChange($event)">
+              <sdc-regex-validator [message]="_message" [pattern]="_pattern" ></sdc-regex-validator>
+          </sdc-validation>
+          `
+          }
+      },
+      { notes: `<h2>` + notesTitle + `</h2>` + notesText + `<br>Use the KNOBS tab to change values.`
+      }
+    )
+  }
+
+  stories.add('Validation in drop down', () => {
+    const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.');
+
+    return {
+    props: {
+      options:[
+          {
+            "label": "First Option Label",
+            "value": "firstOptionValue"
+          },
+          {
+            "label": "Second Option Label",
+            "value": "secondOptionValue"
+          },
+          {
+            "label": "Third Option Label",
+            "value": "thirdOptionValue",
+            "type": "Simple"
+          }
+        ],
+        onChange: action('Dropdown validation valids'),
+        isThirdOption: (value: any) => {
+          return value === 'thirdOptionValue';
+        }
+    },
+    template: `
+    <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" 
+          (changed)="onChange(validation.validate())"></sdc-dropdown>
+    <sdc-validation #validation [validateElement]="mydropdown" (validityChanged)="onChange($event)">
+        <sdc-required-validator message="Field is required!"></sdc-required-validator>
+        <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
+    </sdc-validation>
+    `
+    }
+},
+{ notes: `<h2>Validation in dropdown</h2> example of validation in dropdown<br>Use the KNOBS tab to change values.`
+}
+)
+
+stories.add('Validation group', () => {
+  const validityChanged = text('*(validityChanged)', 'Event throws when validation changed, see in Action logger tab.');
+
+  return {
+  props: {
+      emailPattern: RegexPatterns.email,
+      numberPattern: RegexPatterns.numbers,
+      checkValidateGroup: action('Group validation valids')
+  },
+  template: `
+    <sdc-validation-group #validationGroup>
+      <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
+      <sdc-validation [validateElement]="email">
+          <sdc-required-validator message="Field is required!"></sdc-required-validator>
+          <sdc-regex-validator message="This is not a valid email!" [pattern]="this.emailPattern"></sdc-regex-validator>
+      </sdc-validation>
+
+      <sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input>
+      <sdc-validation [validateElement]="numberValidator">
+          <sdc-required-validator message="Field is required!"></sdc-required-validator>    
+          <sdc-regex-validator message="This is not a number!" [pattern]="this.numberPattern"></sdc-regex-validator>
+      </sdc-validation>
+    <sdc-button text="validate group" (click)="checkValidateGroup(validationGroup.validate())"></sdc-button>
+  `
+  }
+},
+{ notes: `<h2>Validation in dropdown</h2> example of validation in dropdown<br>Use the KNOBS tab to change values.`
+}
+)
+
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>
-        `
-        }
-    ]);
diff --git a/stories/ng2-component-lab/autocomplete.component.exp.ts b/stories/ng2-component-lab/autocomplete.component.exp.ts
deleted file mode 100644
index a1fa3dd..0000000
--- a/stories/ng2-component-lab/autocomplete.component.exp.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Autocomplete').group('Autocomplete',
-[
-    {
-        id: 'simpleAutocomplete',
-        title: 'Simple autocomplete data',
-        description: 'Example of auto complete with simple data',
-        showSource: true,
-        context: {
-            data: ['red', 'yellow', 'orange', 'green', 'white', 'black'],
-            selectedOption: '',
-            showSelectedItem: ((value: string) => {
-                alert(value);
-            })
-        },
-        template: `
-        <sdc-autocomplete
-            placeholder="search text"
-            label="search by color:"
-            [data]="data"
-            (itemSelected)="showSelectedItem($event)"
-            >
-        </sdc-autocomplete>
-        `
-    },
-    {
-        id: 'complexAutocomplete',
-        title: 'Complex autocomplete data',
-        description: 'Example of auto complete with complex data',
-        showSource: true,
-        context: {
-            data: [
-                {id: 'redId', color: 'red'},
-                {id: 'yellowId', color: 'yellow'},
-                {id: 'orangeId', color: 'orange'},
-                {id: 'greenId', color: 'green'},
-                {id: 'whiteId', color: 'white'},
-                {id: 'blackId', color: 'black'}
-            ],
-            showSelectedItem: ((value: string) => {
-                alert(value);
-            })
-        },
-        template: `
-        <sdc-autocomplete
-            placeholder="search text"
-            label="search by color:"
-            [data]="data"
-            [dataSchema]="{key: 'id', value: 'color'}"
-            (itemSelected)="showSelectedItem($event)"
-            >
-        </sdc-autocomplete>
-        `
-    },
-    {
-        id: 'complexAutocompleteWithBeData',
-        title: 'Complex autocomplete data from server',
-        description: 'Example of auto complete with complex data from server. (In this example the data is not really filtered, because it is from mock data)',
-        showSource: true,
-        context: {
-            showSelectedItem: ((value: string) => {
-                alert(value);
-            })
-        },
-        template: `
-        <sdc-autocomplete
-            placeholder="search text"
-            label="search by color:"
-            dataUrl="../../../stories/ng2-component-lab/utils/mock.json"
-            [dataSchema]="{key: 'id', value: 'color'}"
-            (itemSelected)="showSelectedItem($event)"
-            >
-        </sdc-autocomplete>
-        `
-    }
-]);
diff --git a/stories/ng2-component-lab/button.component.exp.ts b/stories/ng2-component-lab/button.component.exp.ts
deleted file mode 100644
index 6c5fb04..0000000
--- a/stories/ng2-component-lab/button.component.exp.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-const buttonTypes = ['primary', 'secondary', 'link', 'alert'];
-const buttonSizes = ['large', 'medium', 'small', 'x-small', 'default'];
-const experiment = experimentOn('Button');
-
-experiment.group("Default button", [
-    {
-        id: "defaultButton",
-        showSource: true,
-        description: `Default button, does not need to supply type or size.
-        <br>The size of the button set to 'default' so it will shrink or expand according to the content.
-        `,
-        context: {
-            buttonClicked: ():void => {
-                window.alert("OK");
-            }
-        },
-        title: "Default button",
-        template: `
-            <sdc-button
-                text="Default button long text"
-                testId="longButton"
-                (click)="buttonClicked()">
-            </sdc-button>
-            <sdc-button
-                text="Sample button"
-                (click)="buttonClicked()"
-                [testId]="'defaultButtonTestId'"
-               >
-            </sdc-button>
-
-
-            `
-    }
-]);
-
-buttonTypes.forEach((buttonType) => {
-    [false, true].forEach((buttonDisabled) => {
-        experiment.group(`Button ${buttonType} ${buttonDisabled ? ' disabled' : ''}`, [   {
-            id: `Button ${buttonType}${buttonDisabled ? ' disabled' : ''}`,
-            showSource: true,
-            context: {
-                buttonClicked: ():void => {
-                    window.alert("OK");
-                }
-            },
-            title: `Button ${buttonType}${buttonDisabled ? ' disabled' : ''}`,
-            template: buttonSizes.map((buttonSize) =>
-                `
-                <span style="display: inline-block;">
-                <div>${buttonSize}</div><br>
-                <sdc-button
-                    text="Sample"
-                    type="${buttonType}"
-                    size="${buttonSize}"
-                    (click)="buttonClicked()"
-                    ${buttonDisabled ? ' [disabled]="true"' : ''}>
-                </sdc-button>
-                </span>
-                `).join('\n')
-        }
-        ]);
-    });
-});
-
-experiment.group("Buttons with icons", [
-    {
-        id: "buttonsWithIcons",
-        showSource: true,
-        description: `Buttons with icons forward`,
-        context: {
-            buttonClicked: (): void => {
-                window.alert("OK");
-            }
-        },
-        title: "Button with icons",
-        template: `
-            <sdc-button
-                text="Default button long text"
-                (click)="buttonClicked()"
-                icon_name="settings-o"
-                icon_position="left"
-               >
-            </sdc-button>
-
-            <sdc-button
-                text="Sample button"
-                (click)="buttonClicked()"
-                icon_name="plus-circle-o"
-                icon_position="left"
-                >
-            </sdc-button>
-
-            <sdc-button
-                text="Sample button"
-                 type="secondary"
-                (click)="buttonClicked()"
-                icon_name="plus-circle"
-                icon_position="right"
-                >
-            </sdc-button>
-
-            <sdc-button
-                text="Sample button"
-                type="secondary"
-                (click)="buttonClicked()"
-                icon_name="caret2-right-circle-o"
-                icon_position="right"
-              >
-            </sdc-button>
-
-           `
-    }
-]);
-
-experiment.group("Buttons with spinners", [
-    {
-        id: "buttonsWithSpinnersRight",
-        showSource: true,
-        description: `Click the button to see the spinner shows for 2 seconds`,
-        context: {
-            buttonClicked: (button): void => {
-                button.show_spinner = true;
-                setTimeout(() => {button.show_spinner = false},2000);
-            },
-        },
-        title: "Button with spinner on the right",
-        template: `
-            <sdc-button
-                text="Click to show spinner"
-                (click)="buttonClicked(button)"
-                [show_spinner]="false"
-                spinner_position="right"
-                #button
-               >
-            </sdc-button>
-
-           `
-    },
-    {
-        id: "buttonsWithSpinnersLeft",
-        showSource: true,
-        description: `Click the button to see the spinner shows for 2 seconds`,
-        context: {
-            buttonClicked: (button): void => {
-                button.show_spinner = true;
-                setTimeout(() => {button.show_spinner = false},2000);
-            },
-        },
-        title: "Button with spinner on the left",
-        template: `
-            <sdc-button
-                text="Click to show spinner"
-                (click)="buttonClicked(button)"
-                spinner_position="left"
-                #button
-               >
-            </sdc-button>
-
-           `
-    }
-]);
-export default experiment;
diff --git a/stories/ng2-component-lab/checkbox.component.exp.ts b/stories/ng2-component-lab/checkbox.component.exp.ts
deleted file mode 100644
index 7ac53c9..0000000
--- a/stories/ng2-component-lab/checkbox.component.exp.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Checkbox')
-    .group("Checkbox",[
-      {
-        id: 'checkbox',
-        showSource: true,
-        title: 'Regular Checkbox',
-        description: 'Simple checkbox',
-        template: `<sdc-checkbox label="Simple"></sdc-checkbox>`,
-      },
-      {
-        id: 'checkboxChecked',
-        showSource: true,
-        title: 'Regular Checked Checkbox',
-        description: 'Simple checked checkbox',
-        template: `<sdc-checkbox label="Checked" [checked]="true"></sdc-checkbox>`,
-      },
-      {
-        id: 'disabledCheckbox',
-        showSource: true,
-        title: 'Disabled checkbox',
-        description: 'Simple disabled checkbox',
-        template: `<sdc-checkbox label="Disabled"[disabled]="true"></sdc-checkbox>`,
-      },
-      {
-        id: 'disabledCheckboxChecked',
-        showSource: true,
-        title: 'Disabled checked checkbox',
-        description: 'Simple disabled checked checkbox',
-        template: `<sdc-checkbox label="Disabled" [checked]="true" [disabled]="true"></sdc-checkbox>`,
-      }
-    ]);
diff --git a/stories/ng2-component-lab/checklist.component.exp.ts b/stories/ng2-component-lab/checklist.component.exp.ts
deleted file mode 100644
index 4700a74..0000000
--- a/stories/ng2-component-lab/checklist.component.exp.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-import { ChecklistItemModel } from "../../src/angular/checklist/models/ChecklistItem";
-import { ChecklistModel } from "../../src/angular/checklist/models/Checklist";
-
-const styleCode = 'h5{color:red;} pre{background-color: #d1d1d1; padding: 10px;}';
-const checklistValuesExample1 = [];
-
-const checkListExample1: ChecklistModel =  new ChecklistModel(checklistValuesExample1,
-    [new ChecklistItemModel('apple'),
-        new ChecklistItemModel('banana'),
-        new ChecklistItemModel('orange')]);
-
-const checklistValuesExample2 = [];
-const checkListExample2: ChecklistModel =  new ChecklistModel(checklistValuesExample2,
-    [new ChecklistItemModel('apple', false, false, null, 0),
-        new ChecklistItemModel('banana', false, false, null, 1),
-        new ChecklistItemModel('orange', false, false, null, 2)]);
-
-const checklistValuesExample3 = [];
-const checkListExample3: ChecklistModel =  new ChecklistModel(checklistValuesExample3,
-    [new ChecklistItemModel('apple', false, true),
-        new ChecklistItemModel('banana'),
-        new ChecklistItemModel('orange', false, true)]);
-
-const checklistValuesExample4 = [];
-const checkListExample4: ChecklistModel =  new ChecklistModel(checklistValuesExample4,
-    [new ChecklistItemModel('apple', true, true),
-        new ChecklistItemModel('banana', true),
-        new ChecklistItemModel('orange')]);
-
-const checklistValuesExample5 = [];
-const innerChecklistValues = [];
-const checkListExample5: ChecklistModel =  new ChecklistModel(checklistValuesExample5,
-    [new ChecklistItemModel('apple', false, false,
-            new ChecklistModel(innerChecklistValues,
-                            [new ChecklistItemModel('red'), new ChecklistItemModel('green'), new ChecklistItemModel('yellow')])),
-        new ChecklistItemModel('banana'),
-        new ChecklistItemModel('orange')]);
-
-const checklistFirstLevelValuesExample6 = [];
-const checklistSecondLevelValuesExample6 = [];
-const checklistThirdLevelValuesExample6 = [];
-const checkListExample6: ChecklistModel =  new ChecklistModel(checklistFirstLevelValuesExample6,
-    [new ChecklistItemModel('1', false, false,
-        new ChecklistModel(checklistSecondLevelValuesExample6, [new ChecklistItemModel('1.1'),
-                                                                new ChecklistItemModel('1.2', false, false, new ChecklistModel(checklistThirdLevelValuesExample6, [new ChecklistItemModel('1.2.1'),
-                                                                                                                                                                    new ChecklistItemModel('1.2.2'),
-                                                                                                                                                                    new ChecklistItemModel('1.2.3')])),
-                                                                new ChecklistItemModel('1.3')])),
-        new ChecklistItemModel('2'),
-        new ChecklistItemModel('3')]);
-
-export default experimentOn('Checklist')
-    .group("Checklist",[
-      {
-        id: 'checklist',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample1,
-            checklistValues: checklistValuesExample1
-        },
-        styles: [styleCode],
-        title: 'Checklist',
-        description: `
-            <pre>
-            <h5>The checklistModel parameter:</h5>
-            const checklistValues = [];
-            const checklistModel: ChecklistModel =
-                new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple'),
-                new ChecklistItemModel('banana'),
-                new ChecklistItemModel('orange')]);
-            </pre>
-        `,
-        template: `
-            <span>Selected values: {{checklistValues.toString()}}</span>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `,
-      },
-      {
-        id: 'checklistWithValues',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample2,
-            checklistValues: checklistValuesExample2
-        },
-        styles: [styleCode],
-        title: 'Checklist with values',
-        description: `
-            <pre>
-                <h5>The checklistModel parameter:</h5>
-                const checklistValues = [];
-                const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                    [new ChecklistItemModel('apple', false, false, null, 0),
-                    new ChecklistItemModel('banana', false, false, null, 1),
-                    new ChecklistItemModel('orange', false, false, null, 2)]);
-            </pre>
-        `,
-        template: `
-            <span>Selected values: {{checklistValues.toString()}}</span>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    },
-    {
-        id: 'checklistWithSomeCheckedItems',
-        title: 'Checklist with some checked items',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample3,
-            checklistValues: checklistValuesExample3
-        },
-        styles: [styleCode],
-        description: `
-            <pre><h5>The checklistModel parameter:</h5>
-            const checklistValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple', false, true),
-                new ChecklistItemModel('banana'),
-                new ChecklistItemModel('orange', false, true)]);
-            </pre>
-        `,
-        template: `
-            <span>Selected values: {{checklistValues.toString()}}</span>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    },
-    {
-        id: 'checklistWithSomeDisabledItems',
-        title: 'Checklist with some disabled items',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample4,
-            checklistValues: checklistValuesExample4
-        },
-        styles: [styleCode],
-        description: `
-            <pre><h5>The checklistModel parameter:</h5>
-            const checklistValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                [new ChecklistItemModel('apple', true, true),
-                new ChecklistItemModel('banana', true),
-                new ChecklistItemModel('orange')]);
-            </pre>
-        `,
-        template: `
-            <span>Selected values: {{checklistValues.toString()}}</span>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    },
-    {
-        id: 'twoLevelsChecklist',
-        title: 'Multi-levels checklist',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample5,
-            checklistValues: checklistValuesExample5,
-            innerChecklistValues: innerChecklistValues
-        },
-        styles: [styleCode],
-        description: `
-            <pre>
-            <h5>The checklistModel parameter:</h5>
-            const checklistValues = [];
-            const innerChecklistValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistValues,
-                        [new ChecklistItemModel('apple', false, false,new ChecklistModel(innerChecklistValues,[new ChecklistItemModel('red'),
-                                                                                                                        new ChecklistItemModel('green'),
-                                                                                                                        new ChecklistItemModel('yellow')])),
-                        new ChecklistItemModel('banana'),
-                        new ChecklistItemModel('orange')]);</pre>
-        `,
-        template: `
-            <div>Selected values: {{checklistValues.toString()}}</div>
-            <div>Inner checklist selected values: {{innerChecklistValues.toString()}}</div>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    },
-    {
-        id: 'multiLevelsChecklist',
-        title: 'Multi-levels checklist',
-        showSource: true,
-        context: {
-            checklistModel: checkListExample6,
-            checklistFirstLevelValues: checklistFirstLevelValuesExample6,
-            checklistSecondLevelValues: checklistSecondLevelValuesExample6,
-            checklistThirdLevelValues: checklistThirdLevelValuesExample6
-        },
-        styles: [styleCode],
-        description: `
-            <pre><h5>The checklistModel parameter:</h5>
-            const checklistFirstLevelValues = [];
-            const checklistSecondLevelValues = [];
-            const checklistThirdLevelValues = [];
-            const checklistModel: ChecklistModel =  new ChecklistModel(checklistFirstLevelValues,
-                [new ChecklistItemModel('1', false, false,
-                new ChecklistModel(checklistSecondLevelValues, [new ChecklistItemModel('1.1'),
-                new ChecklistItemModel('1.2', false, false,
-                new ChecklistModel(checklistThirdLevelValues, [new ChecklistItemModel('1.2.1'),
-                    new ChecklistItemModel('1.2.2'),
-                    new ChecklistItemModel('1.2.3')])),
-                    new ChecklistItemModel('1.3')])),
-            new ChecklistItemModel('2'),
-            new ChecklistItemModel('3')]);
-            </pre>
-        `,
-        template: `
-            <div>Selected values: {{checklistFirstLevelValues.toString()}}</div>
-            <div>Second level checklist selected values: {{checklistSecondLevelValues.toString()}}</div>
-            <div>Third level checklist selected values: {{checklistThirdLevelValues.toString()}}</div>
-            <sdc-checklist [checklistModel]="checklistModel"></sdc-checklist>
-        `
-    }
-    ]);
diff --git a/stories/ng2-component-lab/colors.component.exp.ts b/stories/ng2-component-lab/colors.component.exp.ts
deleted file mode 100644
index f082d90..0000000
--- a/stories/ng2-component-lab/colors.component.exp.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-const colorMap = {
-    'white': '#ffffff',
-    'dark-blue': '#0568ae',
-    'blue': '#009fdb',
-    'light-blue': '#1eb9f3',
-    'blue-disabled': '#9dd9ef',
-    'lighter-blue': '#e6f6fb',
-    'black': '#000000',
-    'text-black': '#191919',
-    'rich-black': '#323943',
-    'dark-gray': '#5a5a5a',
-    'gray': '#959595',
-    'light-gray': '#d2d2d2',
-    'silver': '#eaeaea',
-    'light-silver': '#f2f2f2',
-    'lighter-silver':'#f8f8f8',
-    'green': '#4ca90c',
-    'red': '#cf2a2a',
-    'light-red':'#ed4141',
-    'disabled-red':'#f4adad',
-    'yellow': '#ffb81c',
-    'dark-purple': '#702f8a',
-    'purple': '#9063cd',
-    'light-purple': '#caa2dd'
-};
-
-export default experimentOn('Colors', 1)
-    .group("Color palette", [
-        {
-            id: 'colorPalette',
-            showSource: true,
-            context: {
-                colorMap
-            },
-            title: 'Color palette',
-            description: 'Supported design colors',
-            template: `<colors-table [tableTitle]="'Colors'" [tableMapColors]="colorMap"></colors-table>`,
-        }
-    ]
-    );
diff --git a/stories/ng2-component-lab/components.module.ts b/stories/ng2-component-lab/components.module.ts
deleted file mode 100644
index 266f047..0000000
--- a/stories/ng2-component-lab/components.module.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { FormsModule } from "@angular/forms";
-import { SdcUiComponentsModule } from "../../src/angular";
-import { KeysPipe } from "./utils/pipes/keys.pipe";
-import { SearchFilterPipe } from "./pipes/search-filter-pipe";
-import { ColorsTable } from "./components/colors-table.component";
-import { ModalInnerContent } from "./components/modal-inner-content-example.component";
-import { ModalConsumer } from "./components/modal-consumer.component";
-import { SvgIconsTableComponent } from "./components/svg-icons-table.component";
-import { NotificationsExample } from "./components/notifications-example.component";
-import { Mode, Placement, Size } from "./../../src/angular/common/enums";
-
-@NgModule({
-    declarations: [
-        ColorsTable,
-        KeysPipe,
-        ModalInnerContent,
-        ModalConsumer,
-        SearchFilterPipe,
-        SvgIconsTableComponent,
-        NotificationsExample
-    ],
-    imports: [
-        CommonModule,
-        FormsModule,
-        SdcUiComponentsModule
-    ],
-    exports: [
-        CommonModule,
-        SdcUiComponentsModule,
-        ModalInnerContent,
-        NotificationsExample,
-        ColorsTable,
-        SvgIconsTableComponent,
-        ModalConsumer,
-        SearchFilterPipe
-    ],
-    entryComponents: [
-        ModalInnerContent
-    ],
-    providers: [KeysPipe]
-})
-export class ComponentsModule {
-}
diff --git a/stories/ng2-component-lab/components/colors-table.component.ts b/stories/ng2-component-lab/components/colors-table.component.ts
deleted file mode 100644
index fc7bd2f..0000000
--- a/stories/ng2-component-lab/components/colors-table.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
-    selector: "colors-table",
-    template: `
-
-        <h1>{{tableTitle}}</h1>
-        <div class="colors-table">
-              <div class="color-section"  *ngFor="let color of tableMapColors | keys">
-                <div class='sdc-bc-{{color}} color-circle'></div>
-                <div>{{color}}</div>
-                <div>{{tableMapColors[color]}}</div>
-              </div>
-        </div>
-`
-})
-export class ColorsTable {
-
-    @Input() tableTitle:string;
-    @Input() tableMapColors: Object;
-
-    constructor() {
-
-    }
-
-}
diff --git a/stories/ng2-component-lab/components/modal-consumer.component.ts b/stories/ng2-component-lab/components/modal-consumer.component.ts
deleted file mode 100644
index e4a3977..0000000
--- a/stories/ng2-component-lab/components/modal-consumer.component.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Component, Input, Output, EventEmitter } from "@angular/core";
-import { ModalService } from "../../../src/angular/modals/modal.service";
-import { IModalConfig, ModalType, ModalSize } from "../../../src/angular/modals/models/modal-config";
-import { ModalInnerContent } from "./modal-inner-content-example.component";
-import { ButtonComponent } from "../../../src/angular/buttons/button.component";
-import { ModalButtonComponent } from './../../../src/angular/modals/modal-button.component';
-import { Placement } from "../../../src/angular/common/enums";
-import { ModalComponent } from "../../../src/angular/components";
-
-const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
-'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
-
-@Component({
-    selector: 'modal-consumer',
-    template: `<sdc-button [text]="'View Modal'" (click)="openModal()"></sdc-button>`
-})
-export class ModalConsumer {
-    @Input() action: string;
-
-    constructor(private modalService: ModalService) {
-    }
-
-    private openModal = (): void => {
-        if (this[this.action]) {
-            this[this.action]();
-        }
-    }
-
-    private openErrorModal = (): void => {
-        this.modalService.openErrorModal(MODAL_CONTENT, "sampleTestId");
-    }
-
-    private openAlertModal = (): void => {
-        this.modalService.openAlertModal("Alert Title", MODAL_CONTENT, 'Continue', this.onConfirmAction, 'sampleTestId');
-    }
-
-    private openActionModal = (): void => {
-        this.modalService.openActionModal('Standard Modal', MODAL_CONTENT, "OK", this.onConfirmAction, "sampleTestId");
-    }
-
-    private onConfirmAction = (): void => {
-        alert("Action has been confirmed");
-    }
-
-    private openCustomModal1 = (): void => {
-        const modalConfig = {
-            size: ModalSize.medium,
-            title: 'Title',
-            type: ModalType.custom,
-            testId: 'sampleTestIdModal1',
-            buttons: [
-                      {id: "saveButton", text: "Save", callback: this.customModalOnSave1, closeModal: false},
-                      {id: "cancelButton", text: "Cancel", size: 'x-small', type: 'secondary', closeModal: true}
-                    ] as ModalButtonComponent[]
-        } as IModalConfig;
-        this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
-    }
-
-    private customModalOnSave1 = (): void => {
-        const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
-        const saveButton: ModalButtonComponent = currentInstance.getButtonById("saveButton");
-        saveButton.show_spinner = true;
-        saveButton.spinner_position = Placement.right;
-
-        // Show spinner for 2 seconds
-        console.log('Saving example, please wait ...');
-        window.setTimeout((button: ModalButtonComponent) => {
-            button.show_spinner = false;
-            console.log('Finish saving');
-        }, 2000, saveButton);
-    }
-
-    private openCustomModal2 = (): void => {
-        const modalConfig = {
-            size: ModalSize.medium,
-            title: 'Title',
-            type: ModalType.custom,
-            testId: 'sampleTestIdModal2',
-            buttons: [
-                      {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
-                      {text: "Change buttons", callback: this.customModalUpdateButtons2, closeModal: false},
-                      {text: "Disable close", callback: this.customModalUDisableClose2, closeModal: false}
-                    ]
-        } as IModalConfig;
-        this.modalService.openCustomModal(modalConfig, ModalInnerContent, {name: "Sample Content"});
-    }
-
-    private customModalUDisableClose2 = (): void => {
-        const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
-        currentInstance.getCloseButton().disabled = true;
-    }
-
-    private customModalChangeTitle2 = (): void => {
-        const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
-        currentInstance.setTitle('New title');
-    }
-
-    private customModalUpdateButtons2 = (): void => {
-        const currentInstance: ModalComponent = this.modalService.getCurrentInstance();
-        const newButtons = [
-            {text: "Change title", callback: this.customModalChangeTitle2, closeModal: false},
-            {text: "Do nothing", closeModal: false}
-          ] as ModalButtonComponent[];
-        currentInstance.setButtons(newButtons);
-    }
-}
diff --git a/stories/ng2-component-lab/components/modal-inner-content-example.component.ts b/stories/ng2-component-lab/components/modal-inner-content-example.component.ts
deleted file mode 100644
index 1b6bed0..0000000
--- a/stories/ng2-component-lab/components/modal-inner-content-example.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, Input } from "@angular/core";
-
-@Component({
-    selector: "inner-content",
-    template: `
-        <div>
-            <sdc-input [label]="'Enter value'" [(value)]="name"> </sdc-input>
-            <sdc-input [label]="'Enter value'" [(value)]="name"> </sdc-input>
-            <sdc-input [label]="'Enter value'" [(value)]="name"> </sdc-input>
-        </div>
-`
-})
-export class ModalInnerContent {
-
-    @Input() name:string;
-}
diff --git a/stories/ng2-component-lab/components/notifications-example.component.ts b/stories/ng2-component-lab/components/notifications-example.component.ts
deleted file mode 100644
index 91dd95e..0000000
--- a/stories/ng2-component-lab/components/notifications-example.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Component, Input, ViewChild } from "@angular/core";
-import { NotificationsService } from "../../../src/angular/notifications/services/notifications.service";
-import { NotificationSettings } from "../../../src/angular/notifications/utilities/notification.config";
-import { InnerNotifContent } from "../../../src/angular/notifications/notification-inner-content-example.component";
-
-@Component({
-    selector: "notifications-example",
-    template: `
-       <div>
-           <span>Send Success Notification</span>
-           <sdc-button (click)="sendSuccessNotif()" text="Click Me!"></sdc-button>
-       </div>
-       <div>
-           <span>Send Warning Notification</span>
-           <sdc-button (click)="sendWarnNotif()" text="Click Me!"></sdc-button>
-       </div>
-       <div>
-           <span>Send Info Notification</span>
-           <sdc-button (click)="sendInfoNotif()" text="Click Me!"></sdc-button>
-       </div>
-       <div>
-           <span>Send Success MultipleLine Notification</span>
-           <sdc-button (click)="sendMultipleLinesSuceessNotif()" text="Click Me!"></sdc-button>
-       </div>
-       <div>
-           <span>Send Success Custom Notification</span>
-           <sdc-button (click)="sendSuccessCustomNotif()" text="Click Me!"></sdc-button>
-       </div>
-       <sdc-notification-container>
-        </sdc-notification-container>
-`
-})
-export class NotificationsExample {
-
-    constructor(private notifsService : NotificationsService) {
-    }
-
-    sendSuccessNotif() {
-        this.notifsService.push(new NotificationSettings("success", 'notif success message test', 'Notif Title Success'));
-    }
-
-    sendMultipleLinesSuceessNotif() {
-        this.notifsService.push(new NotificationSettings("success", 'notif success message test with a lot of test so we can test multiple line case lets just add blabla bcdesfg hijklmnop qrstuvw xyz abcdesfg hijklmnop qrstuvw xyz', 'Notif Title Success'));
-    }
-
-    sendWarnNotif() {
-        this.notifsService.push(new NotificationSettings("warn", 'notif warn message test', 'Notif Title Warn'));
-    }
-
-    sendInfoNotif() {
-        this.notifsService.push(new NotificationSettings("info", 'notif info message test', 'Notif Title Info'));
-    }
-
-    sendSuccessCustomNotif() {
-        this.notifsService.push(new NotificationSettings( "info", 'notif XYZ', 'Notif Custom XYZ', 10000, false, true, InnerNotifContent, { notifyText : "notif info custom inner message test", notifyTitle : "Notif Custom Inner Title Info"}));
-    }
-}
diff --git a/stories/ng2-component-lab/components/svg-icons-table.component.ts b/stories/ng2-component-lab/components/svg-icons-table.component.ts
deleted file mode 100644
index 732650d..0000000
--- a/stories/ng2-component-lab/components/svg-icons-table.component.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import { Component } from "@angular/core";
-import { Mode, Placement, Size } from "../../../src/angular/common/enums";
-import { SvgIconComponent } from "../../../src/angular/svg-icon/svg-icon.component";
-import { IDropDownOption, DropDownOptionType, DropDownTypes } from "../../../src/angular/form-elements/dropdown/dropdown-models";
-
-const options1: IDropDownOption[] = [
-    {
-        label: 'First Option',
-        value: 'First Option',
-    },
-    {
-        label: 'Second Option',
-        value: 'Second Option',
-    },
-    {
-        label: 'Third Option',
-        value: 'Third Option',
-        type: DropDownOptionType.Simple
-    }
-];
-
-@Component({
-    selector: "svg-icons-table",
-    template: `
-        <div class="icon-showcase">
-            <div>
-                <svg-icon [name]="selectedIcon" [mode]="defaultIconSettings.mode" [size]="defaultIconSettings.size"></svg-icon>
-                Selected icon: <b *ngIf="selectedIcon">{{selectedIcon}}</b><i *ngIf="!selectedIcon">None</i>
-            </div>
-
-            <div class="icon-options-wrapper">
-
-                <div class="icon-options">
-                    <div class="icon-options-dropdowns">
-                        <sdc-dropdown label="Mode" [selectedOption]="{'value': mode, 'label': mode}" [options]="modeOptions" (changed)="mode = $event.value"></sdc-dropdown>
-                        <sdc-dropdown label="Label Placement" [selectedOption]="{'value': labelPlacement, 'label': labelPlacement}" [options]="labelPlacementOptions" [selectedOption]="labelPlacement" (changed)="labelPlacement = $event.value"></sdc-dropdown>
-                        <sdc-dropdown label="Size" [selectedOption]="{'value': size, 'label': size}" [options]="sizeOptions" [selectedOption]="size" (changed)="size = $event.value"></sdc-dropdown>
-                    </div>
-                    <div class="icon-options-checkboxes-wrapper">
-                        <div class="icon-options-checkboxes">
-                            <sdc-checkbox label="Clickable" [checked]="clickable" (checkedChange)="clickable = $event"></sdc-checkbox>
-                            <sdc-checkbox label="Disabled" [checked]="disabled" (checkedChange)="disabled = $event"></sdc-checkbox>
-                        </div>
-                        <div class="icon-options-label">
-                            <sdc-input label="Label" [(value)]="label"></sdc-input>
-                        </div>
-                        <svg-icon-label [name]="selectedIcon" [mode]="mode" [size]="size" [clickable]="clickable" [disabled]="disabled" [label]="label" [labelPlacement]="labelPlacement"></svg-icon-label>
-                    </div>
-                </div>
-
-                <div class="icon-code">
-                    <pre>
-                        &lt;svg-icon-label
-                            [name]="{{selectedIcon}}"
-                            [mode]="{{mode}}"
-                            [size]="{{size}}"
-                            [clickable]="{{clickable}}"
-                            [disabled]="{{disabled}}"
-                            [label]="{{label}}"
-                            [labelPlacement]="{{labelPlacement}}"&gt;
-                        &lt;/svg-icon-label&gt;
-                    </pre>
-                </div>
-            </div>
-
-        </div>
-        <div class="svg-icons-table">
-            <div *ngFor="let iconName of iconsNames" class="svg-icon-cell" [ngClass]="{'selected': selectedIcon === iconName}" (click)="selectIcon(iconName)">
-                <svg-icon-label [name]="iconName" [label]="iconName" labelPlacement="right"></svg-icon-label>
-            </div>
-        </div>
-`,
-    styles: [`
-    .svg-icons-table {
-        display: flex;
-        flex-flow: row wrap;
-        justify-content: flex-start;
-        align-items: stretch;
-        overflow-y: auto;
-    }
-    .svg-icons-table .svg-icon-cell {
-        border: 1px solid #999;
-        padding: 5px;
-        margin: 5px;
-        width: 250px;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-    }
-    .svg-icons-table .svg-icon-cell.selected {
-        border-color: #1eb9f3;
-        background-color: #1eb9f3;
-    }
-    .icon-showcase {
-        margin: 20px 10px;
-        padding: 10px;
-        border: 1px solid #999;
-        background: #eee;
-    }
-    .icon-options-wrapper {
-        display: flex;
-        flex-flow: row wrap;
-        justify-content: flex-start;
-        margin-top: 10px;
-    }
-
-    .icon-options-checkboxes-wrapper {
-        display: flex;
-        flex-flow: row;
-        margin-top: 10px;
-    }
-
-    .icon-options-checkboxes {
-        margin-top: 27px;
-        margin-right: 30px;
-    }
-
-    .icon-options-label {
-        margin-right: 30px;
-    }
-
-    .icon-code pre {
-        user-select: text;
-    }
-
-    sdc-dropdown {
-        display: inline-block;
-        min-width: 160px;
-    }
-
-    sdc-dropdown .sdc-dropdown {
-    }
-`]
-})
-export class SvgIconsTableComponent {
-    public iconsNames: string[];
-    public selectedIcon: string;
-
-    public modeOptions;
-    public sizeOptions;
-    public labelPlacementOptions;
-
-    private mode: Mode;
-    private size: Size;
-    private labelPlacement: Placement;
-    private clickable: boolean;
-    private disabled: boolean;
-    private label: string;
-
-    private defaultIconSettings: {mode: Mode, size: Size};
-
-    constructor() {
-        this.iconsNames = Object.keys(SvgIconComponent.Icons);
-        this.mode = null;
-        this.size = Size.medium;
-        this.clickable = false;
-        this.disabled = false;
-        this.defaultIconSettings = { mode: Mode.info, size: Size.small };
-
-        this.modeOptions = [{value: null, label: 'NONE'}].concat(Object.keys(Mode).map((modeKey) => ({
-            value: modeKey,
-            label: Mode[modeKey]
-        })));
-
-        this.sizeOptions = Object.keys(Size).map((sizeKey) => ({
-            value: sizeKey,
-            label: Size[sizeKey]
-        }));
-
-        this.labelPlacementOptions = Object.keys(Placement).map((placementKey) => ({
-            value: placementKey,
-            label: Placement[placementKey]
-        }));
-
-        this.setDefaults();
-    }
-
-    private setDefaults = (): void => {
-        this.label = 'Some label';
-        this.selectedIcon = "attachment";
-        this.mode = Mode.primary;
-        this.labelPlacement = Placement.right;
-    }
-
-    public selectIcon(iconName) {
-        this.selectedIcon = iconName;
-    }
-}
diff --git a/stories/ng2-component-lab/dropdown.component.exp.ts b/stories/ng2-component-lab/dropdown.component.exp.ts
deleted file mode 100644
index 025409e..0000000
--- a/stories/ng2-component-lab/dropdown.component.exp.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-import { IDropDownOption, DropDownOptionType, DropDownTypes } from "../../src/angular/form-elements/dropdown/dropdown-models";
-
-const options1: IDropDownOption[] = [
-    {
-        label: 'First Option Label',
-        value: 'firstOptionValue',
-    },
-    {
-        label: 'Second Option Label',
-        value: 'secondOptionValue',
-    },
-    {
-        label: 'Third Option Label',
-        value: 'thirdOptionValue',
-        type: DropDownOptionType.Simple
-    }
-];
-
-const options2: IDropDownOption[] = [
-    {
-        label: 'Header Label',
-        value: 'headerValue',
-        type: DropDownOptionType.Header
-    },
-    {
-        label: 'First Option Label',
-        value: 'firstOptionValue',
-        type: DropDownOptionType.Simple
-    },
-    {
-        label: 'Disabled Option Label',
-        value: 'headerValue',
-        type: DropDownOptionType.Disable
-    },
-    {
-        label: 'Second Option Label',
-        value: 'secondOptionValue',
-        type: DropDownOptionType.Simple
-    },
-    {
-        label: 'Ruler Label',
-        value: 'rulerValue',
-        type: DropDownOptionType.HorizontalLine
-    },
-    {
-        label: 'Third Option Label',
-        value: 'thirdOptionValue',
-        type: DropDownOptionType.Simple
-    },
-    {
-        label: 'Fourth Option Label',
-        value: 'FourthOptionValue',
-        type: DropDownOptionType.Simple
-    },
-    {
-        label: 'Fifth Option Label',
-        value: 'fifthOptionValue',
-        type: DropDownOptionType.Simple
-    },
-    {
-        label: 'Ruler Label',
-        value: 'rulerValue',
-        type: DropDownOptionType.HorizontalLine
-    },
-    {
-        label: 'Third Option Label',
-        value: 'thirdOptionValue',
-        type: DropDownOptionType.Simple
-    },
-    {
-        label: 'Fourth Option Label',
-        value: 'FourthOptionValue',
-        type: DropDownOptionType.Simple
-    },
-    {
-        label: 'Fifth Option Label',
-        value: 'fifthOptionValue',
-        type: DropDownOptionType.Simple
-    }
-];
-
-export default experimentOn('DropDown')
-    .group("DropDown", [
-        {
-            id: 'normalDropDown',
-            showSource: true,
-            context: {
-                options: options1,
-                onChange: function(option) {
-                    this.valueSelected = option.value;
-                }
-            },
-            title: 'Normal DropDown',
-            description: 'Normal DropDown',
-            template: `
-            <sdc-dropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 700">{{valueSelected}}</strong></div>
-            `
-        }, {
-            id: 'groupDropDown',
-            showSource: true,
-            context: {
-                options: options2,
-                onChange: function(option) {
-                    this.valueSelected = option.value;
-                }
-            },
-            title: 'DropDown with groups',
-            description: 'DropDown with groups',
-            template: `
-            <sdc-dropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options" (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        },
-        {
-            id: 'groupDropDownPreSelect',
-            showSource: true,
-            context: {
-                options: options2,
-                onChange: function(option) {
-                    this.valueSelected = option.value;
-                }
-            },
-            title: 'DropDown with groups and pre-selected value',
-            description: 'DropDown with groups and pre-selected value',
-            template: `
-            <sdc-dropdown label="Hi I am a label"
-                            placeHolder="Please choose option"
-                            [options]="options"
-                            [selectedOption]="{label: 'does not matter', value: 'firstOptionValue'}"
-                            (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        },
-        {
-            id: 'headlesspDropDown',
-            showSource: true,
-            context: {
-                options: options2,
-                dropDownHedlessType: DropDownTypes.Headless,
-                onChange: function(option) {
-                    this.valueSelected = option.value;
-                }
-            },
-            title: 'Headless and Labeless DropDown',
-            description: 'Headless and labeless DropDown',
-            template: `
-            <button style="margin-bottom: 10px;" SdcDropdownTrigger [dropDown]="dropDown1">Click to toggle!</button>
-            <sdc-dropdown #dropDown1 [options]="options" [type]="dropDownHedlessType" (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        },
-        {
-            id: 'disabledDropDown',
-            showSource: true,
-            context: {
-                options: options2,
-                onChange: function(option) {
-                    this.valueSelected = option.value;
-                }
-            },
-            title: 'Disabled DropDown',
-            description: 'Disabled DropDown',
-            template: `
-            <sdc-dropdown   label="Hi I am a label"
-                            placeHolder="Please choose option"
-                            disabled="true"
-                            [options]="options"
-                            (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        },
-        {
-            id: 'normalAutoDropDown',
-            showSource: true,
-            context: {
-                options: options1,
-                dropDownAutoType: DropDownTypes.Auto,
-                onChange: function(option) {
-                    this.valueSelected = option.value;
-                }
-            },
-            title: 'Normal Auto DropDown',
-            description: 'Normal Auto DropDown',
-            template: `
-            <sdc-dropdown label="Hi I am a label"
-                            placeHolder="Please choose option"
-                            [type]="dropDownAutoType"
-                            [options]="options"
-                            (changed)="onChange($event)"></sdc-dropdown>
-            <div style="margin: 10px 0 30px 0px; font-size:18px">Selected value:<strong style="font-weight: 900">{{valueSelected}}</strong></div>
-            `
-        }
-    ]);
diff --git a/stories/ng2-component-lab/filter-bar.component.exp.ts b/stories/ng2-component-lab/filter-bar.component.exp.ts
deleted file mode 100644
index 12a287d..0000000
--- a/stories/ng2-component-lab/filter-bar.component.exp.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-import { SearchFilterPipe } from './pipes/search-filter-pipe';
-
-const action = (e): void => {
-    console.log("The search query was changed to: ", e);
-};
-
-export default experimentOn('Filter Bar').group('FilterBar', [
-    {
-        id: 'filterBar',
-        title: 'Filter bar',
-        description: `
-            The filter bar component text is updated (after debounce time,
-            default 200 miliseconds) while user write something.
-            In this example the event on search query changed:
-            const action = (e): void => {
-                console.log("The search query was changed to: ", e);
-            };
-        `,
-        context: {
-            onChange: action
-        },
-        showSource: true,
-        template: `
-            <sdc-filter-bar placeholder="filter text"
-                            label="filter example:"
-                            [(searchQuery)]="searchText"
-                            (searchQueryChange)="onChange($event)">
-            </sdc-filter-bar>
-            <br>
-            Text to search: {{searchText}}
-    `
-    },
-    {
-        id: 'filterBarWithData',
-        title: 'Filter bar with data',
-        description: `
-            Example of filter bar component with debounce 100 miliseconds,
-            and with example pipe for filterring.
-        `,
-        context: {
-            data: ['apple', 'banana', 'orange', 'peach']
-        },
-        showSource: true,
-        template: `
-            <sdc-filter-bar placeholder="filter text"
-                            label="filter example:"
-                            [debounceTime]="100"
-                            [(searchQuery)]="searchText">
-            </sdc-filter-bar>
-            <ul style="height: 100px; background-color: #eeeeee;">
-                <li *ngFor="let item of data | PipeSearchFilter:searchText">{{item}}</li>
-            </ul>
-    `
-    }
-]);
diff --git a/stories/ng2-component-lab/infinite-scroll.component.exp.ts b/stories/ng2-component-lab/infinite-scroll.component.exp.ts
deleted file mode 100644
index bd20be5..0000000
--- a/stories/ng2-component-lab/infinite-scroll.component.exp.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-const basicContext = {
-    scrollContainerId: 'scrollContainer',
-    numLines: Array(20).fill(null),
-    hitBottomCount: 0,
-    pageCount: 0,
-    isPageLoading: false,
-    insertPageImmediately: function(pageNum) {
-        const scrollContainerElem: HTMLElement = document.getElementById(this.scrollContainerId);
-        scrollContainerElem.appendChild(document.createElement('hr'));
-        Array(10).fill(null).forEach((_, i) => {
-            const lineElem = document.createElement('div');
-            lineElem.innerHTML = `Page ${pageNum} - line ${i + 1}`;
-            scrollContainerElem.appendChild(lineElem);
-        });
-    },
-    loadPageAsync: function(pageNum, timeout) {
-        return new Promise((resolve) => {
-            setTimeout(() => {
-                this.insertPageImmediately(pageNum);
-                resolve();
-            }, timeout);
-        });
-    },
-    onScrollHitBottom: function() {
-        this.hitBottomCount++;
-    }
-};
-
-const basicStyle = `
-    .scroll-container {
-        margin: 12px;
-        border: none;
-        padding: 5px;
-        width: 200px;
-        height: 100px;
-        overflow: auto;
-        font-size: 20px !important;
-        box-shadow: #666 1px 1px 10px;
-    }
-
-    .example-source {
-        background: #eeeeee;
-        padding: 10px;
-        border: 1px solid #999999;
-    }
-    .example-source pre {
-        overflow: hidden;
-        background: #dddddd;
-        margin-top: 5px;
-        padding: 5px;
-        user-select: text;
-    }
-`;
-const makeBasicStyleDistance = (distance: number) => `
-    .scroll-container::after {
-        display: block;
-        content: '';
-        height: ${distance}px;
-        background: red;
-    }
-`;
-
-export default experimentOn('Infinite-Scroll')
-    .group("Infinite Scroll",[
-      {
-        id: 'infiniteScrollUsage',
-        showSource: true,
-        context: Object.assign({}, basicContext),
-        title: 'Infinite scroll usage',
-        description: 'Infinite scroll usage',
-        styles: [basicStyle],
-        template: `
-        <div (infiniteScroll)="onScrollHitBottom()" class="scroll-container">
-            <div *ngFor="let _i of numLines; let i=index">
-                Line {{i + 1}}
-            </div>
-        </div>
-        Hit bottom for <b>{{hitBottomCount}}</b> times!
-        <div class="example-source">
-            <b>onScrollHitBottom declaration:</b>
-            <pre>{{onScrollHitBottom}}</pre>
-        </div>
-        `
-      },
-      {
-        id: 'infiniteScrollUsageWithDistance',
-        showSource: true,
-        title: 'Infinite scroll usage with distance',
-        context: Object.assign({}, basicContext),
-        styles: [basicStyle, makeBasicStyleDistance(50)],
-        description: '',
-        template: `
-        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="50" class="scroll-container">
-            <div *ngFor="let _i of numLines; let i=index">
-                Line {{i + 1}}
-            </div>
-        </div>
-        Hit bottom for <b>{{hitBottomCount}}</b> times!
-        <div class="example-source">
-            <b>onScrollHitBottom declaration:</b>
-            <pre>{{onScrollHitBottom}}</pre>
-        </div>
-        `
-    },
-    {
-        id: 'infiniteScrollUsageWithExpandingContent',
-        title: 'Infinite scroll usage with expanding content',
-        showSource: true,
-        context: Object.assign({}, basicContext, {
-            scrollContainerId: 'scrollContainer1',
-            onScrollHitBottom: function() {
-                this.hitBottomCount++;
-                this.insertPageImmediately(this.pageCount + 1);
-                this.pageCount++;
-            }
-        }),
-        styles: [basicStyle, makeBasicStyleDistance(20)],
-        template: `
-        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="20" class="scroll-container" id="{{scrollContainerId}}">
-            <div *ngFor="let _i of numLines; let i=index">
-                Line {{i + 1}}
-            </div>
-        </div>
-        Hit bottom for <b>{{hitBottomCount}}</b> times!<br/>
-        Loaded {{pageCount}} pages!
-        <div class="example-source">
-            <b>onScrollHitBottom declaration:</b>
-            <pre>{{onScrollHitBottom}}</pre>
-        </div>
-        `
-    },
-    {
-        id: 'infiniteScrollUsageWithExpandingContentAsynchronous',
-        title: 'Infinite scroll usage with expanding content asynchronous',
-        showSource: true,
-        context: Object.assign({}, basicContext, {
-            scrollContainerId: 'scrollContainer2',
-            onScrollHitBottom: function() {
-                this.hitBottomCount++;
-                if (!this.isPageLoading) {
-                    this.isPageLoading = true;
-                    this.loadPageAsync(this.pageCount + 1, 5000).then(() => {
-                        this.pageCount++;
-                        this.isPageLoading = false;
-                    });
-                }
-            }
-        }),
-        styles: [basicStyle, makeBasicStyleDistance(20)],
-        template: `
-        <div (infiniteScroll)="onScrollHitBottom()" [infiniteScrollDistance]="20" class="scroll-container" id="{{scrollContainerId}}">
-            <div *ngFor="let _i of numLines; let i=index">
-                Line {{i + 1}}
-            </div>
-        </div>
-        Hit bottom for <b>{{hitBottomCount}}</b> times!<br/>
-        Loaded {{pageCount}} pages! <span *ngIf="isPageLoading">LOADING page #{{this.pageCount + 1}} ...</span>
-        <div class="example-source">
-            <b>onScrollHitBottom declaration:</b>
-            <pre>{{onScrollHitBottom}}</pre>
-        </div>
-        `
-    }
-    ]);
diff --git a/stories/ng2-component-lab/input.component.exp.ts b/stories/ng2-component-lab/input.component.exp.ts
deleted file mode 100644
index 7e931d6..0000000
--- a/stories/ng2-component-lab/input.component.exp.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-const valueChange = (value: any): void => {
-    console.log('The value was changed! >>>>', value);
-};
-
-export default experimentOn('Input')
-  .group("Input",[
-      {
-        id: 'normalInput',
-        showSource: true,
-        title: 'Normal input',
-        description: 'Normal input',
-        template: `
-        <sdc-input label="Please Enter value" name="myValue" testId="myTestId"></sdc-input>
-        `
-      },
-      {
-        id: 'disabledInput',
-        showSource: true,
-        title: 'Disabled input',
-        description: 'Disabled input',
-        template: `
-        <sdc-input [disabled]="true"></sdc-input>
-        `
-      },
-      {
-        id: 'InputTypeNumber',
-        showSource: true,
-        title: 'Input type number',
-        description: 'Input type number',
-        template: `
-        <sdc-input type='number'></sdc-input>
-        `
-      },
-      {
-        id: 'Input required',
-        title: 'Input required',
-        description: 'Input required (this add red * to the label, but does not perform validation, use sdc-validation for validation)',
-        showSource: true,
-        template: `
-        <sdc-input label="Please Enter Value" required="true" [maxLength]="5"></sdc-input>
-      `
-      },
-      {
-        id: 'inputWithMaxLength',
-        title: 'Input with max length',
-        description: 'Input with max length',
-        showSource: true,
-        template: `
-        <sdc-input [maxLength]="5"></sdc-input>
-        `
-    },
-    {
-        id: 'inputWithPlaceholder',
-        title: 'Input with placeholder, custom class, and tests ID',
-        description: 'Input with placeholder',
-        showSource: true,
-        template: `
-      <sdc-input placeHolder="Text..." [classNames]="'my-custom-class another-class'" [testId]="'customTestId'"></sdc-input>
-    `
-    },
-    {
-        id: 'inputWithDebounce',
-        title: 'Input with debounce time',
-        description: `<pre>On value change event code:
-        const valueChange = (value: any): void => {
-            console.log('The value was changed! >>>>', value);
-        };
-        This event will happen 5 sec after the change
-        </pre>`,
-        showSource: true,
-        context: {
-            changeEvent: valueChange
-        },
-        template: `
-      <sdc-input [debounceTime]="5000" (valueChange)="changeEvent($event)"></sdc-input>
-      `
-    }]);
diff --git a/stories/ng2-component-lab/modals.component.exp.ts b/stories/ng2-component-lab/modals.component.exp.ts
deleted file mode 100644
index e7e38bc..0000000
--- a/stories/ng2-component-lab/modals.component.exp.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-const sourceStyles:string =`
-    .example-source {
-      background: #eeeeee;
-      padding: 10px;
-      border: 1px solid #999999;
-      margin-top:30px;
-    }
-    .example-source pre {
-      overflow: hidden;
-      background: #dddddd;
-      margin-top: 5px;
-      padding: 5px;
-      user-select: text;
-    }
-    .example-source pre .comment{
-      color:#666;
-      opacity:0.4;
-      font-style:italic;
-      transition: opacity 400ms ease-in;
-    }
-    .example-source pre:hover .comment {
-      opacity:1;
-    }
-`;
-
-export default experimentOn('Modals')
-    .group("Modals", [
-      {
-        id: 'standardModal',
-        showSource: false,
-        title: 'Standard modal',
-        description: 'Opens a modal with a custom title, message, and confirm button with a callback.',
-        template: `
-        <modal-consumer [action]="'openActionModal'"></modal-consumer>
-        <div class="example-source">Source Code:
-        <pre>
-          const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
-            'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
-
-          this.modalService.openActionModal('Standard Modal', MODAL_CONTENT, "OK", this.onConfirmAction, "sampleTestId");
-
-          private onConfirmAction = ():void => {{ '{' }}
-            alert("Action has been confirmed");
-          {{ '}' }};
-        </pre></div>`,
-        styles: [sourceStyles]
-      },
-      {
-        id: 'alertModal',
-        showSource: false,
-        title: 'Alert modal',
-        description: 'Opens a standard alert modal with a custom title and message.',
-        template: `
-
-
-        <modal-consumer [action]="'openAlertModal'"></modal-consumer>
-        <div class="example-source">Source Code:
-        <pre>
-          const MODAL_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
-          'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
-
-          this.modalService.openAlertModal("Alert Title", MODAL_CONTENT, "Continue", this.onConfirmAction, "sampleTestId");
-        </pre></div>`,
-        styles: [sourceStyles]
-      },
-      {
-        id: 'errorModal',
-        showSource: false,
-        title: 'Error modal',
-        description: `Opens a standard error modal with a custom message.`,
-        template: `<modal-consumer [action]="'openErrorModal'"></modal-consumer>
-        <div class="example-source">Source Code:
-        <pre>
-
-          this.modalService.openErrorModal("An error has occurred!", "sampleTestId");
-        </pre></div>`,
-        styles: [sourceStyles]
-      },
-      {
-        id: 'customModal1',
-        showSource: false,
-        title: 'Custom modal 1',
-        description: 'Opens a modal with dynamic inner content and customizable title, buttons, and callbacks.',
-        template: `
-        <modal-consumer [action]="'openCustomModal1'"></modal-consumer>
-        <div class="example-source">Source Code:
-        <pre>
-
-          <span class="comment">//create modal config object </span>
-          let modalConfig:IModalConfig = {{ '{' }}
-          size: ModalSize.small,
-          title: 'Title',
-          type: ModalType.standard,
-          buttons: [
-                    {{ '{' }}text:"Save", size:"'x-small'", callback:this.customModalOnSave, closeModal:false{{ '}' }},
-                    {{ '{' }}text:"Cancel", size:"'x-small'", closeModal:true{{ '}' }}]
-            {{ '}' }};
-
-          <span class="comment">//open modal with dynamically created 'modalInnerContent' example component. Send data object with input 'name'. </span>
-          this.modalService.openCustomModal(modalConfig, ModalInnerContent, {{ '{' }}name: "Sample Content"{{ '}' }});
-
-          private customModalOnDone = ():void => {{ '{' }}
-              let currentInstance:any = this.modalService.getCurrentInstance();
-              alert("Save with result: " + currentInstance.innerModalContent.instance.name);
-          {{ '}' }};
-
-          private customModalOnSave = ():void => {{ '{' }}
-              let currentInstance:any = this.modalService.getCurrentInstance();
-              alert("Save with result: " + currentInstance.innerModalContent.instance.name);
-          {{ '}' }};
-        </pre></div>`,
-        styles: [sourceStyles]
-      },
-      {
-        id: 'customModal2',
-        showSource: false,
-        title: 'Custom modal 2',
-        description: 'Opens a modal with, and change his buttons and title',
-        template: `
-        <modal-consumer [action]="'openCustomModal2'"></modal-consumer>
-        `,
-        styles: [sourceStyles]
-      }
-    ]);
diff --git a/stories/ng2-component-lab/notification.component.exp.ts b/stories/ng2-component-lab/notification.component.exp.ts
deleted file mode 100644
index ba2ba24..0000000
--- a/stories/ng2-component-lab/notification.component.exp.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Notification')
-    .group("Default Notification",[
-        {
-            id: 'notificationContainer',
-            showSource: true,
-            title: 'Notification Container',
-            description: 'container example ...',
-            template: `<notifications-example></notifications-example>`,
-        }]);
diff --git a/stories/ng2-component-lab/pipes/search-filter-pipe.ts b/stories/ng2-component-lab/pipes/search-filter-pipe.ts
deleted file mode 100644
index 5469eb4..0000000
--- a/stories/ng2-component-lab/pipes/search-filter-pipe.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe ({
-    name: 'PipeSearchFilter',
-})
-export class SearchFilterPipe implements PipeTransform {
-    public transform(value, text: string) {
-        if (!text || !text.length) {
-            return value;
-        }
-        return value.filter((item) => {
-            return item.toLowerCase().indexOf(text.toLowerCase()) > -1;
-        });
-    }
-}
diff --git a/stories/ng2-component-lab/popup-menu.component.exp.ts b/stories/ng2-component-lab/popup-menu.component.exp.ts
deleted file mode 100644
index 12da361..0000000
--- a/stories/ng2-component-lab/popup-menu.component.exp.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Menu')
-    .group("Popups",[
-      {
-        id: 'basicPopupMenuStatic',
-        showSource: true,
-        title: 'Basic popup menu (static)',
-        description: 'Basic popup menu (static)',
-        template: `
-        <popup-menu-list [open]="true">
-            <popup-menu-item>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
-                  <defs>
-                    <path id="add-copy-a1" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
-                  </defs>
-                  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-                    <use xlink:href="#add-copy-a1"/>
-                  </g>
-                </svg>
-                First
-            </popup-menu-item>
-            <popup-menu-item type="selected">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
-                  <defs>
-                    <path id="add-copy-a2" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
-                  </defs>
-                  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-                    <use xlink:href="#add-copy-a2"/>
-                  </g>
-                </svg>
-                Selected
-            </popup-menu-item>
-            <popup-menu-item type="disabled">
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
-                  <defs>
-                    <path id="add-copy-a3" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
-                  </defs>
-                  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-                    <use xlink:href="#add-copy-a3"/>
-                  </g>
-                </svg>
-                Disabled
-            </popup-menu-item>
-            <popup-menu-item type="separator"></popup-menu-item>
-            <popup-menu-item>
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
-                  <defs>
-                    <path id="add-copy-a4" d="M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M15,10 L12,10 L12,7 C12,6.4 11.6,6 11,6 C10.4,6 10,6.4 10,7 L10,10 L7,10 C6.4,10 6,10.4 6,11 C6,11.6 6.4,12 7,12 L10,12 L10,15 C10,15.6 10.4,16 11,16 C11.6,16 12,15.6 12,15 L12,12 L15,12 C15.6,12 16,11.6 16,11 C16,10.4 15.6,10 15,10"/>
-                  </defs>
-                  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
-                    <use xlink:href="#add-copy-a4"/>
-                  </g>
-                </svg>
-                Second
-            </popup-menu-item>
-        </popup-menu-list>
-        `
-    },
-    {
-        id: 'basicMenuRelative',
-        title: 'Basic menu (relative)',
-        description: 'Basic menu (relative)',
-        showSource: true,
-        context: {
-            showSelectedItem: (msg, color) => {
-                const elm = document.getElementById('selectedItem');
-                elm.style.color = color;
-                elm.innerHTML = msg;
-            }
-        },
-        styles: [`
-            .message {
-                position: absolute;
-                top: 0; left: 0;
-                color: white;
-            }
-            .click-area {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-            }
-        `],
-        template:
-        `
-        <div style="position: relative; width: 400px; height: 200px; background: blue;">
-            <span class="message">Click in the box...<br/>
-                (popup menu is {{menuStatus === undefined ? 'never opened' : (menuStatus ? 'open at '+menuPos.x+' , '+menuPos.y : 'closed')}})<br/>
-                selected: <span #selectedItem id="selectedItem"></span>
-            </span>
-            <div class="click-area"
-                (click)="menu.position = {x:$event.offsetX, y:$event.offsetY}; mopen=true;">
-                <popup-menu-list [(open)]="mopen" (openChange)="menuStatus=$event" (positionChange)="menuPos=$event" [relative]="true" #menu>
-                    <popup-menu-item (action)="showSelectedItem('First', 'red')">First</popup-menu-item>
-                    <popup-menu-item type="disabled">Disabled</popup-menu-item>
-                    <popup-menu-item type="separator"></popup-menu-item>
-                    <popup-menu-item (action)="showSelectedItem('Second', 'green')">Second</popup-menu-item>
-                    <popup-menu-item>Third (none)</popup-menu-item>
-                </popup-menu-list>
-            </div>
-        </div>
-        `
-    }
-    ]);
diff --git a/stories/ng2-component-lab/radio.component.exp.ts b/stories/ng2-component-lab/radio.component.exp.ts
deleted file mode 100644
index aa3959b..0000000
--- a/stories/ng2-component-lab/radio.component.exp.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Radios')
-    .group("Radios",[
-      {
-        id: 'radioButtonsGroupTwoWaysBinding',
-        showSource: true,
-        context: {
-            selectedValue: "val2"
-        },
-        title: 'Radio buttons group (two ways binding)',
-        description: 'Radio buttons group (two ways binding)',
-        template:
-        `
-        <sdc-radio-group
-            [legend]="'Radio Buttons Group legend'"
-            [(value)]="selectedValue"
-            [options] = "{
-                items: [
-                    {
-                        value: 'val1',
-                        name: 'radio5',
-                        label: 'Label of Radio 1'
-                    },
-                    {
-                        value: 'val2',
-                        name: 'radio5',
-                        label: 'Label of Radio 2'
-                    }
-                ]}"
-            ></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        `
-    },
-    {
-        id: 'radioButtonsGroupDisabled',
-        title: 'Radio buttons group disabled',
-        description: 'Radio buttons group disabled',
-        showSource: true,
-        context: {
-            selectedValue: "val1"
-        },
-        template: `
-        <sdc-radio-group
-            [legend]="'Radio Buttons Group Disabled legend'"
-            [disabled]="true"
-            [value]="selectedValue"
-            [options] = "{
-            items: [{
-                value: 'val1',
-                name: 'radio6',
-                label: 'Label of Radio 1'
-            }, {
-                value: 'val2',
-                name: 'radio6',
-                label: 'Label of Radio 2'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        `
-    },
-    {
-        id: 'radioButtonsGroupPartiallyDisabled',
-        title: 'Radio buttons group partially disabled',
-        description: 'Radio buttons group partially disabled',
-        showSource: true,
-        context: {
-            selectedValue: "val2"
-        },
-        template: `
-        <sdc-radio-group
-            [legend]="'Radio Buttons Group partially disabled'"
-            [(value)]="selectedValue"
-            [options] = "{
-            items: [{
-                value: 'val1',
-                name: 'radio7',
-                label: 'Label of Radio 1'
-            }, {
-                value: 'val2',
-                disabled: 'true',
-                name: 'radio7',
-                label: 'Label of Radio 2'
-            }, {
-                value: 'val3',
-                name: 'radio7',
-                label: 'Label of Radio 3'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        `
-    },
-    {
-        id: 'radioButtonsGroupVertical',
-        title: 'Radio buttons group vertical',
-        description: 'Radio buttons group vertical',
-        showSource: true,
-        context: {
-            selectedValue: "val1"
-        },
-        template: `
-        <sdc-radio-group
-            [legend]="'Radio Buttons Group Vertical legend'"
-            [(value)]="selectedValue"
-            [direction]="'horizontal'"
-            [options]="{
-            items: [{
-                value:'val1',
-                name: 'radio8',
-                label: 'Label of Radio1'
-            }, {
-                value:'val2',
-                name: 'radio8',
-                label: 'Label of Radio2'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        `
-    },
-    {
-        id: 'radioButtonsGroupGetValue',
-        title: 'Radio buttons group get value',
-        description: 'Radio buttons group get value',
-        showSource: true,
-        context: {
-            selectedValue: "val1",
-            getSelectedValue: (val)=>{
-                alert(val);
-            }
-        },
-        template: `
-        <sdc-radio-group
-            #myRadioGroup
-            [legend]="'Radio Buttons Group Vertical legend'"
-            [(value)]="selectedValue"
-            [options]="{
-            items: [{
-                value:'val1',
-                name: 'radio8',
-                label: 'Label of Radio1'
-            }, {
-                value:'val2',
-                name: 'radio8',
-                label: 'Label of Radio2'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        <br><button (click)="getSelectedValue(myRadioGroup.value)">Get selected value</button>
-        `
-    },
-    {
-        id: 'radioButtonsGroupSelectValue',
-        title: 'Radio buttons group select value',
-        description: 'Radio buttons group select value',
-        showSource: true,
-        context: {
-            selectedValue: "val1"
-        },
-        template: `
-        <sdc-radio-group
-            #myRadioGroup
-            [legend]="'Radio Buttons Group Vertical legend'"
-            [(value)]="selectedValue"
-            [options]="{
-            items: [{
-                value:'val1',
-                name: 'radio8',
-                label: 'Label of Radio1'
-            }, {
-                value:'val2',
-                name: 'radio8',
-                label: 'Label of Radio2'
-            }]
-        }"></sdc-radio-group>
-        <br><div>Selected Radio: {{selectedValue}}</div>
-        <br><button (click)="myRadioGroup.value='val2'">Set value to val2</button>
-        `
-    }
-    ]);
diff --git a/stories/ng2-component-lab/search-bar.component.exp.ts b/stories/ng2-component-lab/search-bar.component.exp.ts
deleted file mode 100644
index 4a7e1fd..0000000
--- a/stories/ng2-component-lab/search-bar.component.exp.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Search Bar').group('SearchBar', [
-    {
-        id: 'search-bar',
-        title: 'Search Bar',
-        description: "The search text is updated on click on the magnify",
-        showSource: true,
-        template: `
-        The text to search: {{searchText}}
-        <sdc-search-bar placeholder="search text"
-                        label="search example:"
-                        [searchQuery]="searchText"
-                        (searchQueryClick)="searchText = $event"
-                        >
-        </sdc-search-bar>
-    `
-    }
-]);
diff --git a/stories/ng2-component-lab/svg-icon.component.exp.ts b/stories/ng2-component-lab/svg-icon.component.exp.ts
deleted file mode 100644
index c87727d..0000000
--- a/stories/ng2-component-lab/svg-icon.component.exp.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-import { Mode, Size } from "../../src/angular/common/enums";
-
-export default experimentOn('Icons')
-    .group('SvgIcons', [
-        {
-            id: 'SvgIcons',
-            showSource: false,
-            title: 'SVG Icons',
-            template: `
-            <svg-icons-table></svg-icons-table>
-            `
-        }
-    ]);
diff --git a/stories/ng2-component-lab/tabs.component.exp.ts b/stories/ng2-component-lab/tabs.component.exp.ts
deleted file mode 100644
index ff4c0c5..0000000
--- a/stories/ng2-component-lab/tabs.component.exp.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Tabs').group('Tabs', [
-    {
-        id: 'simpleTabs',
-        title: 'Simple tabs with text title',
-        description: "Simple tabs with text title",
-        showSource: true,
-        template: `
-        <sdc-tabs>
-            <sdc-tab title="tab1">This is tab 1</sdc-tab>
-            <sdc-tab title="tab2">This is tab 2</sdc-tab>
-        </sdc-tabs>
-    `
-    },
-    {
-        id: 'simpleTabsWithIcons',
-        title: 'Simple tabs with icon title',
-        description: "Simple tabs with icon title",
-        showSource: true,
-        template: `
-        <sdc-tabs>
-            <sdc-tab titleIcon="inputs-o">This is tab 1</sdc-tab>
-            <sdc-tab titleIcon="edit-file-o">This is tab 2</sdc-tab>
-        </sdc-tabs>
-    `
-    }
-]);
diff --git a/stories/ng2-component-lab/tag-cloud.component.exp.ts b/stories/ng2-component-lab/tag-cloud.component.exp.ts
deleted file mode 100644
index 83ad03c..0000000
--- a/stories/ng2-component-lab/tag-cloud.component.exp.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-
-export default experimentOn('Tag Cloud').group('Tag Cloud', [
-    {
-        id: 'list',
-        title: 'Simple tag-cloud',
-        description: 'Simple tag-cloud',
-        showSource: true,
-        template: `
-        <sdc-tag-cloud label="Please Enter value"
-                placeholder="Type a value and then click enter or '+'"
-                [list]="['aaa', 'bbb']">
-
-        </sdc-tag-cloud>
-    `
-    },
-    {
-        id: 'unique-tag-cloud',
-        title: 'List with unique validation',
-        description: 'List with unique validation',
-        showSource: true,
-        template: `
-        <sdc-tag-cloud label="Please Enter value"
-                placeholder="Type a value and then click enter or '+'"
-                [list]="['aaa', 'bbb']"
-                [isUniqueList]="true"
-                [uniqueErrorMessage]="'This value is already in the list'">
-
-        </sdc-tag-cloud>
-    `
-    },
-    {
-        id: 'disabled-tag-cloud',
-        title: 'Disabled tag-cloud',
-        description: 'When the parameter isViewOnly = true, the tag-cloud control is disabled',
-        showSource: true,
-        template: `
-        <sdc-tag-cloud label="Please Enter value"
-                placeholder="Type a value and then click enter or '+'"
-                [list]="['aaa', 'bbb']"
-                [isViewOnly]="true">
-
-        </sdc-tag-cloud>
-    `
-    },
-    {
-        id: 'tag-cloud-with-disabled-items',
-        title: 'List with some readonly items',
-        description: 'The parameter isViewOnly can get an array of indexes of tag-cloud items.',
-        showSource: true,
-        template: `
-        <sdc-tag-cloud label="Please Enter value"
-                placeholder="Type a value and then click enter or '+'"
-                [list]="['aaa', 'bbb', 'ccc', 'ddd']"
-                [isViewOnly]="[1,3]">
-
-        </sdc-tag-cloud>
-    `
-    }
-]);
-
diff --git a/stories/ng2-component-lab/tiles.component.exp.ts b/stories/ng2-component-lab/tiles.component.exp.ts
deleted file mode 100644
index 572b6ca..0000000
--- a/stories/ng2-component-lab/tiles.component.exp.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-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>`
-    }
-    ]);
diff --git a/stories/ng2-component-lab/tooltip.directive.exp.ts b/stories/ng2-component-lab/tooltip.directive.exp.ts
deleted file mode 100644
index 9e1dd0b..0000000
--- a/stories/ng2-component-lab/tooltip.directive.exp.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-import { ArrowPlacement, TooltipPlacement } from '../../src/angular/tooltip/tooltip.directive';
-
-const customTemplate = `
-    .sdc-custom-tooltip-template-title {
-        font-size: 20px;
-        font-weight: bold;
-        background-color: $black;
-        color: $white;
-        text-align: center;
-    }
-
-    .sdc-custom-tooltip-template-content {
-        background-color: $black;
-        color: $white;
-        display: inline-block;
-        text-align: center;
-    }
-
-    .sdc-custom-tooltip-template-image {
-        width: 100%;
-        height:100%;
-        display: inline-block;
-        text-align: center;
-        background-color: #ffffff;
-    }
-`;
-
-export default experimentOn('Tooltip')
-    .group("Tooltip",[
-        {
-            id: 'leftAlignmentTextTooltip',
-            showSource: true,
-            title: 'Tooltip with short text (left placement)',
-            description: 'left placement',
-            context: {
-                placement: TooltipPlacement.Left,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            template: `
-                <div style="padding-bottom: 20px; width: 350px;">Lorem ipsum dolor sit amet,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'A short text name, short text'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip
-                    </span>
-                    ,consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero.
-                    Integer pulvinar pellentesque accumsan.
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'A short text name, short text'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip
-                    </span>
-                    Sed hendrerit lacus eu tempus pharetra
-                </div>
-                `
-        },
-        {
-            id: 'leftAlignmentMultiLineTextTooltip',
-            showSource: true,
-            title: 'Tooltip with multi line text (left placement)',
-            description: 'left placement',
-            context: {
-                placement: TooltipPlacement.Left,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            template: `
-                <div style="padding-bottom: 20px;">
-                    The is text example,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip
-                    </span>
-                    , more text
-                </div>
-                `
-        },
-        {
-            id: 'customStyleTooltip',
-            showSource: true,
-            title: 'Tooltip with custom style',
-            description: 'Tooltip with custom style, define your class and style it via css.',
-            context: {
-                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra'
-            },
-            template: `
-                <![CDATA[
-                    .sdc-custom-tooltip {
-                        background-color: $dark-blue;
-                        border-color: $dark-blue;
-                        border-radius: 10px;
-                    }
-                ]]>
-                <div style="padding-bottom: 20px;">
-                    Some text example,
-                    <span style="color: #009fdb" sdc-tooltip [tooltip-text]=text tooltip-css-class='sdc-custom-tooltip'>show tooltip</span>, more text
-                </div>
-                `
-        },
-        {
-            id: 'rightAlignmentHtmlTooltip',
-            showSource: true,
-            title: 'Tooltip with HTML template (right placement)',
-            description: 'right placement',
-            context: {
-                placement: TooltipPlacement.Right,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            styles: [customTemplate],
-            template: `
-                Template Input:
-                <pre><![CDATA[
-                    <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
-                    <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p>
-                ]]></pre>
-
-                <div style="padding-bottom: 20px;">
-                    The is text example,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'This is the tooltip test'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'
-                            [tooltip-template]='template'>show tooltip
-                    </span>
-                    , more text
-                </div>
-
-                <template #template>
-                    <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
-                    <p class="sdc-tooltip-template-content">A long text name, very long, long text ...</p>
-                </template>
-                `
-        },
-        {
-            id: 'rightAlignmentHtmlCustomStyleTooltip',
-            showSource: true,
-            title: 'Tooltip with HTML template and custom style (right placement)',
-            description: 'right placement',
-            context: {
-                placement: TooltipPlacement.Right,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            styles: [customTemplate],
-            template: `
-                Template Input:
-                <pre><![CDATA[
-                    <p class="sdc-custom-tooltip-template-title sdc-tooltip-template-big-title">Title... Title... Title... Title... Title...</p>
-                    <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
-                    <p class="sdc-custom-tooltip-template-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</p>
-                ]]></pre>
-
-                <div style="padding-bottom: 20px;">
-                    The is text example,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'This is the tooltip test'
-                            [tooltip-placement]= 'placement'
-                            tooltip-css-class = 'sdc-custom-tooltip'
-                            [tooltip-arrow-placement] = 'arrowPlacement'
-                            [tooltip-template]='template'>show tooltip
-                    </span>
-                    , more text
-                </div>
-
-                <template #template>
-                    <p class="sdc-custom-tooltip-template-title sdc-tooltip-template-big-title">Title... Title... Title... Title... Title...</p>
-                    <img src="../../../assets/images/logo_onap.png" class="sdc-custom-tooltip-template-image" />
-                    <p class="sdc-custom-tooltip-template-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non, pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra</p>
-                </template>
-                `
-        },
-        {
-            id: 'topAlignmentTextTooltip',
-            showSource: true,
-            title: 'Tooltip with text (top placement)',
-            description: 'top placement',
-            context: {
-                placement: TooltipPlacement.Top,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            template: `
-                <div style="padding-bottom: 20px;">
-                    The is text example,
-                    <span  style="color: #009fdb"
-                        sdc-tooltip
-                            tooltip-text = 'A long text name, very long, long text'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'>show tooltip
-                    </span>
-                    , more text
-                </div>
-                `
-        },
-        {
-            id: 'bottomAlignmentHtmlTooltip',
-            showSource: true,
-            title: 'Tooltip with HTML template (bottom placement)',
-            description: 'bottom placement',
-            context: {
-                placement: TooltipPlacement.Bottom,
-                arrowPlacement: ArrowPlacement.LeftTop
-            },
-            template: `
-                Template Input:
-                <pre><![CDATA[
-                    <div class="sdc-tooltip-template-content">A long text name,</div>
-                    <div class="sdc-tooltip-template-content">very long, long text</div>
-                ]]></pre>
-
-                <div style="width:30%; height: 30px; text-align: center;">
-                    The is text example,
-                    <a style="color: #009fdb; font-size: small; cursor: pointer;"
-                        sdc-tooltip
-                            tooltip-text = 'This is the tooltip test'
-                            [tooltip-placement]= 'placement'
-                            [tooltip-arrow-placement] = 'arrowPlacement'
-                            [tooltip-template]='template' >link example</a>
-                    , more text
-                </div>
-                <template #template>
-                    <div class="sdc-tooltip-template-content">A long text name,</div>
-                    <div class="sdc-tooltip-template-content">very long, long text</div>
-                </template>
-                `
-        },
-    ]);
diff --git a/stories/ng2-component-lab/utils/mock.json b/stories/ng2-component-lab/utils/mock.json
deleted file mode 100644
index 6cdaf3b..0000000
--- a/stories/ng2-component-lab/utils/mock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-[{"id": "redId", "color": "red"},
-{"id": "yellowId", "color": "yellow"},
-{"id": "orangeId", "color": "orange"},
-{"id": "greenId", "color": "green"},
-{"id": "whiteId", "color": "white"},
-{"id": "blackId", "color": "black"}]
diff --git a/stories/ng2-component-lab/validation.component.exp.ts b/stories/ng2-component-lab/validation.component.exp.ts
deleted file mode 100644
index 7f18c93..0000000
--- a/stories/ng2-component-lab/validation.component.exp.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-import { RegexPatterns } from '../../src/angular/common/enums';
-import { DropDownOptionType, IDropDownOption } from './../../src/angular/form-elements/dropdown/dropdown-models';
-
-const options1: IDropDownOption[] = [
-    {
-        label: 'First Option',
-        value: 'First Option',
-    },
-    {
-        label: 'Second Option',
-        value: 'Second Option',
-    },
-    {
-        label: 'Third Option',
-        value: 'Third Option',
-        type: DropDownOptionType.Simple
-    }
-];
-
-export default experimentOn('Validation')
-    .group("Validation", [
-        {
-            id: 'validation1',
-            showSource: true,
-            title: 'Simple validation',
-            description: 'Simple validation (validating that email is valid and that user inserted something in the field). \
-                            By default the validation starts after first key press',
-            context: {
-                emailPattern: RegexPatterns.email
-            },
-            template: `
-                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
-                <sdc-validation [validateElement]="email">
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'validation2',
-            showSource: true,
-            title: 'Simple validation',
-            description: 'Simple validation',
-            context: {
-                numbersPattern: RegexPatterns.numbers,
-                isValueHundred: (value: any) => {
-                    return (Number(value) === 100) ? true : false;
-                }
-            },
-            template: `
-                <sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input>
-                <sdc-validation [validateElement]="numberValidator">
-                    <sdc-regex-validator message="This is not a number!" [pattern]="numbersPattern"></sdc-regex-validator>
-                    <sdc-custom-validator message="The number should be 100" [callback]="isValueHundred"></sdc-custom-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'validation3',
-            showSource: true,
-            title: 'Disabled validation',
-            description: 'Disabled validation',
-            context: {
-                emailPattern: RegexPatterns.email
-            },
-            template: `
-                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
-                <sdc-validation [validateElement]="email" disabled='true'>
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'validation4',
-            showSource: true,
-            title: 'Validation with value already entered',
-            description: 'Validation with value already entered',
-            context: {
-                emailPattern: RegexPatterns.email
-            },
-            template: `
-                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true" value="notvalidemail@"></sdc-input>
-                <sdc-validation [validateElement]="email">
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'validation5',
-            showSource: true,
-            title: 'Validation with validity changed callback',
-            description: 'Simple validation with alert when validity changes',
-            context: {
-                numbersPattern: RegexPatterns.numbers,
-                validityChanged: (newState: boolean) => {
-                    alert("Validity has changed to " + newState);
-                }
-            },
-            template: `
-                <sdc-input #validatorWithCallback label="Please enter a number" [maxLength]="10" required="true"></sdc-input>
-                <sdc-validation [validateElement]="validatorWithCallback" (validityChanged)="validityChanged($event)">
-                    <sdc-regex-validator message="This is not a number!" [pattern]="numbersPattern"></sdc-regex-validator>
-                </sdc-validation>
-            `
-        },
-        {
-            id: 'dropdownWithValidation',
-            showSource: true,
-            context: {
-                options: options1,
-                isThirdOption: (value: any) => {
-                    return value === 'Third Option';
-                }
-            },
-            title: 'DropDown with validation',
-            description: 'DropDown with validation',
-            template: `
-            <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"></sdc-dropdown>
-            <sdc-validation [validateElement]="mydropdown">
-                <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
-            </sdc-validation>
-            `
-        },
-        {
-            id: 'validationGroup',
-            showSource: true,
-            context: {
-                options: options1,
-                emailPattern: RegexPatterns.email,
-                isThirdOption: (value: any) => {
-                    return value === 'Third Option';
-                },
-                validateGroup: (validationGroup) => {
-                    validationGroup.validate();
-                }
-            },
-            title: 'Validation group',
-            description: 'Validation group (activating validation from code)',
-            template: `
-            <sdc-validation-group #validationGroup>
-
-                <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
-                <sdc-validation [validateElement]="email">
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
-                </sdc-validation>
-
-                <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"></sdc-dropdown>
-                <sdc-validation [validateElement]="mydropdown">
-                    <sdc-required-validator message="Field is required!"></sdc-required-validator>
-                    <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
-                </sdc-validation>
-
-            </sdc-validation-group>
-            <sdc-button text="validate group" (click)="validateGroup(validationGroup)"></sdc-button>
-            `
-        }
-    ]);
diff --git a/stories/react/Accordion.stories.js b/stories/react/Accordion.stories.js
deleted file mode 100644
index 85fdae3..0000000
--- a/stories/react/Accordion.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import Accordion from '../../src/react/Accordion.js';
-import HTMLBasic from '../../components/accordion/accordion-basic.html';
-let examples = {
-    Basic: {
-        jsx: <Accordion title='Accordion Title'><div>Accordion body</div></Accordion>,
-        html: HTMLBasic
-    }
-};
-
-const Checkboxes = () => (
-    <Examples examples={examples} />
-);
-
-export default Checkboxes;
diff --git a/stories/react/Checkbox.stories.js b/stories/react/Checkbox.stories.js
deleted file mode 100644
index 3fb3ad1..0000000
--- a/stories/react/Checkbox.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-
-import Checkbox from '../../src/react/Checkbox';
-import HTMLCheckboxChecked from '../../components/checkbox/checkbox-checked.html';
-import HTMLCheckboxUnchecked from '../../components/checkbox/checkbox-unchecked.html';
-import HTMLCheckboxDisabled from '../../components/checkbox/checkbox-disabled.html';
-import HTMLCheckboxDisabledChecked from '../../components/checkbox/checkbox-disabled-checked.html';
-
-let examples = {
-	Checked: {
-		jsx: <Checkbox checked={true} label='This is the checkbox label' value='myVal' onChange={()=>{}} data-test-id='mycheckbox-1' inputRef={() => {} } />,
-		html: HTMLCheckboxChecked
-	},
-	Unchecked: {
-		jsx: <Checkbox label='This is the checkbox label' value='myVal' onChange={()=>{}} data-test-id='mycheckbox-2' inputRef={() => {} } />,
-		html: HTMLCheckboxUnchecked
-	},
-	Disabled: {
-		jsx: <Checkbox label='This is the checkbox label' disabled={true} value='myVal' onChange={()=>{}} data-test-id='mycheckbox-4' inputRef={() => {} } />,
-		html: HTMLCheckboxDisabled
-	},
-	'Disabled and Checked': {
-		jsx: <Checkbox label='This is the checkbox label' disabled={true} checked={true} value='myVal' onChange={()=>{}} data-test-id='mycheckbox-4' inputRef={() => {} } />,
-		html: HTMLCheckboxDisabledChecked
-	}
-};
-
-const Checkboxes = () => (
-	<Examples examples={examples} />
-);
-
-export default Checkboxes;
diff --git a/stories/react/Checklist.stories.js b/stories/react/Checklist.stories.js
deleted file mode 100644
index 0fd089b..0000000
--- a/stories/react/Checklist.stories.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import Checklist from '../../src/react/Checklist.js';
-import HTMLListChecked from '../../components/checklist/checklist-with-checked-items.html';
-import HTMLListDisabled from '../../components/checklist/checklist-with-disabled-items.html';
-const items = [
-    {
-        label: 'apple',
-        value: 'apple',
-        dataTestId: 'apple',
-        checked: true
-    },
-    {
-        label: 'banana',
-        value: 'banana',
-        dataTestId: 'banana',
-        checked: false
-    },
-    {
-        label: 'orange',
-        value: 'orange',
-        dataTestId: 'orange',
-        checked: true
-    }
-];
-
-const itemsDisabled = [
-    {
-        label: 'apple',
-        value: 'apple',
-        dataTestId: 'apple',
-        checked: true,
-        disabled: true
-    },
-    {
-        label: 'banana',
-        value: 'banana',
-        dataTestId: 'banana',
-        checked: false,
-        disabled: true
-    },
-    {
-        label: 'orange',
-        value: 'orange',
-        dataTestId: 'orange',
-        checked: false
-    }
-];
-
-let examples = {
-    Basic: {
-        jsx: <Checklist items={items} onChange={() => { }} />,
-        html: HTMLListChecked
-    },
-    Disabled: {
-        jsx: <Checklist items={itemsDisabled} onChange={() => { }} />,
-        html: HTMLListDisabled
-    }
-};
-
-const ChecklistStory = () => (
-    <Examples examples={examples} />
-);
-
-export default ChecklistStory;
\ No newline at end of file
diff --git a/stories/react/Colors.stories.js b/stories/react/Colors.stories.js
deleted file mode 100644
index d6758ce..0000000
--- a/stories/react/Colors.stories.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, {Component} from 'react';
-
-const colorMap = {
-	'$white': '#ffffff',
-	'$blue': '#009fdb',
-	'$light-blue': '#1eb9f3',
-	'$lighter-blue': '#e6f6fb',
-	'$blue-disabled': '#9dd9ef',
-	'$dark-blue': '#0568ae',
-	'$black': '#000000',
-	'$rich-black': '#323943',
-	'$text-black': '#191919',
-	'$dark-gray': '#5a5a5a',
-	'$gray': '#959595',
-	'$light-gray': '#d2d2d2',
-	'$silver': '#eaeaea',
-	'$light-silver': '#f2f2f2',
-	'$green': '#4ca90c',
-	'$functional-red': '#cf2a2a',
-	'$yellow': '#ffb81c',
-	'$dark-purple': '#702f8a',
-	'$purple': '#9063cd',
-	'$light-purple': '#caa2dd'
-};
-
-function Color({colorName, colorValue}) {
-	return (
-		<div key={colorName} className='color-section'>
-			<div className='color-circle' style={{backgroundColor: colorValue}} />
-			<div>{colorName.replace('$', '')}</div>
-			<div>{colorValue}</div>
-		</div>
-	);
-}
-
-class Colors extends Component {
-
-	render() {
-		return (
-			<div>
-				<h1>Colors Palette</h1>
-					<div className='colors-table'>
-						{
-							Object.keys(colorMap).map(colorName => <Color key={colorName} colorValue={colorMap[colorName]} colorName={colorName}/>)
-						}
-					</div>
-			</div>
-		);
-	}
-
-}
-
-export default Colors;
diff --git a/stories/react/Input.stories.js b/stories/react/Input.stories.js
deleted file mode 100644
index 869bafa..0000000
--- a/stories/react/Input.stories.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import Examples from './utils/Examples.js';
-
-import ReactInput from '../../src/react/Input.js';
-
-import InputDefaultHtml from '../../components/input/input.html';
-import InputRequiredHtml from '../../components/input/input-required.html';
-import InputNumberHtml from '../../components/input/input-number.html';
-import InputViewOnlyHtml from '../../components/input/input-view-only.html';
-import InputDisabledHtml from '../../components/input/input-disabled.html';
-import InputPlaceholderHtml from '../../components/input/input-placeholder.html';
-import InputErrorHtml from '../../components/input/input-error.html';
-
-let examples = {
-	'Input Default': {
-		jsx: <ReactInput name='input1' value='Default' label='I am a label'  onChange={ action('input-change')}/>,
-		html: InputDefaultHtml
-	},
-	'Input Required': {
-		jsx: <ReactInput name='input2' value='Default' label='I am a label'  onChange={ action('input-change')} isRequired/>,
-		html: InputRequiredHtml
-	},
-	'Input Number': {
-		jsx: <ReactInput name='input3' value='3' label='I am a label'  type="number" onChange={ action('input-change')}/>,
-		html: InputNumberHtml
-	},
-	'Input View Only': {
-		jsx: <ReactInput value='Read Only Text'  label='I am a label' onChange={ action('input-change')} readOnly/>,
-		html: InputViewOnlyHtml
-	},
-	'Input Disabled': {
-		jsx: <ReactInput value='Default'  label='I am a label' onChange={ action('input-change')} disabled/>,
-		html: InputDisabledHtml
-	},
-	'Input Placeholder': {
-		jsx: <ReactInput  name='input5' placeholder='Write Here...' label='I am a label' onChange={ action('input-change')}/>,
-		html: InputPlaceholderHtml
-	},
-	'Input Error': {
-		jsx: <ReactInput value='Default' name='input6' label='I am a label' errorMessage='This is the error message' onChange={ action('input-change')}/>,
-		html: InputErrorHtml
-	}
-
-}
-
-const Inputs = () => (
-		<Examples examples={examples} />
-);
-
-export default Inputs;
diff --git a/stories/react/Modal.stories.js b/stories/react/Modal.stories.js
deleted file mode 100644
index 29ff7a5..0000000
--- a/stories/react/Modal.stories.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import Button from '../../src/react/Button.js';
-import Modal  from '../../src/react/Modal.js';
-import Input from '../../src/react/Input.js';
-import HTMLStandardModal from '../../components/modal/standard-modal.html';
-import HTMLAlertModal from '../../components/modal/alert-modal.html';
-import HTMLErrorModal from '../../components/modal/error-modal.html';
-import HTMLCustomModal from '../../components/modal/custom-modal.html';
-
-class Example extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			show: false
-		};
-	}	
-	render() {
-		const { children } = this.props;
-		const { show } = this.state;
-		var childrenWithProps = React.Children.map(children, child => {
-			let childChildrenWithProps = [];
-			if (child.props.children) {
-				let childChildren = child.props.children;
-				 	childChildrenWithProps = React.Children.map(childChildren, child =>
-					React.cloneElement(child, { onClose: ()=>this.setState({show: !show}) }));
-
-			}							
-			return React.cloneElement(child, { show: this.state.show, onClose: ()=>this.setState({show: !show}), children: childChildrenWithProps});
-		}
-		);
-
-		return (
-			<div>
-				<Button onClick={() => this.setState({show: !show})}>Modal</Button>
-				{childrenWithProps}
-			</div>
-		);
-	}
-} 
- 
-const ModalBody = () => {
-	return (
-	<div>
-		<Input
-			name='input1'
-			value='Default'
-			label='I am a label'			
-			type='text' />
-		<Input
-			name='input1'
-			value='Default'
-			label='I am a label'			
-			type='text' />
-		<Input
-			name='input1'
-			value='Default'
-			label='I am a label'			
-			type='text' />
-					
-	</div>);
-};
-
-const BODY_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
- 'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
-
-const isShown = false;
-
-let examples = {
-	Standard: {
-		jsx: <Example>
-				<Modal show={() => isShown()} size='small'>
-					<Modal.Header><Modal.Title>Standard Modal</Modal.Title></Modal.Header>
-					<Modal.Body>
-						{BODY_TEXT}
-					</Modal.Body>
-					<Modal.Footer actionButtonText='Yes' actionButtonClick={()=>{}}/>
-				</Modal>
-			</Example>,
-		html: HTMLStandardModal,		
-		exclude: 'Example',
-		renderFromJsx: true
-	},
-	Alert: {
-		jsx: <Example>
-				<Modal show={() => isShown()} type='alert' size='small'>
-					<Modal.Header type='alert'><Modal.Title>Title</Modal.Title></Modal.Header>
-					<Modal.Body>
-						{BODY_TEXT}	
-					</Modal.Body>
-					<Modal.Footer closeButtonText='Ok'/>
-				</Modal>
-			</Example>,
-		html: HTMLAlertModal,
-		exclude: 'Example',
-		renderFromJsx: true
-	},
-	Error: {
-		jsx: <Example>
-				<Modal show={() => isShown()} size='small' type='error'>
-					<Modal.Header onClose={()=>isShown(false)} type='error'><Modal.Title>Title</Modal.Title></Modal.Header>
-					<Modal.Body>
-						{BODY_TEXT}	
-					</Modal.Body>
-					<Modal.Footer onClose={()=>isShown(false)} closeButtonText='Ok'/>
-				</Modal>
-			</Example>,
-		html: HTMLErrorModal,
-		exclude: 'Example',
-		renderFromJsx: true
-	},
-	
-	Custom: {
-		jsx: <Example>
-				<Modal show={() => isShown()} type='custom'>
-					<Modal.Header type='custom'><Modal.Title>Title</Modal.Title></Modal.Header>
-					<Modal.Body>
-						<ModalBody/>
-					</Modal.Body>
-					<Modal.Footer  actionButtonText='Ok' actionButtonClick={()=>{}}/>
-				</Modal>
-			</Example>,
-		html: HTMLCustomModal,	
-		exclude: 'Example',
-		renderFromJsx: true					 
-	}
-};
-
-const Modals = () => (
-    <Examples examples={examples}/>
-);
-
-export default Modals;
\ No newline at end of file
diff --git a/stories/react/Panel.stories.js b/stories/react/Panel.stories.js
deleted file mode 100644
index f87eefb..0000000
--- a/stories/react/Panel.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import Panel from '../../src/react/Panel.js';
-import Checkbox from '../../src/react/Checkbox.js';
-import HTMLBasic from '../../components/panel/basic-panel.html';
-let examples = {
-    Basic: {
-        jsx:
-            <Panel>
-                <h3>Panel</h3>
-                <Checkbox label='filter-item' />
-                <Checkbox checked label='filter-item-checked' />
-            </Panel>,
-        html: HTMLBasic
-    }
-};
-
-const PanelStory = () => (
-    <Examples examples={examples} />
-);
-
-export default PanelStory;
diff --git a/stories/react/PopupMenu.stories.js b/stories/react/PopupMenu.stories.js
deleted file mode 100644
index 9d94522..0000000
--- a/stories/react/PopupMenu.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-
-import React from 'react';
-import Examples from './utils/Examples.js';
-import PopupMenu from '../../src/react/PopupMenu.js';
-import PopupMenuItem from '../../src/react/PopupMenuItem.js';
-import HTMLPopupMenu from '../../components/menu/popup-menu.html';
-import HTMLPopupMenuRelative from '../../components/menu/relative-popup-menu.html';
-
-let examples = {
-	'Basic popup menu (static)': {
-		jsx: <PopupMenu onMenuItemClick={() => {}}>
-				<PopupMenuItem itemId='1' value='item 1 (selected)' selected/>
-				<PopupMenuItem itemId='2' value='item 2' disabled/>
-				<PopupMenu.Separator />
-				<PopupMenuItem itemId='3' value='item 3'/>
-				<PopupMenuItem itemId='4' value='custom action' onClick={function customCallback() {}}/>
-			</PopupMenu>,
-		html: HTMLPopupMenu
-	},
-	'Basic popup menu (relative)': {
-		jsx: <div className='sdc-popup-menu'>
-				<PopupMenu onMenuItemClick={()=> {}} position={{x: 10, y: 10}} relative>
-					<PopupMenuItem itemId='1' value='item 1 (selected)' selected/>
-					<PopupMenuItem itemId='2' value='item 2' disabled/>
-					<PopupMenu.Separator />
-					<PopupMenuItem itemId='3' value='item 3' onClick={function customCallback() {}}/>
-				</PopupMenu>
-			</div>,
-		html: HTMLPopupMenuRelative
-	}
-};
-
-const PopupMenuReactComponent = () => (
-	<Examples examples={examples} />
-);
-
-export default PopupMenuReactComponent;
\ No newline at end of file
diff --git a/stories/react/Radio.stories.js b/stories/react/Radio.stories.js
deleted file mode 100644
index 151f947..0000000
--- a/stories/react/Radio.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-
-import Radio from '../../src/react/Radio';
-import HTMLRadioChecked from '../../components/radio/radio-checked.html';
-import HTMLRadioUnchecked from '../../components/radio/radio-unchecked.html';
-import HTMLRadioDisabled from '../../components/radio/radio-disabled.html';
-import HTMLRadioDisabledChecked from '../../components/radio/radio-disabled-checked.html';
-
-let examples = {
-	Checked: {
-		jsx: <Radio name='grp1' checked={true} label='This is the radio label' value='myVal' onChange={()=>{}} data-test-id='myradio-1' inputRef={() => {} } />,
-		html: HTMLRadioChecked
-	},
-	Unchecked: {
-		jsx: <Radio name='grp2' label='This is the radio label' value='myVal' onChange={()=>{}} data-test-id='myradio-2' inputRef={() => {} } />,
-		html: HTMLRadioUnchecked
-	},
-	Disabled: {
-		jsx: <Radio name='grp3' label='This is the radio label' disabled={true} value='myVal' onChange={()=>{}} data-test-id='myradio-4' inputRef={() => {} } />,
-		html: HTMLRadioDisabled
-	},
-	'Disabled and Checked': {
-		jsx: <Radio name='grp4' label='This is the radio label' disabled={true} checked={true} value='myVal' onChange={()=>{}} data-test-id='myradio-4' inputRef={() => {} } />,
-		html: HTMLRadioDisabledChecked
-	}
-};
-
-const Radios = () => (
-	<Examples examples={examples} />
-);
-
-export default Radios;
diff --git a/stories/react/RadioGroup.stories.js b/stories/react/RadioGroup.stories.js
deleted file mode 100644
index 912f9b9..0000000
--- a/stories/react/RadioGroup.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-
-import RadioGroup from '../../src/react/RadioGroup';
-import HTMLRadioGroup from '../../components/radioGroup/radio-group.html';
-import HTMLRadioGroupValue from '../../components/radioGroup/radio-group-value.html';
-import HTMLRadioGroupDisabled from '../../components/radioGroup/radio-group-disabled.html';
-import HTMLRadioGroupNoTitle from '../../components/radioGroup/radio-group-no-title.html';
-
-let examples = {
-	'Value': {
-		jsx: <RadioGroup name='grp2' value='1' title='Group B' onChange={()=>{}} data-test-id='grp2' options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />,
-		html: HTMLRadioGroupValue
-	},
-	'No Value': {
-		jsx: <RadioGroup name='grp3' title='Group C' onChange={()=>{}} data-test-id='grp3' options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />,
-		html: HTMLRadioGroup
-	},
-	'Disabled': {
-		jsx: <RadioGroup name='grp4' disabled={true} title='Group D' onChange={()=>{}} data-test-id='grp4' options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />,
-		html: HTMLRadioGroupDisabled
-	},
-	'No title': {
-		jsx: <RadioGroup name='grp5' onChange={()=>{}} data-test-id='grp4' options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />,
-		html: HTMLRadioGroupNoTitle
-	}
-
-};
-
-const RadioGroups = () => (
-	<Examples examples={examples} />
-);
-
-export default RadioGroups;
diff --git a/stories/react/SVGIcon.stories.js b/stories/react/SVGIcon.stories.js
deleted file mode 100644
index 2c2ffc2..0000000
--- a/stories/react/SVGIcon.stories.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import DropdownMenu from './utils/components/DropdownMenu.js';
-import SVGIcon from '../../src/react/SVGIcon.js';
-
-const iconLabelPositions = [
-	'', 'bottom', 'top', 'left', 'right'
-];
-
-const iconColors = [
-	'',
-	'primary',
-	'secondary',
-	'positive',
-	'negative',
-	'warning'
-];
-
-const disabledStates = ['false', 'true'];
-
-function buildExamples({iconName, iconLabel, labelPosition, color, disabled}) {
-	return {
-		Example: {
-			jsx: <SVGIcon
-				label={iconLabel}
-				labelPosition={labelPosition}
-				color={color}
-				name={iconName}
-				disabled={disabled === 'true'} />
-		}
-	};
-}
-
-const IconTable = ({onClick}) => (
-	<div className='icons-table'>
-		{ICON_NAMES.map(icon => (
-			<div key={icon} className='icon-section'>
-				<SVGIcon
-					onClick={() => onClick(icon)}
-					label={icon}
-					iconClassName='storybook-small'
-					name={icon} />
-			</div>
-		))}
-	</div>
-);
-
-class Icons extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			iconName: ICON_NAMES[0],
-			iconLabel: '',
-			labelPosition: iconLabelPositions[0],
-			color : iconColors[0]
-		};
-	}
-
-	render() {
-		let {iconName, iconLabel, labelPosition, color, disabled} = this.state;
-		return (
-			<div className='icons-screen'>
-				<h1>Icons</h1>
-				<div className='icons-option-selector'>
-					<DropdownMenu
-						title='Icon name'
-						value={iconName}
-						onChange={e => this.setState({iconName: e.target.value})}
-						options={ICON_NAMES} />
-					<div className='option-container'>
-						<label>Icon label</label>
-						<input value={iconLabel} onChange={e => this.setState({iconLabel: e.target.value})}/>
-					</div>
-					<DropdownMenu
-						title='Label position'
-						value={labelPosition}
-						onChange={e => this.setState({labelPosition: e.target.value})}
-						options={iconLabelPositions} />
-					<DropdownMenu
-						title='Color'
-						value={color}
-						onChange={e => this.setState({color: e.target.value})}
-						options={iconColors} />
-					<DropdownMenu
-						title='Disabled'
-						value={disabled}
-						onChange={e => this.setState({disabled: e.target.value})}
-						options={disabledStates} />
-				</div>
-				<Examples examples={buildExamples({iconName, iconLabel, labelPosition, color, disabled})} />
-				<IconTable onClick={icon => this.setState({iconName: icon})} />
-				<div className='missing-icon-section'>
-					<div >You will see the following if the icon name you used is not found:</div>
-					<SVGIcon
-						onClick={() => {}}
-						name='MissingIcon' />
-				</div>
-			</div>
-		);
-	};
-}
-
-export default Icons;
diff --git a/stories/react/Tabs.stories.js b/stories/react/Tabs.stories.js
deleted file mode 100644
index 74f163c..0000000
--- a/stories/react/Tabs.stories.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import {default as TabsComp} from '../../src/react/Tabs.js';
-import Tab from '../../src/react/Tab.js';
-import HTMLTabsHeader from '../../components/tabs/tabs-header.html';
-import HTMLTabsDisabled from '../../components/tabs/tabs-disabled.html';
-import HTMLTabsMenu from '../../components/tabs/tabs-menu.html';
-
-let examples = {
-	'Menu Tabs': {
-		jsx: <TabsComp type='menu' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
-			<Tab title='tab 1' tabId='1'>
-				<div>This is the active tab content</div>
-			</Tab>
-			<Tab title='tab 2' tabId='2' />
-			<Tab title='tab 3' tabId='3' />
-		</TabsComp>,
-		html: HTMLTabsMenu
-	},
-	'Header Tabs': {
-		jsx: <TabsComp type='header' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
-			<Tab title='tab 1' tabId='1'>
-				<div>This is the active tab content</div>
-			</Tab>
-			<Tab title='tab 2' tabId='2' />
-			<Tab title='tab 3' tabId='3' />
-		</TabsComp>,
-		html: HTMLTabsHeader
-	},
-	'Disabled Tabs': {
-		jsx: (
-			<TabsComp type='header' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
-				<Tab title='tab 1' tabId='1'>
-					<div>This is the active tab content</div>
-				</Tab>
-				<Tab title='tab 2' tabId='2' disabled/>
-				<Tab title='tab 3' tabId='3' disabled/>
-			</TabsComp>
-		),
-		html: HTMLTabsDisabled
-	}
-};
-
-const Tabs = () => (
-	<Examples examples={examples} />
-);
-
-export default Tabs;
diff --git a/stories/react/Tiles.stories.js b/stories/react/Tiles.stories.js
deleted file mode 100644
index 04a6fb5..0000000
--- a/stories/react/Tiles.stories.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-
-import Examples from './utils/Examples.js';
-import SVGIcon from '../../src/react/SVGIcon.js';
-import Button from '../../src/react/Button.js';
-
-import Tile from '../../src/react/Tile.js';
-import TileInfo from '../../src/react/TileInfo.js';
-import TileInfoLine from '../../src/react/TileInfoLine.js';
-import TileFooter from '../../src/react/TileFooter.js';
-import TileFooterCell from '../../src/react/TileFooterCell.js';
-
-import HTMLTileWithoutFooter from '../../components/tile/tile-without-footer.html';
-import HTMLVspTile from '../../components/tile/vsp-tile.html';
-import HTMLVlmTile from '../../components/tile/vlm-tile.html';
-import HTMLVendorTile from '../../components/tile/vendor-tile.html';
-import HTMLVfcTile from '../../components/tile/vfc-tile.html';
-
-let examples = {
-	'Without footer': {
-		jsx: <Tile headerText='header' headerColor='blue' iconName='vsp' iconColor='blue'>
-					<TileInfo>
-						<TileInfoLine type='supertitle'>Supertitle</TileInfoLine>
-						<TileInfoLine type='title'>Title</TileInfoLine>
-					</TileInfo>
-				</Tile>,
-		html: HTMLTileWithoutFooter
-	},
-	VFC: {
-		jsx: <Tile headerText='vfc' headerColor='purple' iconName='network'>
-					<TileInfo>
-						<TileInfoLine type='title'>Title</TileInfoLine>
-						<TileInfoLine type='subtitle'>V 1.0</TileInfoLine>
-					</TileInfo>
-					<TileFooter>
-						<TileFooterCell>Certified</TileFooterCell>
-					</TileFooter>
-				</Tile>,
-		html: HTMLVfcTile
-	},
-	VSP: {
-		jsx: <Tile headerText='vsp' headerColor='blue' iconName='vsp' iconColor='blue'>
-					<TileInfo>
-						<TileInfoLine type='supertitle'>VLM</TileInfoLine>
-						<TileInfoLine type='title'>VSP name</TileInfoLine>
-					</TileInfo>
-					<TileFooter>
-						<TileFooterCell>Draft</TileFooterCell>
-					</TileFooter>
-				</Tile>,
-		html: HTMLVspTile
-	},
-	VLM: {
-		jsx: <Tile headerText='vlm' headerColor='purple' iconName='vlm' iconColor='purple'>
-					<TileInfo>
-						<TileInfoLine type='title'>VLM name</TileInfoLine>
-					</TileInfo>
-					<TileFooter>
-						<TileFooterCell>Certified</TileFooterCell>
-						<TileFooterCell>
-							<SVGIcon name='versionControllerPermissions' label='Owner' labelPosition='left' />
-						</TileFooterCell>
-					</TileFooter>
-				</Tile>,
-		html: HTMLVlmTile
-	},
-	Vendor: {
-		jsx: <Tile iconName='vendor' iconColor='dark-gray'>
-					<TileInfo align='center'>
-						<TileInfoLine type='title'>Vendor name</TileInfoLine>
-						<TileInfoLine>
-							<Button btnType='primary' onClick={() => {}}>100 VSPs</Button>
-						</TileInfoLine>
-					</TileInfo>
-					<TileFooter align='center'>
-						<TileFooterCell>
-							<Button btnType='link' color='primary' iconName='plusThin' onClick={() => {}}>Create new VSP</Button>
-						</TileFooterCell>
-					</TileFooter>
-				</Tile>,
-		html: HTMLVendorTile
-	},
-};
-
-const Tiles = () => (
-	<Examples examples={examples} />
-);
-
-export default Tiles;
diff --git a/stories/react/Typography.stories.js b/stories/react/Typography.stories.js
deleted file mode 100644
index f1475c6..0000000
--- a/stories/react/Typography.stories.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, {Component} from 'react';
-
-const typos = [
-	{className: 'heading-1', size: 28, text: 'Major Section Heading'},
-	{className: 'heading-2', size: 24, text: 'Sub-Section Heading'},
-	{className: 'heading-3', size: 20, text: 'Small Heading'},
-	{className: 'heading-4', size: 16, text: 'Small Heading'},
-	{className: 'heading-4-emphasis', size: 16, text: 'Small Heading'},
-	{className: 'heading-5', size: 14, text: 'Small Heading'},
-	{className: 'body-1', size: 14, text: 'Body (Standard) Text'},
-	{className: 'body-1-italic', size: 14, text: 'Body (Standard) Text'},
-	{className: 'body-2', size: 13, text: 'Text in Tables'},
-	{className: 'body-2-emphasis', size: 13, text: 'Text in Tables'},
-	{className: 'body-3', size: 12, text: 'Input Labels, Table Titles'},
-	{className: 'body-3-emphasis', size: 12, text: 'Even Smaller Text'},
-	{className: 'body-4', size: 10, text: 'Even Much Smaller Text'}
-];
-
-const fontWeights = ['OpenSans Regular 400', 'OpenSans Semibold 600'];
-
-function TextRow({className, size, text}) {
-	return (
-		<div className={`typo-section ${className}`}>
-			<div>{className}</div>
-			<div>{size}px</div>
-			<div className='sample-text'>{text}</div>
-		</div>
-	);
-}
-
-class Typography extends Component {
-
-	render() {
-		return (
-			<div className='typography-screen'>
-				<h1>Typography</h1>
-				<div className='typography-section'>
-					<h3>Font Family</h3>
-					<ul>
-						<li>OpenSans</li>
-						<li style={{'fontFamily': 'Arial'}}>Arial</li>
-						<li style={{'fontFamily':'sans-serif'}}>sans-serif</li>
-					</ul>
-				</div>
-				<div className='typography-section'>
-					<h3>Font Weights</h3>
-					<ul>{fontWeights.map(font => <li key={font} className={font}>{font}</li>)}</ul>
-				</div>
-				<div className='typography-section'>
-					<h3>Font Size</h3>
-					<div className='typo-table'>
-						<TextRow className='SCSS mixin name (@include ....)' size='Size (in Pixels)' text='Sample Text'/>
-						{typos.map(typo => <TextRow key={typo.className} {...typo}/>)}
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-}
-
-export default Typography;
diff --git a/stories/react/buttons/LinkButtons.stories.js b/stories/react/buttons/LinkButtons.stories.js
deleted file mode 100644
index ef32a22..0000000
--- a/stories/react/buttons/LinkButtons.stories.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import Examples from '../utils/Examples.js';
-
-import ReactButton from '../../../src/react/Button.js';
-
-import LinkButton from '../../../components/button/button-link.html';
-import LinkButtonDisabled from '../../../components/button/button-link-disabled.html';
-import ExtraSmall from '../../../components/button/button-link-extra-small.html';
-import Small from '../../../components/button/button-link-small.html';
-import Medium from '../../../components/button/button-link-medium.html';
-import Large from '../../../components/button/button-link-large.html';
-import Auto from '../../../components/button/button-link-auto.html';
-
-let examples = {
-	'Link Default': {
-		jsx: <ReactButton btnType='link' onClick={() => {}}>Click Me</ReactButton>,
-		html: LinkButton
-	},
-	'Link Disabled': {
-		jsx: <ReactButton btnType='link' onClick={() => {}} disabled>Click Me</ReactButton>,
-		html: LinkButtonDisabled,
-	},
-	'Extra Small': {
-		jsx: <ReactButton btnType='link' size='x-small' onClick={() => {}}>Click Me</ReactButton>,
-		html: ExtraSmall
-	},
-	'Small': {
-		jsx: <ReactButton btnType='link' size='small' onClick={() => {}}>Click Me</ReactButton>,
-		html: Small,
-	},
-	'Medium': {
-		jsx: <ReactButton btnType='link' size='medium' onClick={() => {}}>Click Me</ReactButton>,
-		html: Medium
-	},
-	'Large': {
-		jsx: <ReactButton btnType='link' size='large' onClick={() => {}}>Click Me</ReactButton>,
-		html: Large,
-	},
-	'Auto Sizing': {
-		jsx: <ReactButton btnType='link' size='default' onClick={() => {}}>Click Me</ReactButton>,
-		html: Auto,
-	}
-};
-
-const DefaultButtons = () => (
-	<Examples examples={examples} />
-);
-
-export default DefaultButtons;
diff --git a/stories/react/buttons/PrimaryButtons.stories.js b/stories/react/buttons/PrimaryButtons.stories.js
deleted file mode 100644
index db732b9..0000000
--- a/stories/react/buttons/PrimaryButtons.stories.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import Examples from '../utils/Examples.js';
-
-import ReactButton from '../../../src/react/Button.js';
-
-import PrimaryButton from '../../../components/button/button-primary.html';
-import PrimaryButtonDisabled from '../../../components/button/button-primary-disabled.html';
-import ExtraSmall from '../../../components/button/button-primary-extra-small.html';
-import Small from '../../../components/button/button-primary-small.html';
-import Medium from '../../../components/button/button-primary-medium.html';
-import Large from '../../../components/button/button-primary-large.html';
-import Auto from '../../../components/button/button-primary-auto.html';
-
-let examples = {
-	'Primary Default': {
-		jsx: <ReactButton onClick={() => {}}>Click Me</ReactButton>,
-		html: PrimaryButton
-	},
-	'Primary Disabled': {
-		jsx: <ReactButton onClick={() => {}} disabled>Click Me</ReactButton>,
-		html: PrimaryButtonDisabled,
-	},
-	'Extra Small': {
-		jsx: <ReactButton size='x-small' onClick={() => {}}>Click Me</ReactButton>,
-		html: ExtraSmall
-	},
-	'Small': {
-		jsx: <ReactButton size='small' onClick={() => {}}>Click Me</ReactButton>,
-		html: Small,
-	},
-	'Medium': {
-		jsx: <ReactButton size='medium' onClick={() => {}}>Click Me</ReactButton>,
-		html: Medium
-	},
-	'Large': {
-		jsx: <ReactButton size='large' onClick={() => {}}>Click Me</ReactButton>,
-		html: Large,
-	},
-	'Auto Sizing': {
-		jsx: <ReactButton size='default' onClick={() => {}}>Click Me</ReactButton>,
-		html: Auto,
-	}
-};
-
-const DefaultButtons = () => (
-	<Examples examples={examples} />
-);
-
-export default DefaultButtons;
diff --git a/stories/react/buttons/SecondaryButtons.stories.js b/stories/react/buttons/SecondaryButtons.stories.js
deleted file mode 100644
index 75f9d54..0000000
--- a/stories/react/buttons/SecondaryButtons.stories.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import Examples from '../utils/Examples.js';
-
-import ReactButton from '../../../src/react/Button.js';
-
-import SecondaryButton from '../../../components/button/button-secondary.html';
-import SecondaryButtonDisabled from '../../../components/button/button-secondary-disabled.html';
-import ExtraSmall from '../../../components/button/button-secondary-extra-small.html';
-import Small from '../../../components/button/button-secondary-small.html';
-import Medium from '../../../components/button/button-secondary-medium.html';
-import Large from '../../../components/button/button-secondary-large.html';
-import Auto from '../../../components/button/button-secondary-auto.html';
-
-let examples = {
-	'Secondary Default': {
-		jsx: <ReactButton btnType='secondary' onClick={() => {}}>Click Me</ReactButton>,
-		html: SecondaryButton
-	},
-	'Secondary Disabled': {
-		jsx: <ReactButton btnType='secondary' onClick={() => {}} disabled>Click Me</ReactButton>,
-		html: SecondaryButtonDisabled,
-	},
-	'Extra Small': {
-		jsx: <ReactButton btnType='secondary' size='x-small' onClick={() => {}}>Click Me</ReactButton>,
-		html: ExtraSmall
-	},
-	'Small': {
-		jsx: <ReactButton btnType='secondary' size='small' onClick={() => {}}>Click Me</ReactButton>,
-		html: Small,
-	},
-	'Medium': {
-		jsx: <ReactButton btnType='secondary' size='medium' onClick={() => {}}>Click Me</ReactButton>,
-		html: Medium
-	},
-	'Large': {
-		jsx: <ReactButton btnType='secondary' size='large' onClick={() => {}}>Click Me</ReactButton>,
-		html: Large,
-	},
-	'Auto Sizing': {
-		jsx: <ReactButton btnType='secondary' size='default' onClick={() => {}}>Click Me</ReactButton>,
-		html: Auto,
-	}
-};
-
-const DefaultButtons = () => (
-	<Examples examples={examples} />
-);
-
-export default DefaultButtons;
diff --git a/stories/react/index.js b/stories/react/index.js
deleted file mode 100644
index 6d425ba..0000000
--- a/stories/react/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import PrimaryButtons from './buttons/PrimaryButtons.stories.js';
-import SecondaryButtons from './buttons/SecondaryButtons.stories.js';
-import LinkButtons from './buttons/LinkButtons.stories.js';
-
-import Colors from './Colors.stories.js';
-import Typography from './Typography.stories.js';
-import Checkboxes from './Checkbox.stories.js';
-import Checklist from './Checklist.stories.js';
-import Input from './Input.stories.js';
-import Icons from './SVGIcon.stories.js';
-import Tiles from './Tiles.stories.js';
-import Tabs from './Tabs.stories.js';
-import Radios from './Radio.stories.js';
-import RadioGroups from './RadioGroup.stories.js';
-import Modals from './Modal.stories.js';
-import PopupMenu from './PopupMenu.stories.js';
-import Accordion from './Accordion.stories.js';
-import Panel from './Panel.stories.js';
-
-storiesOf('Colors', module)
-	.add('Color Palette', () => <Colors />);
-
-storiesOf('Typography', module)
-	.add('Typography', () => <Typography />);
-
-storiesOf('Accordion', module)
-	.add('Accordion', () => <Accordion />);
-
-storiesOf('Buttons', module)
-	.add('Primary', () => <PrimaryButtons />)
-	.add('Secondary', () => <SecondaryButtons />)
-	.add('Link', () => <LinkButtons />);
-
-storiesOf('Checkboxes', module)
-	.add('Checkboxes', () => <Checkboxes />);
-
-storiesOf('Checklist', module)
-	.add('Checklist', () => <Checklist />);
-
-storiesOf('Input Fields', module)
-	.add('Input Text', () => <Input />);
-
-storiesOf('Icons', module)
-	.add('SVG Icons', () => <Icons />);
-
-storiesOf('Menu', module)
-	.add('Popup Menu', () => <PopupMenu />);
-
-storiesOf('Modals', module)
-	.add('Modal examples', () => <Modals />);
-
-storiesOf('Radios', module)
-	.add('Radio Buttons', () => <Radios />)
-	.add('Radio Button Groups', () => <RadioGroups />);
-
-storiesOf('Panel', module)
-	.add('Panel', () => <Panel />);
-
-storiesOf('Tabs', module)
-	.add('Tabs', () => <Tabs />);
-
-storiesOf('Tiles', module)
-	.add('Tiles', () => <Tiles />);
diff --git a/stories/react/utils/BeautifyHTML.js b/stories/react/utils/BeautifyHTML.js
deleted file mode 100644
index 1a29b00..0000000
--- a/stories/react/utils/BeautifyHTML.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export default function beautifyHTML({html, indentChar = '    ', startingIndentCount = 0}) {
-	html = html.replace(/[ ]{2,}/g, ' ');
-
-	let result = '', indentCount = startingIndentCount, parsingText = false;
-	for (let i = 0; i < html.length; i++) {
-
-		let startOfTag, endOfTag, closingTag, upcomingTag, afterTag, numTabs;
-		if (html[i] === '<') { startOfTag = true; }
-		else if (html[i] === '>') { endOfTag = true; }
-		else if (html[i - 1] === '>') { afterTag = true; }
-		if (html[i + 1] === '/') { closingTag = true; }
-		else if (html[i + 1 ] === '<') { upcomingTag = true; }
-
-		if (startOfTag) {
-			if (closingTag) { numTabs = --indentCount; }
-			else { numTabs = indentCount++; }
-		}
-
-		if (parsingText && afterTag) {
-			numTabs = indentCount;
-		}
-
-		result += indentChar.repeat(numTabs) + html[i];
-
-		if (endOfTag || parsingText && upcomingTag) {
-			result += '\n';
-			parsingText = false;
-			if (!upcomingTag) { parsingText = true; }
-		}
-	}
-
-	return result.slice(0, -1);
-}
diff --git a/stories/react/utils/Examples.js b/stories/react/utils/Examples.js
deleted file mode 100644
index 5948b68..0000000
--- a/stories/react/utils/Examples.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import {renderToStaticMarkup} from 'react-dom/server';
-import SourceToggle from './SourceToggle.js';
-import beautifyHTML from './BeautifyHTML.js';
-import insertSVGIcons from './InsertSVGIcons.js';
-
-const Examples = ({examples}) => (
-  <div className={'examples'}>
-	  {Object.keys(examples).map(key => {
-		let title = key;
-		let {jsx, html, displayTitle = true, exclude, renderFromJsx = false} = examples[key];
-		if (!html) {
-			html = renderToStaticMarkup(jsx);
-			html = beautifyHTML({html, indentChar: '  '});
-		} else {
-			html = insertSVGIcons({html, jsx});
-		}
-		return <SourceToggle title={displayTitle && title} jsx={jsx} html={html} key={key} exclude={exclude} renderFromJsx={renderFromJsx}/>;
-	  })}
-  </div>
-);
-
-export default Examples;
diff --git a/stories/react/utils/InsertSVGIcons.js b/stories/react/utils/InsertSVGIcons.js
deleted file mode 100644
index 5a5e390..0000000
--- a/stories/react/utils/InsertSVGIcons.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {renderToStaticMarkup} from 'react-dom/server';
-import beautifyHTML from './BeautifyHTML.js';
-
-const insertSVGIcons = ({html, jsx, indentChar = '    '}) => {
-	let svgCode = renderToStaticMarkup(jsx).match(/(<svg\b[^<>]*>)[\s\S]*?(<\/svg>)/g);
-	let newHTML = html.replace(/\s*<!-- insert SVG -->/g, str => {
-		let html = '\n' + svgCode.shift();
-		let indentRegExp = new RegExp(`[${indentChar}]*`);
-		let startingIndentCount = str.slice(2).match(indentRegExp)[0].length / indentChar.length;
-		return beautifyHTML({html, startingIndentCount, indentChar});
-	});
-	return newHTML;
-};
-
-export default insertSVGIcons;
diff --git a/stories/react/utils/SourceToggle.js b/stories/react/utils/SourceToggle.js
deleted file mode 100644
index a05c8d0..0000000
--- a/stories/react/utils/SourceToggle.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint-disable react/no-danger */
-import React from 'react';
-import jsxToString from './jsxToString.js';
-
-import Prism from 'prismjs';
-
-import PrismJsx from 'prismjs/components/prism-jsx.js'; // eslint-disable-line no-unused-vars
-
-const sources = {
-	React: 'React',
-	HTML: 'HTML'
-};
-
-export default class SourceToggle extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			source: sources.React
-		};
-	}
-
-	renderFromSource() {
-		let {jsx, html, renderFromJsx} = this.props;
-		let {source} = this.state;
-		let classname = 'source-toggle-example';
-		switch (source) {
-			case sources.HTML:
-				return renderFromJsx ? <div className={classname}>{jsx}</div> : <div className={classname} dangerouslySetInnerHTML={{__html: html}} />;
-			case sources.React:
-			default:
-				return <div className={classname}>{jsx}</div>;
-		}
-	}
-
-	renderMarkdown() {
-		let {jsx, html, exclude} = this.props;
-		let {source} = this.state;
-		switch (source) {
-			case sources.HTML:
-				return {__html: Prism.highlight(html, Prism.languages.html)};
-			case sources.React:
-			default:
-				return {__html: Prism.highlight(jsxToString({jsx, exclude}), Prism.languages.jsx)};
-		}
-	}
-
-	render() {
-		let {title} = this.props;
-		return (
-			<div className='source-toggle-wrapper'>
-				{title && <div className='source-toggle-title'>{title}</div>}
-				<div className='source-toggle'>
-					{this.renderFromSource()}
-					<div className='source-toggle-code'>
-						<div className='source-toggle-code-tabs'>
-							{Object.keys(sources).map((source, i) => (
-									<div
-										key={i}
-										className={`source-toggle-tab${this.state.source === source ? ' selected' : ''}`}
-										onClick={() => this.setState({source})}>
-										{source}
-									</div>
-							))}
-						</div>
-						<pre>
-							<code dangerouslySetInnerHTML={this.renderMarkdown()} />
-						</pre>
-					</div>
-				</div>
-			</div>
-		);
-	}
-}
diff --git a/stories/react/utils/components/DropdownMenu.js b/stories/react/utils/components/DropdownMenu.js
deleted file mode 100644
index 4a69463..0000000
--- a/stories/react/utils/components/DropdownMenu.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-const DropdownMenu = ({title, value, onChange, options}) => (
-	<div className='option-container'>
-		<label>{title}</label>
-		<select value={value} onChange={onChange}>
-			{options.map((option, i) =>
-				<option key={i} value={option}>{option}</option>
-			)}
-		</select>
-	</div>
-);
-
-export default DropdownMenu;
diff --git a/stories/react/utils/jsxToString.js b/stories/react/utils/jsxToString.js
deleted file mode 100644
index 8b799ad..0000000
--- a/stories/react/utils/jsxToString.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, {Children} from 'react';
-
-const INDENT = '   ';
-
-function stringRepresentationForJsx(item) {
-	if (typeof item === 'string') {
-		return `'${item}'`;
-	} else if (typeof item === 'number') {
-		return item.toString();
-	} else if (Array.isArray(item)) {
-		return `[${item.map(val => stringRepresentationForJsx(val)).toString()}]`;
-	}
-	else if (typeof item === 'boolean') {
-		return item.toString();
-	}
-	else if (typeof item === 'function') {
-		return item.toString().replace(/\s{2,}/g, ' ');
-	} else if (typeof item === 'object') {
-		let repr = '{';
-		for (let key in item) {
-			if (item.hasOwnProperty(key)) {
-				repr += `${key}: ${stringRepresentationForJsx(item[key])}, `;
-			}
-		}
-		repr = repr.slice(0, -2);
-		repr += '}';
-		return repr;
-	}
-}
-
-function parseProps(jsx, indentCount) {
-	let result = '';
-	for (let prop in jsx.props) {
-		let value = jsx.props[prop];
-		if (prop !== 'children' && value) {
-			let repr = stringRepresentationForJsx(value);
-			let isString = repr.startsWith("'");
-			result += `\n${INDENT.repeat(indentCount)}${prop}`;
-			if (value !== true) {
-				result += `=${isString ? '' : '{ '}${stringRepresentationForJsx(value)}${isString ? '' : ' }'}`;
-			}
-		}
-	}
-	return result;
-}
-
-function jsxToString({jsx, indentCount=0, exclude}) {
-	if (typeof jsx === 'string'){
-		return jsx;
-	}
-	
-	let name = typeof jsx.type === 'string' ? jsx.type : jsx.type.name;	
-	let result = name === exclude ? ''
-		: `${INDENT.repeat(indentCount)}<${name}${parseProps(jsx, indentCount + 1)}`;
-
-	if (jsx.props.hasOwnProperty('children')) {
-		let {children} = jsx.props;
-		let childrenArr = Children.toArray(children);
-		if (name !== exclude) { result += '>\n';}
-		if (typeof children === 'string') {
-			result += `${INDENT.repeat(indentCount + 1)}${children}\n`;
-		} else {
-			let newIndentCount = name === exclude ? indentCount : indentCount + 1;
-			childrenArr.forEach(child => result += `${jsxToString({jsx: child, indentCount: newIndentCount})}\n`);
-		}
-		const closingTag = name === exclude ? '' 
-			: `${INDENT.repeat(indentCount)}</${name}>`;
-		return result + closingTag;
-	}
-
-	return result + ' />';
-}
-
-export default jsxToString;