diff --git a/packages/core/.storybook/index.scss b/packages/core/.storybook/index.scss index 8140aca3ac..fa94fef4ec 100644 --- a/packages/core/.storybook/index.scss +++ b/packages/core/.storybook/index.scss @@ -5,4 +5,11 @@ // LICENSE file in the root directory of this source tree. // +@import '@carbon/type/scss/reset'; +@import 'carbon-components/scss/globals/scss/css--font-face'; + +$css--reset: false; + @import 'carbon-components/scss/globals/scss/css--body'; + +@include carbon--type-reset; diff --git a/packages/core/.storybook/main.js b/packages/core/.storybook/main.js index b62e615274..abca5d21dd 100644 --- a/packages/core/.storybook/main.js +++ b/packages/core/.storybook/main.js @@ -23,6 +23,11 @@ module.exports = { ], }, }, + + // https://webpack.js.org/loaders/style-loader/#lazystyletag + styleLoaderOptions: { + injectType: 'lazyStyleTag', + }, }, }, ], diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js index 38c8ca4f01..1f96613610 100644 --- a/packages/core/.storybook/preview.js +++ b/packages/core/.storybook/preview.js @@ -9,7 +9,9 @@ import centered from '@storybook/addon-centered/react'; import { withKnobs } from '@storybook/addon-knobs'; import { addDecorator } from '@storybook/react'; -import './index.scss'; +import React, { useEffect } from 'react'; + +import index from './index.scss'; addDecorator(withKnobs); @@ -19,3 +21,25 @@ addDecorator((...args) => ? args[0]() : centered(...args) ); + +const Style = ({ children, styles }) => { + const { unuse, use } = styles; + + useEffect(() => { + use(); + + return () => unuse(); + }); + + return children; +}; + +addDecorator((storyFn, { parameters: { styles } }) => { + const story = storyFn(); + + return ( + : story} + + ); +}); diff --git a/packages/core/package.json b/packages/core/package.json index a5a5a5a106..70611cbf27 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -17,6 +17,7 @@ }, "devDependencies": { "@babel/preset-react": "^7.10.1", + "@carbon/type": "^10.12.0", "@storybook/addon-actions": "^5.3.19", "@storybook/addon-centered": "^5.3.19", "@storybook/addon-docs": "^5.3.19", diff --git a/packages/security/src/ComboButton/ComboButton.stories.js b/packages/security/src/ComboButton/ComboButton.stories.js index dd094da1b8..86d201f76d 100644 --- a/packages/security/src/ComboButton/ComboButton.stories.js +++ b/packages/security/src/ComboButton/ComboButton.stories.js @@ -12,7 +12,7 @@ import { sectionTitle } from '../../config'; import { ComboButton, ComboButtonItem } from '..'; -import './_index.scss'; +import styles from './_index.scss'; export const Default = () => ( @@ -26,4 +26,5 @@ export const Default = () => ( export default { title: `${sectionTitle}/ComboButton`, component: ComboButton, + parameters: { styles }, }; diff --git a/packages/security/src/ErrorPage/ErrorPage.stories.js b/packages/security/src/ErrorPage/ErrorPage.stories.js index d03dfb071b..a6bae6e714 100644 --- a/packages/security/src/ErrorPage/ErrorPage.stories.js +++ b/packages/security/src/ErrorPage/ErrorPage.stories.js @@ -11,7 +11,7 @@ import React from 'react'; import { sectionTitle } from '../../config'; import { ErrorPage } from '..'; -import './_index.scss'; +import styles from './_index.scss'; const { defaultProps: { errorMessage, errorName, statusCode, title }, @@ -38,5 +38,5 @@ export const Default = () => ( export default { title: `${sectionTitle}/ErrorPage`, component: ErrorPage, - parameters: { centered: { disable: true } }, + parameters: { centered: { disable: true }, styles }, }; diff --git a/yarn.lock b/yarn.lock index 89815b2c8e..a146cda116 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1494,7 +1494,7 @@ "@carbon/import-once" "^10.3.0" "@carbon/layout" "^10.9.2" -"@carbon/type@^10.10.2": +"@carbon/type@^10.10.2", "@carbon/type@^10.12.0": version "10.12.0" resolved "https://registry.yarnpkg.com/@carbon/type/-/type-10.12.0.tgz#e36d9982344305f93830548346b304571606d8b8" integrity sha512-dzkl0t83VMKkbQPLJEFGfysOn8fBl1y1eENZ2yP28IVcgmNS0WR4cIWIgVnINx2maxvCYQgQkWILk0AYM2PSjg==