aboutsummaryrefslogtreecommitdiffstats
path: root/.storybook
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-05-21 17:42:00 +0300
committerIsrael Lavi <il0695@att.com>2018-05-21 17:52:01 +0300
commit1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch)
treef30beeaf15a8358f6da78fdd74bcbda74bd334f8 /.storybook
parent4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff)
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to '.storybook')
-rw-r--r--.storybook/config.js8
-rw-r--r--.storybook/storybook.scss231
-rw-r--r--.storybook/typography.scss30
-rw-r--r--.storybook/webpack.config.js39
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)
+ })
+ ]
+};