8 files changed, 79 insertions, 0 deletions
diff --git a/openecomp-ui/.storybook/addons.js b/openecomp-ui/.storybook/addons.js
new file mode 100644
index 0000000000..c7ad1fdfc2
--- /dev/null
+++ b/openecomp-ui/.storybook/addons.js
@@ -0,0 +1,3 @@
+import '@kadira/storybook/addons';
+import '@kadira/storybook-addon-knobs/register';
+import '@kadira/storybook-addon-options/register';
+\ No newline at end of file
diff --git a/openecomp-ui/.storybook/config.js b/openecomp-ui/.storybook/config.js
new file mode 100644
index 0000000000..94e9855fa2
--- /dev/null
+++ b/openecomp-ui/.storybook/config.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import {configure, addDecorator} from '@kadira/storybook';
+import {withKnobs} from '@kadira/storybook-addon-knobs';
+import { setOptions } from '@kadira/storybook-addon-options';
+import './storybook.scss';
+import '../resources/scss/onboarding.scss';
+
+
+const req = require.context('../src', true, /.stories.js$/)
+const namespaceDecorator = (story) => (
+    <div className='dox-ui'>
+        {story()}
+    </div>
+);
+
+addDecorator(namespaceDecorator);
+
+setOptions({
+    name: 'custom',
+    downPanelInRight: true
+});
+
+function loadStories() {
+  req.keys().forEach((filename) => req(filename))
+}
+
+configure(loadStories, module);
+\ No newline at end of file
diff --git a/openecomp-ui/.storybook/fonts/omnes-att-bold.otf b/openecomp-ui/.storybook/fonts/omnes-att-bold.otf
new file mode 100644
index 0000000000..136afca84c
--- /dev/null
+++ b/openecomp-ui/.storybook/fonts/omnes-att-bold.otf
diff --git a/openecomp-ui/.storybook/fonts/omnes-att-light.ttf b/openecomp-ui/.storybook/fonts/omnes-att-light.ttf
new file mode 100644
index 0000000000..273761ab3d
--- /dev/null
+++ b/openecomp-ui/.storybook/fonts/omnes-att-light.ttf
diff --git a/openecomp-ui/.storybook/fonts/omnes-att-medium.ttf b/openecomp-ui/.storybook/fonts/omnes-att-medium.ttf
new file mode 100644
index 0000000000..2740425412
--- /dev/null
+++ b/openecomp-ui/.storybook/fonts/omnes-att-medium.ttf
diff --git a/openecomp-ui/.storybook/fonts/omnes-att-regular.ttf b/openecomp-ui/.storybook/fonts/omnes-att-regular.ttf
new file mode 100644
index 0000000000..2342be4be5
--- /dev/null
+++ b/openecomp-ui/.storybook/fonts/omnes-att-regular.ttf
diff --git a/openecomp-ui/.storybook/storybook.scss b/openecomp-ui/.storybook/storybook.scss
new file mode 100644
index 0000000000..ed63bb9ab5
--- /dev/null
+++ b/openecomp-ui/.storybook/storybook.scss
@@ -0,0 +1,32 @@
+$PORT: '9090';
+$PROD_MACHINE: '10.147.92.78';
+
+@font-face {
+  font-family: omnes-light;
+  src: url('http://localhost:#{$PORT}/omnes-att-light.ttf'),
+    url('http://#{$PROD_MACHINE}:#{$PORT}/omnes-att-light.ttf');
+}
+
+@font-face {
+  font-family: omnes-regular;
+  src: url('http://localhost:#{$PORT}/omnes-att-regular.ttf'),
+    url('http://#{$PROD_MACHINE}:#{$PORT}/omnes-att-regular.ttf');
+}
+
+@font-face {
+  font-family: omnes-medium;
+  src: url('http://localhost:#{$PORT}/omnes-att-medium.ttf'),
+    url('http://#{$PROD_MACHINE}:#{$PORT}/omnes-att-medium.ttf');
+}
+
+@font-face {
+  font-family: omnes-bold;
+  src: url('http://localhost:#{$PORT}/omnes-att-bold.otf'),
+    url('http://#{$PROD_MACHINE}:#{$PORT}/omnes-att-bold.otf');
+}
+
+body {
+    @import '../resources/scss/bootstrap.scss';
+    font-family: omnes-medium,sans-serif;
+    font-size: 14px;
+}
+\ No newline at end of file
diff --git a/openecomp-ui/.storybook/webpack.config.js b/openecomp-ui/.storybook/webpack.config.js
new file mode 100644
index 0000000000..aeb97c1b5a
--- /dev/null
+++ b/openecomp-ui/.storybook/webpack.config.js
@@ -0,0 +1,17 @@
+var ASDCConfig = require('../webpack.common.js');
+
+module.exports = function(baseConfig, configType) {
+    baseConfig.module.loaders =  baseConfig.module.loaders.concat([
+        {test: /\.(css|scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
+
+        // required for font icons
+        {test: /\.(woff|woff2)(\?.*)?$/, loader: 'url-loader?limit=16384&mimetype=application/font-woff'},
+        {test: /\.(ttf|eot|otf)(\?.*)?$/, loader: 'file-loader'},
+        {test: /\.(png|jpg|svg)(\?.*)?$/, loader: 'url-loader?limit=16384'},
+
+        {test: /\.json$/, loaders: ['json']},
+        {test: /\.html$/, loaders: ['html']}
+    ]);
+    baseConfig.resolve = { root: ASDCConfig.resolve.modules, alias:  ASDCConfig.resolve.alias };
+    return baseConfig;
+}