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==