Initial commit.

Adding files needed for Linux Foundation.

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

6 files changed, 44 insertions, 299 deletions

diff --git a/.storybook/addons.js b/.storybook/addons.js
new file mode 100644
index 0000000..2cf64c7
--- /dev/null
+++ b/.storybook/addons.js
@@ -0,0 +1,7 @@
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-backgrounds/register';
diff --git a/.storybook/config.js b/.storybook/config.js
index 5896dcc..cdfdaee 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,8 +1,17 @@
-import { configure } from '@storybook/react';
-import './storybook.scss';
+import { configure } from '@storybook/angular';
+import { setOptions } from '@storybook/addon-options';
+
+setOptions({
+  hierarchyRootSeparator: /\|/,
+});
 
 function loadStories() {
-  require('../stories/react');
+  // put welcome screen at the top of the list so it's the first one displayed
+  require('../stories/angular');
+
+  // automatically import all story ts files that end with *.stories.ts
+  const req = require.context('../stories/angular', true, /\.stories\.ts$/);
+  req.keys().forEach(filename => req(filename));
 }
 
 configure(loadStories, module);
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
deleted file mode 100644
index ce905cf..0000000
--- a/.storybook/storybook.scss
+++ /dev/null
@@ -1,231 +0,0 @@
-@import 'typography.scss';
-@import '../src/style/scss/style.scss';
-@import '~prismjs/themes/prism.css';
-
-body {
-	@include base-font-regular();
-	margin: 15px;
-	max-width: 800px;
-}
-
-a {
-	color: #1474f3;
-	text-decoration: none;
-	border-bottom: 1px solid #1474f3;
-	padding-bottom: 2px;
-}
-
-.colors-table {
-	width: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: flex-start;
-	font-size: 13px;
-	.color-section {
-		display: flex;
-		flex-direction: column;
-		margin: 10px 0;
-		min-width: 150px;
-		div {
-			align-self: center;
-			user-select: text;
-		}
-		$circle-size: 40px;
-		.color-circle {
-			height: $circle-size;
-			width: $circle-size;
-			border-radius: $circle-size;
-			padding: 10px;
-			text-align: center;
-		}
-	}
-}
-
-.icons-screen {
-	width: 1190px;
-	.missing-icon-section {
-		border-top: 1px solid $light-gray;
-		padding-top: 10px;
-	}
-	.icons-option-selector {
-		margin-top: 20px;
-		margin-bottom: 20px;
-		display: flex;
-		.option-container {
-			display: flex;
-			flex-direction: column;
-			flex-basis: 100%;
-			margin-right: 20px;
-		}
-	}
-
-	.icons-table {
-		margin-top: 50px;
-		width: 100%;
-		display: flex;
-		flex-wrap: wrap;
-		border-top: 1px solid $light-gray;
-		justify-content: flex-start;
-		.icon-section {
-			display: flex;
-			flex-direction: column;
-			margin: 10px;
-			min-width: 150px;
-			.svg-icon-wrapper {
-				cursor: pointer;
-				width: 20px;
-				height: 42px;
-				margin-left: auto;
-				margin-right: auto;
-				.svg-icon-label {
-					font-size: 12px;
-				}
-			}
-		}
-	}
-
-	.svg-icon {
-		&.storybook-big {
-			width: 120px;
-			height: 120px;
-		}
-		&.storybook-small {
-			width: 60px;
-			height: 60px;
-		}
-	}
-}
-
-.sdc-popup-menu {
-	@include box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.2));
-	width: 200px;
-	height: 200px;
-	border: 1px solid $light-gray;
-}
-
-.typography-screen {
-	.typography-section {
-		margin: 20px 0;
-	}
-	ul {
-		font-size: 18px;
-	}
-	.typo-table {
-		.typo-section {
-			div {
-				display: inline-block;
-				//border: 1px solid black;
-				width: 30%;
-				margin: 4px 0;
-			}
-			.sample-text {
-				white-space: nowrap;
-
-			}
-		}
-	}
-	.heading-1 {
-		@include heading-1;
-	}
-	.heading-2 {
-		@include heading-2;
-	}
-	.heading-3 {
-		@include heading-3;
-	}
-	.heading-4 {
-		@include heading-4;
-	}
-	.heading-4-emphasis {
-		@include heading-4-emphasis;
-	}
-	.heading-5 {
-		@include heading-5;
-	}
-
-	.body-1 {
-		@include body-1;
-	}
-
-	.body-1-italic {
-		@include body-1-italic;
-	}
-
-	.body-2 {
-		@include body-2;
-	}
-
-	.body-2-emphasis {
-		@include body-2-emphasis;
-	}
-
-	.body-3 {
-		@include body-3;
-	}
-
-	.body-3-emphasis {
-		@include body-3-emphasis;
-	}
-
-	.body-4 {
-		@include body-4;
-	}
-}
-
-.source-toggle-wrapper {
-	.source-toggle-title {
-		@include heading-2;
-	}
-	.source-toggle {
-		display: flex;
-		border-top: 1px solid $light-gray;
-		padding: 10px 0;
-		&:first-child {
-			border-top: none;
-		}
-		.source-toggle-example {
-			flex-basis: 40%;
-			flex-shrink: 0;
-		}
-		.source-toggle-code {
-			background-color: $light-silver;
-			padding: 5px;
-			margin-left: 30px;
-			pre {
-				margin-top: 0;
-				user-select: text;
-				overflow-x: auto;
-				overflow-y: hidden;
-				max-width: 800px;
-				code {
-					font-size: 15px;
-					font-weight: 600;
-					padding: 2px 5px;
-					border: 1px solid #eae9e9;
-					border-radius: 4px;
-					background-color: #f3f2f2;
-					color: #3a3a3a;
-					.token {
-						line-height: 20px;
-					}
-				}
-			}
-			.source-toggle-code-tabs {
-				display: flex;
-				margin-bottom: 10px;
-				.source-toggle-tab {
-					@include body-1;
-					@include base-font-semibold;
-					margin-right: 20px;
-					cursor: pointer;
-					&.selected {
-						border-bottom: 2px solid $dark-blue;
-						color: $dark-blue;
-						font-weight: bold;
-					}
-				}
-			}
-		}
-	}
-}
-
diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
new file mode 100644
index 0000000..b99b549
--- /dev/null
+++ b/.storybook/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig-sitebook.json",
+  "exclude": [
+    "../src/angular/test.ts",
+    "../src/angular/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/angular/**/*"
+  ]
+}
diff --git a/.storybook/typography.scss b/.storybook/typography.scss
deleted file mode 100644
index 36f9b02..0000000
--- a/.storybook/typography.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@font-face {
-  font-family: 'OpenSans-Regular';
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local('Open Sans Regular'),
-    local('OpenSans-Regular'),
-    url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'),
-    url(http://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff)  format('woff');
-}
-@font-face {
-  font-family: 'OpenSans-Italic';
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local('Open Sans Italic'),
-    local('OpenSans-Italic'),
-    url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'),
-    url(http://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
-}
-@font-face {
-  font-family: 'OpenSans-Semibold';
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local('Open Sans Semibold'),
-    local('OpenSans-Semibold'),
-    url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'),
-    url(http://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff)   format('woff');
-}
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index a923d80..27e132b 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,39 +1,19 @@
-
 const path = require('path');
-const webpack = require('webpack');
-const svgFolder = './assets/icons/';
-const fs = require('fs');
-
-let iconNames = [];
 
-fs.readdirSync(svgFolder).forEach(file => {
-	let fileName = file.split('.');
-	if (fileName[0] && fileName[1] === 'svg') {
-		iconNames.push(fileName[0]);
-	}
-});
+module.exports = baseConfig => {
+  baseConfig.module.rules.push({
+    test: [/\.stories\.ts?$/, /index\.ts$/],
+    loaders: [
+      {
+        loader: require.resolve('@storybook/addon-storysource/loader'),
+        options: {
+          parser: 'typescript',
+        },
+      },
+    ],
+    include: [path.resolve(__dirname, '../stories/angular')],
+    enforce: 'pre',
+  });
 
-module.exports = {
-	module: {
-		rules: [
-			{
-				test: /.scss$/,
-				use: ['style-loader', 'css-loader', 'sass-loader'],
-				include: path.resolve(__dirname, '../')
-			},
-			{
-				test: /.html$/,
-				loader: 'html-loader',
-				options: {
-					minimize: false
-				}
-			}
-		]
-	},
-	plugins: [
-		new webpack.DefinePlugin({
-			'ICON_PATH': '"./"',
-			'ICON_NAMES':JSON.stringify(iconNames)
-		})
-	]
+  return baseConfig;
 };