diff options
Diffstat (limited to '.storybook')
| -rw-r--r-- | .storybook/config.js | 8 | ||||
| -rw-r--r-- | .storybook/storybook.scss | 231 | ||||
| -rw-r--r-- | .storybook/typography.scss | 30 | ||||
| -rw-r--r-- | .storybook/webpack.config.js | 39 |
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) + }) + ] +}; |