aboutsummaryrefslogtreecommitdiffstats
path: root/.storybook
diff options
context:
space:
mode:
Diffstat (limited to '.storybook')
-rw-r--r--.storybook/addons.js7
-rw-r--r--.storybook/config.js15
-rw-r--r--.storybook/storybook.scss231
-rw-r--r--.storybook/tsconfig.json10
-rw-r--r--.storybook/typography.scss30
-rw-r--r--.storybook/webpack.config.js50
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;
};