Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP

4 files changed, 308 insertions, 0 deletions

diff --git a/.storybook/config.js b/.storybook/config.js
new file mode 100644
index 0000000..5896dcc
--- /dev/null
+++ b/.storybook/config.js
@@ -0,0 +1,8 @@
+import { configure } from '@storybook/react';
+import './storybook.scss';
+
+function loadStories() {
+  require('../stories/react');
+}
+
+configure(loadStories, module);
diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
new file mode 100644
index 0000000..ce905cf
--- /dev/null
+++ b/.storybook/storybook.scss
@@ -0,0 +1,231 @@
+@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/typography.scss b/.storybook/typography.scss
new file mode 100644
index 0000000..36f9b02
--- /dev/null
+++ b/.storybook/typography.scss
@@ -0,0 +1,30 @@
+@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
new file mode 100644
index 0000000..a923d80
--- /dev/null
+++ b/.storybook/webpack.config.js
@@ -0,0 +1,39 @@
+
+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 = {
+	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)
+		})
+	]
+};